vh/esh-pfi-infrastructure
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(phasefinal-web): clean up the multi-page site

Browse Source 
The 2026-09-28 expansion grew the one-page design to nine pages by
bolting a nav band under each hero. This makes the cluster one site:
- One site header on every page: the wordmark (home link) and a single
  row of short, consistent labels (Applications, Systems, Hosting, AI,
  Engagement, Track record, Contact). The nav no longer wraps into two
  rows at desktop width or four on a phone.
- A real <h1> on every page (the title was a <p>), a skip link, and one
  footer outside <main> on every page, home included.
- The contact page was unreadable: its section borrowed the home page's
  dark contact-card id, so its copy was grey on near-black (2.3:1) and
  its headings measured 1.0:1. It is an ordinary section now.
- Section numbers only where there is a sequence (home, engagement).
- The spec bar names all four services; it stacks cleanly on a phone.
- Contrast: --text-tertiary 4.3:1 -> 4.96:1, --accent-text 4.36:1 ->
  4.74:1 on paper. Track-record labels drop tracked capitals.
- The grid behind the hero and the contact card is its own layer; the
  contact card loses its left side-tab stripe.
- The stylesheet link is versioned (style.css?v=2026-09-28): CSS is
  cached for an hour, and the new markup must not meet the old styles.
- README: nine pages, the shared structure, the CSS-version rule, and the
  operator's anti-slop waivers (the hero's volt rule, Space Grotesk).

