/* ========================================================================== 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}} /* Hero mini-game HUD: score / best / last, top-right of the hero so it never collides with the bottom-anchored title. Shared by every interactive tool hero (Fast Sorter, Duplicates, Similar Images, ...). Inert on tool pages whose hero doesn't build one (the element only exists when the toolfx module mounts it). pointer-events:none so it never blocks the hero's own drag. .fs-hero-hud kept as a back-compat alias. */ #tool-hero{position:relative} .hero-game-hud,.fs-hero-hud{position:absolute;top:clamp(88px,14vh,140px);right:var(--pad);z-index:5; display:flex;flex-direction:column;align-items:flex-end;gap:7px;pointer-events:none} .hero-game-hud .apd-chip,.hero-game-hud .apd-badge, .fs-hero-hud .apd-chip,.fs-hero-hud .apd-badge{pointer-events:none;font-size:12px} .hero-game-hud .fsh-miss,.fs-hero-hud .fsh-miss{color:#ff4f68;font-family:var(--mono);font-size:11px; letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .2s} .hero-game-hud .fsh-miss.show,.fs-hero-hud .fsh-miss.show{opacity:1} /* prompt line some games show under the HUD (e.g. "Match?" / "Find this") */ .hero-game-hud .fsh-prompt,.fs-hero-hud .fsh-prompt{color:rgba(240,242,248,.82); font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase} /* Fast Sorter keyboard hint: a subtle legend near the bottom of the hero so players discover the arrow controls. Retires itself once a card is routed. */ .fs-hero-keys{position:absolute;left:50%;bottom:clamp(64px,11vh,104px);transform:translateX(-50%); z-index:5;display:flex;align-items:center;gap:clamp(12px,2vw,22px);pointer-events:none; font-family:var(--mono);font-size:12px;color:rgba(240,242,248,.7);letter-spacing:.02em; padding:9px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg,rgba(32,38,54,.5),rgba(16,20,30,.62)); opacity:0;animation:fsk-in .5s var(--ease) .6s forwards;transition:opacity .5s var(--ease),transform .5s var(--ease)} .fs-hero-keys .fsk-or{color:rgba(240,242,248,.42)} .fs-hero-keys kbd{display:inline-block;min-width:18px;text-align:center;padding:1px 5px;margin-right:4px; border-radius:5px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08); font-family:var(--mono);font-size:12px;line-height:1.3;color:#fff} .fs-hero-keys.gone{opacity:0;transform:translateX(-50%) translateY(8px)} @keyframes fsk-in{to{opacity:1}} @media (max-width:640px){.fs-hero-keys .fsk-or{display:none}} @media (prefers-reduced-motion:reduce){.fs-hero-keys{animation:none;opacity:1}} /* -------------------------------------------- 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} }