marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Instantly headline, ad-product sections, animated level cycler

Browse Source 
Hero now reads Advertise and earn instantly. New Branded Voice sections:
ad-format showcase (3 live, 3 soon) and free-vs-package member benefits.
The earn-deeper diagram cycles levels 1-3, lighting the paying generation
with its percent; chips are clickable, auto-advance respects reduced
motion.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-04 13:35:43 -05:00
parent 8c8935fc15
commit 7bb1a78ca3
3 changed files with 144 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/site.css
+10
View File
@@ -123,6 +123,16 @@ h3{font-size:16.5px;margin:0 0 8px;font-weight:700}
.chip-t{border:1px solid var(--line-strong);border-radius:999px;padding:5px 16px;font-size:12.5px;color:var(--muted);font-family:var(--disp);font-weight:600}
.chip-t.on{background:var(--mint);color:var(--mint-ink);border-color:var(--mint)}
.iso{filter:drop-shadow(0 24px 50px rgba(0,0,0,.5))}
/* level cycler: light the paying generation */
#genViz .edge path{stroke:#22523f;transition:stroke .5s ease}
#genViz .node-o{fill:#122e25;stroke:#2f6b55;stroke-width:1.3;transition:stroke .5s ease,fill .5s ease}
#genViz .node-d{fill:#3f8f74;transition:fill .5s ease}
#genViz[data-lvl="1"] .e1 path,#genViz[data-lvl="2"] .e2 path,#genViz[data-lvl="3"] .e3 path{stroke:#43e8c3}
#genViz[data-lvl="1"] .g1 .node-o,#genViz[data-lvl="2"] .g2 .node-o,#genViz[data-lvl="3"] .g3 .node-o{stroke:#43e8c3;fill:#11362b}
#genViz[data-lvl="1"] .g1 .node-d,#genViz[data-lvl="2"] .g2 .node-d,#genViz[data-lvl="3"] .g3 .node-d{fill:#43e8c3}
.chips button{cursor:pointer;background:transparent;font:inherit}
.chips button.chip-t{border:1px solid var(--line-strong);color:var(--muted)}
.chips button.chip-t.on{background:var(--mint);color:var(--mint-ink);border-color:var(--mint)}
/* pricing tiles: mint discipline */
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));align-items:stretch}
.tile{position:relative;background:linear-gradient(170deg,rgba(22,38,32,.55),rgba(10,18,15,.65));border:1px solid var(--line);