Copy is unchanged apart from nav labels (the brief's legal constraints
hold). Still zero JavaScript and zero external requests. Impeccable
detector (controls 7/0, static + rendered at 1280 and 390, light and
dark): 200 unwaived -> 54, all of them the two waived brand devices;
two identical runs. Operator: "ship the site cleanup, keep the rule and
the font".
This commit is contained in:
vh
2026-09-28 16:29:02 -07:00
parent 2296fbba12
commit 85f8a3a072
11 changed files with 378 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stacks/phasefinal-web/README.md
+11 -1
View File
@@ -1,6 +1,6 @@
# phasefinal-web
The Phase Final, Inc. corporate site — a single static page served by nginx on
The Phase Final, Inc. corporate site — nine static pages served by nginx on
**ana-docker**, fronted by Traefik at `www.phasefinal.com`.
Built from the design brief at `docs/design/` (boothed 2026-08-29); the markup
@@ -57,3 +57,13 @@ The copy is governed by hard legal and voice constraints — client naming rules
the never-"military"/"weapons" phrasing rule, no named individuals. **Read the
design brief before editing any text.** Edits are made surgically in
`conf/site/index.html`; there is no CMS and there will not be one.
## Structure and design rules (cleanup, 2026-09-28)
- Every page carries the same site header (wordmark + nav), a real `<h1>`, and the same footer outside `<main>`. Change the nav in all nine files at once: the labels are Applications, Systems, Hosting, AI, Engagement, Track record, Contact (+ Privacy in the footer).
- **The stylesheet link carries a version** (`/style.css?v=<date>`). CSS is cached for an hour (`nginx.conf`), so markup that changes with the CSS must bump it, or new pages meet old styles at the edge.
- **Anti-slop waivers, operator ruling 2026-09-28:**
- The hero's full-bleed 3px volt rule is a brand device. The Impeccable detector's `side-tab` rule flags it; that is waived.
- Space Grotesk is the brand display face. `overused-font` is waived.
- Everything else must stay clean: 0 other unwaived rows at 1280 and 390, light and dark.
stacks/phasefinal-web/conf/site/contact/index.html
+30 -25
View File
@@ -3,40 +3,45 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0f1318">
<title>Contact — Phase Final, Inc.</title>
<meta name="description" content="Contact Phase Final, Inc. by email at inquiry@phasefinal.com. Tell us the spec and the deadline.">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/style.css?v=2026-09-28">
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="site-header">
<div class="site-header-inner">
<a class="brand" href="/"><img src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." width="98" height="28"></a>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/services/software/">Applications</a></li>
<li><a href="/services/systems-engineering/">Systems</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track record</a></li>
<li><a aria-current="page" href="/contact/">Contact</a></li>
</ul>
</nav>
</div>
</header>
<header class="page-header">
<div class="hero-inner">
<a href="/"><img class="wordmark" src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." style="text-decoration:none"></a>
<div class="hero-copy">
<p class="lede">Tell us the spec and the deadline.</p>
<h1 class="lede">Tell us the spec and the deadline.</h1>
<p class="sublede">We'll tell you what it takes to reach the final phase. Most new work arrives by referral; first contact by email is fine.</p>
</div>
</div>
</header>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services/software/">Custom App Development</a></li>
<li><a href="/services/systems-engineering/">Systems Engineering</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI Services</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track Record</a></li>
<li><a aria-current="page" href="/contact/">Contact</a></li>
</ul>
</nav>
<main id="main">
<main>
<section id="contact">
<h2><span class="num">01</span>Reach us</h2>
<section id="reach">
<h2>Reach us</h2>
<div class="section-body">
<p class="detail-lede">Email is the front door: <a href="mailto:inquiry@phasefinal.com">inquiry@phasefinal.com</a>. A sentence about the problem and the date it needs to exist by is a complete first message.</p>
<ul class="detail-list">
@@ -48,20 +53,20 @@
</div>
</section>
<footer>
</main>
<footer class="site-footer">
<span>Phase Final, Inc.</span>
<nav aria-label="Footer">
<a href="/services/software/">Apps</a>
<a href="/services/software/">Applications</a>
<a href="/services/systems-engineering/">Systems</a>
<a href="/services/hosting/">Hosting</a>
<a href="/services/ai/">AI</a>
<a href="/engagement/">Engagement</a>
<a href="/track-record/">Track Record</a>
<a href="/contact/">Contact</a>
<a href="/track-record/">Track record</a>
<a aria-current="page" href="/contact/">Contact</a>
<a href="/privacy/">Privacy</a>
</nav>
</footer>
</main>
</body>
</html>
stacks/phasefinal-web/conf/site/engagement/index.html
+28 -23
View File
@@ -3,37 +3,42 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0f1318">
<title>How We Engage — Phase Final, Inc.</title>
<meta name="description" content="Engagement models at Phase Final, Inc.: fixed-bid scopes with defined deliverables, or retainers for continuous operation and engineering capacity.">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/style.css?v=2026-09-28">
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="site-header">
<div class="site-header-inner">
<a class="brand" href="/"><img src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." width="98" height="28"></a>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/services/software/">Applications</a></li>
<li><a href="/services/systems-engineering/">Systems</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI</a></li>
<li><a aria-current="page" href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</div>
</header>
<header class="page-header">
<div class="hero-inner">
<a href="/"><img class="wordmark" src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." style="text-decoration:none"></a>
<div class="hero-copy">
<p class="lede">Fixed-bid or retainer. Both with one owner.</p>
<h1 class="lede">Fixed-bid or retainer. Both with one owner.</h1>
<p class="sublede">Engagements are fixed-bid or retainer, chosen by the shape of the work rather than by preference. Most new work arrives by referral.</p>
</div>
</div>
</header>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services/software/">Custom App Development</a></li>
<li><a href="/services/systems-engineering/">Systems Engineering</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI Services</a></li>
<li><a aria-current="page" href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track Record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
<main>
<main id="main">
<section id="models">
<h2><span class="num">01</span>Engagement models</h2>
@@ -64,20 +69,20 @@
</div>
</section>
<footer>
</main>
<footer class="site-footer">
<span>Phase Final, Inc.</span>
<nav aria-label="Footer">
<a href="/services/software/">Apps</a>
<a href="/services/software/">Applications</a>
<a href="/services/systems-engineering/">Systems</a>
<a href="/services/hosting/">Hosting</a>
<a href="/services/ai/">AI</a>
<a href="/engagement/">Engagement</a>
<a href="/track-record/">Track Record</a>
<a aria-current="page" href="/engagement/">Engagement</a>
<a href="/track-record/">Track record</a>
<a href="/contact/">Contact</a>
<a href="/privacy/">Privacy</a>
</nav>
</footer>
</main>
</body>
</html>
stacks/phasefinal-web/conf/site/index.html
+40 -24
View File
@@ -3,43 +3,49 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0f1318">
<title>Phase Final, Inc. — Systems Engineering Consultancy</title>
<meta name="description" content="Phase Final, Inc. is a systems engineering consultancy offering custom application development, systems engineering, infrastructure hosting, and AI services, with a track record in hardware, firmware, and software engineering.">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/style.css?v=2026-09-28">
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="site-header">
<div class="site-header-inner">
<a class="brand" href="/"><img src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." width="98" height="28"></a>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/services/software/">Applications</a></li>
<li><a href="/services/systems-engineering/">Systems</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</div>
</header>
<header id="hero">
<div class="hero-inner">
<img class="wordmark" src="assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc.">
<div class="hero-copy">
<p class="lede">A systems engineering consultancy.</p>
<h1 class="lede">A systems engineering consultancy.</h1>
<p class="sublede">Phase Final, Inc. has a long track record in hardware, firmware, and software engineering across an unusually wide range of industries: consumer electronics, financial services, health services, government, film and video game production, and industrial automation.</p>
</div>
<p class="spec-bar">
<span>Applications</span>
<span>Systems engineering</span>
<span>Infrastructure hosting</span>
<span>Hosting</span>
<span>AI services</span>
<span class="spec-accent">Fixed-bid or retainer</span>
</p>
</div>
</header>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a aria-current="page" href="/">Home</a></li>
<li><a href="/services/software/">Custom App Development</a></li>
<li><a href="/services/systems-engineering/">Systems Engineering</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI Services</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track Record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
<main>
<main id="main">
<section id="services">
<h2><span class="num">01</span>What we do</h2>
@@ -109,16 +115,26 @@
</div>
</section>
<section id="contact">
<section class="contact-card" id="contact">
<h2><span class="num">04</span>Contact</h2>
<p class="contact-address"><a href="mailto:inquiry@phasefinal.com">inquiry@phasefinal.com</a></p>
<p class="contact-note">Tell us the spec and the deadline. We'll tell you what it takes to reach the final phase.</p>
</section>
<footer>
<span>Phase Final, Inc.</span>
</footer>
</main>
<footer class="site-footer">
<span>Phase Final, Inc.</span>
<nav aria-label="Footer">
<a href="/services/software/">Applications</a>
<a href="/services/systems-engineering/">Systems</a>
<a href="/services/hosting/">Hosting</a>
<a href="/services/ai/">AI</a>
<a href="/engagement/">Engagement</a>
<a href="/track-record/">Track record</a>
<a href="/contact/">Contact</a>
<a href="/privacy/">Privacy</a>
</nav>
</footer>
</body>
</html>
stacks/phasefinal-web/conf/site/privacy/index.html
+29 -24
View File
@@ -3,40 +3,45 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0f1318">
<title>Privacy — Phase Final, Inc.</title>
<meta name="description" content="Privacy policy for phasefinal.com: a static site with no trackers, no analytics, and no cookies.">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/style.css?v=2026-09-28">
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="site-header">
<div class="site-header-inner">
<a class="brand" href="/"><img src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." width="98" height="28"></a>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/services/software/">Applications</a></li>
<li><a href="/services/systems-engineering/">Systems</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</div>
</header>
<header class="page-header">
<div class="hero-inner">
<a href="/"><img class="wordmark" src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." style="text-decoration:none"></a>
<div class="hero-copy">
<p class="lede">No trackers. No analytics. No cookies.</p>
<h1 class="lede">No trackers. No analytics. No cookies.</h1>
<p class="sublede">This site is static HTML. It sets no cookies, runs no JavaScript, and loads nothing from third parties — there is genuinely nothing to opt out of.</p>
</div>
</div>
</header>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services/software/">Custom App Development</a></li>
<li><a href="/services/systems-engineering/">Systems Engineering</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI Services</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track Record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
<main>
<main id="main">
<section id="privacy">
<h2><span class="num">01</span>Details</h2>
<h2>Details</h2>
<div class="section-body">
<ul class="detail-list">
<li><h3>What this site collects</h3><p>Nothing from your browser. Fonts and images are served from this site itself. No advertising or analytics scripts are loaded, so no cross-site profiling occurs on our side.</p></li>
@@ -48,20 +53,20 @@
</div>
</section>
<footer>
</main>
<footer class="site-footer">
<span>Phase Final, Inc.</span>
<nav aria-label="Footer">
<a href="/services/software/">Apps</a>
<a href="/services/software/">Applications</a>
<a href="/services/systems-engineering/">Systems</a>
<a href="/services/hosting/">Hosting</a>
<a href="/services/ai/">AI</a>
<a href="/engagement/">Engagement</a>
<a href="/track-record/">Track Record</a>
<a href="/track-record/">Track record</a>
<a href="/contact/">Contact</a>
<a href="/privacy/">Privacy</a>
<a aria-current="page" href="/privacy/">Privacy</a>
</nav>
</footer>
</main>
</body>
</html>
stacks/phasefinal-web/conf/site/services/ai/index.html
+29 -24
View File
@@ -3,40 +3,45 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0f1318">
<title>AI Services & Engineering — Phase Final, Inc.</title>
<meta name="description" content="AI services and engineering: retrieval pipelines, model serving, agents, and evaluation — model-backed capability run as production software.">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/style.css?v=2026-09-28">
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="site-header">
<div class="site-header-inner">
<a class="brand" href="/"><img src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." width="98" height="28"></a>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/services/software/">Applications</a></li>
<li><a href="/services/systems-engineering/">Systems</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a aria-current="page" href="/services/ai/">AI</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</div>
</header>
<header class="page-header">
<div class="hero-inner">
<a href="/"><img class="wordmark" src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." style="text-decoration:none"></a>
<div class="hero-copy">
<p class="lede">Model-backed capability, run as production software.</p>
<h1 class="lede">Model-backed capability, run as production software.</h1>
<p class="sublede">AI systems get built, integrated, and operated here the same way everything else does — with requirements, verification, and an owner — rather than as a demo that quietly rots.</p>
</div>
</div>
</header>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services/software/">Custom App Development</a></li>
<li><a href="/services/systems-engineering/">Systems Engineering</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a aria-current="page" href="/services/ai/">AI Services</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track Record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
<main>
<main id="main">
<section id="offer">
<h2><span class="num">01</span>What we do</h2>
<h2>What we do</h2>
<div class="section-body">
<p class="detail-lede">A model call is easy. An AI <em>system</em> — with latency budgets, evaluation suites, fallbacks, cost ceilings, and an upgrade story — is engineering. That part is no different from any other discipline the firm practices.</p>
<ul class="detail-list">
@@ -61,20 +66,20 @@
</div>
</section>
<footer>
</main>
<footer class="site-footer">
<span>Phase Final, Inc.</span>
<nav aria-label="Footer">
<a href="/services/software/">Apps</a>
<a href="/services/software/">Applications</a>
<a href="/services/systems-engineering/">Systems</a>
<a href="/services/hosting/">Hosting</a>
<a href="/services/ai/">AI</a>
<a aria-current="page" href="/services/ai/">AI</a>
<a href="/engagement/">Engagement</a>
<a href="/track-record/">Track Record</a>
<a href="/track-record/">Track record</a>
<a href="/contact/">Contact</a>
<a href="/privacy/">Privacy</a>
</nav>
</footer>
</main>
</body>
</html>
stacks/phasefinal-web/conf/site/services/hosting/index.html
+29 -24
View File
@@ -3,40 +3,45 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0f1318">
<title>Infrastructure Hosting — Phase Final, Inc.</title>
<meta name="description" content="Infrastructure hosting and operation: colocation, private cloud, backup architecture, and monitoring — run with the same accountability as the systems we build.">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/style.css?v=2026-09-28">
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="site-header">
<div class="site-header-inner">
<a class="brand" href="/"><img src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." width="98" height="28"></a>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/services/software/">Applications</a></li>
<li><a href="/services/systems-engineering/">Systems</a></li>
<li><a aria-current="page" href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</div>
</header>
<header class="page-header">
<div class="hero-inner">
<a href="/"><img class="wordmark" src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." style="text-decoration:none"></a>
<div class="hero-copy">
<p class="lede">We run what we build.</p>
<h1 class="lede">We run what we build.</h1>
<p class="sublede">Hosting and operation of client infrastructure. Systems the firm builds can run on infrastructure the firm operates, under the same accountability as the build.</p>
</div>
</div>
</header>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services/software/">Custom App Development</a></li>
<li><a href="/services/systems-engineering/">Systems Engineering</a></li>
<li><a aria-current="page" href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI Services</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track Record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
<main>
<main id="main">
<section id="offer">
<h2><span class="num">01</span>What we operate</h2>
<h2>What we operate</h2>
<div class="section-body">
<p class="detail-lede">The firm runs its own multi-site production infrastructure — colocated servers, virtualization, private networking, backup, and monitoring — and has for years. That is not a brochure claim; it is the same infrastructure that runs the tools this site's owners depend on daily.</p>
<ul class="detail-list">
@@ -61,20 +66,20 @@
</div>
</section>
<footer>
</main>
<footer class="site-footer">
<span>Phase Final, Inc.</span>
<nav aria-label="Footer">
<a href="/services/software/">Apps</a>
<a href="/services/software/">Applications</a>
<a href="/services/systems-engineering/">Systems</a>
<a href="/services/hosting/">Hosting</a>
<a aria-current="page" href="/services/hosting/">Hosting</a>
<a href="/services/ai/">AI</a>
<a href="/engagement/">Engagement</a>
<a href="/track-record/">Track Record</a>
<a href="/track-record/">Track record</a>
<a href="/contact/">Contact</a>
<a href="/privacy/">Privacy</a>
</nav>
</footer>
</main>
</body>
</html>
stacks/phasefinal-web/conf/site/services/software/index.html
+28 -23
View File
@@ -3,40 +3,45 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0f1318">
<title>Custom Application Development — Phase Final, Inc.</title>
<meta name="description" content="Custom application development for iOS, Android, web, and desktop: native apps, backend services, release pipelines, and long-term operation by the team that built them.">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/style.css?v=2026-09-28">
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="site-header">
<div class="site-header-inner">
<a class="brand" href="/"><img src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." width="98" height="28"></a>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a aria-current="page" href="/services/software/">Applications</a></li>
<li><a href="/services/systems-engineering/">Systems</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</div>
</header>
<header class="page-header">
<div class="hero-inner">
<a href="/"><img class="wordmark" src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." style="text-decoration:none"></a>
<div class="hero-copy">
<p class="lede">Custom applications, built to spec.</p>
<h1 class="lede">Custom applications, built to spec.</h1>
<p class="sublede">We design, build, and operate applications: native iOS and Android, web and desktop clients, the backend services behind them, and the release pipeline that keeps them shipping. The team that builds an app stays accountable for it in production — no hand-off cliff.</p>
</div>
</div>
</header>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/">Home</a></li>
<li><a aria-current="page" href="/services/software/">Custom App Development</a></li>
<li><a href="/services/systems-engineering/">Systems Engineering</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI Services</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track Record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
<main>
<main id="main">
<section id="scope">
<h2><span class="num">01</span>Scope</h2>
<h2>Scope</h2>
<div class="section-body">
<p class="detail-lede">An application is never just the app. It is the client binary, the API behind it, the data model, the release train, and the operational story for what happens at 2 a.m. when something breaks. We take the whole problem.</p>
<ul class="detail-list">
@@ -65,20 +70,20 @@
</div>
</section>
<footer>
</main>
<footer class="site-footer">
<span>Phase Final, Inc.</span>
<nav aria-label="Footer">
<a href="/services/software/">Apps</a>
<a aria-current="page" href="/services/software/">Applications</a>
<a href="/services/systems-engineering/">Systems</a>
<a href="/services/hosting/">Hosting</a>
<a href="/services/ai/">AI</a>
<a href="/engagement/">Engagement</a>
<a href="/track-record/">Track Record</a>
<a href="/track-record/">Track record</a>
<a href="/contact/">Contact</a>
<a href="/privacy/">Privacy</a>
</nav>
</footer>
</main>
</body>
</html>
stacks/phasefinal-web/conf/site/services/systems-engineering/index.html
+29 -24
View File
@@ -3,40 +3,45 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0f1318">
<title>Systems Engineering — Phase Final, Inc.</title>
<meta name="description" content="Systems engineering: requirements, architecture, implementation, and verification of integrated hardware and software systems, treated as one problem with one owner.">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/style.css?v=2026-09-28">
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="site-header">
<div class="site-header-inner">
<a class="brand" href="/"><img src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." width="98" height="28"></a>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/services/software/">Applications</a></li>
<li><a aria-current="page" href="/services/systems-engineering/">Systems</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</div>
</header>
<header class="page-header">
<div class="hero-inner">
<a href="/"><img class="wordmark" src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." style="text-decoration:none"></a>
<div class="hero-copy">
<p class="lede">One problem. One owner.</p>
<h1 class="lede">One problem. One owner.</h1>
<p class="sublede">Requirements, architecture, implementation, and verification are treated as one problem with one owner. That is the difference between systems engineering and a chain of hand-offs.</p>
</div>
</div>
</header>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services/software/">Custom App Development</a></li>
<li><a aria-current="page" href="/services/systems-engineering/">Systems Engineering</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI Services</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a href="/track-record/">Track Record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
<main>
<main id="main">
<section id="method">
<h2><span class="num">01</span>Method</h2>
<h2>Method</h2>
<div class="section-body">
<p class="detail-lede">Most engineering failures between disciplines happen in the seams: firmware blames the app, the app blames the API, the API blames the infrastructure. Systems engineering is the discipline of refusing those seams — one accountable owner across the stack.</p>
<ul class="detail-list">
@@ -61,20 +66,20 @@
</div>
</section>
<footer>
</main>
<footer class="site-footer">
<span>Phase Final, Inc.</span>
<nav aria-label="Footer">
<a href="/services/software/">Apps</a>
<a href="/services/systems-engineering/">Systems</a>
<a href="/services/software/">Applications</a>
<a aria-current="page" href="/services/systems-engineering/">Systems</a>
<a href="/services/hosting/">Hosting</a>
<a href="/services/ai/">AI</a>
<a href="/engagement/">Engagement</a>
<a href="/track-record/">Track Record</a>
<a href="/track-record/">Track record</a>
<a href="/contact/">Contact</a>
<a href="/privacy/">Privacy</a>
</nav>
</footer>
</main>
</body>
</html>
stacks/phasefinal-web/conf/site/style.css
+97 -63
View File
@@ -13,16 +13,17 @@
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
color-scheme: light dark;
--ink: #0f1318;
--ink-2: #181d22;
--text: #0f1318;
--text-secondary: #4d5763;
--text-tertiary: #6b7682;
--text-tertiary: #626d78; /* 4.96:1 on paper (was #6b7682, 4.3:1) */
--paper: #f6f8f9;
--border: #c2cad2;
--border-subtle: #dde2e7;
--accent: #90c73e;
--accent-text: #588021; /* AA on light */
--accent-text: #527a1e; /* 4.74:1 on paper (was #588021, 4.36:1) */
--volt-200: #d0e8a0;
--volt-300: #b8db72;
--volt-400: #a3d052;
@@ -65,6 +66,52 @@ body {
::selection { background: var(--volt-200); color: #0f1318; }
a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--volt-500); outline-offset: 3px; }
/* ---- Skip link: first stop for the keyboard, off-screen until focused ---- */
.skip {
position: absolute; left: 16px; top: 12px; z-index: 10;
transform: translateY(-200%);
padding: 8px 12px; border-radius: 6px;
background: var(--paper); color: var(--text);
font-family: var(--mono); font-size: 12.5px;
}
.skip:focus-visible { transform: none; }
/* ---- Site header: the brand and the whole site's nav, one row, every page ---- */
.site-header { background: var(--ink); color: #f6f8f9; }
.site-header-inner {
max-width: 920px;
margin: 0 auto;
padding: 18px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px 32px;
flex-wrap: wrap;
}
.brand { display: block; line-height: 0; }
.brand img { height: 28px; width: auto; display: block; }
.site-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 4px 22px;
}
.site-nav a {
display: inline-block;
padding: 6px 0;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
color: var(--slate-300);
}
.site-nav a:hover { color: var(--volt-300); }
.site-nav a[aria-current="page"] { color: #ffffff; box-shadow: inset 0 -2px 0 var(--volt-500); }
p { margin: 0; text-wrap: pretty; }
/* ---- Hero: ink console surface with engineering grid ---- */
@@ -72,28 +119,37 @@ p { margin: 0; text-wrap: pretty; }
background: var(--ink);
color: #f6f8f9;
position: relative;
isolation: isolate;
overflow: hidden;
border-bottom: 3px solid var(--volt-500);
}
/* The engineering grid is its own layer, so the text's background is the ink it
actually sits on (a detector reading the gradient as the background saw 1.1:1). */
#hero::before, .contact-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(rgba(246,248,249,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(246,248,249,0.05) 1px, transparent 1px);
background-size: 48px 48px;
border-bottom: 3px solid var(--volt-500);
}
.hero-inner {
max-width: 920px;
margin: 0 auto;
padding: clamp(56px, 9vw, 104px) 28px clamp(56px, 8vw, 96px);
padding: clamp(40px, 7vw, 80px) 28px clamp(52px, 8vw, 88px);
display: flex;
flex-direction: column;
gap: clamp(40px, 6vw, 64px);
}
.wordmark { height: clamp(48px, 7.5vw, 72px); width: auto; display: block; align-self: flex-start; }
.hero-copy { max-width: 800px; }
.lede {
margin: 0;
font-family: var(--display);
font-size: clamp(32px, 5.6vw, 54px);
line-height: 1.1;
@@ -128,6 +184,11 @@ p { margin: 0; text-wrap: pretty; }
.spec-bar span { padding: 0 18px; border-left: 1px solid var(--slate-700); }
.spec-bar span:first-child { padding-left: 0; border-left: none; }
.spec-bar .spec-accent { color: var(--volt-300); }
@media (max-width: 600px) {
/* stacked, a divider would only ever start a line: drop it */
.spec-bar { flex-direction: column; gap: 6px; }
.spec-bar span { padding: 0; border-left: none; }
}
/* ---- Body ---- */
main {
@@ -143,7 +204,7 @@ section {
flex-wrap: wrap;
gap: 32px;
}
#services { border-top: none; padding-top: clamp(52px, 7vw, 76px); }
main > section:first-of-type { border-top: none; padding-top: 72px; }
h2 {
margin: 0;
@@ -191,9 +252,7 @@ h2 .num { color: var(--accent-text); margin-right: 12px; }
.record + .record { border-top: 1px solid var(--border-subtle); }
.record dt {
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 13px;
color: var(--text-tertiary);
margin-bottom: 6px;
}
@@ -201,22 +260,20 @@ h2 .num { color: var(--accent-text); margin-right: 12px; }
.record dd { margin: 0; font-size: 17.5px; }
.record strong { font-family: var(--display); font-weight: 600; }
/* Contact — ink console panel */
#contact {
/* Contact — ink console panel (the home page's closing card) */
.contact-card {
display: block;
position: relative;
isolation: isolate;
overflow: hidden;
border-top: none;
background: var(--ink-2);
background-image:
linear-gradient(rgba(246,248,249,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(246,248,249,0.05) 1px, transparent 1px);
background-size: 48px 48px;
border-left: 3px solid var(--volt-500);
border-radius: 16px;
padding: clamp(40px, 6vw, 72px);
padding: 64px;
color: #f6f8f9;
}
#contact h2 { color: var(--slate-400); margin-bottom: 20px; }
#contact h2 .num { color: var(--volt-400); }
.contact-card h2 { color: var(--slate-400); margin-bottom: 20px; }
.contact-card h2 .num { color: var(--volt-400); }
.contact-address {
font-size: clamp(23px, 4vw, 38px);
line-height: 1.25;
@@ -237,67 +294,49 @@ h2 .num { color: var(--accent-text); margin-right: 12px; }
font-size: 16px;
}
/* Footer */
footer {
/* Footer — the same on every page */
.site-footer {
max-width: 864px;
width: calc(100% - 56px);
margin: 0 auto;
padding: 28px 0 48px;
border-top: 1px solid var(--border-subtle);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
gap: 12px 24px;
flex-wrap: wrap;
padding-top: 28px;
font-family: var(--mono);
font-size: 12.5px;
color: var(--text-tertiary);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-footer nav a { color: var(--text-tertiary); text-decoration: none; }
.site-footer nav a:hover { color: var(--accent-text); text-decoration: underline; }
.site-footer nav a[aria-current="page"] { color: var(--text); }
@media (max-width: 480px) {
main { padding: 0 20px 56px; }
.hero-inner { padding-left: 20px; padding-right: 20px; }
.hero-inner, .site-header-inner { padding-left: 20px; padding-right: 20px; }
.site-footer { width: calc(100% - 40px); }
section { padding: 40px 0 48px; }
main > section:first-of-type { padding-top: 48px; }
.contact-card { padding: 36px 28px; }
.site-nav ul { gap: 2px 18px; }
}
/* ---- Multi-page additions (2026-09-28) ---- */
/* Top nav: monospace strip under the hero rule, matching the spec-bar voice */
.site-nav {
background: var(--ink-2);
border-bottom: 1px solid var(--border);
}
.site-nav ul {
max-width: 920px;
margin: 0 auto;
padding: 0 28px;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 4px 0;
}
.site-nav a {
display: block;
padding: 12px 16px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.09em;
text-transform: uppercase;
text-decoration: none;
color: var(--slate-400);
}
.site-nav a:hover { color: var(--volt-300); }
.site-nav a[aria-current="page"] {
color: #f6f8f9;
box-shadow: inset 0 -2px 0 var(--volt-500);
}
/* Sub-pages get a compact page header instead of the full hero */
.page-header {
background: var(--ink);
border-bottom: 3px solid var(--volt-500);
color: #f6f8f9;
}
.page-header .hero-inner { gap: 20px; padding-bottom: clamp(36px, 5vw, 56px); padding-top: clamp(36px, 5vw, 56px); }
.page-header .hero-inner { gap: 20px; padding-bottom: clamp(36px, 5vw, 56px); padding-top: clamp(28px, 4vw, 44px); }
.page-header .lede { font-size: clamp(26px, 4.4vw, 40px); }
.page-header .sublede { margin-top: 14px; }
.page-header .wordmark { height: clamp(30px, 4.5vw, 40px); }
.page-header .lede { line-height: 1.18; }
/* Service detail pages */
.detail-lede { font-size: 18.5px; max-width: 62ch; }
@@ -330,9 +369,4 @@ footer {
text-transform: uppercase;
color: var(--text-tertiary);
}
.related a { margin-right: 18px; }
/* Footer grows a nav echo */
footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
footer nav a { color: var(--text-tertiary); text-decoration: none; }
footer nav a:hover { color: var(--accent-text); }
.related a { margin-right: 18px; display: inline-block; white-space: nowrap; }
stacks/phasefinal-web/conf/site/track-record/index.html
+28 -23
View File
@@ -3,40 +3,45 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0f1318">
<title>Track Record — Phase Final, Inc.</title>
<meta name="description" content="Phase Final's track record across consumer electronics, illumination, financial services, health services, government, film and game production, and industrial automation.">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/style.css?v=2026-09-28">
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="site-header">
<div class="site-header-inner">
<a class="brand" href="/"><img src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." width="98" height="28"></a>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/services/software/">Applications</a></li>
<li><a href="/services/systems-engineering/">Systems</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a aria-current="page" href="/track-record/">Track record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</div>
</header>
<header class="page-header">
<div class="hero-inner">
<a href="/"><img class="wordmark" src="/assets/pfi-wordmark-duotone-dark.svg" alt="Phase Final, Inc." style="text-decoration:none"></a>
<div class="hero-copy">
<p class="lede">Seven industries. One standard.</p>
<h1 class="lede">Seven industries. One standard.</h1>
<p class="sublede">A long track record in hardware, firmware, and software engineering across an unusually wide range of industries — each of them taught us something we now sell as an assumption.</p>
</div>
</div>
</header>
<nav class="site-nav" aria-label="Site">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services/software/">Custom App Development</a></li>
<li><a href="/services/systems-engineering/">Systems Engineering</a></li>
<li><a href="/services/hosting/">Hosting</a></li>
<li><a href="/services/ai/">AI Services</a></li>
<li><a href="/engagement/">Engagement</a></li>
<li><a aria-current="page" href="/track-record/">Track Record</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
<main>
<main id="main">
<section id="record">
<h2><span class="num">01</span>The record</h2>
<h2>The record</h2>
<div class="section-body">
<dl class="record-list">
<div class="record">
@@ -72,20 +77,20 @@
</div>
</section>
<footer>
</main>
<footer class="site-footer">
<span>Phase Final, Inc.</span>
<nav aria-label="Footer">
<a href="/services/software/">Apps</a>
<a href="/services/software/">Applications</a>
<a href="/services/systems-engineering/">Systems</a>
<a href="/services/hosting/">Hosting</a>
<a href="/services/ai/">AI</a>
<a href="/engagement/">Engagement</a>
<a href="/track-record/">Track Record</a>
<a aria-current="page" href="/track-record/">Track record</a>
<a href="/contact/">Contact</a>
<a href="/privacy/">Privacy</a>
</nav>
</footer>
</main>
</body>
</html>