Skip to content

Restyle landing homepage: pill CTAs, convergence diagram, corner-accent cards #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
5uper0 merged 3 commits into from
Aug 22, 2026
Merged

Restyle landing homepage: pill CTAs, convergence diagram, corner-accent cards #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bca26cb
fix(landing): un-layer focus-ring radius that beat Tailwind pill util…
5uper0 Aug 22, 2026
165f547
feat(landing): restyle homepage with pill CTAs and a convergence diagram
5uper0 Aug 22, 2026
7e6c2e3
style(demo): match landing's pill buttons and 4px spacing rhythm
5uper0 Aug 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 20 additions & 19 deletions examples/demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,13 @@
}
*{box-sizing:border-box;margin:0}
button,.toggle,.btn,.vbtn,.seg b{-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:var(--r)}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;
-webkit-font-smoothing:antialiased;transition:background .25s var(--ease),color .25s var(--ease);
overflow-x:hidden}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:44px 22px 78px}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:44px 24px 80px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;gap:3px}
.logo{display:inline-flex;align-items:center;margin:-8px 0;padding:8px 0;font-size:27px;font-weight:560;letter-spacing:-.025em;color:inherit;text-decoration:none}.logo .d{color:var(--red)}
Expand All @@ -89,39 +90,39 @@
.situation{font-size:17px;color:var(--ink);font-weight:500;max-width:66ch;line-height:1.5;margin-bottom:4px}
.situation.tech{font-size:15px;color:var(--muted);font-weight:400}
h2{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
margin:42px 0 16px;display:flex;align-items:center;gap:10px}
margin:44px 0 16px;display:flex;align-items:center;gap:10px}
h2::after{content:"";flex:1;height:1px;background:var(--hair)}
.grid{display:grid;gap:14px}.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.party{background:var(--surface-top);border:1px solid var(--hair);
border-radius:var(--r-lg);padding:18px 19px;box-shadow:var(--ambient)}
.party .who{font-weight:560;font-size:15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.party .blurb{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.party .sub{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.09em;margin-top:13px}
.party .sub{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.09em;margin-top:12px}
.party ul{list-style:none;padding:0;margin:6px 0 0;font-size:13px;color:var(--muted)}
.party li{padding:2.5px 0;display:flex;gap:9px;align-items:flex-start}
.party li.red::before{content:"";width:15px;height:2px;background:var(--red);flex:none;border-radius:2px;margin-top:8px}
.party li.none{color:var(--dim);font-style:italic}
.btn{border:none;border-radius:var(--r);padding:12px 24px;font:inherit;font-weight:560;font-size:14.5px;cursor:pointer;
.btn{border:none;border-radius:var(--r-full);padding:12px 24px;font:inherit;font-weight:560;font-size:14.5px;cursor:pointer;
background:var(--indigo);color:#fff;transition:.2s var(--ease);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985);filter:brightness(1.02)}
.opt{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:15px 17px;margin:11px 0;transition:.25s var(--ease)}
.opt{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:15px 17px;margin:12px 0;transition:.25s var(--ease)}
.opt:not(.blocked):not(.winner):hover{border-color:var(--hair2)}
.opt .top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.opt .name{font-weight:540;font-size:15px}
.opt .attrs{color:var(--muted);font-size:13px;font-weight:400;font-family:var(--mono)}
.opt.blocked{border-color:var(--red-hair);background:var(--red-bg)}
.opt.winner{border-color:var(--indigo);box-shadow:0 0 0 1px var(--indigo)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:11px;font-weight:500;border-radius:var(--r-full);padding:2.5px 10px;
.chip{font-family:var(--mono);font-size:11px;font-weight:500;border-radius:var(--r-full);padding:5px 12px;
display:inline-flex;gap:5px;align-items:center;background:var(--sunken);color:var(--muted);border:1px solid var(--hair)}
.chip.ok{background:var(--verify-bg);color:var(--verify);border-color:var(--verify-hair)}
.chip.no{background:var(--red-bg);color:var(--red);border-color:var(--red-hair)}
.tagline-sm{font-size:12.5px;margin-top:9px;color:var(--dim)}
.tagline-sm{font-size:12.5px;margin-top:8px;color:var(--dim)}
.tagline-sm.block{color:var(--red);font-weight:500}
.tagline-sm.win{color:var(--indigo);font-weight:560}
.muted{color:var(--muted);font-size:13px}
.bar{display:grid;grid-template-columns:170px 1fr 70px;align-items:center;gap:14px;margin:9px 0}
.bar{display:grid;grid-template-columns:170px 1fr 70px;align-items:center;gap:14px;margin:8px 0}
.bar .lbl{font-size:13px;color:var(--muted)}
.track{background:var(--sunken);border:1px solid var(--hair);border-radius:var(--r-full);height:14px;overflow:hidden}
.fill{height:100%;background:var(--indigo);border-radius:var(--r-full);transition:width .6s var(--ease)}
Expand All @@ -136,7 +137,7 @@
overflow-wrap:anywhere}
.receipt .k{color:var(--dim)}
.verify{margin-top:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.vbtn{border:1px solid var(--hair2);background:var(--surface);color:var(--ink);border-radius:var(--r);
.vbtn{border:1px solid var(--hair2);background:var(--surface);color:var(--ink);border-radius:var(--r-full);
padding:9px 16px;font:inherit;font-size:13px;cursor:pointer;transition:.2s var(--ease)}
.vbtn:hover{border-color:var(--verify);color:var(--verify)}
.vbtn:active{transform:scale(.97)}
Expand All @@ -147,7 +148,7 @@
/* ─── candy layer: hero, cinematic reveal, celebration ─────────────────────────── */

/* hero */
.hero{margin:26px 0 8px;position:relative}
.hero{margin:24px 0 8px;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);
background:var(--indigo-bg);
Expand All @@ -158,13 +159,13 @@
.hero h1 .g{color:var(--indigo)}
.hero .sub{margin:18px 0 0;font-size:clamp(15px,2.4vw,18px);line-height:1.55;color:var(--muted);max-width:60ch}
.hero .sub b{color:var(--ink);font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;align-items:center;margin-top:26px}
.cta{position:relative;overflow:hidden;border:none;border-radius:var(--r);padding:14px 26px;font:inherit;font-weight:640;
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.cta{position:relative;overflow:hidden;border:none;border-radius:var(--r-full);padding:14px 26px;font:inherit;font-weight:640;
font-size:15px;cursor:pointer;color:#fff;background:var(--indigo);
box-shadow:inset 0 1px 0 rgba(255,255,255,.10);transition:.2s var(--ease)}
.cta:hover{transform:translateY(-1px);filter:brightness(1.06)}
.cta:active{transform:translateY(0) scale(.98)}
.trustrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.trustrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.icp-hook{color:var(--dim);font-size:12.5px;margin-top:14px}
.icp-hook a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--hair2);text-underline-offset:2px}
.icp-hook a:hover{color:var(--indigo)}
Expand Down Expand Up @@ -219,13 +220,13 @@
.foot-links a:hover{color:var(--indigo)}
.foot-links svg{width:15px;height:15px;flex:none}
.foot-meta{color:var(--dim);font-size:12.5px}
.foot-wrap{max-width:1180px;margin:0 auto;padding:30px 22px 46px}
.foot-wrap{max-width:1180px;margin:0 auto;padding:32px 24px 48px}

/* ─── the three enforced properties: bridge between hero and the live demo ────── */
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.props{border-bottom:1px solid var(--hair)}
.props-inner{max-width:1180px;margin:0 auto;padding:36px 22px 40px}
.props-inner{max-width:1180px;margin:0 auto;padding:36px 24px 40px}
.props-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:18px}
.prop{background:var(--surface-top);border:1px solid var(--hair);border-radius:var(--r-lg);
padding:20px 21px;box-shadow:var(--ambient);
Expand All @@ -252,13 +253,13 @@

/* ─── hero band: full-bleed, ambient wash, decorative live proof-in-motion ─────── */
.hero-band{position:relative;overflow:hidden;border-bottom:1px solid var(--hair)}
.hero-inner{position:relative;max-width:1180px;margin:0 auto;padding:40px 22px 46px;
.hero-inner{position:relative;max-width:1180px;margin:0 auto;padding:40px 24px 48px;
display:grid;grid-template-columns:1fr;gap:8px}
.hero-inner header{max-width:none}
.hero-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;margin-top:8px}
.hero-cols>*{min-width:0}
@media (max-width:920px){.hero-cols{grid-template-columns:1fr}}
.hero-copy .hero{margin:22px 0 0}
.hero-copy .hero{margin:24px 0 0}
.hero-copy .hero h1{max-width:none}

/* decorative visualization — a silent, looping "3 verdicts → the fair pick" moment */
Expand All @@ -269,7 +270,7 @@
.proofviz .pv-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--verify)}
.proofviz .pv-live i{width:5px;height:5px;border-radius:50%;background:var(--verify);animation:pvBlink 1.8s var(--ease) infinite}
@keyframes pvBlink{0%,100%{opacity:1}50%{opacity:.35}}
.pv-row{display:grid;grid-template-columns:74px 1fr 34px;align-items:center;gap:11px;margin:9px 0}
.pv-row{display:grid;grid-template-columns:74px 1fr 34px;align-items:center;gap:12px;margin:8px 0}
.pv-row .pv-who{font-size:12px;color:var(--muted);font-weight:540}
.pv-row .pv-track{background:var(--sunken);border:1px solid var(--hair);border-radius:var(--r-full);height:10px;overflow:hidden}
.pv-row .pv-fill{height:100%;border-radius:var(--r-full);background:var(--indigo-dim);width:0;
Expand Down Expand Up @@ -379,7 +380,7 @@ <h2 id="h-options" class="step">The options on the table</h2>
<div id="options"></div>
<p class="muted" id="masknote" style="margin-top:8px">Each chip is a <em>masked</em> verdict — the coordinator sees only who accepted, never which limit was crossed.</p>

<div style="margin:30px 0 8px;display:flex;align-items:center;gap:14px;flex-wrap:wrap">
<div style="margin:32px 0 8px;display:flex;align-items:center;gap:14px;flex-wrap:wrap">
<button class="btn" onclick="run()">Run it ↻</button>
<span class="muted" style="font-size:13px">runs the real engine — watch the cheat get blocked</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion landing/src/components/Footer.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const links = [
fill: true,
},
{
href: "mailto:oleh@veheria.tech",
href: "mailto:hello@parleyprotocol.com",
label: "Contact",
icon: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z",
fill: true,
Expand Down
2 changes: 1 addition & 1 deletion landing/src/pages/404.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import Footer from "../components/Footer.astro";
<div>
<a
href="/"
class="mt-2 inline-block rounded-[10px] bg-indigo px-[26px] py-[14px] text-[15px] font-[640] text-white shadow-[inset_0_1px_0_rgba(255,255,255,.10)] transition-all duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-px hover:brightness-[1.06] active:translate-y-0 active:scale-[0.98]"
class="mt-2 inline-block rounded-full bg-indigo px-[26px] py-[14px] text-[15px] font-[640] text-white shadow-[inset_0_1px_0_rgba(255,255,255,.10)] transition-all duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-px hover:brightness-[1.06] active:translate-y-0 active:scale-[0.98]"
>
Back to Parley
</a>
Expand Down
Loading