/* exp35 . page stylesheet owned by the audit page builder. Tokens only. ===================================================================== /continuous-correctness-audit -> audit.html POSITIONING (plan §1 and §9 rule 7): this page sells an INSTALLATION and a standing engagement. The audit is how Proof gets installed; it is not what Proof is. Nothing in here is allowed to grow into a second product identity: the page links up to product.html for the substrate, and its own visual weight sits on the commercial objects (the docket, the file tree, the commitments, the exclusions), never on a logo-scale service mark. COLOUR IS A CONTRACT, not decoration: --pass verified --fail violated --stale changed / stale (fallback var(--stale,var(--fail))) --unknown inactive / unknown (fallback var(--unknown,var(--muted))) --signal affordance ONLY, never a state A scope of work contains nothing verified, so the docket, the tree structure and the record columns are --hair / --hair-strong / --muted. The one --fail on the page is the finding test that fails on main, which is a genuine violated state. INK: draw-on-arrival reuses the shell mechanism in site.css / site.js (.dr + pathLength="1" + --d/--dur, text .fx with --td, inside a .fig or a [data-reveal] container that the observer marks .in). No script here. ===================================================================== */ /* ---------- 1. shared page rhythm ---------- */ .au-under{margin:2.6rem 0 0;max-width:64ch;font-size:1.05rem;line-height:1.6;} .au-sub{margin:3.6rem 0 1.4rem;max-width:62ch;} .au-sub h3{margin:.5rem 0 .6rem;font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.25;letter-spacing:-.02em;} .au-sub p{margin:0;font-size:1.02rem;line-height:1.55;color:var(--ink-60);} .au-body{max-width:66ch;font-size:1.05rem;line-height:1.65;} .au-body p{margin:0 0 1.05rem;} .au-body p:last-child{margin-bottom:0;} .au-links{margin:1.6rem 0 0;display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;} /* the offer-level explanation. It is a claim about what we sell, so it is set at lead scale and left alone; the H1 above it is the install. */ .au-offer-line{margin:0 0 1.1rem;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.25; letter-spacing:-.025em;font-weight:600;max-width:22ch;} .au-bound{margin:1.4rem 0 0;max-width:66ch;font-size:1.02rem;line-height:1.6;color:var(--ink-60);} .au-bound strong{color:var(--ink);} /* the standing positioning note: the audit installs Proof, Proof is what stays. Structural, not a state, so --hair / --muted. */ .au-note{ margin:2.4rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--hair); max-width:66ch;font-family:var(--mono);font-size:.82rem;line-height:1.7;color:var(--muted); } .au-note b{color:var(--ink);font-weight:500;} /* ---------- 2. the three parts (how it is bought) ---------- */ .au-parts .tile-n{text-transform:uppercase;} .au-rule{margin:2.4rem 0 0;max-width:70ch;font-size:1.05rem;line-height:1.6;} .au-rule strong{font-weight:600;} /* ---------- 3. what we need from you ---------- */ .au-need .tile-n{text-transform:uppercase;} /* ---------- 4. what the install builds ---------- */ .au-builds .row{grid-template-columns:12.5rem minmax(0,1fr);} .au-builds .row p + p{margin-top:.5rem;color:var(--ink-60);font-size:.98rem;} .au-figrow{margin-top:3.2rem;align-items:start;} .au-figrow .fig{margin:0;} /* figure text roles, shared by both figures on the page. The invalidation loop in Fig. 01 is deliberately NOT painted as a state. This page does not load the sheet that defines --stale, and in the default terminal theme var(--stale,var(--fail)) collapses onto --fail (#FFB000), which would make "went stale" and "fails on main" the same colour. A collapsed state colour is worse than none, so the loop is drawn as structure (dashed, --unknown) and the sentence carries the meaning. The one state colour on the page stays the finding test that fails on main. */ .fig .au-fk{fill:var(--ink);font-weight:500;} .fig .au-fnote{font-style:italic;font-size:10.8px;fill:var(--ink-60);letter-spacing:0;} .fig .au-fsm{font-size:10.2px;fill:var(--ink-60);letter-spacing:.02em;} .fig .au-tstale{fill:var(--ink-60);font-size:10.6px;letter-spacing:.03em;} .fig .st.au-pstale{stroke:var(--unknown,var(--muted));stroke-opacity:.85;} /* the blast-radius readout. Mono record, hairline frame, no state colour: an impact count is a question, not a verdict. */ .au-radius{ background:var(--card);border:1px solid var(--hair);border-radius:10px; padding:1.25rem 1.4rem 1.35rem; } .au-radius dt{ margin:0 0 .85rem;font-family:var(--mono);font-size:.72rem;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--muted); } .au-radius dd{margin:0;} .au-radius ul{list-style:none;margin:0;padding:0;} .au-radius li{ display:flex;align-items:baseline;gap:.7rem;padding:.42rem 0; font-family:var(--mono);font-size:.9rem;line-height:1.5;color:var(--ink); border-top:1px solid var(--hair); } .au-radius li:first-child{border-top:0;} .au-radius li::before{ content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%; background:var(--unknown,var(--muted));transform:translateY(-.15em); } .au-radius .au-r-n{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500;} .au-radius .au-r-k{color:var(--ink-60);} .au-radius .au-r-foot{ margin:.95rem 0 0;padding-top:.85rem;border-top:1px solid var(--hair); font-family:var(--mono);font-size:.72rem;line-height:1.6;color:var(--muted); } /* ---------- 5. the file tree ---------- */ /* the tree gets the wider track: it is the deliverable, the dashboard beside it is only a window over it. min-width:0 on both tracks so the pre scrolls inside its own box instead of widening the page. */ .au-tree-grid{align-items:start;gap:2.4rem 3rem;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);} .au-tree-grid > *{min-width:0;} .au-figrow > *{min-width:0;} .au-tree{ margin:0;max-width:100%;padding:1.35rem 1.5rem 1.45rem;overflow-x:auto; background:var(--card);border:1px solid var(--hair);border-radius:10px; font-family:var(--mono);font-size:.83rem;line-height:1.85;color:var(--ink); white-space:pre; -webkit-overflow-scrolling:touch; } .au-tree .c{color:var(--muted);} /* structural comment */ .au-tree .k{color:var(--ink);font-weight:500;} /* the artifact name */ .au-tree .bad{color:var(--fail);} /* violated: fails on main */ .au-treecap{margin:1.1rem 0 0;font-family:var(--mono);font-size:.72rem;line-height:1.7;color:var(--muted);max-width:66ch;} /* ---------- 6. commitments and exclusions ---------- */ .au-ol{list-style:none;counter-reset:auc;margin:0;padding:0;max-width:74ch;} .au-ol li{ counter-increment:auc;position:relative; padding:1.25rem 0 1.35rem 3.4rem;border-top:1px solid var(--hair); font-size:1.02rem;line-height:1.6; } .au-ol li:first-child{border-top:0;padding-top:0;} .au-ol li::before{ content:"0" counter(auc);position:absolute;left:0;top:1.35rem; font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.08em; color:var(--signal); } .au-ol li:first-child::before{top:.2rem;} .au-ol strong{font-weight:600;} .au-ul{list-style:none;margin:0;padding:0;max-width:74ch;} .au-ul li{ position:relative;padding:.95rem 0 1rem 1.9rem;border-top:1px solid var(--hair); font-size:1.01rem;line-height:1.6;color:var(--ink-60); } .au-ul li:first-child{border-top:0;padding-top:0;} .au-ul li::before{ content:"";position:absolute;left:0;top:1.6rem;width:11px;height:1px; background:var(--unknown,var(--muted)); } .au-ul li:first-child::before{top:.65rem;} .au-ul strong{color:var(--ink);font-weight:600;} /* ---------- 7. fit ---------- */ .au-fit h3{margin:0 0 1rem;font-family:var(--mono);font-size:.76rem;font-weight:500; letter-spacing:.09em;text-transform:uppercase;color:var(--muted);} .au-fit ul{list-style:none;margin:0;padding:0;} .au-fit li{position:relative;padding:.6rem 0 .65rem 1.6rem;font-size:1rem;line-height:1.55;border-top:1px solid var(--hair);} .au-fit li:first-child{border-top:0;} .au-fit li::before{position:absolute;left:0;top:.62rem;font-family:var(--mono);font-size:.9rem;line-height:1.55;} .au-fit .au-yes li::before{content:"+";color:var(--pass);} .au-fit .au-no li::before{content:"-";color:var(--unknown,var(--muted));} .au-fit .au-yes li:first-child::before,.au-fit .au-no li:first-child::before{top:0;} /* ---------- 8. the record figure (carried over: what you keep) ---------- */ .au-keep{margin-top:5rem;padding-top:3.4rem;border-top:1px solid var(--hair);align-items:center;} .au-keep h3{font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.25;letter-spacing:-.02em;margin:.55rem 0 .9rem;} .au-keep .au-copy p{max-width:44ch;} .au-keep .fig{margin:0 auto;max-width:460px;} .au-keep .fig-cap{max-width:none;margin-top:1.1rem;} .au-keep .fig text{font-size:12.5px;} .au-keep .fig .lbl{font-size:11.3px;} .au-keep .fig .big{font-size:16px;} .au-keep .fig .au-fnote{font-style:italic;font-size:10.8px;fill:var(--ink-60);letter-spacing:0;} .au-keep .fig .au-fsm{font-size:10.2px;fill:var(--ink-60);letter-spacing:.02em;} .au-keep .fig .au-fk{fill:var(--ink);font-weight:500;} /* ---------- 9. confidentiality ---------- */ .au-access .tile-n{text-transform:uppercase;} /* ---------- 10. the close ---------- */ .au-start{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:2rem 4rem;align-items:end;} .au-sig{padding-bottom:.6rem;} .au-sig svg{display:block;width:200px;height:auto;overflow:visible;margin-bottom:.2rem;} .au-sig path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .au-sig .au-name{margin:0;font-size:1.02rem;font-weight:600;letter-spacing:-.01em;} .au-sig .fine{margin:.15rem 0 0;} /* ---------- 11. responsive ---------- */ @media (max-width:1000px){ .au-builds .row{grid-template-columns:10.5rem minmax(0,1fr);} } @media (max-width:900px){ .au-start{grid-template-columns:1fr;} .au-sig{padding-top:.4rem;} .au-figrow,.au-tree-grid{grid-template-columns:1fr;} } /* ---------- 11a. NO HORIZONTAL SCROLL ON A PHONE ---------- This page used to scroll sideways on every small viewport. Measured, before this block, document.scrollWidth minus the viewport was: 320px paper +30 riso +72 terminal +67 brutal +82 acid +30 olo +30 night +30 verified +30 360px riso +32 terminal +27 brutal +42 390px riso +2 brutal +12 Three separate causes, each fixed at the cause rather than clipped: (a) THE HEADLINE'S LONGEST WORD DOES NOT FIT THE COLUMN. Every theme sizes h1 with clamp(MIN, Xvw, MAX). Below roughly 650px the vw term drops under MIN, so the headline stops scaling while the column keeps shrinking. "consequential" is 13 characters: at brutal's 3rem floor it measures 377.53px against a 342px column at 390, so it hangs 11.53px past the viewport on its own. The remedy continues the ramp below the clamp floor. min() only ever lowers the size, and each divisor is the measured width of that theme's longest headline word per px of font-size (grotesk, the wider of the two site faces; bricolage is equal or narrower in all eight themes, so these divisors cover both): paper / olo / night / verified 6.5243 riso 7.9233 terminal 7.8001 + 0.82 for its own 0.82em prompt indent = 8.62 brutal 7.8652 acid 6.3317 At 440px every cap already sits above the theme's own floor, so the block is inert at its own boundary and nothing steps. Desktop is untouched: at 1440 all eight themes render the identical h1 size and height with and without this block. (b) THE CTA LABEL CANNOT WRAP. site.css sets .btn{white-space:nowrap}. At 320 "Request confidential scoping" holds the button at 362.81px inside a 272px column and drags its flex siblings out with it. A CTA that wraps to two lines on a 320px phone is correct; a page that scrolls sideways is not. (c) AN UNBREAKABLE PATH TOKEN. specs/{stakeholder,system}/requirements/ is 322.56px with no break opportunity the browser will take, against a 272px column. break-word (not anywhere) so it only breaks when it would otherwise overflow, and so it keeps its min-content contribution and cannot quietly shrink a grid track somewhere else. Verified 320 / 340 / 360 / 375 / 390 / 414 / 430 x 8 themes: document.scrollWidth === clientWidth everywhere. ---------------------------------------------------------------------- */ @media (max-width:440px){ .hero .hero-copy h1{font-size:min(2.6rem,calc((100vw - 3.2rem)/6.5243));} html[data-theme="riso"] .hero .hero-copy h1{font-size:min(2.9rem,calc((100vw - 3.2rem)/7.9233));} html[data-theme="terminal"] .hero .hero-copy h1{font-size:min(2.2rem,calc((100vw - 3.2rem)/8.7000));} html[data-theme="brutal"] .hero .hero-copy h1{font-size:min(3rem, calc((100vw - 3.2rem)/7.8652));} html[data-theme="acid"] .hero .hero-copy h1{font-size:min(2.8rem,calc((100vw - 3.2rem)/6.3317));} .hero .btn,#start .btn{white-space:normal;} } /* inline code in prose is a path or an identifier, and it is allowed to break rather than push the page sideways. .au-tree is white-space:pre, where overflow-wrap has no effect, so its listing is untouched. */ main code{overflow-wrap:break-word;} @media (max-width:760px){ .au-under{margin-top:2rem;} .au-keep{margin-top:3.4rem;padding-top:2.4rem;} .au-builds .row{grid-template-columns:1fr;gap:.3rem;padding:1rem 0;} .au-offer-line{max-width:none;} .au-tree{font-size:.76rem;padding:1.1rem 1.1rem 1.2rem;} .au-ol li{padding-left:2.9rem;} } /* ---------- 12. reduced motion / QA hold one legible frame ---------- site.css already pins .dr and .fx; nothing here animates on its own, so there is no second mechanism to disable. This block only guarantees the tree and the readout never depend on an arrival class to be readable. */ @media (prefers-reduced-motion: reduce){ .au-tree,.au-radius{opacity:1 !important;transform:none !important;} } /* Any capture of the public dashboard is the proof-demo showcase branch, whose open findings are seeded. Disclosed at the figure, not four sections away. */ .shot-branch{margin:.6rem 0 0;font-size:.82rem;line-height:1.5;color:var(--label-text);max-width:64ch;}