/* ========================================================================== tool.css : per-tool page kit (tools/*.html, body[data-page="tool"]). Loads AFTER site.css + glass.css. Everything namespaced tp-/tool- (plus a few [data-page="tool"] scoped overrides that never leak to other pages). Accent: var(--tool-hex) is inlined on by the template and re-stamped by js/tool.js; every use falls back to var(--blue). PERF LAW: no backdrop-filter and no filter inside the scrolling #app. The anim panel uses .glass-faux (css/glass.css); the one site.css class that carries backdrop-filter (.dl-btn--alt) is neutralised below. ========================================================================== */ /* ------------------------------------------------------------------- hero */ #tool-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end; padding:0 var(--pad) clamp(48px,9vh,100px);color:#fff} #tool-hero .eyebrow{color:rgba(255,255,255,.75);margin-bottom:clamp(18px,3vh,30px)} #tool-hero .eyebrow .dot{background:var(--tool-hex,var(--blue))} #tool-hero h1{font-size:clamp(50px,11.5vw,190px);font-weight:500;letter-spacing:-.03em;line-height:.92} .tp-hdot{color:var(--tool-hex,var(--blue))} .tp-sub{margin-top:clamp(16px,2.6vh,26px);font-size:clamp(16px,1.6vw,22px);line-height:1.45; color:rgba(255,255,255,.78);max-width:44ch} .tp-cue{margin-top:clamp(28px,5vh,52px);display:flex;align-items:center;gap:10px; font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.6)} .tp-cue-line{width:44px;height:1px;background:currentColor;transform-origin:left; animation:tp-cueline 2.4s var(--ease) infinite} @keyframes tp-cueline{0%{transform:scaleX(0)}50%{transform:scaleX(1)} 100%{transform:scaleX(0);transform-origin:right}} /* -------------------------------------------- light sections: readable accent Raw tool hexes are tuned for dark chrome; on the #EFF0F2 bands they are darkened toward ink for small text. Falls back to the raw hex. */ #tool-story,#tool-demo,#tool-shot{--tool-ink:var(--tool-hex,var(--blue))} @supports (color:color-mix(in srgb,red 50%,black)){ #tool-story,#tool-demo,#tool-shot{--tool-ink:color-mix(in srgb,var(--tool-hex,#1a2ffb) 58%,#111318)} } #tool-story .eyebrow,#tool-demo .eyebrow{color:var(--tool-ink)} #tool-story .eyebrow .dot,#tool-demo .eyebrow .dot{background:var(--tool-ink)} /* ------------------------------------------------------------------ story */ #tool-story{padding:clamp(80px,12vh,170px) var(--pad)} .tp-story-inner{max-width:var(--maxw);margin:0 auto} .tp-lead{margin-top:26px;font-size:clamp(20px,2.2vw,34px);font-weight:400;line-height:1.3; letter-spacing:-.012em;max-width:36ch} .tp-pills{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0} .tp-pills li{display:inline-flex;align-items:center;gap:9px; font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase; padding:9px 16px;border-radius:999px;border:1px solid rgba(17,19,24,.16); background:rgba(17,19,24,.03);color:rgba(17,19,24,.82)} .tp-pills li::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto; background:var(--tool-ink,var(--blue))} .tp-cols{margin-top:clamp(50px,8vh,90px);display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(26px,4vw,70px);align-items:center} .tp-col-copy h2{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.015em;max-width:16ch} .tp-honest{margin-top:16px;font-size:16px;line-height:1.5;opacity:.75;max-width:42ch} /* anim panel: faux-glass slab (rgba fill + 1px rgba border, NO backdrop-filter); the mounted anim draws its own transparent canvas on the dark slab */ .tp-anim{position:relative;aspect-ratio:16/10;min-height:280px;overflow:hidden;border-radius:18px} #tool-anim{position:absolute;inset:0} #tool-anim canvas{display:block;width:100%;height:100%} #tool-anim:empty::before{content:"[ loading animation ]";position:absolute;inset:0; display:grid;place-items:center;font-family:var(--mono);font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4)} /* ------------------------------------------------------------------- demo */ #tool-demo{padding:clamp(80px,12vh,170px) var(--pad);border-top:1px solid rgba(17,19,24,.1)} .tp-demo-inner{max-width:var(--maxw);margin:0 auto} #tool-demo h2{margin-top:22px;font-size:clamp(28px,3.6vw,56px);max-width:16ch} .tp-demo-frame{margin-top:clamp(28px,5vh,48px);position:relative;border-radius:22px; border:1px solid rgba(17,19,24,.14);background:#fff;overflow:hidden; box-shadow:0 24px 70px rgba(10,12,20,.08)} #tool-demo-mount{position:relative;min-height:clamp(360px,52vh,560px)} #tool-demo-mount:empty::before{content:"[ simulated demo ]";position:absolute;inset:0; display:grid;place-items:center;font-family:var(--mono);font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:rgba(17,19,24,.35)} .tp-disclaimer{margin-top:16px;font-family:var(--mono);font-size:11px; letter-spacing:.14em;text-transform:uppercase;opacity:.55} /* -------------------------------------------------------- capture (optional) Styles the main-thread injected block:
...
Real capture, personal data blurred.
*/ #tool-shot{padding:clamp(60px,10vh,140px) var(--pad);border-top:1px solid rgba(17,19,24,.1)} .tp-shot{max-width:1100px;margin:0 auto} .tp-shot img{width:100%;border-radius:18px;border:1px solid rgba(17,19,24,.12); box-shadow:0 30px 80px rgba(10,12,20,.16)} .tp-shot figcaption{margin-top:14px;font-family:var(--mono);font-size:11px; letter-spacing:.14em;text-transform:uppercase;opacity:.55;text-align:center} /* -------------------------------------------------------------- prev / next */ #tool-next{padding:0 var(--pad)} .tp-next-inner{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,14vh,180px) 0} .tp-next-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px)} .tp-nav{display:flex;flex-direction:column;gap:12px;padding:clamp(26px,3vw,44px) 4px; border-top:1px solid rgba(255,255,255,.16);color:#fff} .tp-nav-k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.5} .tp-nav-name{display:inline-flex;align-items:center;gap:clamp(12px,1.6vw,22px); font-size:clamp(30px,4.6vw,72px);font-weight:500;letter-spacing:-.02em;line-height:1; transition:color .3s,transform .4s var(--ease)} .tp-nav-arw{font-size:.55em;opacity:.55;transition:opacity .35s var(--ease),transform .35s var(--ease)} .tp-nav-next{align-items:flex-end;text-align:right} @media (hover:hover) and (pointer:fine){ .tp-nav:hover .tp-nav-name{color:var(--tool-hex,var(--blue))} .tp-nav-prev:hover .tp-nav-name{transform:translateX(-6px)} .tp-nav-next:hover .tp-nav-name{transform:translateX(6px)} .tp-nav-prev:hover .tp-nav-arw{opacity:1;transform:translate(-4px,-4px)} .tp-nav-next:hover .tp-nav-arw{opacity:1;transform:translate(4px,-4px)} } .tp-all-wrap{margin-top:clamp(40px,7vh,80px);text-align:center} .tp-all{display:inline-flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.28); border-radius:100px;padding:14px 26px;font-size:15px;color:#fff;transition:.3s var(--ease)} .tp-all .dot{width:8px;height:8px;border-radius:50%;background:var(--tool-hex,var(--blue))} .tp-all:hover{background:#fff;color:var(--ink);border-color:#fff} /* ------------------------------------------------------------ end downloads */ .tp-dl-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center; margin-top:clamp(26px,5vh,44px)} /* PERF LAW: site.css gives .dl-btn--alt a backdrop-filter; it must not run inside the transform-scrolled #app, so the tool pages flatten it to a plain translucent pill (same read, no per-frame re-sampling) */ [data-page="tool"] .dl-btn--alt{-webkit-backdrop-filter:none;backdrop-filter:none; background:rgba(255,255,255,.12)} [data-page="tool"] .dl-btn--alt:hover{background:rgba(255,255,255,.2)} /* ------------------------------------------------------------ focus-visible */ [data-page="tool"] .tp-nav:focus-visible, [data-page="tool"] .tp-all:focus-visible, [data-page="tool"] .dl-btn:focus-visible{ outline:2px solid var(--tool-hex,var(--blue));outline-offset:4px;border-radius:8px} [data-page="tool"] .tp-all:focus-visible, [data-page="tool"] .dl-btn:focus-visible{border-radius:100px} /* -------------------------------------------------------------- responsive */ @media (max-width:900px){ .tp-cols{grid-template-columns:1fr;align-items:start} } @media (max-width:760px){ #tool-hero{padding-bottom:40px} .tp-next-grid{grid-template-columns:1fr;gap:0} .tp-nav-next{align-items:flex-start;text-align:left} .tp-nav-name{font-size:clamp(28px,8vw,44px)} #tool-demo-mount{min-height:min(420px,72vh)} .tp-anim{aspect-ratio:4/3} } /* --------------------------------------------------------- reduced motion */ @media (prefers-reduced-motion:reduce){ .tp-cue-line{animation:none;transform:none} .tp-nav-name,.tp-nav-arw,.tp-all{transition:none} }