symbiot/simbiot-harness
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

shkor.com: тарифы — «лестница» в стиле секции Method (01 Autopilot → 02 Lab → 03 Studio), строки колонок выровнены (subgrid), условия внизу одинаковой строкой; удалены стили прошлых итераций; выкачено

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Simbiot Harness 2026-10-19 10:01:00 +00:00
parent ef3cfc554f
commit fb4ddff1b3
2 changed files with 49 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
sites/shkor-com/v2/index.html
View file

@ -236,34 +236,38 @@
<div class="wrap">
<header class="sec-h reveal">
<p class="kicker">05 — Plans</p>
<h2>One studio. Choose how close we work.</h2>
<p class="sec-sub">For solo founders and small teams — launching a product or already running a business.</p>
<h2>One studio. <span class="hl">Choose how close we work.</span></h2>
<p class="lead">For solo founders and small teams — launching a product or already running a business.</p>
</header>
<div class="paths">
<article class="path reveal">
<p class="path-k">Autopilot</p>
<ol class="steps plans">
<li class="step plan plan-main reveal">
<span class="num">01</span>
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 17 9 12l4 4 7-8M15 8h5v5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<p class="plan-k">Autopilot</p>
<h3>Build it yourself</h3>
<p class="price">$99<span>/month</span></p>
<ul class="perks">
<li>Your own server with an agent, 24/7</li>
<li>A workspace with OpenCode and Claude Code</li>
<li>Your own git, subdomains and card payments</li>
</ul>
<p class="plan-d">Your own server with an agent, a workspace with OpenCode and Claude Code, your own git, subdomains and card payments.</p>
<p class="plan-price">$99<span>/month</span></p>
<a class="btn" href="start/"><span>Start now</span><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
</article>
<article class="path path-alt reveal">
<p class="path-k">Lab</p>
</li>
<li class="step plan reveal">
<span class="num">02</span>
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3 19c0-2.8 2.2-5 5-5s5 2.2 5 5m-2-5c.9-.6 2-1 3-1h2c2.8 0 5 2.2 5 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<p class="plan-k">Lab</p>
<h3>Build it with us</h3>
<p class="price price-note">By application<span>a partnership: you pay as you grow</span></p>
<ul class="perks">
<li>Everything in Autopilot</li>
<li>Personal guidance in small cohorts</li>
<li>The studio's agents and network on your side</li>
</ul>
<p class="plan-d">Everything in Autopilot, plus personal guidance in small cohorts and the studio's agents and network on your side.</p>
<p class="plan-price">By application<span>pay as you grow</span></p>
<a class="btn btn-ghost" href="apply/"><span>Apply for a lab</span><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
</article>
</div>
<p class="next-rung reveal"><b>Next: the studio.</b> Paid roles for builders with traction.</p>
</li>
<li class="step plan plan-dim reveal">
<span class="num">03</span>
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.8L12 3Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<p class="plan-k">Studio</p>
<h3>Paid to build</h3>
<p class="plan-d">Builders with traction join the studio in paid roles — running the next cohorts while building their own products.</p>
<p class="plan-price">By invitation<span>earned, not bought</span></p>
</li>
</ol>
</div>
</section>

50
sites/shkor-com/v2/styles.css
View file

