diff --git a/apps/landing-page/public/community/index.html b/apps/landing-page/public/community/index.html index d9be74c39..27b94a57b 100644 --- a/apps/landing-page/public/community/index.html +++ b/apps/landing-page/public/community/index.html @@ -58,15 +58,20 @@ .nav{position:sticky;top:0;z-index:50;background:rgba(239,231,210,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px} .brand{display:flex;align-items:center;gap:10px;font:600 14px/1 var(--sans);letter-spacing:-.01em} - .brand-mark{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center} - .brand-mark img{width:100%;height:100%;display:block;object-fit:contain;border-radius:5px} - .brand .sep{color:var(--ink-faint);margin:0 6px;font-weight:400} - .brand .crumb{color:var(--ink-mute);font-weight:500} - .nav-links{display:flex;gap:28px;align-items:center;font:500 13.5px/1 var(--sans)} + .brand-mark{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center} + .brand-mark img{width:100%;height:100%;display:block;object-fit:contain;border-radius:6px} + .nav-links{display:flex;gap:18px;align-items:center;font:500 13.5px/1 var(--sans)} .nav-links a{color:var(--ink-soft);transition:color .15s} .nav-links a:hover{color:var(--coral)} .nav-links .pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--ink);color:var(--bone)} .nav-links .pill:hover{background:var(--coral);color:var(--bone)} + /* Icon-only chrome buttons mirror the main landing-page nav: surface + GitHub + X alongside the prominent Discord pill without burning a + text-nav slot. Pattern lifted from PR #3230. */ + .nav-links .nav-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(21,20,15,.18);background:transparent;color:var(--ink);transition:background .15s,border-color .15s,color .15s;flex-shrink:0} + .nav-links .nav-icon:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)} + .nav-links .nav-icon svg{display:block} + .nav-sep{width:1px;height:20px;background:var(--line);display:inline-block} /* --------- hero ---------- */ .hero{position:relative;padding:90px 0 110px;overflow:hidden} @@ -74,7 +79,8 @@ .hero-copy .kicker{margin-bottom:28px} .hero h1{font-size:clamp(56px, 7.2vw, 104px);margin:14px 0 32px} .hero .lead{font-size:21px;max-width:46ch;margin-bottom:40px} - .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center} + .hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center} + .hero-cta .btn{padding:13px 20px;font-size:13.5px;white-space:nowrap} .hero-meta{margin-top:54px;display:flex;gap:48px;border-top:1px solid var(--line-soft);padding-top:28px} .hero-meta .item{display:flex;flex-direction:column;gap:4px} .hero-meta .item .v{font:500 28px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)} @@ -224,9 +230,49 @@ .amb-side .amb-apply:hover{transform:translateY(-2px)} .amb-side p{font:400 15px/1.55 var(--body);color:var(--ink-mute);max-width:38ch;margin:0} + /* --------- showcase / plugin-everything ---------- */ + .showcase{background:linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%);position:relative;overflow:hidden} + .showcase::before{content:"";position:absolute;left:-220px;top:120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle, rgba(233,185,74,.18) 0%, transparent 70%);pointer-events:none} + .showcase::after{content:"";position:absolute;right:-180px;bottom:-100px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle, rgba(237,111,92,.16) 0%, transparent 70%);pointer-events:none} + .showcase .wrap{position:relative;z-index:1} + .showcase .section-head h2{max-width:24ch} + .showcase-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:stretch} + .showcase-tenets{display:flex;flex-direction:column;gap:36px} + .showcase-tenet{display:grid;grid-template-columns:46px 1fr;gap:20px;align-items:start} + .showcase-tenet .ord{font:500 14px/1 var(--mono);letter-spacing:.18em;color:var(--coral);padding-top:6px} + .showcase-tenet h3{font:500 26px/1.15 var(--serif);letter-spacing:-.005em;margin-bottom:10px;color:var(--ink)} + .showcase-tenet h3 em{color:var(--coral);font-style:italic} + .showcase-tenet p{font:400 15.5px/1.6 var(--body);color:var(--ink-mute);max-width:46ch} + .contrib-card{background:var(--bone);border:1px solid var(--line);border-radius:18px;padding:36px 34px 32px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;box-shadow:var(--shadow-card);position:relative;overflow:hidden} + .contrib-card .pane-kicker{font:500 11.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px} + .contrib-card .pane-kicker .dot{display:inline-block;width:6px;height:6px;border-radius:50%} + .contrib-card h3{font:500 28px/1.15 var(--serif);letter-spacing:-.005em;color:var(--ink)} + .contrib-card h3 em{color:var(--coral);font-style:italic} + .contrib-card .pane-lede{font:400 14.5px/1.55 var(--body);color:var(--ink-mute);margin-top:8px;max-width:42ch} + .contrib-card::before{content:"";position:absolute;left:-60px;bottom:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle, rgba(237,111,92,.14) 0%, transparent 70%);pointer-events:none} + .contrib-card > *{position:relative;z-index:1} + .contrib-card .pane-kicker{color:var(--coral)} + .contrib-card .pane-kicker .dot{background:var(--coral)} + .contrib-steps{display:flex;flex-direction:column;gap:14px;margin:4px 0 0;padding:22px 0 4px;border-top:1px solid var(--line-soft)} + .contrib-step{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start} + .contrib-step .n{font:500 11.5px/1 var(--mono);color:var(--coral);letter-spacing:.16em;padding-top:5px} + .contrib-step h4{font:500 15.5px/1.3 var(--sans);color:var(--ink);margin-bottom:4px;letter-spacing:-.005em} + .contrib-step p{font:400 13.5px/1.5 var(--body);color:var(--ink-mute)} + .contrib-step code{font:500 12.5px/1.4 var(--mono);background:var(--paper);border:1px solid var(--line-soft);border-radius:5px;padding:2px 7px;color:var(--ink);letter-spacing:-.005em} + .contrib-install{display:grid;grid-template-columns:1fr auto;gap:0;border:1px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--ink);color:var(--paper);font:500 13px/1.4 var(--mono);letter-spacing:-.005em} + .contrib-install .cmd{padding:14px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--paper);user-select:all} + .contrib-install .cmd::before{content:"$ ";color:var(--coral);user-select:none} + .contrib-install button{appearance:none;border:0;border-left:1px solid rgba(247,241,222,.16);background:transparent;color:var(--paper);padding:0 18px;font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s;min-width:90px} + .contrib-install button:hover{background:var(--coral);color:var(--ink)} + .contrib-install button.is-copied{background:var(--olive);color:var(--bone)} + .contrib-tail{font:400 12.5px/1.55 var(--body);color:var(--ink-faint)} + .contrib-tail a{color:var(--coral);border-bottom:1px solid transparent;transition:border-color .15s} + .contrib-tail a:hover{border-color:var(--coral)} + /* --------- discord cta ---------- */ .discord{padding:120px 0} - .discord-card{background:var(--coral);color:var(--ink);border-radius:24px;padding:88px 72px;display:grid;grid-template-columns:1.4fr .8fr;gap:64px;align-items:center;position:relative;overflow:hidden;box-shadow:var(--shadow)} + .discord .wrap{max-width:1440px;padding:0 32px} + .discord-card{background:var(--coral);color:var(--ink);border-radius:24px;padding:72px 64px;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;position:relative;overflow:hidden;box-shadow:var(--shadow)} .discord-card::after{content:"";position:absolute;top:-80px;right:-100px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, rgba(247,241,222,.32) 0%, transparent 70%);pointer-events:none} .discord-card .kicker{color:var(--ink-soft)} .discord-card .kicker .dot{background:var(--ink)} @@ -237,25 +283,41 @@ .discord-card .btn-primary:hover{background:var(--bone);color:var(--ink)} .discord-card .btn-ghost{border-color:var(--ink);color:var(--ink)} .discord-card .btn-ghost:hover{background:var(--ink);color:var(--coral)} - .discord-side{position:relative;z-index:2} - .discord-side .pop{font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:22px} + .discord-side{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px} .discord-side .stack{background:var(--ink);color:var(--bone);border-radius:14px;padding:22px} .discord-side .stack .row-d{display:flex;align-items:center;gap:14px;padding:8px 0;font:500 13.5px/1 var(--sans)} .discord-side .stack .row-d .dot-g{width:8px;height:8px;border-radius:50%;background:var(--coral)} .discord-side .stack .row-d .h{font:400 11px/1 var(--mono);color:var(--ink-faint);margin-left:auto;text-transform:uppercase;letter-spacing:.12em} + .mod-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} + .moderator-card{background:var(--ink);color:var(--bone);border-radius:14px;padding:22px 20px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} + .moderator-card .mod-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid var(--coral);background:var(--paper-dark);flex-shrink:0} + .moderator-card .mod-avatar img{width:100%;height:100%;object-fit:cover} + .moderator-card .mod-role{font:600 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--coral)} + .moderator-card .mod-name{font:500 22px/1.1 var(--serif);letter-spacing:-.005em;color:var(--bone);margin:0} + .moderator-card .mod-bio{font:400 12.5px/1.55 var(--body);color:rgba(247,241,222,.78);margin:0} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}} /* --------- footer ---------- */ - .foot{padding:56px 0 64px;border-top:1px solid var(--line-soft);font:400 13px/1.5 var(--body);color:var(--ink-mute)} - .foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px} + .foot{padding:72px 0 56px;border-top:1px solid var(--line-soft);font:400 13px/1.5 var(--body);color:var(--ink-mute)} .foot a:hover{color:var(--coral)} - .foot .l{display:flex;gap:24px} + .foot-cols{display:grid;grid-template-columns:1.6fr repeat(3, 1fr);gap:48px;margin-bottom:48px} + .foot-brand{display:flex;flex-direction:column;gap:16px} + .foot-brand .brand{font:600 14px/1 var(--sans);letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:10px} + .foot-brand .brand-mark{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center} + .foot-brand .brand-mark img{width:100%;height:100%;display:block;object-fit:contain;border-radius:5px} + .foot-summary{font:400 13px/1.55 var(--body);color:var(--ink-mute);max-width:36ch} + .foot-col h5{font:600 11.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:18px} + .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px} + .foot-col a{color:var(--ink-mute);transition:color .15s} + .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:28px;border-top:1px solid var(--line-soft);font-size:12.5px} + .foot-bottom .l{display:flex;gap:18px;flex-wrap:wrap} /* --------- responsive softening (desktop-first per brief) ---------- */ @media (max-width:1100px){ .wrap{padding:0 32px} .hero-grid,.signal-grid,.discord-card{grid-template-columns:1fr;gap:48px} + .discord .wrap{padding:0 24px} .steps,.maintainers-grid{grid-template-columns:repeat(2,1fr);row-gap:56px} .step:nth-child(2){border-right:0} .section-head{grid-template-columns:1fr} @@ -265,6 +327,10 @@ .amb-col:last-child{border-bottom:0} .amb-more-grid{grid-template-columns:1fr;gap:32px} .amb-side{align-items:flex-start;text-align:left} + .showcase-grid{grid-template-columns:1fr;gap:48px} + .foot-cols{grid-template-columns:1fr 1fr;gap:36px} + .foot-brand{grid-column:1 / -1} + .nav-links a:not(.pill):not(.nav-icon),.nav-sep{display:none} } @media (max-width:640px){ .wrap{padding:0 20px} @@ -280,6 +346,9 @@ .leaderboard-head,.row{grid-template-columns:32px 1fr auto} .leaderboard-head span:nth-child(3),.leaderboard-head span:nth-child(4),.row .v:not(.coral),.row .arr{display:none} .amb-col{padding:32px 24px 36px} + .foot-cols{grid-template-columns:1fr;gap:32px} + .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px} + .mod-row{grid-template-columns:1fr} } /* loading skeletons */ @@ -293,14 +362,20 @@