/* WCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum): the sticky header must never cover an element that receives focus via keyboard or in-page anchor. */ html{scroll-padding-top:5rem} /* WCAG 2.1 AA (1.4.11 Non-text Contrast): form-control boundaries must reach 3:1 against their adjacent background. --c-line stays for decorative dividers, which are exempt. Light 3.33:1 vs bg / 3.55:1 vs surface; dark 3.81 / 3.57. */ :root{--c-field:126 138 142} .dark{--c-field:106 112 114} /* Bitpute brand accents — colourful cards & self-hosted tool styling. Uses the site's own CSS tokens plus a small brand palette. */ :root{ --vw-violet:139 92 246; --vw-blue:59 130 246; --vw-cyan:20 184 166; --vw-amber:217 119 6; --vw-rose:225 29 72; --vw-emerald:16 122 95; } .dark{ --vw-violet:167 139 250; --vw-blue:96 165 250; --vw-cyan:45 212 191; --vw-amber:245 158 11; --vw-rose:251 113 133; --vw-emerald:52 187 148; } /* colourful category cards on the homepage */ .vw-card{position:relative;border-radius:1rem;padding:1.25rem 1.25rem 1.35rem; border:1px solid rgb(var(--c-line)); background:linear-gradient(180deg, rgb(var(--vw-c1)/.06), rgb(var(--c-surface)) 46%); box-shadow:0 1px 2px rgb(0 0 0 / .04), 0 14px 32px -24px rgb(var(--vw-c1)/.55);overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;} .vw-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(130% 90% at 100% 0%, rgb(var(--vw-c1)/.07), transparent 55%);} .vw-card>*{position:relative;z-index:1;} .vw-card:hover{transform:translateY(-4px);border-color:rgb(var(--vw-c1)/.55); box-shadow:0 18px 42px -18px rgb(var(--vw-c1)/.55);} .vw-card::before{content:"";position:absolute;inset:0 auto auto 0;height:5px;width:100%;z-index:2; background:linear-gradient(90deg, rgb(var(--vw-c1)), rgb(var(--vw-c2)));} .vw-card .vw-ic{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center; border-radius:.7rem;color:#fff;margin-bottom:.85rem; background:linear-gradient(135deg, rgb(var(--vw-c1)), rgb(var(--vw-c2))); box-shadow:0 6px 16px -6px rgb(var(--vw-c1) / .6);} .vw-card h3{font-family:var(--font-display,inherit);font-weight:600;letter-spacing:-.01em; font-size:1.05rem;color:rgb(var(--c-ink));margin-bottom:.3rem;} .vw-card p{font-size:.9rem;line-height:1.55;color:rgb(var(--c-muted));} .vw-card .vw-go{margin-top:.7rem;display:inline-flex;align-items:center;gap:.3rem; font-size:.82rem;font-weight:600;color:rgb(var(--vw-c1));transition:gap .16s ease;} .vw-card:hover .vw-go{gap:.55rem;} .vw-badge{font-size:.6rem;vertical-align:middle;margin-left:.2rem;padding:.12rem .42rem;border-radius:.4rem; font-weight:700;text-transform:uppercase;letter-spacing:.05em; background:rgb(var(--vw-c1)/.15);color:rgb(var(--vw-c1));} .vw-tint-violet{--vw-c1:var(--vw-violet);--vw-c2:var(--vw-blue);} .vw-tint-cyan{--vw-c1:var(--vw-cyan);--vw-c2:var(--vw-blue);} .vw-tint-amber{--vw-c1:var(--vw-amber);--vw-c2:var(--vw-rose);} .vw-tint-emerald{--vw-c1:var(--vw-emerald);--vw-c2:var(--vw-cyan);} .vw-tint-rose{--vw-c1:var(--vw-rose);--vw-c2:var(--vw-violet);} .vw-tint-blue{--vw-c1:var(--vw-blue);--vw-c2:var(--vw-cyan);} /* self-hosted tool controls (Ollama page) */ .vw-tool label{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase; letter-spacing:.08em;color:rgb(var(--c-muted));margin-bottom:.35rem;} .vw-tool select,.vw-tool input{width:100%;border-radius:.6rem;border:1px solid rgb(var(--c-field)); background:rgb(var(--c-raised));color:rgb(var(--c-ink));padding:.55rem .7rem;font-size:.92rem;} .vw-tool select:focus,.vw-tool input:focus{outline:2px solid rgb(var(--vw-violet) / .5);outline-offset:1px;} .vw-verdict{border-radius:.9rem;padding:1rem 1.25rem;font-weight:600;display:flex; align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;} .vw-fit{background:rgb(var(--vw-emerald) / .12);color:rgb(var(--vw-emerald));border:1px solid rgb(var(--vw-emerald) / .4);} .vw-tight{background:rgb(var(--vw-amber) / .12);color:rgb(var(--vw-amber));border:1px solid rgb(var(--vw-amber) / .4);} .vw-no{background:rgb(var(--vw-rose) / .12);color:rgb(var(--vw-rose));border:1px solid rgb(var(--vw-rose) / .4);} .vw-bar{position:relative;height:2.25rem;border-radius:.6rem;overflow:hidden; border:1px solid rgb(var(--c-line));background:rgb(var(--c-raised));display:flex;} .vw-seg-w{background:rgb(var(--vw-violet));} .vw-seg-k{background:rgb(var(--vw-cyan));} .vw-seg-o{background:rgb(var(--c-slateseg));} .vw-stat{border:1px solid rgb(var(--c-line));border-radius:.75rem;padding:.9rem 1rem;background:rgb(var(--c-surface));} .vw-stat .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:rgb(var(--c-muted));} .vw-stat .v{font-family:var(--font-mono,monospace);font-size:1.3rem;color:rgb(var(--c-ink));margin-top:.15rem;} /* ── Positioning section: "where Bitpute fits" ── */ .vw-pos{max-width:64rem;margin:4.5rem auto 0;padding:0 .25rem;} .vw-pos-h{font-family:var(--font-display,inherit);font-weight:600;letter-spacing:-.02em; font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.15;color:rgb(var(--c-ink));max-width:52rem;} .vw-pos-h em{font-style:italic;color:rgb(var(--vw-violet));} .vw-pos-sub{margin-top:1rem;max-width:46rem;font-size:16px;line-height:1.65;color:rgb(var(--c-muted));} .vw-pos-grid{margin-top:2rem;display:grid;gap:1.25rem;grid-template-columns:1fr;} @media(min-width:820px){.vw-pos-grid{grid-template-columns:1fr 1fr;}} .vw-pos-col{border-radius:1.1rem;border:1px solid rgb(var(--c-line));background:rgb(var(--c-surface)); padding:1.5rem 1.5rem 1.65rem;position:relative;overflow:hidden;} .vw-pos-us{border-color:rgb(var(--vw-violet)/.4); box-shadow:0 18px 45px -22px rgb(var(--vw-violet)/.55);} .vw-pos-us::before{content:"";position:absolute;inset:0 0 auto 0;height:4px; background:linear-gradient(90deg,rgb(var(--vw-violet)),rgb(var(--vw-cyan)));} .vw-pos-tag{display:inline-block;font-family:var(--font-mono,monospace);font-size:11.5px; text-transform:uppercase;letter-spacing:.1em;color:rgb(var(--c-muted)); border:1px solid rgb(var(--c-line));border-radius:.5rem;padding:.28rem .6rem;margin-bottom:.9rem;} .vw-pos-tag-us{color:rgb(var(--vw-violet));border-color:rgb(var(--vw-violet)/.4); background:rgb(var(--vw-violet)/.08);} .vw-pos-lead{font-size:15.5px;color:rgb(var(--c-ink));font-weight:500;margin-bottom:1rem;line-height:1.5;} .vw-pos-lead strong{color:rgb(var(--vw-violet));} .vw-pos-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem;} .vw-pos-list li{position:relative;padding-left:1.75rem;font-size:14.5px;line-height:1.45;color:rgb(var(--c-muted));} .vw-pos-list li::before{position:absolute;left:0;top:0;font-weight:700;font-size:14px; display:inline-flex;width:1.15rem;height:1.15rem;align-items:center;justify-content:center; border-radius:50%;} .vw-pos-list li.yes{color:rgb(var(--c-ink));} .vw-pos-list li.yes::before{content:"\2713";background:rgb(var(--vw-emerald)/.15);color:rgb(var(--vw-emerald));} .vw-pos-list li.no::before{content:"\2013";background:rgb(var(--c-raised));color:rgb(var(--c-muted));} .vw-pos-cta{margin-top:1.35rem;display:inline-flex;align-items:center;gap:.4rem;font-size:14.5px; font-weight:600;color:#fff;padding:.6rem 1.05rem;border-radius:.65rem; background:linear-gradient(135deg,rgb(var(--vw-violet)),rgb(var(--vw-blue))); box-shadow:0 10px 24px -10px rgb(var(--vw-violet)/.7);transition:transform .15s ease;} .vw-pos-cta:hover{transform:translateY(-1px);} .vw-pos-foot{margin-top:1.6rem;font-size:14px;line-height:1.6;color:rgb(var(--c-muted));max-width:50rem;} .vw-pos-foot a{color:rgb(var(--vw-violet));text-decoration:underline;text-underline-offset:2px;} /* ── Ecosystem strip: alongside HF / Ollama / LM Studio / review sites ── */ .vw-eco-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.25rem;} @media(min-width:680px){.vw-eco-grid{grid-template-columns:1fr 1fr;}} @media(min-width:1024px){.vw-eco-grid{grid-template-columns:repeat(4,1fr);}} .vw-eco-card{border:1px solid rgb(var(--c-line));border-radius:.9rem;background:rgb(var(--c-surface)); padding:1.1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.55rem; transition:border-color .15s ease, transform .15s ease;} .vw-eco-card:hover{transform:translateY(-3px);border-color:rgb(var(--ec,var(--vw-violet))/.5); box-shadow:0 16px 34px -18px rgb(var(--ec,var(--vw-violet))/.45);} .vw-eco-name{font-family:var(--font-mono,monospace);font-size:11.5px;text-transform:uppercase; letter-spacing:.1em;color:rgb(var(--ec,var(--c-muted)));border:1px solid rgb(var(--ec,var(--c-line))/.4); background:rgb(var(--ec,var(--c-line))/.07);border-radius:.45rem;padding:.22rem .55rem;align-self:flex-start;} .vw-eco-does{font-size:13.5px;line-height:1.5;color:rgb(var(--c-ink));} .vw-eco-gap{font-size:13px;line-height:1.5;color:rgb(var(--c-muted));font-style:italic;} .vw-eco-link{margin-top:auto;padding-top:.35rem;font-size:13px;font-weight:600; color:rgb(var(--ec,var(--vw-violet)));} .vw-eco-link:hover{text-decoration:underline;text-underline-offset:2px;} /* ── "One input, six answers" band ── */ .vw-six{margin-top:2.4rem;position:relative;overflow:hidden;border:1px solid rgb(var(--c-line));border-radius:1.1rem; background:linear-gradient(120deg, rgb(var(--vw-violet)/.07), rgb(var(--vw-cyan)/.06)); padding:1.6rem 1.6rem 1.7rem;display:grid;gap:1.4rem;} .vw-six::before{content:"";position:absolute;inset:0 0 auto 0;height:3px; background:linear-gradient(90deg,rgb(var(--vw-violet)),rgb(var(--vw-cyan)),rgb(var(--vw-amber)),rgb(var(--vw-rose)));} @media(min-width:880px){.vw-six{grid-template-columns:1.05fr 1fr;align-items:center;}} .vw-six-kicker{font-family:var(--font-mono,monospace);font-size:11px;text-transform:uppercase; letter-spacing:.12em;color:rgb(var(--vw-violet));margin-bottom:.5rem;} .vw-six-h{font-family:var(--font-display,inherit);font-weight:600;letter-spacing:-.015em; font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.25;color:rgb(var(--c-ink));} .vw-six-sub{margin-top:.7rem;font-size:14px;line-height:1.6;color:rgb(var(--c-muted));max-width:34rem;} .vw-six-chips{display:flex;flex-wrap:wrap;gap:.6rem;align-content:center;} .vw-chip{display:inline-flex;align-items:center;gap:.45rem;font-size:13.5px;font-weight:600; color:rgb(var(--c-ink));background:rgb(var(--c-surface));border:1px solid rgb(var(--ch)/.45); border-radius:999px;padding:.5rem .95rem;box-shadow:0 4px 14px -8px rgb(var(--ch)/.55);} .vw-chip{transition:transform .15s ease,box-shadow .15s ease;} .vw-chip:hover{transform:translateY(-2px);box-shadow:0 9px 22px -8px rgb(var(--ch)/.6);} .vw-chip::before{content:"";width:.55rem;height:.55rem;border-radius:50%; background:rgb(var(--ch));flex:none;} /* ── Scroll-reveal motion (driven by vw-cards.js observer) ── */ .vw-reveal{opacity:0;transform:translateY(18px); transition:opacity .6s cubic-bezier(.22,.7,.24,1) var(--d,0ms), transform .6s cubic-bezier(.22,.7,.24,1) var(--d,0ms); will-change:opacity,transform;} .vw-reveal.vw-in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ .vw-reveal{opacity:1 !important;transform:none !important;transition:none !important;} } /* ═══════════════════════════════════════════════════════════════════ Homepage atmosphere — scoped to .vw-home (html carries the marker class before paint, alongside the theme class). Nothing here touches the workspace or calculator pages. Boldness spent in one place: an ambient glow drawn from the memory-segment legend the product already uses (weights=violet, KV=cyan, cost=amber, power=rose). ═══════════════════════════════════════════════════════════════════ */ .vw-home{background:rgb(var(--c-bg));} .vw-home body{background:transparent;position:relative;} /* ambient GPU-glow */ .vw-home body::before{content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none; background: radial-gradient(38rem 26rem at 6% -6%, rgb(var(--vw-violet)/.17), transparent 60%), radial-gradient(34rem 24rem at 104% 0%, rgb(var(--vw-cyan)/.16), transparent 62%), radial-gradient(28rem 24rem at 90% 40%, rgb(var(--vw-rose)/.09), transparent 60%), radial-gradient(40rem 30rem at 18% 98%, rgb(var(--vw-amber)/.10), transparent 60%); animation:vwFloat 30s ease-in-out infinite alternate;} .vw-home.dark body::before{opacity:.72;} @keyframes vwFloat{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(0,-2.2%,0) scale(1.09);}} /* faint allocation-grid texture, masked to fade out — static, not animated */ .vw-home body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6; background-image:linear-gradient(rgb(var(--c-ink)/.022) 1px,transparent 1px), linear-gradient(90deg,rgb(var(--c-ink)/.022) 1px,transparent 1px); background-size:62px 62px; -webkit-mask-image:radial-gradient(circle at 50% 26%, #000, transparent 76%); mask-image:radial-gradient(circle at 50% 26%, #000, transparent 76%);} /* hero headline accent = the memory spectrum (static gradient, no motion) */ .vw-home main>section:first-of-type h1 .text-accent{ background:linear-gradient(100deg, rgb(var(--c-accent)), rgb(var(--vw-cyan)) 46%, rgb(var(--vw-violet))); -webkit-background-clip:text;background-clip:text;color:transparent;} /* energised primary buttons (homepage only) */ .vw-home .btn-primary{background:linear-gradient(135deg, rgb(var(--c-accent)), rgb(var(--vw-emerald))); border-color:transparent; box-shadow:0 10px 26px -10px rgb(var(--c-accent)/.6), inset 0 1px 0 rgb(255 255 255/.18); transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;} .vw-home .btn-primary:hover{transform:translateY(-2px);filter:saturate(1.08); box-shadow:0 16px 34px -12px rgb(var(--c-accent)/.72), inset 0 1px 0 rgb(255 255 255/.22);} /* live-demo panel → instrument glass with a gradient ring */ .vw-home main>section:first-of-type .rounded-2xl.shadow-card{position:relative; background:rgb(var(--c-surface)/.74);backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);border-color:transparent;} .vw-home main>section:first-of-type .rounded-2xl.shadow-card::before{content:"";position:absolute; inset:0;border-radius:inherit;padding:1px;pointer-events:none; background:linear-gradient(140deg, rgb(var(--vw-violet)/.55), rgb(var(--vw-cyan)/.42) 45%, transparent 72%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;} /* a little life on the built-in cards + FAQ rows */ .vw-home .shadow-card{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;} .vw-home #tools a.shadow-card:hover{transform:translateY(-4px);} .vw-home #faq dt{transition:color .15s ease;} .vw-home #faq div:hover dt{color:rgb(var(--c-accent));} @media (prefers-reduced-motion:reduce){ .vw-home body::before{animation:none;} } /* ---- restore Tailwind spacing utilities dropped by the purged build (were rendering as 0px) ---- */ .mt-7{margin-top:1.75rem} .mt-14{margin-top:3.5rem} .pt-10{padding-top:2.5rem} .pt-12{padding-top:3rem} .pb-8{padding-bottom:2rem} .pb-16{padding-bottom:4rem} .pr-3{padding-right:.75rem} .space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem} .space-y-2\.5>:not([hidden])~:not([hidden]){margin-top:.625rem} /* ---- hide the legacy homepage mobile quick-nav that leaks onto inner pages as raw links ---- */ #hx-mnav{display:none!important} /* ===== unified site footer (static) ===== */ .vwf{border-top:1px solid rgb(var(--c-line));background:rgb(var(--c-raised));color:rgb(var(--c-muted));font-family:'Instrument Sans',system-ui,sans-serif} .vwf-in{max-width:80rem;margin:0 auto;padding:clamp(2.5rem,5vw,4rem) clamp(1.1rem,4vw,2rem) 1.75rem} .vwf-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2rem clamp(1.4rem,3vw,3rem)} .vwf-brand{max-width:23rem} .vwf-logo{display:inline-flex;align-items:center;gap:.6rem;color:rgb(var(--c-ink));text-decoration:none;font-family:'Bricolage Grotesque','Instrument Sans',sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.02em} .vwf-tag{margin:.9rem 0 0;font-size:.92rem;line-height:1.6;color:rgb(var(--c-muted))} .vwf-cols{display:contents} .vwf-col{display:flex;flex-direction:column;gap:.6rem;min-width:0} .vwf-col h2,.vwf-col h3{margin:0 0 .35rem;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgb(var(--c-accent));font-weight:600} .vwf-col a{color:rgb(var(--c-muted));text-decoration:none;font-size:.92rem;line-height:1.35;transition:color .15s} .vwf-col a:hover{color:rgb(var(--c-ink))} .vwf-bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem 1.4rem;margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;border-top:1px solid rgb(var(--c-line))} .vwf-copy{margin:0;font-size:.85rem;color:rgb(var(--c-muted))} .vwf-legal{display:flex;flex-wrap:wrap;gap:1.1rem} .vwf-legal a{color:rgb(var(--c-muted));text-decoration:none;font-size:.85rem;transition:color .15s} .vwf-legal a:hover{color:rgb(var(--c-ink))} @media(max-width:900px){.vwf-top{grid-template-columns:1fr 1fr}.vwf-brand{grid-column:1/-1;max-width:none}} @media(max-width:560px){.vwf-bot{flex-direction:column;align-items:flex-start}} /* Model-page quantization table. Moved out of per-page inline