@ -47,7 +47,7 @@ h2 { font-size: clamp(34px, 5vw, 64px); max-width: 16ch; text-wrap: balance; }
h3 { font-size: 22px; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 10px; }
.hl { color: var(--acid); }
.lead { font-size: clamp(17px, 1.5vw, 20px); max-width: 58ch; margin-top: 24px; color: var(--fg-2); text-wrap: pretty; }
.kicker, .tag, .lab-tag, .path-k { font: 400 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acid); }
.kicker, .tag, .lab-tag { font: 400 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acid); }
.kicker { margin-bottom: 20px; }
.fine, .muted { font-size: 14px; color: var(--fg-3); }
.fine { margin-top: 14px; }
@ -202,27 +202,26 @@ a.lab:hover .lab-tag { color: var(--acid); }
.film { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 0 1px var(--line-2), 0 40px 120px rgba(198,255,77,.08); }
.film video { width: 100%; height: 100%; display: block; }
/* paths */
.paths { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .paths { grid-template-columns: 1fr 1fr; } }
.path { display: flex; flex-direction: column; align-items: flex-start; padding: 44px; border-radius: var(--r); background: linear-gradient(180deg, rgba(198,255,77,.07), transparent 60%), var(--bg-1); box-shadow: inset 0 0 0 1px rgba(198,255,77,.25); }
.path-alt { background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); }
.path-k { margin-bottom: 20px; }
.path h3 { font-size: 34px; margin-bottom: 16px; }
.path > p { color: var(--fg-2); }
.path .price { font: 700 64px/1 var(--display); color: var(--fg); letter-spacing: -.04em; margin: 36px 0 8px; }
.path .price span { font: 400 18px var(--body); color: var(--fg-3); letter-spacing: 0; margin-left: 6px; }
.sec-sub { margin-top: 16px; color: var(--fg-2); font-size: 18px; max-width: 640px; }
.path .price { margin-top: 8px; }
.perks { list-style: none; margin: 28px 0 24px; padding: 0; display: grid; gap: 12px; }
.perks li { position: relative; padding-left: 28px; color: var(--fg-2); font-size: 16px; line-height: 1.5; }
.perks li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 7px; border: solid var(--acid); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.path .muted { margin-bottom: 24px; }
.path .btn { margin-top: auto; }
.next-rung { margin-top: 24px; padding: 20px 24px; border-radius: 16px; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); background: var(--bg-1); }
.next-rung b { color: var(--fg); }
.path .muted { margin-bottom: 28px; }
.path-alt .btn { margin-top: auto; }
/* plans: лестница в стиле Method — 01 Autopilot → 02 Lab → 03 Studio */
.plans .plan { display: flex; flex-direction: column; align-items: flex-start; padding: 40px 32px; }
.plans .plan .ico { margin-bottom: 28px; }
.plans .plan .plan-k { font: 400 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acid); margin-bottom: 12px; }
.plans .plan h3 { font-size: 30px; margin-bottom: 12px; }
.plans .plan .plan-d { color: var(--fg-3); font-size: 16px; margin-bottom: 32px; }
.plans .plan .plan-price { justify-self: stretch; align-self: stretch; padding-top: 28px; border-top: 1px solid var(--line); margin-bottom: 20px;
font: 600 28px/1.1 var(--display); color: var(--fg); letter-spacing: -.02em; }
.plans .plan .plan-price span { display: block; margin-top: 6px; font: 400 14px/1.4 var(--body); color: var(--fg-3); letter-spacing: 0; }
.plan-main { background: radial-gradient(420px 260px at 0% 0%, rgba(198,255,77,.10), transparent 70%), var(--bg); }
.plan-main:hover { background: radial-gradient(420px 260px at 0% 0%, rgba(198,255,77,.14), transparent 70%), var(--bg-1); }
.plans .plan-main .plan-price { color: var(--acid); }
.plan-dim .ico { color: var(--fg-3); background: rgba(255,255,255,.05); }
.plans .plan-dim .plan-k { color: var(--fg-3); }
.plans .plan-dim h3, .plans .plan-dim .plan-price { color: var(--fg-2); }
@media (min-width: 900px) {
/* общие строки у трёх колонок (subgrid): подпись, заголовок, текст, условия, кнопка — на одной высоте */
.plans { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, auto); }
.plans .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; justify-items: start; align-content: start; }
}
/* cta */
.cta { position: relative; padding: 160px 0; text-align: center; overflow: hidden; border-top: 1px solid var(--line);
@ -265,15 +264,10 @@ a.lab:hover .lab-tag { color: var(--acid); }
.log { right: 0; left: 0; bottom: auto; top: calc(100% + 20px); width: auto; }
.orbit { margin-bottom: 200px; }
.tag { letter-spacing: .08em; font-size: 11px; }
.path, .lab-xl { padding: 32px; }
.lab-xl { padding: 32px; }
}
@media (max-width: 520px) {
.sub { border-radius: 20px; }
.sub .btn { width: 100%; }
.sub-msg { margin-top: 128px; }
}
@media (max-width: 600px) { .path .price-long span { display: block; margin: 12px 0 0; } }
.path .price-note { font-size: 40px; line-height: 1.1; }
.path .price-note span { display: block; margin: 10px 0 0; font-size: 17px; }