mirror of
https://github.com/mudler/LocalAI.git
synced 2026-08-01 02:49:51 -04:00
94d5affcea
* feat(website): split the site, move docs to /docs, add a landing page The Hugo docs site has always been localai.io itself, which left nowhere to explain what LocalAI is or show what the team builds. This adds a separate marketing site at the root and moves the documentation under /docs/. Docs: The existing site keeps its content tree and its Relearn theme, and now builds with baseURL <root>/docs/. Its _index.md, which held a hand written landing page, becomes a real documentation home. Every previously published URL keeps working. GitHub Pages has no server side rewrites, so .github/ci/gen-redirects.sh walks the built docs output and leaves a meta refresh plus a canonical link at each old root path. It covers bare .html files too, which is what keeps /gallery.html alive, and it never overwrites a path the marketing site already owns. Website: A second Hugo site under website/ with its own layouts and no external theme, so the marketing side does not have to fight Relearn's home rooted menu and asset pipeline. CI builds both and merges them into one Pages artifact. The design is derived from the project logo rather than invented: the navy of the triangle, the cyan of the llama, the purple of the speed bars. Those offset bars became the motion signature. The background renders a real depth-anything.cpp depth map as contour lines and switches to a locate-anything.cpp style detection overlay over the engines section. Also included: an /engines/ index driven entirely by data/engines.yaml, a /blog/ section with five posts written from the release notes and the engine benchmark suites, install.sh and a Kubernetes manifest since the site advertises both, and a rule in .agents/ that release preparation now includes a blog post and demo clips. Every figure on the site is derived from the repository or the GitHub API, not from memory. Correcting them against their sources found one error in README.md: voxtral-tts.c is text to speech, not speech to text. Signed-off-by: Ettore Di Giacinto <mudler@localai.io> Assisted-by: Claude Code:claude-opus-5 [Bash] [Edit] [Write] [Agent] * feat(website): add a star history chart, rewrite the history post in first person The history post read like a changelog written by a committee. It is now in Ettore's voice, first person, with the admissions left in. The numbers paragraph in particular read like a directory listing. It now says what the figures mean rather than which file they came from. Adds an interactive star history chart, built from the GitHub stargazers API rather than embedded from a third party, so the page makes no external request and cannot break when someone else's service is down. The four releases the post is organised around are marked on the curve, and the labels stack into rows because three of them land within two months of each other. The API stops paginating at 40,000 items, so the curve is measured up to December 2025 and the segment from there to today's total is drawn dashed, labelled as an estimate in the caption and in the tooltip. It is a straight line between two known points, and the chart says so rather than implying it is data. Also drops "marketing site" from the README heading and everywhere else it appeared, and calls it the main site instead. Signed-off-by: Ettore Di Giacinto <mudler@localai.io> Assisted-by: Claude Code:claude-opus-5 [Bash] [Edit] [Write] --------- Signed-off-by: Ettore Di Giacinto <mudler@localai.io> Co-authored-by: Ettore Di Giacinto <mudler@localai.io>
435 lines
30 KiB
CSS
435 lines
30 KiB
CSS
@font-face{font-family:'Geist Mono';src:url(/fonts/geist-mono.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:block}
|
|
@font-face{font-family:'Sora';src:url(/fonts/sora-700.woff2) format('woff2');font-weight:700;font-display:block}
|
|
|
|
/* Palette sampled straight from the LocalAI logo: the navy of the triangle,
|
|
the cyan of the llama, the purple of the speed bars, the off-white wordmark.
|
|
One deliberate visual world, so both theme toggles resolve the same. */
|
|
:root{
|
|
--navy0:#04131C; --navy1:#0B2330; --navy2:#0E2C3A; --deep:#010A11;
|
|
--line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.06);
|
|
--ink:#FBFDFE; --dim:rgba(246,251,253,.76); --faint:rgba(246,251,253,.46);
|
|
--veil:.43; --glowtext:0 1px 16px rgba(4,19,28,.92), 0 0 4px rgba(4,19,28,.7);
|
|
--cyan:#5FCDE4; --cyan-hi:#9BE6F5; --purple:#8181C4; --purple-hi:#ADA7EA;
|
|
--paper:#F4F6F5; --p-ink:#04131C; --p-dim:#51666F; --p-line:#DBE2E1;
|
|
--glitch:linear-gradient(90deg,var(--cyan),rgba(95,205,228,.15));
|
|
--display:'Sora'; --dtrack:-.032em; --dcase:none;
|
|
--pad:clamp(1.25rem,4vw,3.25rem); --band:clamp(4.5rem,8.5vw,7.5rem);
|
|
}
|
|
:root[data-theme="light"],:root[data-theme="dark"]{color-scheme:dark}
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:var(--navy0);color:var(--ink);
|
|
font-family:var(--display),ui-sans-serif,system-ui,sans-serif;font-variation-settings:'wdth' 100,'opsz' 18;
|
|
font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
|
a{color:inherit;text-decoration:none}
|
|
img,video{display:block;max-width:100%}
|
|
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
|
|
p{margin:0}
|
|
h1,h2,h3{margin:0;font-family:var(--display),system-ui,sans-serif;font-weight:700;
|
|
font-variation-settings:'wdth' 104,'wght' 780,'opsz' 144;
|
|
letter-spacing:var(--dtrack);line-height:1.04;text-wrap:balance}
|
|
.mono{font-family:'Geist Mono',ui-monospace,monospace}
|
|
.tnum{font-variant-numeric:tabular-nums}
|
|
|
|
/* the logo's speed bars, reused as the page's motion signature */
|
|
.bars{display:grid;gap:3px;width:74px}
|
|
.bars i{display:block;height:3px;border-radius:2px;background:var(--cyan);opacity:.85;
|
|
transform-origin:left;transform:scaleX(0);transition:transform .55s cubic-bezier(.16,1,.3,1)}
|
|
.bars i:nth-child(1){width:100%}
|
|
.bars i:nth-child(2){width:62%;background:var(--cyan);opacity:.42;transition-delay:.07s}
|
|
.bars i:nth-child(3){width:84%;transition-delay:.14s}
|
|
.bars i:nth-child(4){width:40%;background:var(--cyan);opacity:.28;transition-delay:.21s}
|
|
.in .bars i,.loaded .bars i{transform:scaleX(1)}
|
|
|
|
.prog{position:fixed;top:0;left:0;height:3px;width:100%;z-index:70}
|
|
.prog i{display:block;height:100%;width:0;background:var(--glitch)}
|
|
.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:1.6rem;height:62px;
|
|
padding:0 var(--pad);background:rgba(7,22,32,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line2)}
|
|
.brand{display:flex;align-items:center;gap:.55rem}
|
|
.brand img{height:32px;width:auto;transition:transform .3s cubic-bezier(.16,1,.3,1)}
|
|
.brand:hover img{transform:translateX(3px)}
|
|
.brand span{font-family:var(--display),sans-serif;font-size:1.06rem;font-weight:700;
|
|
letter-spacing:var(--dtrack);font-variation-settings:'wdth' 104,'wght' 760}
|
|
.top nav{display:none;gap:1.35rem;font-size:.87rem;color:var(--dim)}
|
|
@media(min-width:940px){.top nav{display:flex}}
|
|
.top nav a{position:relative;padding-bottom:3px}
|
|
.top nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--glitch);
|
|
transition:right .3s cubic-bezier(.16,1,.3,1)}
|
|
.top nav a:hover{color:var(--ink)} .top nav a:hover::after{right:0}
|
|
.topright{margin-left:auto;display:flex;align-items:center;gap:.55rem}
|
|
.pill{display:inline-flex;align-items:center;gap:.4rem;height:34px;padding:0 .8rem;border-radius:999px;
|
|
border:1px solid var(--line);font-family:'Geist Mono',monospace;font-size:.7rem;color:var(--dim)}
|
|
.pill:hover{border-color:var(--cyan);color:var(--ink)}
|
|
.go-btn{display:inline-flex;align-items:center;height:34px;padding:0 1rem;border-radius:999px;
|
|
background:var(--cyan);color:var(--deep);font-size:.83rem;font-variation-settings:'wght' 720}
|
|
.go-btn:hover{background:var(--cyan-hi)}
|
|
|
|
.shell{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
|
|
section{position:relative;padding:var(--band) 0}
|
|
.navy{background:rgba(4,19,28,var(--veil))} .surf{background:var(--navy1)} .deepbg{background:var(--deep)}
|
|
.navy h1,.navy h2,.navy h3,.navy .lede,.navy p,.navy .kicker{text-shadow:var(--glowtext)}
|
|
.navy .mono,.navy .chips span,.navy .apis span,.navy .sn__e span{text-shadow:0 1px 10px rgba(4,19,28,.85)}
|
|
#field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;transition:opacity .7s ease}
|
|
.top,main,footer{position:relative;z-index:1}
|
|
.paper{background:var(--paper);color:var(--p-ink)}
|
|
.paper p,.paper .lede{color:var(--p-dim)} .paper h2,.paper h3{color:var(--p-ink)}
|
|
.paper .kicker{color:#0F6F86} .paper .bars i{background:#0F6F86}
|
|
.paper .bars i:nth-child(2),.paper .bars i:nth-child(4){background:#0F6F86;opacity:.4}
|
|
.kicker{font-family:'Geist Mono',monospace;font-size:.69rem;letter-spacing:.16em;
|
|
text-transform:uppercase;color:var(--cyan);margin-top:.9rem;display:block}
|
|
h2{font-size:clamp(2.1rem,5vw,3.9rem)}
|
|
.lede{max-width:58ch;color:var(--dim);font-size:1.06rem;line-height:1.68;text-wrap:pretty}
|
|
.mt1{margin-top:.9rem}.mt2{margin-top:1.6rem}.mt3{margin-top:2.6rem}
|
|
|
|
/* hero */
|
|
.hero{padding-top:clamp(2.5rem,5vw,4.5rem);overflow:hidden}
|
|
.hero::before{content:"";position:absolute;inset:-25% 50% 35% -20%;
|
|
background:radial-gradient(closest-side,rgba(71,177,199,.22),transparent 70%);filter:blur(24px)}
|
|
.hero::after{content:"";position:absolute;inset:30% -18% -25% 52%;
|
|
background:radial-gradient(closest-side,rgba(129,129,196,.18),transparent 70%);filter:blur(24px)}
|
|
.hero .shell{position:relative}
|
|
.hero__grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
|
|
@media(min-width:1020px){.hero__grid{grid-template-columns:1.06fr .94fr}}
|
|
.hero h1{font-size:clamp(2.5rem,6.1vw,4.9rem);font-variation-settings:'wdth' 118,'wght' 880,'opsz' 144;
|
|
margin:1.2rem 0 0;line-height:1.02}
|
|
.hero h1 u{display:block;overflow:hidden;text-decoration:none}
|
|
.hero h1 u b{display:block;font-weight:inherit}
|
|
.hero h1 s{text-decoration:none;color:var(--cyan)}
|
|
.hero .bars{width:190px;margin-top:1.5rem}
|
|
.acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem;align-items:center}
|
|
.btn{display:inline-flex;align-items:center;gap:.55rem;height:48px;padding:0 1.25rem;border-radius:6px;
|
|
background:var(--cyan);color:var(--deep);font-size:.95rem;font-variation-settings:'wght' 730;
|
|
transition:transform .22s cubic-bezier(.16,1,.3,1),background .22s}
|
|
.btn:hover{background:var(--cyan-hi);transform:translateY(-2px)}
|
|
.btn--o{background:transparent;border:1px solid var(--line);color:var(--ink)}
|
|
.btn--o:hover{border-color:var(--cyan);background:rgba(71,177,199,.08)}
|
|
.paper .btn{background:var(--p-ink);color:var(--paper)}
|
|
.paper .btn--o{background:transparent;border-color:var(--p-line);color:var(--p-ink)}
|
|
.figures{display:grid;grid-template-columns:repeat(2,1fr);margin-top:2.6rem;border-top:1px solid var(--line2)}
|
|
@media(min-width:600px){.figures{grid-template-columns:repeat(4,1fr)}}
|
|
.figures div{padding:1rem .2rem;border-bottom:1px solid var(--line2)}
|
|
.figures b{display:block;font-family:var(--display),sans-serif;font-weight:700;font-size:1.72rem;
|
|
font-variation-settings:'wdth' 118,'wght' 820;letter-spacing:var(--dtrack)}
|
|
.figures span{font-family:'Geist Mono',monospace;font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
|
|
.figures b{color:var(--cyan)}
|
|
.screen{border-radius:12px;overflow:hidden;background:var(--deep);border:1px solid var(--line);
|
|
box-shadow:0 2px 0 rgba(255,255,255,.05) inset, 0 28px 60px -30px rgba(0,0,0,.9), 0 60px 120px -60px rgba(95,205,228,.28)}
|
|
.screen__bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;border-bottom:1px solid var(--line2);
|
|
font-family:'Geist Mono',monospace;font-size:.63rem;color:var(--faint)}
|
|
.screen__bar i{width:7px;height:7px;border-radius:50%;background:var(--cyan)}
|
|
.screen__bar b{margin-left:auto;font-weight:400;color:var(--dim)}
|
|
|
|
/* mission */
|
|
.mission{display:grid;margin-top:3rem;border-top:1px solid var(--line2)}
|
|
@media(min-width:900px){.mission{grid-template-columns:repeat(3,1fr)}}
|
|
.mi{padding:2rem 2.2rem 2.2rem 0;border-bottom:1px solid var(--line2)}
|
|
@media(min-width:900px){.mi+.mi{padding-left:2.4rem;border-left:1px solid var(--line2)}}
|
|
.mi__n{font-family:'Geist Mono',monospace;font-size:.67rem;letter-spacing:.14em;color:var(--faint);margin-top:1rem}
|
|
.mi h3{font-size:1.5rem;margin:.55rem 0 .7rem}
|
|
.mi p{color:var(--dim);font-size:.95rem}
|
|
.mi__meta{margin-top:1.2rem;font-family:'Geist Mono',monospace;font-size:.63rem;color:var(--faint)}
|
|
|
|
/* lanes */
|
|
.lanes{margin-top:2.4rem;border-top:1px solid var(--line2)}
|
|
.lane{display:grid;grid-template-columns:1fr auto;gap:.25rem 1.2rem;align-items:center;
|
|
padding:1.1rem .9rem 1.1rem 1rem;border-bottom:1px solid var(--line2);position:relative;
|
|
transition:background .28s,padding-left .28s}
|
|
@media(min-width:780px){.lane{grid-template-columns:9.5rem 1fr auto}}
|
|
.lane::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cyan);
|
|
transform:scaleY(0);transform-origin:top;transition:transform .32s cubic-bezier(.16,1,.3,1)}
|
|
.lane:hover::before{transform:scaleY(1)}
|
|
.lane:hover{background:rgba(95,205,228,.055);padding-left:1.6rem}
|
|
.lane__k{font-family:'Geist Mono',monospace;font-size:.72rem;letter-spacing:.12em;
|
|
text-transform:uppercase;color:var(--cyan)}
|
|
.lane__d{font-size:1rem}
|
|
@media(max-width:779px){.lane__d{grid-column:1/3}}
|
|
.lane__t{font-family:'Geist Mono',monospace;font-size:.64rem;color:var(--faint)}
|
|
.apis{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.6rem}
|
|
.apis span{font-family:'Geist Mono',monospace;font-size:.68rem;color:var(--dim);
|
|
border:1px solid var(--line);padding:.32rem .6rem;border-radius:999px}
|
|
|
|
/* community */
|
|
.headline{display:grid;gap:.85rem;margin-top:2.2rem}
|
|
@media(min-width:900px){.headline{grid-template-columns:repeat(3,1fr)}}
|
|
.hq{border:1px solid rgba(95,205,228,.34);border-radius:12px;padding:1.5rem 1.5rem 1.4rem;
|
|
background:linear-gradient(180deg,rgba(95,205,228,.09),rgba(255,255,255,.025));
|
|
display:flex;flex-direction:column;gap:.85rem;
|
|
box-shadow:0 20px 44px -28px rgba(0,0,0,.9), 0 0 40px -22px rgba(95,205,228,.5);
|
|
transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s}
|
|
.hq:hover{transform:translateY(-3px);border-color:rgba(95,205,228,.7)}
|
|
.hq blockquote{margin:0;font-size:1.06rem;line-height:1.5;color:var(--ink);
|
|
font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.022em}
|
|
.hq__w{font-family:'Geist Mono',monospace;font-size:.68rem;color:var(--cyan)}
|
|
.hq__w b{display:block;color:var(--dim);font-weight:400;font-size:.63rem;margin-top:.2rem}
|
|
.hq__go{margin-top:auto;font-family:'Geist Mono',monospace;font-size:.63rem;color:var(--faint)}
|
|
.hq:hover .hq__go{color:var(--cyan)}
|
|
.posts{display:grid;gap:.85rem;margin-top:2.2rem}
|
|
@media(min-width:700px){.posts{grid-template-columns:repeat(2,1fr)}}
|
|
@media(min-width:1050px){.posts{grid-template-columns:repeat(4,1fr)}}
|
|
.post{border:1px solid var(--line);border-radius:11px;padding:1.1rem 1.1rem 1.2rem;
|
|
background:rgba(255,255,255,.028);display:flex;flex-direction:column;gap:.6rem;min-height:158px;
|
|
box-shadow:0 16px 34px -26px rgba(0,0,0,.9);
|
|
transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s,box-shadow .28s}
|
|
.post:hover{transform:translateY(-3px);border-color:rgba(95,205,228,.5);
|
|
box-shadow:0 22px 44px -22px rgba(0,0,0,.95),0 0 36px -16px rgba(95,205,228,.45)}
|
|
.post__h{display:flex;align-items:center;gap:.5rem;font-family:'Geist Mono',monospace;font-size:.72rem;color:var(--cyan)}
|
|
.post__h em{margin-left:auto;font-style:normal;font-size:.6rem;color:var(--faint);letter-spacing:.1em;text-transform:uppercase}
|
|
.post p{color:var(--dim);font-size:.87rem}
|
|
.post__slot{color:var(--faint);font-size:.82rem;font-style:italic}
|
|
.post__go{margin-top:auto;font-family:'Geist Mono',monospace;font-size:.64rem;color:var(--faint)}
|
|
.post:hover .post__go{color:var(--cyan)}
|
|
|
|
/* senses */
|
|
.senses{margin-top:2.6rem;border-top:1px solid var(--line2)}
|
|
.sn{display:grid;gap:.4rem 1.8rem;padding:1.45rem .9rem 1.45rem 1rem;border-bottom:1px solid var(--line2);
|
|
align-items:baseline;position:relative;transition:background .3s,padding-left .3s}
|
|
@media(min-width:860px){.sn{grid-template-columns:12rem 1fr 16rem}}
|
|
.sn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--glitch);
|
|
transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.16,1,.3,1)}
|
|
.sn:hover::before{transform:scaleY(1)}
|
|
.sn:hover{background:rgba(71,177,199,.055);padding-left:1.6rem}
|
|
.sn__v{font-family:'Geist Mono',monospace;font-size:.77rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
|
|
|
|
.sn__v u{text-decoration:none;color:var(--faint)}
|
|
.sn p{color:var(--dim);font-size:.96rem;max-width:54ch}
|
|
.sn__e{display:flex;flex-wrap:wrap;gap:.35rem}
|
|
.sn__e span{font-family:'Geist Mono',monospace;font-size:.63rem;color:var(--dim);
|
|
border:1px solid var(--line);padding:.24rem .5rem;border-radius:999px}
|
|
.sn:hover .sn__e span{border-color:var(--cyan);color:var(--ink)}
|
|
|
|
/* made with */
|
|
.made{display:grid;gap:clamp(2rem,4vw,3.2rem);align-items:center;margin-top:2.6rem}
|
|
@media(min-width:980px){.made{grid-template-columns:1.15fr .85fr}}
|
|
.player{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
|
|
background:var(--deep);cursor:pointer;
|
|
box-shadow:0 2px 0 rgba(255,255,255,.05) inset, 0 30px 62px -32px rgba(0,0,0,.92),
|
|
0 60px 110px -60px rgba(95,205,228,.32)}
|
|
.player video{width:100%;display:block}
|
|
.player__ui{position:absolute;inset:0;display:grid;place-items:center;
|
|
background:linear-gradient(0deg,rgba(4,19,28,.55),rgba(4,19,28,.12));transition:opacity .35s}
|
|
.player.playing .player__ui{opacity:0;pointer-events:none}
|
|
.player__btn{display:flex;align-items:center;gap:.7rem;padding:.75rem 1.15rem .75rem .95rem;border-radius:999px;
|
|
background:rgba(95,205,228,.95);color:var(--deep);font-family:'Geist Mono',monospace;font-size:.76rem;
|
|
font-weight:600;box-shadow:0 12px 34px -12px rgba(95,205,228,.8);transition:transform .25s cubic-bezier(.16,1,.3,1)}
|
|
.player:hover .player__btn{transform:scale(1.05)}
|
|
.player__btn i{width:0;height:0;border-left:11px solid var(--deep);
|
|
border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:2px}
|
|
.player__tag{position:absolute;left:.8rem;top:.8rem;font-family:'Geist Mono',monospace;font-size:.6rem;
|
|
letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:rgba(4,19,28,.72);
|
|
border:1px solid var(--line);padding:.3rem .55rem;border-radius:999px;backdrop-filter:blur(6px)}
|
|
.recipe{display:grid;gap:1px;margin-top:1.6rem;background:var(--line2);border:1px solid var(--line2);border-radius:9px;overflow:hidden}
|
|
.recipe div{display:flex;gap:.9rem;align-items:baseline;padding:.75rem .9rem;background:rgba(4,19,28,.55)}
|
|
.recipe b{font-family:'Geist Mono',monospace;font-size:.66rem;color:var(--cyan);min-width:6.5rem}
|
|
.recipe span{color:var(--dim);font-size:.86rem}
|
|
|
|
/* media wall */
|
|
.wallhead{margin-top:3rem;padding-top:2.2rem;border-top:1px solid var(--line2)}
|
|
.wallhead h3{font-size:clamp(1.4rem,2.6vw,1.95rem);max-width:20ch}
|
|
.wallhead p{color:var(--dim);font-size:.97rem;max-width:58ch;margin-top:.7rem}
|
|
.wall{display:grid;gap:.85rem;margin-top:2.6rem}
|
|
@media(min-width:680px){.wall{grid-template-columns:repeat(2,1fr)}}
|
|
@media(min-width:1000px){.wall{grid-template-columns:repeat(3,1fr)}}
|
|
.wi{background:var(--deep);position:relative;overflow:hidden;display:block;border-radius:10px;
|
|
box-shadow:0 18px 40px -24px rgba(0,0,0,.9);
|
|
transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,outline-color .35s;
|
|
outline:1px solid transparent;outline-offset:-1px}
|
|
.wi:hover{transform:translateY(-4px);outline-color:rgba(95,205,228,.55);
|
|
box-shadow:0 26px 54px -22px rgba(0,0,0,.95), 0 0 46px -14px rgba(95,205,228,.5);z-index:2}
|
|
.wi video{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
|
|
.wi:hover video{transform:scale(1.03)}
|
|
.wi__c{position:absolute;left:0;right:0;bottom:0;padding:.75rem .85rem;display:flex;align-items:flex-end;gap:.6rem;
|
|
background:linear-gradient(0deg,rgba(5,15,23,.94),rgba(5,15,23,.5) 55%,transparent);
|
|
font-family:'Geist Mono',monospace;font-size:.66rem;color:var(--ink)}
|
|
.wi__c em{font-style:normal;color:var(--cyan)}
|
|
.wi__c b{margin-left:auto;font-weight:400;color:var(--faint);text-align:right}
|
|
.wi:hover .wi__c em{color:var(--cyan-hi)}
|
|
|
|
/* duo */
|
|
.duo{display:grid;gap:clamp(2rem,4.5vw,3.4rem);align-items:center;margin-top:2.6rem}
|
|
@media(min-width:980px){.duo{grid-template-columns:1fr 1fr}.duo--r .duo__m{order:-1}}
|
|
.claim{display:flex;flex-wrap:wrap;margin-top:1.8rem;border-top:1px solid var(--line2)}
|
|
.claim div{flex:1 1 8rem;padding:.9rem 1rem .9rem 0;border-bottom:1px solid var(--line2)}
|
|
.claim b{display:block;font-family:'Geist Mono',monospace;font-size:1.25rem;letter-spacing:-.02em;color:var(--cyan)}
|
|
.claim span{font-family:'Geist Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
|
|
|
|
/* engines */
|
|
.spot{display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:center;padding:clamp(2.4rem,5vw,3.6rem) 0;
|
|
border-top:1px solid var(--line2)}
|
|
@media(min-width:980px){.spot{grid-template-columns:1fr 1.1fr}.spot--r .spot__m{order:-1}}
|
|
.spot__n{font-family:'Geist Mono',monospace;font-size:.63rem;letter-spacing:.14em;color:var(--faint)}
|
|
.spot h3{font-family:'Geist Mono',monospace;font-size:1.55rem;font-variation-settings:normal;
|
|
letter-spacing:-.02em;color:var(--cyan-hi);margin:.7rem 0 .4rem}
|
|
.spot__h{font-size:clamp(1.4rem,2.6vw,2rem);max-width:17ch;margin:.2rem 0 .9rem}
|
|
.spot p{color:var(--dim);font-size:.97rem;max-width:50ch}
|
|
.spot__m{display:grid;gap:.7rem}
|
|
.spot__m figure{margin:0;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--deep);
|
|
box-shadow:0 2px 0 rgba(255,255,255,.05) inset, 0 24px 52px -28px rgba(0,0,0,.92), 0 48px 90px -54px rgba(95,205,228,.26)}
|
|
.spot__m figcaption{padding:.55rem .8rem;border-top:1px solid var(--line2);
|
|
font-family:'Geist Mono',monospace;font-size:.62rem;color:var(--faint)}
|
|
.spot__m img,.spot__m video{width:100%}
|
|
.facts{display:flex;flex-wrap:wrap;margin-top:1.4rem;border-top:1px solid var(--line2)}
|
|
.facts div{flex:1 1 7.5rem;padding:.85rem 1rem .85rem 0;border-bottom:1px solid var(--line2)}
|
|
.facts b{display:block;font-family:'Geist Mono',monospace;font-size:1.15rem;color:var(--cyan);letter-spacing:-.02em}
|
|
.facts span{font-family:'Geist Mono',monospace;font-size:.57rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
|
|
.quiet{display:grid;gap:1.4rem;margin-top:1.6rem;padding:1.4rem 1.5rem;border:1px dashed var(--line);
|
|
border-radius:9px;background:rgba(11,35,48,.5)}
|
|
@media(min-width:820px){.quiet{grid-template-columns:1.25fr .75fr;align-items:center}}
|
|
.quiet h4{margin:.5rem 0 .5rem;font-family:'Geist Mono',monospace;font-size:1.1rem;font-weight:600;color:var(--ink)}
|
|
.quiet p{color:var(--dim);font-size:.9rem}
|
|
.quiet__tag{font-family:'Geist Mono',monospace;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
|
|
.quiet video{border:1px solid var(--line2);border-radius:9px;box-shadow:0 18px 40px -26px rgba(0,0,0,.9)}
|
|
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1.3rem}
|
|
.chips span{font-family:'Geist Mono',monospace;font-size:.63rem;color:var(--dim);
|
|
border:1px solid var(--line);padding:.24rem .5rem;border-radius:999px}
|
|
.reel{margin-top:2.2rem;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:.85rem 0;
|
|
overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
|
|
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
|
|
.reel__t{display:flex;gap:1.9rem;width:max-content;animation:roll 46s linear infinite}
|
|
.reel span{font-family:'Geist Mono',monospace;font-size:.78rem;color:var(--dim);white-space:nowrap}
|
|
.reel span::before{content:"/ ";color:var(--cyan)}
|
|
@keyframes roll{to{transform:translateX(-50%)}}
|
|
|
|
/* apex */
|
|
.tw{overflow-x:auto;margin-top:2.2rem;border:1px solid var(--p-line);border-radius:8px;background:#fff}
|
|
table{border-collapse:collapse;width:100%;min-width:640px;font-variant-numeric:tabular-nums}
|
|
th,td{text-align:right;padding:.72rem .9rem;font-family:'Geist Mono',monospace;font-size:.79rem;
|
|
border-bottom:1px solid var(--p-line);white-space:nowrap;color:var(--p-ink)}
|
|
th{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--p-dim);background:var(--paper)}
|
|
td:first-child,th:first-child{text-align:left}
|
|
tr[data-a] td{background:rgba(71,177,199,.13)}
|
|
tr[data-a] td:first-child{font-weight:600;color:#0F6F86}
|
|
tbody tr:hover td{background:rgba(95,205,228,.10)}
|
|
.sizes{display:grid;gap:.6rem;margin-top:2rem}
|
|
.sz{display:grid;grid-template-columns:10.5rem 1fr 4.4rem;gap:.8rem;align-items:center;
|
|
font-family:'Geist Mono',monospace;font-size:.73rem;color:var(--p-dim)}
|
|
.sz i{display:block;height:14px;border-radius:3px;background:linear-gradient(90deg,#0B5C72,#7FC9DC);
|
|
transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.16,1,.3,1)}
|
|
.in .sz i{transform:scaleX(1)}
|
|
.sz u{text-decoration:none;text-align:right;color:var(--p-ink)}
|
|
|
|
/* cluster */
|
|
.scene{display:grid;gap:2.4rem;margin-top:2.6rem}
|
|
@media(min-width:980px){.scene{grid-template-columns:1fr 1fr;align-items:start}}
|
|
.pin{position:sticky;top:100px}
|
|
.st{padding:1.55rem 1.3rem 1.65rem 1.4rem;border-top:1px solid var(--line2);position:relative;transition:background .3s}
|
|
.st::before{content:"";position:absolute;left:0;top:-1px;bottom:0;width:3px;background:var(--glitch);
|
|
transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.16,1,.3,1)}
|
|
.st[data-on="1"]::before{transform:scaleY(1)}
|
|
.st[data-on="1"]{background:rgba(71,177,199,.05)}
|
|
.st h3{font-size:1.18rem;margin-bottom:.45rem}
|
|
.st p{color:var(--dim);font-size:.92rem}
|
|
.st__k{font-family:'Geist Mono',monospace;font-size:.63rem;color:var(--faint);letter-spacing:.12em}
|
|
.rig{border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.028);padding:1.5rem}
|
|
.nodes{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
|
|
.nd{border:1px solid var(--line);border-radius:7px;background:rgba(0,0,0,.28);padding:.85rem .7rem;
|
|
font-family:'Geist Mono',monospace;font-size:.6rem;color:var(--faint);transition:all .4s}
|
|
.nd b{display:block;color:var(--dim);font-size:.74rem;font-weight:500;margin-bottom:.3rem}
|
|
.nd[data-live="1"]{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 24px -8px var(--cyan)}
|
|
.nd[data-live="1"] b{color:var(--ink)}
|
|
.link{height:1px;background:var(--line2);margin:1.2rem 0;position:relative;overflow:hidden}
|
|
.link::after{content:"";position:absolute;inset:0;width:32%;background:var(--glitch);animation:sweep 3.2s linear infinite}
|
|
@keyframes sweep{from{transform:translateX(-110%)}to{transform:translateX(340%)}}
|
|
|
|
/* traction */
|
|
.trend{display:grid;gap:1.6rem;align-items:center;margin-top:2.4rem;padding:1.4rem 1.5rem;
|
|
border:1px solid var(--line);border-radius:10px;background:rgba(95,205,228,.055)}
|
|
@media(min-width:820px){.trend{grid-template-columns:auto 1fr}}
|
|
.trend img{width:230px;height:auto;border-radius:5px}
|
|
.trend p{color:var(--dim);font-size:.94rem;max-width:56ch}
|
|
.trend b{color:var(--ink);font-weight:600}
|
|
.big{display:grid;grid-template-columns:repeat(2,1fr);margin-top:2.4rem;border-top:1px solid var(--line2)}
|
|
@media(min-width:760px){.big{grid-template-columns:repeat(3,1fr)}}
|
|
@media(min-width:1060px){.big{grid-template-columns:repeat(6,1fr)}}
|
|
.big div{padding:1.1rem .3rem;border-bottom:1px solid var(--line2)}
|
|
.big b{display:block;font-family:var(--display),sans-serif;font-weight:700;font-size:1.62rem;font-variation-settings:'wdth' 118,'wght' 820;
|
|
letter-spacing:-.02em;color:var(--cyan);font-variant-numeric:tabular-nums}
|
|
.big span{font-family:'Geist Mono',monospace;font-size:.58rem;letter-spacing:.11em;
|
|
text-transform:uppercase;color:var(--faint)}
|
|
.tl{margin-top:2.6rem;border-top:1px solid var(--line2);overflow-x:auto}
|
|
.tl__t{display:flex;gap:0;min-width:min-content;padding-top:1.4rem}
|
|
.tl__i{flex:0 0 15rem;padding:0 1.3rem 0 0;position:relative}
|
|
.tl__i::before{content:"";position:absolute;left:0;top:-1.4rem;width:7px;height:7px;border-radius:50%;
|
|
background:var(--cyan);transform:translateY(-50%) scale(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}
|
|
.in .tl__i::before{transform:translateY(-50%) scale(1)}
|
|
.tl__i:nth-child(1)::before{transition-delay:.05s}.tl__i:nth-child(2)::before{transition-delay:.13s}
|
|
.tl__i:nth-child(3)::before{transition-delay:.21s}.tl__i:nth-child(4)::before{transition-delay:.29s}
|
|
.tl__i:nth-child(5)::before{transition-delay:.37s}.tl__i:nth-child(6)::before{transition-delay:.45s}
|
|
.tl__d{font-family:'Geist Mono',monospace;font-size:.63rem;letter-spacing:.1em;color:var(--cyan)}
|
|
.tl__i h4{margin:.5rem 0 .35rem;font-family:var(--display),sans-serif;font-weight:700;
|
|
font-size:1rem;font-variation-settings:'wdth' 104,'wght' 760;letter-spacing:var(--dtrack)}
|
|
.tl__i p{color:var(--dim);font-size:.83rem}
|
|
.langs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.6rem}
|
|
.langs span{font-family:'Geist Mono',monospace;font-size:.66rem;color:var(--faint);
|
|
border:1px solid var(--line2);padding:.28rem .5rem;border-radius:999px}
|
|
|
|
/* cards */
|
|
.cards{display:grid;gap:1.15rem;margin-top:2.4rem}
|
|
@media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
|
|
.cd{border:1px solid var(--line);border-radius:10px;padding:1.35rem 1.3rem 1.45rem;background:rgba(255,255,255,.028);
|
|
display:flex;flex-direction:column;gap:.55rem;min-height:196px;
|
|
transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s}
|
|
.cd:hover{transform:translateY(-4px);border-color:var(--cyan)}
|
|
.cd__k{font-family:'Geist Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
|
|
.cd h3{font-size:1.12rem} .cd p{color:var(--dim);font-size:.89rem}
|
|
.cd__go{margin-top:auto;font-family:'Geist Mono',monospace;font-size:.68rem;color:var(--cyan)}
|
|
.paper .cd{background:#fff;border-color:var(--p-line)}
|
|
.paper .cd p{color:var(--p-dim)} .paper .cd__k,.paper .cd__go{color:#0F6F86}
|
|
.paper .cd:hover{border-color:#0F6F86}
|
|
.cite{font-family:'Geist Mono',monospace;font-size:.63rem;color:var(--faint);margin-top:auto}
|
|
|
|
/* terminal */
|
|
.term{border:1px solid var(--line);border-radius:10px;background:var(--deep);overflow:hidden;margin-top:2.2rem}
|
|
.term__b{display:flex;gap:.5rem;align-items:center;padding:.6rem .85rem;border-bottom:1px solid var(--line2);
|
|
font-family:'Geist Mono',monospace;font-size:.63rem;color:var(--faint)}
|
|
.term pre{margin:0;padding:1.2rem;overflow-x:auto;font-family:'Geist Mono',monospace;font-size:.83rem;line-height:1.95}
|
|
.term .p{color:var(--cyan)} .term .c{color:var(--cyan-hi)} .term .o{color:var(--dim)} .term .h{color:var(--ink)}
|
|
.cpy{margin-left:auto;font-family:'Geist Mono',monospace;font-size:.63rem;color:var(--cyan);
|
|
background:none;border:0;cursor:pointer;padding:0}
|
|
.alts{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}
|
|
.alts span{font-family:'Geist Mono',monospace;font-size:.65rem;color:var(--faint);
|
|
border:1px solid var(--line2);padding:.3rem .55rem;border-radius:4px}
|
|
.tabs{display:flex;gap:.3rem;margin-bottom:-1px;position:relative;z-index:2}
|
|
.tab{font-family:'Geist Mono',monospace;font-size:.68rem;letter-spacing:.04em;cursor:pointer;
|
|
color:var(--faint);background:transparent;border:1px solid var(--line2);border-bottom-color:transparent;
|
|
padding:.5rem .8rem;border-radius:7px 7px 0 0;transition:color .2s,background .2s,border-color .2s}
|
|
.tab:hover{color:var(--dim)}
|
|
.tab[aria-selected="true"]{color:var(--deep);background:var(--cyan);border-color:var(--cyan);font-weight:600}
|
|
.pane[hidden]{display:none}
|
|
.ln{display:block;opacity:0;transform:translateY(3px);
|
|
transition:opacity .32s ease,transform .32s cubic-bezier(.16,1,.3,1)}
|
|
.ln.on{opacity:1;transform:none}
|
|
.caret{display:inline-block;width:.55em;height:1em;vertical-align:-.14em;margin-left:.15em;
|
|
background:var(--cyan);animation:blink 1.05s steps(2,start) infinite}
|
|
@keyframes blink{50%{opacity:0}}
|
|
@media(prefers-reduced-motion:reduce){.ln{opacity:1;transform:none}.caret{animation:none}}
|
|
|
|
.marks{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
|
|
.marks span{font-family:'Geist Mono',monospace;font-size:.71rem;color:var(--dim);
|
|
border:1px solid var(--line);padding:.42rem .72rem;border-radius:999px}
|
|
.marks span:hover{border-color:var(--cyan);color:var(--ink)}
|
|
|
|
|
|
|
|
footer{background:var(--deep);border-top:1px solid var(--line2);padding:3rem 0 4rem;color:var(--faint)}
|
|
.foot{display:grid;gap:2rem}
|
|
@media(min-width:760px){.foot{grid-template-columns:1.5fr 1fr 1fr 1fr}}
|
|
.foot h4{margin:0 0 .8rem;font-family:'Geist Mono',monospace;font-size:.62rem;letter-spacing:.13em;
|
|
text-transform:uppercase;color:var(--dim);font-variation-settings:normal}
|
|
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;font-size:.88rem}
|
|
.foot a{color:var(--dim)} .foot a:hover{color:var(--ink)}
|
|
.foot img{height:64px;width:auto}
|
|
.foot__n{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line2);
|
|
font-family:'Geist Mono',monospace;font-size:.64rem;display:flex;flex-wrap:wrap;gap:.9rem}
|
|
|
|
.rv{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
|
|
.rv.in{opacity:1;transform:none}
|
|
.hero h1 u b{transform:translateY(108%);transition:transform .95s cubic-bezier(.16,1,.3,1)}
|
|
.loaded .hero h1 u:nth-child(2) b{transition-delay:.09s}
|
|
.loaded .hero h1 u b{transform:none}
|
|
.fd{opacity:0;transform:translateY(12px);transition:opacity .85s ease .35s,transform .85s cubic-bezier(.16,1,.3,1) .35s}
|
|
.loaded .fd{opacity:1;transform:none}
|
|
@media(prefers-reduced-motion:reduce){
|
|
*,*::before,*::after{animation:none!important;transition:none!important}
|
|
.rv,.fd{opacity:1;transform:none}.hero h1 u b{transform:none}
|
|
.bars i,.sz i{transform:scaleX(1)}
|
|
}
|