sites/shkor-com/v2: Shkor Labs = автопилот + лаборатории (новый дизайн, превью new.shkor.com/v2)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
99f05028c2
commit
45cda710db
8 changed files with 618 additions and 1 deletions
|
|
@ -6,5 +6,6 @@ Static page (`index.html`, `styles.css`, `assets/`) + email capture `subscribe.p
|
||||||
- Video `assets/simbiot-harness-enterprise-en.mp4` is copied from `out/` at deploy (not committed here)
|
- Video `assets/simbiot-harness-enterprise-en.mp4` is copied from `out/` at deploy (not committed here)
|
||||||
- Emails: `systemd shkor-subscribe` on 127.0.0.1:8097 → `/var/lib/shkor-subscribe/subs.db`
|
- Emails: `systemd shkor-subscribe` on 127.0.0.1:8097 → `/var/lib/shkor-subscribe/subs.db`
|
||||||
export: `sqlite3 /var/lib/shkor-subscribe/subs.db "select email,source,created_at from subs"`
|
export: `sqlite3 /var/lib/shkor-subscribe/subs.db "select email,source,created_at from subs"`
|
||||||
- Update: `cp -r index.html styles.css assets /var/www/shkor-com/`
|
- v2 (labs + autopilot concept): `v2/` → https://new.shkor.com/v2/ ; design direction from ui-ux-pro-max (Dark OLED + Bento + HUD, Space Grotesk)
|
||||||
|
- Update: `cp -r index.html styles.css assets /var/www/shkor-com/` (v2: `cp -r v2/* /var/www/shkor-com/v2/`)
|
||||||
- Apex shkor.com still points at 204.168.138.138 (old site) — switch A record after review.
|
- Apex shkor.com still points at 204.168.138.138 (old site) — switch A record after review.
|
||||||
|
|
|
||||||
BIN
sites/shkor-com/v2/assets/film-poster.jpg
Normal file
BIN
sites/shkor-com/v2/assets/film-poster.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
sites/shkor-com/v2/assets/inter-400-latin.woff2
Normal file
BIN
sites/shkor-com/v2/assets/inter-400-latin.woff2
Normal file
Binary file not shown.
BIN
sites/shkor-com/v2/assets/inter-600-latin.woff2
Normal file
BIN
sites/shkor-com/v2/assets/inter-600-latin.woff2
Normal file
Binary file not shown.
BIN
sites/shkor-com/v2/assets/jetbrains-mono-400-latin.woff2
Normal file
BIN
sites/shkor-com/v2/assets/jetbrains-mono-400-latin.woff2
Normal file
Binary file not shown.
BIN
sites/shkor-com/v2/assets/space-grotesk-latin.woff2
Normal file
BIN
sites/shkor-com/v2/assets/space-grotesk-latin.woff2
Normal file
Binary file not shown.
350
sites/shkor-com/v2/index.html
Normal file
350
sites/shkor-com/v2/index.html
Normal file
|
|
@ -0,0 +1,350 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Shkor Labs — Autopilots for business, built in our own labs</title>
|
||||||
|
<meta name="description" content="Shkor Labs builds autopilots for business: we mirror a company into a living event-sourced twin, rehearse decisions on it, and let a rhythmic AI agent run the work. Every autopilot is proven first in our own labs — real businesses inside Cooperative 42.">
|
||||||
|
<meta property="og:title" content="Shkor Labs — Autopilots for business">
|
||||||
|
<meta property="og:description" content="Mirror. Rehearse. Autopilot. Proven first in our own labs — real businesses run by people and their AI agents.">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://shkor.com/">
|
||||||
|
<meta property="og:image" content="https://shkor.com/assets/film-poster.jpg">
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="theme-color" content="#050506">
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='14' fill='%23050506'/><circle cx='32' cy='32' r='20' fill='none' stroke='%23c6ff4d' stroke-width='3' stroke-dasharray='4 6'/><circle cx='32' cy='32' r='7' fill='%23c6ff4d'/></svg>">
|
||||||
|
<link rel="preload" href="assets/space-grotesk-latin.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a class="skip" href="#main">Skip to content</a>
|
||||||
|
|
||||||
|
<header class="nav">
|
||||||
|
<div class="wrap nav-in">
|
||||||
|
<a class="brand" href="#top" aria-label="Shkor Labs — home">
|
||||||
|
<svg viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="16" r="12" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 4"/><circle cx="16" cy="16" r="4.5" fill="currentColor"/></svg>
|
||||||
|
<span>Shkor<b>Labs</b></span>
|
||||||
|
</a>
|
||||||
|
<nav aria-label="Main">
|
||||||
|
<a href="#method">Method</a>
|
||||||
|
<a href="#autopilot">Autopilot</a>
|
||||||
|
<a href="#labs">Labs</a>
|
||||||
|
<a href="#work">Work with us</a>
|
||||||
|
<a class="btn btn-sm" href="#notes">Lab notes</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="main">
|
||||||
|
|
||||||
|
<!-- ============ HERO ============ -->
|
||||||
|
<section class="hero" id="top">
|
||||||
|
<div class="grid-bg" aria-hidden="true"></div>
|
||||||
|
<div class="wrap hero-in">
|
||||||
|
<div class="hero-copy">
|
||||||
|
<p class="tag"><span class="dot"></span>Shkor Labs · R&D for autonomous business</p>
|
||||||
|
<h1>Autopilot<br>for <em>any</em> business.</h1>
|
||||||
|
<p class="lead">We mirror a company into a living twin, rehearse decisions on it, and hand the routine to an AI agent that runs on a rhythm — every second, minute, hour and day. Everything we ship is proven first in our own labs: real businesses, real money, real people.</p>
|
||||||
|
|
||||||
|
<form class="sub" data-sub action="/api/subscribe" method="post">
|
||||||
|
<label class="sr" for="hero-email">Work email</label>
|
||||||
|
<input id="hero-email" type="email" name="email" placeholder="you@company.com" autocomplete="email" required>
|
||||||
|
<input type="text" name="company" class="hp" tabindex="-1" autocomplete="off" aria-hidden="true">
|
||||||
|
<input type="hidden" name="source" value="v2-hero">
|
||||||
|
<button class="btn" type="submit"><span>Get lab notes</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></button>
|
||||||
|
<p class="sub-msg" role="status" aria-live="polite"></p>
|
||||||
|
</form>
|
||||||
|
<p class="fine">What we learn running AI-operated businesses. Rare, honest, one-click unsubscribe.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- orbit: the four rhythms of the autopilot -->
|
||||||
|
<figure class="orbit" aria-label="Diagram: the autopilot core surrounded by four rhythms — second, minute, hour and day">
|
||||||
|
<div class="ring r1"><i></i><span>1 sec · reflex</span></div>
|
||||||
|
<div class="ring r2"><i></i><span>1 min · triage</span></div>
|
||||||
|
<div class="ring r3"><i></i><span>1 hour · execute</span></div>
|
||||||
|
<div class="ring r4"><i></i><span>1 day · plan</span></div>
|
||||||
|
<div class="core"><b>Autopilot</b><small>Simbiot core</small></div>
|
||||||
|
<div class="hud c-tl" aria-hidden="true"></div><div class="hud c-tr" aria-hidden="true"></div>
|
||||||
|
<div class="hud c-bl" aria-hidden="true"></div><div class="hud c-br" aria-hidden="true"></div>
|
||||||
|
<figcaption class="log" aria-hidden="true">
|
||||||
|
<span class="log-h">event stream · illustrative</span>
|
||||||
|
<ol id="log"></ol>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="marquee" aria-label="Some of our labs">
|
||||||
|
<div class="track">
|
||||||
|
<span>Simbiot</span><span>ReelsUp</span><span>Avatar</span><span>Mainbeam</span><span>MalyarKa</span><span>Vybirai</span><span>GroupSign</span><span>WalletChain</span><span>DEIP</span><span>Domostroy</span><span>LAIve Sports</span><span>Probity</span><span>Totem</span><span>Yorio</span>
|
||||||
|
<span aria-hidden="true">Simbiot</span><span aria-hidden="true">ReelsUp</span><span aria-hidden="true">Avatar</span><span aria-hidden="true">Mainbeam</span><span aria-hidden="true">MalyarKa</span><span aria-hidden="true">Vybirai</span><span aria-hidden="true">GroupSign</span><span aria-hidden="true">WalletChain</span><span aria-hidden="true">DEIP</span><span aria-hidden="true">Domostroy</span><span aria-hidden="true">LAIve Sports</span><span aria-hidden="true">Probity</span><span aria-hidden="true">Totem</span><span aria-hidden="true">Yorio</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ METHOD ============ -->
|
||||||
|
<section id="method" class="sec">
|
||||||
|
<div class="wrap">
|
||||||
|
<header class="sec-h reveal">
|
||||||
|
<p class="kicker">01 — Method</p>
|
||||||
|
<h2>Mirror. Rehearse. <span class="hl">Autopilot.</span></h2>
|
||||||
|
<p class="lead">A digital twin isn't a dashboard someone draws once. It's the company's own history, captured as it happens — and that's exactly what our agents run on.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<ol class="steps">
|
||||||
|
<li class="step reveal">
|
||||||
|
<span class="num">01</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v18M5 7l7-4 7 4M5 17l7 4 7-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
|
<h3>Mirror</h3>
|
||||||
|
<p>Messages, tasks, calls, payments and decisions become signed events in one append-only log. Replay it and you get the company — its structure, its people, its habits — as a living model.</p>
|
||||||
|
</li>
|
||||||
|
<li class="step reveal">
|
||||||
|
<span class="num">02</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12a8 8 0 1 0 2.3-5.6M4 4v4h4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
|
<h3>Rehearse</h3>
|
||||||
|
<p>Before a change touches a customer, it's tried against the twin and the real history behind it. Where the agent isn't sure, it doesn't guess — it escalates to a person with full context.</p>
|
||||||
|
</li>
|
||||||
|
<li class="step reveal">
|
||||||
|
<span class="num">03</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19 19 5M9 5h10v10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
|
<h3>Autopilot</h3>
|
||||||
|
<p>The routine goes to an agent that lives by ticks: triage, execution, digests, plans — on schedule, with real tools. Every action it takes feeds back into the twin, so it gets sharper with time.</p>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ AUTOPILOT BENTO ============ -->
|
||||||
|
<section id="autopilot" class="sec sec-alt">
|
||||||
|
<div class="wrap">
|
||||||
|
<header class="sec-h reveal">
|
||||||
|
<p class="kicker">02 — The autopilot</p>
|
||||||
|
<h2>Not a chatbot. <span class="hl">A heartbeat.</span></h2>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="bento">
|
||||||
|
<article class="tile t-ladder reveal">
|
||||||
|
<h3>Four rhythms, one agent</h3>
|
||||||
|
<p>Each level sees deeper and acts bigger. Busy levels skip a beat instead of piling up; only digests travel upward.</p>
|
||||||
|
<ul class="ladder">
|
||||||
|
<li><code>1s</code><b>Reflexes</b><span>telemetry, alerts — no LLM</span></li>
|
||||||
|
<li><code>1m</code><b>Triage</b><span>inbox, quick fixes, routing</span></li>
|
||||||
|
<li><code>1h</code><b>Execution</b><span>tasks end-to-end + hourly digest</span></li>
|
||||||
|
<li><code>1d</code><b>Planning</b><span>larger work + daily manifest</span></li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="tile t-sign reveal">
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4 6v6c0 4.5 3.4 8.3 8 9 4.6-.7 8-4.5 8-9V6l-8-3Z M9 12l2 2 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
|
<h3>Signed, every step</h3>
|
||||||
|
<p>ed25519 signatures, hash-chained. One command checks that nothing was altered.</p>
|
||||||
|
<pre class="term" aria-label="Example terminal command"><span class="p">$</span> simbiot verify
|
||||||
|
<span class="ok">✓ chain intact</span></pre>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="tile t-esc reveal">
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
|
<h3>Knows its limits</h3>
|
||||||
|
<p>What it can't decide safely goes up the ladder — to a human — with the full story attached.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="tile t-cost reveal">
|
||||||
|
<h3>LLM only where it matters</h3>
|
||||||
|
<p>Reflexes and skipped beats cost nothing. Models are used for judgment, with a hard cap on steps per cycle.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="tile t-tools reveal">
|
||||||
|
<h3>Real tools, not suggestions</h3>
|
||||||
|
<div class="chips"><span>shell</span><span>files</span><span>knowledge search</span><span>mail</span><span>calls</span><span>payments</span><span>MCP</span><span>REST</span></div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ LABS ============ -->
|
||||||
|
<section id="labs" class="sec">
|
||||||
|
<div class="wrap">
|
||||||
|
<header class="sec-h reveal">
|
||||||
|
<p class="kicker">03 — The labs</p>
|
||||||
|
<h2>We don't sell what we <span class="hl">don't run.</span></h2>
|
||||||
|
<p class="lead">Shkor Labs is a network of real businesses inside Cooperative 42. Each lab is a founder plus their AI agents on shared infrastructure — and each one is a live test bench for the autopilot.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="labs">
|
||||||
|
<a class="lab lab-xl reveal" href="https://landing.cil.by" rel="noopener">
|
||||||
|
<span class="lab-tag">Core · autopilot</span>
|
||||||
|
<h3>Simbiot</h3>
|
||||||
|
<p>The rhythmic agent harness that runs the cooperative itself: task board, knowledge bases, decisions, treasury, digests. Every other lab sits on top of it.</p>
|
||||||
|
<span class="lab-go" aria-hidden="true">→</span>
|
||||||
|
</a>
|
||||||
|
<a class="lab reveal" href="https://reelsup.cil.by" rel="noopener">
|
||||||
|
<span class="lab-tag">Media</span>
|
||||||
|
<h3>ReelsUp</h3>
|
||||||
|
<p>Podcasts and YouTube into vertical clips for TikTok, Reels and Shorts — subtitles, hooks, 48-hour delivery.</p>
|
||||||
|
</a>
|
||||||
|
<a class="lab reveal" href="https://avatar.cil.by" rel="noopener">
|
||||||
|
<span class="lab-tag">Marketing</span>
|
||||||
|
<h3>Avatar</h3>
|
||||||
|
<p>A full-cycle AI SMM agency: short films, clips, your own avatar, promotion and paid targeting.</p>
|
||||||
|
</a>
|
||||||
|
<a class="lab reveal" href="https://mainbeam.cil.by" rel="noopener">
|
||||||
|
<span class="lab-tag">Consulting</span>
|
||||||
|
<h3>Mainbeam</h3>
|
||||||
|
<p>Rebuilding business processes around AI for companies of 15–500 people — from scattered experiments to P&L impact.</p>
|
||||||
|
</a>
|
||||||
|
<a class="lab reveal" href="https://malyarka.cil.by" rel="noopener">
|
||||||
|
<span class="lab-tag">Construction</span>
|
||||||
|
<h3>MalyarKa</h3>
|
||||||
|
<p>Estimate a job from the floor plan before you drive out. An engineer and mentor in the tradesperson's pocket.</p>
|
||||||
|
</a>
|
||||||
|
<a class="lab reveal" href="https://vybirai.cil.by" rel="noopener">
|
||||||
|
<span class="lab-tag">Fintech</span>
|
||||||
|
<h3>Vybirai</h3>
|
||||||
|
<p>Comparing loans, deposits and leasing in Belarus, so people keep more of their money.</p>
|
||||||
|
</a>
|
||||||
|
<a class="lab reveal" href="https://groupsign.cil.by" rel="noopener">
|
||||||
|
<span class="lab-tag">Trust infra</span>
|
||||||
|
<h3>GroupSign · WalletChain</h3>
|
||||||
|
<p>Group membership as signed blocks: every change to a team is co-signed by its members.</p>
|
||||||
|
</a>
|
||||||
|
<div class="lab lab-more reveal">
|
||||||
|
<p class="big">+ more</p>
|
||||||
|
<p>DEIP, Domostroy, LAIve Sports Studio, Probity, Totem, Yorio, PipL — and new labs every month.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ FILM ============ -->
|
||||||
|
<section class="sec sec-alt" aria-labelledby="film-h">
|
||||||
|
<div class="wrap">
|
||||||
|
<header class="sec-h reveal">
|
||||||
|
<p class="kicker">04 — In 86 seconds</p>
|
||||||
|
<h2 id="film-h">The autopilot, for business.</h2>
|
||||||
|
</header>
|
||||||
|
<div class="film reveal">
|
||||||
|
<video controls preload="none" poster="assets/film-poster.jpg" playsinline>
|
||||||
|
<source src="/assets/simbiot-harness-enterprise-en.mp4" type="video/mp4">
|
||||||
|
Your browser can't play this video. <a href="/assets/simbiot-harness-enterprise-en.mp4">Download it instead.</a>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ WORK WITH US ============ -->
|
||||||
|
<section id="work" class="sec">
|
||||||
|
<div class="wrap">
|
||||||
|
<header class="sec-h reveal">
|
||||||
|
<p class="kicker">05 — Work with us</p>
|
||||||
|
<h2>Two ways in.</h2>
|
||||||
|
</header>
|
||||||
|
<div class="paths">
|
||||||
|
<article class="path reveal">
|
||||||
|
<p class="path-k">For companies</p>
|
||||||
|
<h3>Put your business on autopilot</h3>
|
||||||
|
<p>Your own Simbiot — the same system our labs run in production, not a cut-down demo. Deployment and onboarding within the month you join; LLM access through the cooperative's router included.</p>
|
||||||
|
<p class="price">$100<span>/month</span></p>
|
||||||
|
<p class="muted">One price for everyone. 10 presale seats.</p>
|
||||||
|
<a class="btn" href="https://presale.cil.by/" rel="noopener"><span>Reserve a seat</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">For founders</p>
|
||||||
|
<h3>Start a lab</h3>
|
||||||
|
<p>Bring a business idea or an existing one. You get the autopilot, shared infrastructure, a site, payments and a community of founders running the same playbook. The lab shares a part of its revenue with the cooperative — that's the whole deal.</p>
|
||||||
|
<a class="btn btn-ghost" href="https://cil.by/join" rel="noopener"><span>Join Cooperative 42</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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ NOTES ============ -->
|
||||||
|
<section id="notes" class="cta">
|
||||||
|
<div class="grid-bg" aria-hidden="true"></div>
|
||||||
|
<div class="wrap cta-in reveal">
|
||||||
|
<p class="kicker">Lab notes</p>
|
||||||
|
<h2>Watch AI-run businesses<br>from the inside.</h2>
|
||||||
|
<p class="lead">Real digests, real failures, real numbers from the labs — and first access when new seats open.</p>
|
||||||
|
<form class="sub" data-sub action="/api/subscribe" method="post">
|
||||||
|
<label class="sr" for="cta-email">Work email</label>
|
||||||
|
<input id="cta-email" type="email" name="email" placeholder="you@company.com" autocomplete="email" required>
|
||||||
|
<input type="text" name="company" class="hp" tabindex="-1" autocomplete="off" aria-hidden="true">
|
||||||
|
<input type="hidden" name="source" value="v2-footer">
|
||||||
|
<button class="btn" type="submit"><span>Subscribe</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></button>
|
||||||
|
<p class="sub-msg" role="status" aria-live="polite"></p>
|
||||||
|
</form>
|
||||||
|
<p class="fine">We keep your email only to send lab notes. No sharing, no selling.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="foot">
|
||||||
|
<div class="wrap foot-in">
|
||||||
|
<p>© 2026 Shkor Labs LLC</p>
|
||||||
|
<nav aria-label="Footer">
|
||||||
|
<a href="https://cil.by" rel="noopener">Cooperative 42</a>
|
||||||
|
<a href="https://landing.cil.by" rel="noopener">Simbiot</a>
|
||||||
|
<a href="mailto:alex@shkor.com">alex@shkor.com</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||||
|
|
||||||
|
// reveal on scroll
|
||||||
|
var els = document.querySelectorAll('.reveal');
|
||||||
|
if (reduce || !('IntersectionObserver' in window)) {
|
||||||
|
els.forEach(function (e) { e.classList.add('in'); });
|
||||||
|
} else {
|
||||||
|
var io = new IntersectionObserver(function (entries) {
|
||||||
|
entries.forEach(function (en) { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } });
|
||||||
|
}, { rootMargin: '0px 0px -10% 0px' });
|
||||||
|
els.forEach(function (e, i) { e.style.setProperty('--d', (i % 4) * 70 + 'ms'); io.observe(e); });
|
||||||
|
}
|
||||||
|
|
||||||
|
// illustrative event stream in the hero
|
||||||
|
var log = document.getElementById('log');
|
||||||
|
var ev = [
|
||||||
|
['1s', 'telemetry', 'disk ok · queue ok'],
|
||||||
|
['1m', 'triage', 'new lead → sales lab'],
|
||||||
|
['1m', 'triage', 'invoice question → answered'],
|
||||||
|
['1h', 'task.done', 'weekly report sent'],
|
||||||
|
['1h', 'digest', 'hourly digest published'],
|
||||||
|
['1m', 'escalate', 'refund > limit → human'],
|
||||||
|
['1d', 'plan', 'tomorrow: 3 priorities'],
|
||||||
|
['1s', 'alert', 'site latency ↑ → retried'],
|
||||||
|
['1h', 'task.done', 'contract draft ready'],
|
||||||
|
['1d', 'manifest', 'risks + next steps']
|
||||||
|
];
|
||||||
|
var i = 0;
|
||||||
|
function push() {
|
||||||
|
var e = ev[i++ % ev.length], li = document.createElement('li');
|
||||||
|
li.innerHTML = '<code>' + e[0] + '</code><b>' + e[1] + '</b><span>' + e[2] + '</span>';
|
||||||
|
log.prepend(li);
|
||||||
|
while (log.children.length > 5) log.lastChild.remove();
|
||||||
|
}
|
||||||
|
for (var k = 0; k < 4; k++) push();
|
||||||
|
if (!reduce) setInterval(push, 1800);
|
||||||
|
|
||||||
|
// subscribe forms
|
||||||
|
document.querySelectorAll('form[data-sub]').forEach(function (f) {
|
||||||
|
f.addEventListener('submit', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var msg = f.querySelector('.sub-msg'), btn = f.querySelector('button');
|
||||||
|
btn.disabled = true; msg.textContent = 'Sending…'; msg.className = 'sub-msg';
|
||||||
|
fetch(f.action, { method: 'POST', body: new URLSearchParams(new FormData(f)) })
|
||||||
|
.then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
|
||||||
|
.then(function (res) {
|
||||||
|
msg.textContent = res.ok ? 'You’re in. First lab notes are on their way.' : (res.j.error || 'Something went wrong.');
|
||||||
|
msg.className = 'sub-msg ' + (res.ok ? 'ok' : 'err');
|
||||||
|
if (res.ok) f.reset();
|
||||||
|
})
|
||||||
|
.catch(function () { msg.textContent = 'Network error — please try again.'; msg.className = 'sub-msg err'; })
|
||||||
|
.finally(function () { btn.disabled = false; });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
266
sites/shkor-com/v2/styles.css
Normal file
266
sites/shkor-com/v2/styles.css
Normal file
|
|
@ -0,0 +1,266 @@
|
||||||
|
/* Shkor Labs v2 — Dark OLED + Bento + restrained HUD (design direction via ui-ux-pro-max) */
|
||||||
|
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap; src: url(assets/space-grotesk-latin.woff2) format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(assets/inter-400-latin.woff2) format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(assets/inter-600-latin.woff2) format("woff2"); }
|
||||||
|
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(assets/jetbrains-mono-400-latin.woff2) format("woff2"); }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #050506;
|
||||||
|
--bg-1: #0b0c0f;
|
||||||
|
--bg-2: #111318;
|
||||||
|
--line: rgba(255,255,255,.08);
|
||||||
|
--line-2: rgba(255,255,255,.14);
|
||||||
|
--fg: #f2f3f5;
|
||||||
|
--fg-2: #b4b8c2;
|
||||||
|
--fg-3: #80869a;
|
||||||
|
--acid: #c6ff4d; /* signal / primary accent */
|
||||||
|
--acid-dim: rgba(198,255,77,.12);
|
||||||
|
--cyan: #5ce1e6; /* HUD secondary */
|
||||||
|
--r: 20px;
|
||||||
|
--ease: cubic-bezier(.2,.7,.2,1);
|
||||||
|
--display: "Space Grotesk", system-ui, sans-serif;
|
||||||
|
--body: "Inter", system-ui, -apple-system, sans-serif;
|
||||||
|
--mono: "JetBrains Mono", ui-monospace, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
|
||||||
|
body { background: var(--bg); color: var(--fg-2); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
|
||||||
|
body::after { /* film grain */
|
||||||
|
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
a { color: inherit; }
|
||||||
|
::selection { background: var(--acid); color: #000; }
|
||||||
|
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; border-radius: 8px; }
|
||||||
|
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
||||||
|
.hp { position: absolute; left: -9999px; }
|
||||||
|
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--acid); color: #000; padding: 10px 14px; border-radius: 8px; font-weight: 600; }
|
||||||
|
.skip:focus { top: 12px; }
|
||||||
|
|
||||||
|
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
||||||
|
|
||||||
|
h1, h2, h3 { color: var(--fg); font-family: var(--display); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
|
||||||
|
h1 { font-size: clamp(48px, 8.4vw, 112px); }
|
||||||
|
h1 em { font-style: normal; color: var(--acid); position: relative; }
|
||||||
|
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 { margin-bottom: 20px; }
|
||||||
|
.fine, .muted { font-size: 14px; color: var(--fg-3); }
|
||||||
|
.fine { margin-top: 14px; }
|
||||||
|
code { font-family: var(--mono); }
|
||||||
|
|
||||||
|
/* ---------- nav ---------- */
|
||||||
|
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s var(--ease), border-color .3s; border-bottom: 1px solid transparent; }
|
||||||
|
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 72px; }
|
||||||
|
.nav { background: rgba(5,5,6,.6); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--line); }
|
||||||
|
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); font: 500 19px var(--display); letter-spacing: -.02em; }
|
||||||
|
.brand b { font-weight: 700; color: var(--acid); margin-left: 2px; }
|
||||||
|
.brand svg { width: 28px; height: 28px; color: var(--acid); animation: spin 18s linear infinite; }
|
||||||
|
.nav nav { display: flex; align-items: center; gap: 30px; font-size: 15px; }
|
||||||
|
.nav nav a:not(.btn) { text-decoration: none; color: var(--fg-3); transition: color .2s; }
|
||||||
|
.nav nav a:not(.btn):hover { color: var(--fg); }
|
||||||
|
|
||||||
|
/* ---------- buttons ---------- */
|
||||||
|
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
|
||||||
|
background: var(--acid); color: #0a0d02; font: 600 16px var(--body); text-decoration: none; white-space: nowrap;
|
||||||
|
transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
|
||||||
|
.btn svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
|
||||||
|
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(198,255,77,.28); }
|
||||||
|
.btn:hover svg { transform: translateX(3px); }
|
||||||
|
.btn:active { transform: translateY(0); }
|
||||||
|
.btn:disabled { opacity: .6; cursor: progress; }
|
||||||
|
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
|
||||||
|
.btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
|
||||||
|
.btn-ghost:hover { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--acid); }
|
||||||
|
|
||||||
|
/* ---------- form ---------- */
|
||||||
|
.sub { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; max-width: 540px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s; }
|
||||||
|
.sub:focus-within { box-shadow: inset 0 0 0 1px var(--acid), 0 0 0 6px var(--acid-dim); }
|
||||||
|
.sub input[type=email] { flex: 1 1 200px; min-width: 0; background: transparent; border: 0; color: var(--fg); font: 16px var(--body); padding: 0 18px; min-height: 52px; }
|
||||||
|
.sub input[type=email]:focus { outline: none; }
|
||||||
|
.sub input[type=email]::placeholder { color: #6a7083; }
|
||||||
|
.sub-msg { position: absolute; margin-top: 70px; font-size: 15px; }
|
||||||
|
.sub { position: relative; }
|
||||||
|
.sub-msg.ok { color: var(--acid); }
|
||||||
|
.sub-msg.err { color: #ff8f7f; }
|
||||||
|
|
||||||
|
/* ---------- hero ---------- */
|
||||||
|
.hero { position: relative; min-height: 100svh; padding: 140px 0 0; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
|
||||||
|
background: radial-gradient(800px 600px at 78% 40%, rgba(198,255,77,.08), transparent 65%), radial-gradient(700px 500px at 10% 0%, rgba(92,225,230,.06), transparent 60%); }
|
||||||
|
.grid-bg { position: absolute; inset: 0; pointer-events: none;
|
||||||
|
background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
|
||||||
|
background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 75%); }
|
||||||
|
.hero-in { position: relative; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
|
||||||
|
@media (min-width: 1000px) { .hero-in { grid-template-columns: 1.1fr .9fr; } }
|
||||||
|
.tag { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-2); margin-bottom: 28px; }
|
||||||
|
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 0 rgba(198,255,77,.6); animation: ping 2s var(--ease) infinite; }
|
||||||
|
|
||||||
|
/* orbit */
|
||||||
|
.orbit { position: relative; aspect-ratio: 1; width: min(100%, 520px); margin: 0 auto; }
|
||||||
|
.ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(255,255,255,.12); animation: spin linear infinite; }
|
||||||
|
.ring i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 16px 2px rgba(198,255,77,.7); }
|
||||||
|
.ring span { position: absolute; top: -10px; left: 50%; transform: translate(14px, -50%); font: 11px var(--mono); letter-spacing: .08em; color: var(--fg-3); white-space: nowrap; }
|
||||||
|
.r1 { inset: 34%; animation-duration: 6s; border-color: rgba(198,255,77,.35); }
|
||||||
|
.r2 { inset: 24%; animation-duration: 16s; animation-direction: reverse; }
|
||||||
|
.r3 { inset: 13%; animation-duration: 34s; }
|
||||||
|
.r3 i { background: var(--cyan); box-shadow: 0 0 16px 2px rgba(92,225,230,.7); }
|
||||||
|
.r4 { inset: 2%; animation-duration: 70s; animation-direction: reverse; border-style: solid; border-color: rgba(255,255,255,.06); }
|
||||||
|
.r4 i { background: var(--fg); box-shadow: 0 0 14px rgba(255,255,255,.6); }
|
||||||
|
.core { position: absolute; inset: 41%; border-radius: 50%; display: grid; place-content: center; text-align: center;
|
||||||
|
background: radial-gradient(circle at 35% 30%, #e6ff9e, var(--acid) 45%, #6f9a12); color: #0a0d02; box-shadow: 0 0 80px rgba(198,255,77,.35), inset 0 -6px 20px rgba(0,0,0,.25);
|
||||||
|
animation: beat 2s var(--ease) infinite; }
|
||||||
|
.core b { font: 700 clamp(12px, 1.4vw, 15px)/1 var(--display); letter-spacing: -.01em; }
|
||||||
|
.core small { font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-top: 4px; }
|
||||||
|
.hud { position: absolute; width: 22px; height: 22px; border-color: rgba(198,255,77,.5); border-style: solid; border-width: 0; }
|
||||||
|
.c-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
|
||||||
|
.c-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
|
||||||
|
.c-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
|
||||||
|
.c-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
|
||||||
|
.log { position: absolute; right: -8px; bottom: -6px; width: min(300px, 70%); padding: 14px 16px; border-radius: 14px; background: rgba(11,12,15,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 60px rgba(0,0,0,.5); }
|
||||||
|
.log-h { display: block; font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
|
||||||
|
.log ol { list-style: none; display: grid; gap: 6px; font: 12px/1.3 var(--mono); }
|
||||||
|
.log li { display: grid; grid-template-columns: 26px 70px 1fr; gap: 6px; color: var(--fg-3); animation: slide .4s var(--ease); }
|
||||||
|
.log li:first-child { color: var(--fg); }
|
||||||
|
.log li code { color: var(--acid); }
|
||||||
|
.log li b { font-weight: 400; color: var(--cyan); overflow: hidden; text-overflow: ellipsis; }
|
||||||
|
.log li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||||
|
|
||||||
|
/* marquee */
|
||||||
|
.marquee { position: relative; margin-top: 80px; border-block: 1px solid var(--line); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
|
||||||
|
.track { display: flex; width: max-content; animation: marquee 50s linear infinite; }
|
||||||
|
.track span { font: 500 22px var(--display); color: var(--fg-3); padding: 22px 28px; white-space: nowrap; letter-spacing: -.01em; }
|
||||||
|
.track span::after { content: "✳"; color: var(--acid); margin-left: 56px; font-size: 14px; vertical-align: middle; }
|
||||||
|
|
||||||
|
/* ---------- sections ---------- */
|
||||||
|
.sec { padding: 140px 0; position: relative; }
|
||||||
|
.sec-alt { background: var(--bg-1); border-block: 1px solid var(--line); }
|
||||||
|
.sec-h { margin-bottom: 64px; }
|
||||||
|
|
||||||
|
/* steps */
|
||||||
|
.steps { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
|
||||||
|
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
|
||||||
|
.step { position: relative; background: var(--bg); padding: 40px 32px 44px; transition: background .3s var(--ease); }
|
||||||
|
.step:hover { background: var(--bg-1); }
|
||||||
|
.step .num { position: absolute; top: 28px; right: 28px; font: 700 64px/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.12); letter-spacing: -.04em; }
|
||||||
|
.step:hover .num { -webkit-text-stroke-color: var(--acid); }
|
||||||
|
.ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--acid); background: var(--acid-dim); margin-bottom: 28px; }
|
||||||
|
.step h3 { font-size: 30px; }
|
||||||
|
.step p { color: var(--fg-3); font-size: 16px; }
|
||||||
|
|
||||||
|
/* bento */
|
||||||
|
.bento { display: grid; gap: 16px; grid-template-columns: 1fr; }
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
.bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); }
|
||||||
|
.t-ladder { grid-column: span 4; grid-row: span 2; }
|
||||||
|
.t-sign { grid-column: span 2; grid-row: span 2; }
|
||||||
|
.t-esc { grid-column: span 2; }
|
||||||
|
.t-cost { grid-column: span 2; }
|
||||||
|
.t-tools { grid-column: span 2; }
|
||||||
|
}
|
||||||
|
.tile { position: relative; padding: 32px; border-radius: var(--r); background: linear-gradient(180deg, var(--bg-2), var(--bg)); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
|
||||||
|
.tile:hover { box-shadow: inset 0 0 0 1px rgba(198,255,77,.35); transform: translateY(-3px); }
|
||||||
|
.tile p { color: var(--fg-3); font-size: 16px; }
|
||||||
|
.tile .ico { margin-bottom: 20px; }
|
||||||
|
.t-ladder { background: radial-gradient(600px 300px at 100% 0%, rgba(198,255,77,.08), transparent 70%), linear-gradient(180deg, var(--bg-2), var(--bg)); }
|
||||||
|
.t-ladder h3 { font-size: 32px; }
|
||||||
|
.ladder { list-style: none; margin-top: 32px; display: grid; gap: 10px; }
|
||||||
|
.ladder li { display: grid; grid-template-columns: 56px 130px 1fr; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px var(--line); }
|
||||||
|
.ladder code { font-size: 14px; color: #0a0d02; background: var(--acid); border-radius: 8px; text-align: center; padding: 4px 0; }
|
||||||
|
.ladder li:nth-child(2) code { opacity: .85; } .ladder li:nth-child(3) code { opacity: .7; } .ladder li:nth-child(4) code { opacity: .55; }
|
||||||
|
.ladder b { color: var(--fg); font: 600 16px var(--body); }
|
||||||
|
.ladder span { color: var(--fg-3); font-size: 15px; }
|
||||||
|
@media (max-width: 560px) { .ladder li { grid-template-columns: 48px 1fr; } .ladder span { grid-column: 2; } }
|
||||||
|
.term { margin-top: 28px; padding: 18px 20px; border-radius: 12px; background: #000; box-shadow: inset 0 0 0 1px var(--line); font: 14px/1.7 var(--mono); color: var(--fg); white-space: pre; overflow-x: auto; }
|
||||||
|
.term .p { color: var(--fg-3); } .term .ok { color: var(--acid); }
|
||||||
|
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
|
||||||
|
.chips span { font: 13px var(--mono); padding: 7px 12px; border-radius: 999px; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
|
||||||
|
|
||||||
|
/* labs */
|
||||||
|
.labs { display: grid; gap: 16px; grid-template-columns: 1fr; }
|
||||||
|
@media (min-width: 700px) { .labs { grid-template-columns: repeat(2, 1fr); } }
|
||||||
|
@media (min-width: 1000px) { .labs { grid-template-columns: repeat(4, 1fr); } .lab-xl { grid-column: span 2; grid-row: span 2; } .lab-more { grid-column: span 2; } }
|
||||||
|
.lab { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--r); text-decoration: none; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease), transform .3s var(--ease), background .3s; min-height: 220px; }
|
||||||
|
a.lab { cursor: pointer; }
|
||||||
|
a.lab:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(198,255,77,.45), 0 24px 60px rgba(0,0,0,.4); background: var(--bg-2); }
|
||||||
|
.lab-tag { margin-bottom: auto; padding-bottom: 32px; color: var(--fg-3); }
|
||||||
|
a.lab:hover .lab-tag { color: var(--acid); }
|
||||||
|
.lab h3 { font-size: 24px; }
|
||||||
|
.lab p { color: var(--fg-3); font-size: 15px; }
|
||||||
|
.lab-xl { padding: 40px; background: radial-gradient(500px 400px at 0% 100%, rgba(198,255,77,.14), transparent 70%), var(--bg-1); }
|
||||||
|
.lab-xl h3 { font-size: clamp(40px, 5vw, 64px); }
|
||||||
|
.lab-xl p { font-size: 17px; max-width: 42ch; color: var(--fg-2); }
|
||||||
|
.lab-go { position: absolute; top: 36px; right: 36px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #0a0d02; background: var(--acid); transition: transform .3s var(--ease); }
|
||||||
|
.lab-xl:hover .lab-go { transform: rotate(-45deg); }
|
||||||
|
.lab-more { background: transparent; box-shadow: inset 0 0 0 1px var(--line); border: 0; }
|
||||||
|
.lab-more .big { font: 700 36px var(--display); color: var(--fg); margin-bottom: auto; padding-bottom: 24px; letter-spacing: -.03em; }
|
||||||
|
|
||||||
|
/* film */
|
||||||
|
.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; }
|
||||||
|
.path .muted { margin-bottom: 28px; }
|
||||||
|
.path-alt .btn { margin-top: auto; }
|
||||||
|
.path-alt > p { margin-bottom: 36px; }
|
||||||
|
|
||||||
|
/* cta */
|
||||||
|
.cta { position: relative; padding: 160px 0; text-align: center; overflow: hidden; border-top: 1px solid var(--line);
|
||||||
|
background: radial-gradient(700px 400px at 50% 100%, rgba(198,255,77,.12), transparent 70%); }
|
||||||
|
.cta .grid-bg { mask-image: radial-gradient(ellipse 60% 70% at 50% 100%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 100%, #000 20%, transparent 70%); }
|
||||||
|
.cta-in { position: relative; display: flex; flex-direction: column; align-items: center; }
|
||||||
|
.cta h2 { max-width: none; }
|
||||||
|
.cta .lead { margin-left: auto; margin-right: auto; }
|
||||||
|
.cta .sub { width: 100%; }
|
||||||
|
.cta .sub-msg { left: 0; right: 0; }
|
||||||
|
|
||||||
|
/* footer */
|
||||||
|
.foot { border-top: 1px solid var(--line); padding: 36px 0; font-size: 14px; color: var(--fg-3); }
|
||||||
|
.foot-in { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
|
||||||
|
.foot nav { display: flex; flex-wrap: wrap; gap: 28px; }
|
||||||
|
.foot a { text-decoration: none; transition: color .2s; }
|
||||||
|
.foot a:hover { color: var(--acid); }
|
||||||
|
|
||||||
|
/* reveal */
|
||||||
|
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
|
||||||
|
.reveal.in { opacity: 1; transform: none; }
|
||||||
|
|
||||||
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
|
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.06); } 24% { transform: scale(1); } 36% { transform: scale(1.03); } }
|
||||||
|
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(198,255,77,.6); } 100% { box-shadow: 0 0 0 10px rgba(198,255,77,0); } }
|
||||||
|
@keyframes slide { from { opacity: 0; transform: translateY(-6px); } }
|
||||||
|
@keyframes marquee { to { transform: translateX(-50%); } }
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*, *::before, *::after { animation: none !important; transition: none !important; }
|
||||||
|
.reveal { opacity: 1; transform: none; }
|
||||||
|
html { scroll-behavior: auto; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
.nav nav a:not(.btn) { display: none; }
|
||||||
|
.sec { padding: 96px 0; }
|
||||||
|
.hero { padding-top: 112px; }
|
||||||
|
.ring span { display: none; }
|
||||||
|
.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; }
|
||||||
|
}
|
||||||
|
@media (max-width: 520px) {
|
||||||
|
.sub { border-radius: 20px; }
|
||||||
|
.sub .btn { width: 100%; }
|
||||||
|
.sub-msg { margin-top: 128px; }
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue