purpleandClaude Opus 5.5
3640518bc2
About a third of the old height on a phone (65 px instead of 252/230/207), same links: Android APK, install help, iPhone in review, Play soon, LU Cloud on iPhone. Desktop unchanged (no banner there). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
635 lines
47 KiB
CSS
635 lines
47 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════════
|
|
Locally Uncensored: shared design system
|
|
Ported from the lu-labs.ai marketing design. Applied site-wide via :root so every static page shares one look.
|
|
|
|
IMPORTANT: purely visual. Brand stays "Locally Uncensored"; all page content,
|
|
links, headings and SEO are owned by the HTML, not this file.
|
|
Dark is default; light flips on <html data-theme="light"> (existing toggle).
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
|
|
:root{
|
|
/* ── Brand ─────────────────────────────────────────────── */
|
|
--brand-violet:#491999;
|
|
--brand-violet-strong:#5b21b6;
|
|
--accent:#8b5cf6; /* links / accents (kept name for legacy rules) */
|
|
--accent-soft:#a78bfa;
|
|
--brand-iridescent:#bc82f2;
|
|
--brand-discord:#5865f2;
|
|
--green:#34d399; /* secondary pop */
|
|
|
|
/* ── Surface ramp (dark) ───────────────────────────────── */
|
|
--bg:#141414; /* page canvas */
|
|
--bg-2:#1a1a1a;
|
|
--panel:#202020;
|
|
--panel-2:#262626;
|
|
--raised:#2d2d2d;
|
|
--overlay:#363636;
|
|
|
|
/* ── Hairlines / fills ─────────────────────────────────── */
|
|
--rule:rgba(255,255,255,0.08);
|
|
--line-faint:rgba(255,255,255,0.04);
|
|
--line-subtle:rgba(255,255,255,0.07);
|
|
--line-strong:rgba(255,255,255,0.12);
|
|
--fill-faint:rgba(255,255,255,0.03);
|
|
--fill-subtle:rgba(255,255,255,0.06);
|
|
--fill-strong:rgba(255,255,255,0.12);
|
|
|
|
/* ── Text ──────────────────────────────────────────────── */
|
|
--fg:#f4f4f5;
|
|
--fg-70:#d4d4d8;
|
|
--fg-50:#9ca3af;
|
|
--fg-30:#6b7280;
|
|
--fg-12:rgba(255,255,255,0.09);
|
|
|
|
/* ── Type ──────────────────────────────────────────────── */
|
|
--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
|
|
--serif:var(--sans);
|
|
--mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
|
|
--display:'Space Grotesk','Inter',system-ui,sans-serif;
|
|
|
|
--radius-sm:0.375rem;
|
|
--radius-md:0.5rem;
|
|
--radius-lg:0.625rem;
|
|
--radius-xl:0.75rem;
|
|
|
|
--ease:cubic-bezier(.22,1,.36,1);
|
|
}
|
|
|
|
/* Light flip — surfaces/borders/text invert, accents stay. Keeps the
|
|
existing data-theme toggle working. */
|
|
html[data-theme="light"]{
|
|
--bg:#ffffff;
|
|
--bg-2:#f7f7f8;
|
|
--panel:#f3f4f6;
|
|
--panel-2:#eceef1;
|
|
--raised:#f3f4f6;
|
|
--overlay:#ffffff;
|
|
--rule:rgba(0,0,0,0.10);
|
|
--line-faint:rgba(0,0,0,0.06);
|
|
--line-subtle:rgba(0,0,0,0.10);
|
|
--line-strong:rgba(0,0,0,0.15);
|
|
--fill-faint:rgba(0,0,0,0.03);
|
|
--fill-subtle:rgba(0,0,0,0.05);
|
|
--fill-strong:rgba(0,0,0,0.10);
|
|
--fg:#111827;
|
|
--fg-70:#374151;
|
|
--fg-50:#4b5563;
|
|
--fg-30:#6b7280;
|
|
--fg-12:rgba(0,0,0,0.07);
|
|
--accent:#7c3aed;
|
|
--green:#16a34a;
|
|
}
|
|
|
|
html{scroll-behavior:smooth}
|
|
html,body{overflow-x:hidden}
|
|
body{
|
|
font-family:var(--sans);
|
|
font-optical-sizing:auto;
|
|
background:var(--bg);color:var(--fg-70);
|
|
-webkit-font-smoothing:antialiased;
|
|
text-rendering:optimizeLegibility;
|
|
line-height:1.55;
|
|
transition:background .4s ease,color .4s ease;
|
|
min-height:100vh;
|
|
}
|
|
a{color:inherit;text-decoration:none}
|
|
button{background:none;border:0;font:inherit;color:inherit;cursor:pointer}
|
|
::selection{background:rgba(139,92,246,0.35)}
|
|
|
|
/* ── Drifting glow-blob background (JS injects .lu-bg) ─────────────────── */
|
|
.lu-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg)}
|
|
.lu-blob{position:absolute;border-radius:9999px;filter:blur(90px);opacity:.5;will-change:transform}
|
|
.lu-blob.b1{width:46vw;height:46vw;left:-8vw;top:-10vh;background:radial-gradient(circle,rgba(73,25,153,0.55),transparent 68%);animation:lu-bg1 22s ease-in-out infinite}
|
|
.lu-blob.b2{width:42vw;height:42vw;right:-10vw;top:6vh;background:radial-gradient(circle,rgba(139,92,246,0.32),transparent 68%);animation:lu-bg2 26s ease-in-out infinite}
|
|
.lu-blob.b3{width:40vw;height:40vw;left:12vw;bottom:-16vh;background:radial-gradient(circle,rgba(91,33,182,0.34),transparent 70%);animation:lu-bg3 30s ease-in-out infinite}
|
|
.lu-blob.b4{width:34vw;height:34vw;right:6vw;bottom:-8vh;background:radial-gradient(circle,rgba(188,130,242,0.18),transparent 70%);animation:lu-bg4 28s ease-in-out infinite}
|
|
html[data-theme="light"] .lu-blob{opacity:.28}
|
|
@keyframes lu-bg1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,5vh) scale(1.18)}}
|
|
@keyframes lu-bg2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-7vw,-4vh) scale(1)}}
|
|
@keyframes lu-bg3{0%,100%{transform:translate(0,0)}50%{transform:translate(5vw,-7vh)}}
|
|
@keyframes lu-bg4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,6vh) scale(1.12)}}
|
|
|
|
/* ── Atmosphere: vignette + film grain (JS injects .lu-atmosphere) ────── */
|
|
.lu-atmosphere{position:fixed;inset:0;z-index:40;pointer-events:none}
|
|
.lu-vignette{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 42%,transparent 52%,rgba(0,0,0,0.28) 100%)}
|
|
html[data-theme="light"] .lu-vignette{background:radial-gradient(120% 100% at 50% 42%,transparent 60%,rgba(0,0,0,0.06) 100%)}
|
|
.lu-grain{position:absolute;inset:0;opacity:.1;mix-blend-mode:overlay;background-size:200px 200px;
|
|
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
|
|
html[data-theme="light"] .lu-grain{mix-blend-mode:multiply;opacity:.05}
|
|
|
|
/* Themed scrollbars */
|
|
::-webkit-scrollbar{width:10px;height:10px}
|
|
::-webkit-scrollbar-track{background:transparent}
|
|
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:5px}
|
|
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}
|
|
:is(button,a):focus-visible{outline:1px solid rgba(96,165,250,.6);outline-offset:1px}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
Sticky nav
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
.lu-nav{
|
|
position:sticky;top:0;z-index:50;height:60px;
|
|
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
|
|
gap:clamp(8px,2vw,24px);
|
|
padding:0 clamp(16px,4vw,40px);
|
|
background:rgba(20,20,20,0.72);
|
|
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
|
|
border-bottom:1px solid var(--line-subtle);
|
|
font-family:var(--sans);
|
|
}
|
|
html[data-theme="light"] .lu-nav{background:rgba(255,255,255,0.72)}
|
|
.lu-nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
|
|
.lu-nav-word{font-weight:600;font-size:0.98rem;letter-spacing:-0.01em;color:var(--fg);white-space:nowrap}
|
|
.lu-nav-word .accent{color:var(--accent-soft)}
|
|
.lu-nav-links{display:flex;align-items:center;justify-content:center;gap:2px;flex-wrap:nowrap}
|
|
.lu-nav-link{
|
|
position:relative;display:flex;align-items:center;padding:8px 12px;
|
|
font-size:0.8rem;font-weight:500;color:var(--fg-50);border-radius:var(--radius-sm);
|
|
transition:color .15s,background .15s;white-space:nowrap;
|
|
}
|
|
.lu-nav-link:hover{color:var(--fg);background:var(--fill-faint)}
|
|
.lu-nav-right{display:flex;align-items:center;gap:6px;justify-self:end}
|
|
.lu-nav-icon{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-sm);color:var(--fg-50);transition:color .15s,background .15s}
|
|
.lu-nav-icon:hover{color:var(--fg);background:var(--fill-faint)}
|
|
.lu-nav-icon.discord:hover{color:#5865f2}
|
|
/* Tiny count badge on the top-right corner of a nav icon (GitHub stars,
|
|
Discord online) — matched 1:1 to the lu-labs.ai .lu-mkt-nav-badge. */
|
|
.lu-nav-badge{
|
|
position:absolute;top:0;right:-2px;
|
|
padding:1px 3.5px;
|
|
font-family:var(--mono);font-size:8.5px;font-weight:700;line-height:1;letter-spacing:0.02em;
|
|
color:#fff;background:var(--accent);border-radius:9999px;
|
|
box-shadow:0 0 0 1.5px var(--bg);
|
|
pointer-events:none;white-space:nowrap;
|
|
}
|
|
.lu-nav-icon.discord:hover{color:var(--brand-discord)}
|
|
.lu-nav-sep{width:1px;height:20px;background:var(--line-subtle);margin:0 2px}
|
|
.lu-nav-dl{
|
|
display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 15px;margin-left:2px;
|
|
font-size:0.8rem;font-weight:500;color:var(--bg);background:var(--fg);
|
|
border:1px solid var(--fg);border-radius:var(--radius-sm);
|
|
transition:filter .15s,transform .12s;
|
|
}
|
|
.lu-nav-dl:hover{filter:brightness(0.9)}
|
|
.lu-nav-dl:active{transform:scale(0.96)}
|
|
.lu-nav-toggle{display:none} /* mobile hamburger, shown < 900px */
|
|
|
|
/* Nav monogram: nudge down (sat too high) + no autonomous motion.
|
|
The hero monogram keeps its sway/sheen — this is nav-only. */
|
|
.lu-mono[data-mono="nav"]{transform:translateY(3px)}
|
|
.lu-mono[data-mono="nav"] .lu-mono-sway{animation:none}
|
|
.lu-mono[data-mono="nav"] .lu-mono-sheen{display:none}
|
|
|
|
/* ── Cloud CTA — links out to lu-labs.ai (email capture lives there) ───── */
|
|
.he-cta{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:.76rem;font-weight:600;line-height:1;text-decoration:none;color:var(--accent-soft);background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.32);border-radius:999px;padding:5px 11px;cursor:pointer;letter-spacing:.01em;transition:background .15s,color .15s,border-color .15s}
|
|
.he-cta:hover{background:rgba(139,92,246,.22);color:#fff;border-color:rgba(139,92,246,.6)}
|
|
.he-cta svg{width:12px;height:12px}
|
|
|
|
/* ── Theme toggle (kept behaviour, restyled) ──────────────────────────── */
|
|
.switch{width:36px;height:20px;background:var(--fill-strong);border-radius:100px;position:relative;cursor:pointer;transition:background .25s;border:1px solid var(--rule);flex-shrink:0}
|
|
.switch::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--fg);transition:transform .25s var(--ease)}
|
|
html[data-theme="dark"] .switch{background:rgba(139,92,246,.25)}
|
|
html[data-theme="dark"] .switch::after{transform:translateX(16px);background:var(--accent)}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
3D monogram (JS builds layers into [data-mono])
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
.lu-mono{display:inline-block;position:relative}
|
|
.lu-mono-stage{position:relative}
|
|
.lu-mono-tilt{position:relative;transform-style:preserve-3d;transition:transform .3s var(--ease);will-change:transform}
|
|
.lu-mono-halo{position:absolute;left:50%;top:52%;width:100%;height:100%;border-radius:9999px;
|
|
background:radial-gradient(circle,rgba(139,92,246,0.6) 0%,rgba(139,92,246,0.22) 44%,transparent 72%);
|
|
transform:translate(-50%,-50%);filter:blur(28px);animation:lu-halo 4.5s ease-in-out infinite;pointer-events:none;will-change:opacity}
|
|
.lu-mono-sway{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:lu-sway 9s ease-in-out infinite}
|
|
.lu-mono-extrude{position:absolute;inset:0;transform-style:preserve-3d}
|
|
.lu-mono-layer{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden}
|
|
.lu-mono-sheen{position:absolute;inset:0;overflow:hidden;
|
|
-webkit-mask:url(/assets/marketing/lu-mark.png) center/contain no-repeat;
|
|
mask:url(/assets/marketing/lu-mark.png) center/contain no-repeat;
|
|
background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,0.85) 50%,transparent 60%);
|
|
background-repeat:no-repeat;background-size:250% 250%;animation:lu-sheen 6.4s linear infinite}
|
|
@keyframes lu-halo{0%,100%{opacity:.5}50%{opacity:.82}}
|
|
@keyframes lu-sway{0%{transform:rotateX(15deg) rotateY(-19deg)}25%{transform:rotateX(8deg) rotateY(-9deg)}50%{transform:rotateX(15deg) rotateY(11deg)}75%{transform:rotateX(9deg) rotateY(9deg)}100%{transform:rotateX(15deg) rotateY(-19deg)}}
|
|
@keyframes lu-sheen{0%{background-position:160% 160%}100%{background-position:-160% -160%}}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
Hero (brand block: monogram + H1 wordmark + kicker)
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
.lu-hero{
|
|
padding:clamp(48px,8vh,110px) clamp(24px,5vw,72px) clamp(28px,4vh,52px);
|
|
display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;position:relative;
|
|
}
|
|
.lu-hero-mono{opacity:0;animation:lu-fade-in 1.1s var(--ease) .2s forwards}
|
|
@keyframes lu-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
|
|
.mast-title,.lu-hero-title{
|
|
font-family:var(--display);font-weight:700;
|
|
font-size:clamp(2.4rem,7vw,4.6rem);line-height:1;letter-spacing:-0.035em;
|
|
color:var(--fg);margin:0;text-shadow:0 2px 14px rgba(0,0,0,0.5);text-wrap:balance;
|
|
}
|
|
.mast-title .accent{color:var(--accent-soft);font-weight:700}
|
|
.mast-kicker{
|
|
font-family:var(--mono);font-size:clamp(.66rem,1.1vw,.8rem);font-weight:500;
|
|
letter-spacing:0.22em;text-transform:uppercase;color:var(--fg-50);
|
|
display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:0;
|
|
}
|
|
.mast-kicker .k-dot{color:var(--accent);font-weight:700;letter-spacing:0}
|
|
.mast-lede a{color:var(--accent-soft);border-bottom:1px solid rgba(139,92,246,.42);text-decoration:none}
|
|
.mast-lede a:hover{border-bottom-color:var(--accent-soft)}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
Shared section chrome
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
section{padding:clamp(72px,10vh,130px) clamp(24px,5vw,72px);position:relative}
|
|
.container{max-width:1160px;margin:0 auto;width:100%}
|
|
.narrow{max-width:820px;margin:0 auto}
|
|
.eyebrow{
|
|
font-family:var(--mono);font-size:.7rem;letter-spacing:0.16em;text-transform:uppercase;
|
|
color:var(--accent-soft);display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;
|
|
}
|
|
.eyebrow::before{content:'';width:24px;height:1px;background:var(--accent)}
|
|
|
|
/* Section headings (Space Grotesk display) */
|
|
.things h2,.manifesto h2,.compare h2,.get h2,
|
|
.how h2,.models h2,.blog h2,.faq h2{
|
|
font-family:var(--display);font-weight:700;
|
|
font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-0.03em;
|
|
margin-bottom:20px;max-width:22ch;color:var(--fg);
|
|
}
|
|
.things h2 em,.manifesto h2 em,.compare h2 em,.get h2 em,
|
|
.how h2 em,.models h2 em,.blog h2 em,.faq h2 em{font-style:normal;color:var(--accent-soft);font-weight:700}
|
|
.section-lead{font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.6;color:var(--fg-50);max-width:60ch}
|
|
|
|
/* ── Hero download banner ─────────────────────────────────────────────── */
|
|
.hero{padding:clamp(8px,2vh,24px) clamp(24px,5vw,72px) clamp(24px,4vh,48px);position:relative}
|
|
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
|
|
.dl-card{
|
|
margin:0 auto;padding:18px 22px;max-width:560px;
|
|
background:var(--panel);color:var(--fg);border:1px solid var(--line-subtle);border-radius:var(--radius-xl);
|
|
display:flex;justify-content:space-between;align-items:center;gap:20px;
|
|
transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;position:relative;overflow:hidden;text-align:left;
|
|
}
|
|
.hero .dl-card{opacity:0;animation:fadeUp .9s var(--ease) .1s forwards}
|
|
.dl-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 130%,rgba(139,92,246,0.5),transparent 60%);opacity:.5}
|
|
.dl-card:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.5);box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
|
|
.dl-info{position:relative;z-index:2;flex:1;min-width:0}
|
|
.dl-info h3{font-family:var(--sans);font-weight:600;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.1;letter-spacing:-0.02em;margin-bottom:5px;color:var(--fg)}
|
|
.dl-info h3 em{font-style:normal;color:var(--accent-soft);font-weight:700}
|
|
.dl-info p{font-family:var(--mono);font-size:.62rem;letter-spacing:0.05em;color:var(--fg-50)}
|
|
.dl-btn{
|
|
font-family:var(--sans);font-size:.82rem;font-weight:600;padding:11px 18px;
|
|
background:var(--accent);color:#fff;border-radius:var(--radius-sm);
|
|
display:inline-flex;align-items:center;gap:7px;white-space:nowrap;position:relative;z-index:2;
|
|
transition:transform .25s var(--ease),filter .25s;
|
|
}
|
|
.dl-btn:hover{transform:translateX(3px);filter:brightness(1.08)}
|
|
.dl-btn svg{width:14px;height:14px}
|
|
.dl-alts{margin-top:22px;display:flex;gap:24px;flex-wrap:wrap;justify-content:center;font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--fg-50)}
|
|
.dl-alts a{position:relative;transition:color .2s}
|
|
.dl-alts a:hover{color:var(--accent-soft)}
|
|
.dl-alts a::after{content:'→';margin-left:6px;opacity:.6;transition:transform .2s;display:inline-block}
|
|
.dl-alts a:hover::after{transform:translateX(3px)}
|
|
|
|
/* ── Scroll affordance ────────────────────────────────────────────────── */
|
|
.scroll-zone{padding:clamp(24px,5vh,56px) 24px;display:flex;justify-content:center;align-items:center;min-height:clamp(120px,24vh,240px)}
|
|
.scroll-arrow{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 24px;color:var(--fg-50);transition:color .25s,transform .25s;text-decoration:none}
|
|
.scroll-arrow .arrow-line{width:1px;height:40px;background:linear-gradient(180deg,transparent,var(--fg-30));transition:background .3s}
|
|
.scroll-arrow svg{width:26px;height:26px;stroke-width:1.5;animation:arrow-bounce 2.2s ease-in-out infinite}
|
|
.scroll-arrow .arrow-label{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg-50);transition:color .25s}
|
|
.scroll-arrow:hover{color:var(--accent-soft);transform:translateY(2px)}
|
|
.scroll-arrow:hover .arrow-label{color:var(--accent-soft)}
|
|
.scroll-arrow:hover .arrow-line{background:linear-gradient(180deg,transparent,var(--accent))}
|
|
@keyframes arrow-bounce{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(6px);opacity:1}}
|
|
|
|
/* ── Tagline ──────────────────────────────────────────────────────────── */
|
|
.tagline{padding:clamp(56px,9vh,120px) clamp(24px,5vw,72px) clamp(24px,4vh,44px);text-align:center}
|
|
.tagline h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,5vw,3.6rem);line-height:1.08;letter-spacing:-0.035em;color:var(--fg);max-width:22ch;margin:0 auto 16px}
|
|
.tagline h2 .t-sub{display:block;font-size:0.62em;font-weight:600;margin-top:12px;letter-spacing:-0.02em;color:var(--fg-70)}
|
|
.tagline h2 .t-accent{color:var(--accent-soft);font-weight:700;position:relative;display:inline-block}
|
|
.tagline h2 .t-accent::after{content:'';position:absolute;left:0;right:0;bottom:0.1em;height:0.06em;background:var(--accent);opacity:.4}
|
|
.tagline-sub{font-family:var(--mono);font-size:clamp(.66rem,1vw,.8rem);font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-50);margin-top:18px}
|
|
|
|
/* ── Showcase ─────────────────────────────────────────────────────────── */
|
|
.showcase{padding-top:36px;padding-bottom:36px}
|
|
.showcase-inner{position:relative;max-width:1120px;margin:0 auto}
|
|
.showcase-img{width:100%;display:block;border-radius:14px;border:1px solid var(--line-subtle);box-shadow:0 2px 4px rgba(0,0,0,.3),0 20px 50px rgba(0,0,0,.45),0 40px 120px -20px rgba(73,25,153,.25)}
|
|
.showcase-cap{margin-top:26px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;font-family:var(--sans);font-size:.95rem;font-weight:400;color:var(--fg-50);line-height:1.6;max-width:720px}
|
|
.showcase-cap em{font-style:normal;color:var(--accent-soft);font-weight:500}
|
|
|
|
/* ── Things grid ──────────────────────────────────────────────────────── */
|
|
.things > .container{text-align:center}
|
|
.things > .container > .eyebrow{display:inline-flex}
|
|
.things > .container > h2{margin-left:auto;margin-right:auto}
|
|
.things-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:56px;text-align:left}
|
|
.thing{
|
|
padding:32px 30px;background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-xl);
|
|
transition:transform .22s var(--ease),border-color .22s,box-shadow .22s;
|
|
display:flex;flex-direction:column;gap:12px;position:relative;min-height:260px;
|
|
}
|
|
.thing:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 18px 40px -24px rgba(0,0,0,.8)}
|
|
.thing-num{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:0.08em}
|
|
.thing-head{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.2;letter-spacing:-0.02em;color:var(--fg)}
|
|
.thing-head em{font-style:normal;font-weight:600;color:var(--accent-soft)}
|
|
.thing p{font-family:var(--sans);font-size:.9rem;line-height:1.6;color:var(--fg-50);max-width:44ch}
|
|
.thing-tags{margin-top:auto;padding-top:18px;display:flex;gap:6px;flex-wrap:wrap;font-family:var(--mono);font-size:.6rem;letter-spacing:0.06em;color:var(--fg-50)}
|
|
.thing-tags span{padding:4px 9px;background:var(--fill-faint);border:1px solid var(--line-subtle);border-radius:100px}
|
|
|
|
/* ── Manifesto ────────────────────────────────────────────────────────── */
|
|
.manifesto .narrow{max-width:760px}
|
|
.manifesto p{font-family:var(--sans);font-size:clamp(1.05rem,1.3vw,1.28rem);line-height:1.6;color:var(--fg-70);margin-bottom:24px;font-weight:400}
|
|
.manifesto p em{color:var(--accent-soft);font-style:normal;font-weight:500}
|
|
.manifesto p strong{font-weight:600;color:var(--fg)}
|
|
|
|
/* ── Compare (prose) ──────────────────────────────────────────────────── */
|
|
.compare .narrow{max-width:920px}
|
|
.compare p{font-family:var(--sans);font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.55;color:var(--fg-50);margin-bottom:18px}
|
|
.compare p strong{color:var(--fg);font-weight:600}
|
|
.compare p em{font-style:normal;color:var(--accent-soft);font-weight:500}
|
|
.compare .tools{margin-top:36px;padding-top:28px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:12px 24px;font-family:var(--mono);font-size:.72rem;color:var(--fg-50);letter-spacing:0.05em}
|
|
|
|
/* ── How it works ─────────────────────────────────────────────────────── */
|
|
.how{text-align:center}
|
|
.how .container{max-width:1080px}
|
|
.how h2,.how .section-lead{margin-left:auto;margin-right:auto}
|
|
.how .eyebrow{justify-content:center;display:inline-flex}
|
|
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:56px 0 36px;text-align:left}
|
|
.step{padding:32px 28px;background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-xl);transition:border-color .3s,transform .3s}
|
|
.step:hover{border-color:var(--line-strong);transform:translateY(-3px)}
|
|
.step-num{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:0.15em;color:var(--accent);display:block;margin-bottom:16px;text-transform:uppercase}
|
|
.step h3{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.7vw,1.35rem);letter-spacing:-0.02em;line-height:1.2;margin-bottom:10px;color:var(--fg)}
|
|
.step p{font-family:var(--sans);font-size:.9rem;color:var(--fg-50);line-height:1.6}
|
|
.guide-link{font-family:var(--sans);font-size:.9rem;color:var(--fg-50);margin-top:14px}
|
|
.guide-link a{color:var(--accent-soft);font-weight:500;transition:color .2s}
|
|
.guide-link a:hover{color:var(--fg)}
|
|
|
|
/* ── Models ───────────────────────────────────────────────────────────── */
|
|
.models{text-align:center}
|
|
.models .container{max-width:1160px}
|
|
.models h2,.models .section-lead{margin-left:auto;margin-right:auto}
|
|
.models .eyebrow{justify-content:center;display:inline-flex}
|
|
.model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px;text-align:left}
|
|
.model-card{padding:26px 24px;background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-lg);transition:border-color .3s,transform .3s;display:flex;flex-direction:column;gap:10px;min-height:180px}
|
|
.model-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
|
|
.model-type{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:0.12em;color:var(--accent);text-transform:uppercase}
|
|
.model-card h3{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.2rem);letter-spacing:-0.01em;line-height:1.2;color:var(--fg)}
|
|
.model-card p{font-family:var(--sans);font-size:.82rem;color:var(--fg-50);line-height:1.55;flex:1}
|
|
.model-meta{font-family:var(--mono);font-size:.6rem;letter-spacing:0.08em;color:var(--fg-50);text-transform:uppercase;padding-top:8px;border-top:1px solid var(--rule);margin-top:6px}
|
|
|
|
/* ── Blog teaser grid ─────────────────────────────────────────────────── */
|
|
.blog{text-align:center}
|
|
.blog .container{max-width:1160px}
|
|
.blog h2,.blog .section-lead{margin-left:auto;margin-right:auto}
|
|
.blog .eyebrow{justify-content:center;display:inline-flex}
|
|
.post-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:52px;text-align:left}
|
|
.post{padding:24px 22px;background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-xl);transition:border-color .15s,transform .15s;display:block;position:relative;color:var(--fg)}
|
|
.post:hover{border-color:rgba(139,92,246,.4);transform:translateY(-2px)}
|
|
.post-cat{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:0.12em;color:var(--accent-soft);text-transform:uppercase;display:block;margin-bottom:10px}
|
|
.post h3{font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.4vw,1.18rem);letter-spacing:-0.01em;line-height:1.3;margin-bottom:8px;color:var(--fg);transition:color .2s}
|
|
.post:hover h3{color:var(--accent-soft)}
|
|
.post p{font-family:var(--sans);font-size:.82rem;color:var(--fg-50);line-height:1.55}
|
|
.blog-all{margin-top:32px;font-family:var(--sans);font-size:.9rem}
|
|
.blog-all a{color:var(--accent-soft);font-weight:500;transition:color .2s}
|
|
.blog-all a:hover{color:var(--fg)}
|
|
|
|
/* ── FAQ ──────────────────────────────────────────────────────────────── */
|
|
.faq .container{max-width:820px}
|
|
.faq h2{margin-bottom:36px}
|
|
.faq-list{display:flex;flex-direction:column}
|
|
.faq-item{padding:24px 0;border-top:1px solid var(--rule)}
|
|
.faq-item:last-child{border-bottom:1px solid var(--rule)}
|
|
.faq-item h3{font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.35vw,1.18rem);letter-spacing:-0.01em;line-height:1.3;margin-bottom:10px;color:var(--fg)}
|
|
.faq-item p{font-family:var(--sans);font-size:.95rem;color:var(--fg-50);line-height:1.65}
|
|
.faq-item p strong{color:var(--fg-70);font-weight:600}
|
|
|
|
/* ── Get-it band ──────────────────────────────────────────────────────── */
|
|
.get .narrow{max-width:820px;text-align:center}
|
|
.get .dl-card{margin:0 auto}
|
|
.get .dl-alts{justify-content:center}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
Footer
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
footer{
|
|
padding:48px clamp(24px,5vw,72px) 32px;border-top:1px solid var(--line-subtle);
|
|
background:var(--bg-2);display:flex;flex-direction:column;gap:18px;
|
|
font-family:var(--sans);font-size:.82rem;color:var(--fg-50);
|
|
}
|
|
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
|
|
.footer-links{gap:22px;justify-content:flex-start;flex-wrap:wrap}
|
|
.footer-links a{color:var(--fg-50);transition:color .2s}
|
|
.footer-links a:hover{color:var(--accent-soft)}
|
|
.footer-meta span{font-family:var(--mono);font-size:.7rem;letter-spacing:0.04em;color:var(--fg-30)}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
Responsive + reduced motion
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
@media(max-width:900px){
|
|
.lu-nav{grid-template-columns:auto auto;gap:8px}
|
|
.lu-nav-links{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;
|
|
background:rgba(20,20,20,0.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-subtle);padding:8px 16px;gap:2px}
|
|
html[data-theme="light"] .lu-nav-links{background:rgba(255,255,255,0.97)}
|
|
.lu-nav-links.open{display:flex}
|
|
.lu-nav-link{padding:12px}
|
|
.lu-nav-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--fg-50)}
|
|
.things-list,.steps,.post-list{grid-template-columns:1fr}
|
|
.model-grid{grid-template-columns:repeat(2,1fr)}
|
|
}
|
|
@media(max-width:600px){
|
|
.model-grid{grid-template-columns:1fr}
|
|
.dl-card{flex-direction:column;align-items:flex-start}
|
|
.dl-btn{width:100%;justify-content:center}
|
|
.footer-row{flex-direction:column;align-items:flex-start;gap:12px}
|
|
/* Trim the nav right cluster so it never overflows a phone width.
|
|
GitHub/Discord live in the footer + hero; download lives in the hero. */
|
|
.lu-nav-icon,.lu-nav-dl,.lu-nav-sep,.lu-nav .switch{display:none}
|
|
.lu-nav-word{font-size:0.9rem}
|
|
}
|
|
@media(prefers-reduced-motion:reduce){
|
|
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
|
|
html{scroll-behavior:auto}
|
|
.lu-blob{animation:none}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
Document / prose layer — blog articles, blog index, guide, remote, 404.
|
|
Scoped under .lu-doc (added to each sub-page's content root) so it never
|
|
collides with the homepage's classed sections.
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
:root{--accent-amber:#fbbf24;--accent-blue:#60a5fa}
|
|
|
|
.lu-doc{max-width:820px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(20px,5vw,32px) 80px}
|
|
.lu-doc h1{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.08;letter-spacing:-0.03em;color:var(--fg);margin:0 0 20px}
|
|
.lu-doc h2{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);line-height:1.2;letter-spacing:-0.02em;color:var(--fg);margin:44px 0 16px}
|
|
.lu-doc h3{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.3;color:var(--fg);margin:32px 0 12px}
|
|
.lu-doc p{font-size:1rem;line-height:1.75;color:var(--fg-70);margin:0 0 18px}
|
|
.lu-doc a{color:var(--accent-soft);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
|
|
.lu-doc a:hover{color:var(--fg);border-bottom-color:var(--accent)}
|
|
.lu-doc strong{color:var(--fg);font-weight:600}
|
|
.lu-doc ul,.lu-doc ol{margin:0 0 18px;padding-left:1.4em;color:var(--fg-70)}
|
|
.lu-doc li{margin:0 0 8px;line-height:1.7}
|
|
.lu-doc code{font-family:var(--mono);font-size:.85em;background:var(--fill-subtle);border:1px solid var(--line-subtle);border-radius:5px;padding:1px 6px;color:var(--accent-soft)}
|
|
.lu-doc pre{background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-lg);padding:18px 20px;overflow-x:auto;margin:0 0 20px}
|
|
.lu-doc pre code{background:none;border:none;padding:0;color:var(--fg-70);font-size:.82rem;line-height:1.6}
|
|
.lu-doc hr{border:none;border-top:1px solid var(--rule);margin:36px 0}
|
|
.lu-doc img{max-width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--line-subtle);margin:6px 0 22px;display:block}
|
|
.lu-doc .subtitle{font-size:1.1rem;color:var(--fg-50);margin:0 0 32px;line-height:1.6}
|
|
.lu-doc table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.9rem;display:block;overflow-x:auto}
|
|
.lu-doc th,.lu-doc td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
|
|
.lu-doc th{font-family:var(--mono);font-size:.68rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--fg-50);background:var(--fill-faint)}
|
|
.lu-doc td{color:var(--fg-70)}
|
|
|
|
/* doc chrome */
|
|
.lu-doc .back{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--fg-50);margin-bottom:24px;border:none}
|
|
.lu-doc .back:hover{color:var(--accent-soft)}
|
|
.lu-doc .breadcrumb{font-family:var(--mono);font-size:.72rem;color:var(--fg-50);margin-bottom:20px}
|
|
.lu-doc .breadcrumb a{color:var(--fg-50);border:none}
|
|
.lu-doc .breadcrumb a:hover{color:var(--accent-soft)}
|
|
.lu-doc .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--mono);font-size:.72rem;color:var(--fg-50);margin-bottom:10px}
|
|
.lu-doc .post-tag,.lu-doc .tag{font-family:var(--mono);font-size:.58rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-soft);background:var(--fill-faint);border:1px solid var(--line-subtle);border-radius:9999px;padding:3px 9px}
|
|
|
|
/* TOC (guide/remote) */
|
|
.lu-doc .toc{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-lg);padding:18px 20px;margin:0 0 32px}
|
|
.lu-doc .toc-title{font-family:var(--mono);font-size:.66rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-50);margin-bottom:8px}
|
|
.lu-doc .toc a{color:var(--fg-70);font-size:.9rem;padding:3px 0;border:none}
|
|
.lu-doc .toc a:hover{color:var(--accent-soft)}
|
|
|
|
/* callouts */
|
|
.lu-doc .callout{border:1px solid var(--line-subtle);border-left:3px solid var(--accent);border-radius:var(--radius-md);padding:14px 18px;margin:0 0 22px;background:var(--fill-faint);font-size:.92rem;line-height:1.65;color:var(--fg-70)}
|
|
.lu-doc .callout-title{font-weight:600;color:var(--fg);margin-bottom:4px}
|
|
.lu-doc .callout.warn{border-left-color:var(--accent-amber)}
|
|
.lu-doc .callout.tip{border-left-color:var(--green)}
|
|
.lu-doc .callout.info{border-left-color:var(--accent-blue)}
|
|
|
|
/* numbered steps (guide) */
|
|
.lu-doc .step{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;padding:20px 0;border-top:1px solid var(--rule)}
|
|
.lu-doc .step-num{grid-row:span 2;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:9999px;background:var(--fill-strong);color:var(--accent-soft);font-family:var(--mono);font-size:.82rem;font-weight:600}
|
|
.lu-doc .step-title{font-weight:600;color:var(--fg);align-self:center}
|
|
.lu-doc .step-body{grid-column:2}
|
|
.lu-doc .step-body p:first-child{margin-top:4px}
|
|
|
|
/* blog index */
|
|
.lu-doc .filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
|
|
.lu-doc .filter-btn{font-family:var(--mono);font-size:.68rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--fg-50);background:var(--fill-faint);border:1px solid var(--line-subtle);border-radius:9999px;padding:7px 15px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
|
|
.lu-doc .filter-btn:hover{color:var(--fg);border-color:var(--line-strong)}
|
|
.lu-doc .filter-btn.active{color:var(--fg);background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.4)}
|
|
.lu-doc .post-card{padding:22px 24px;border:1px solid var(--line-subtle);border-radius:var(--radius-xl);background:var(--panel);margin:0 0 14px;transition:border-color .15s,transform .15s}
|
|
.lu-doc .post-card:hover{border-color:rgba(139,92,246,.4);transform:translateY(-2px)}
|
|
.lu-doc .post-card h2{font-family:var(--display);font-weight:600;font-size:1.15rem;line-height:1.3;margin:0 0 8px}
|
|
.lu-doc .post-card h2 a{color:var(--fg);border:none}
|
|
.lu-doc .post-card:hover h2 a{color:var(--accent-soft)}
|
|
.lu-doc .post-card p{font-size:.9rem;color:var(--fg-50);margin:0 0 12px;line-height:1.55}
|
|
.lu-doc .post-card .meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.66rem;color:var(--fg-30)}
|
|
|
|
/* article footer CTA */
|
|
.lu-doc .post-footer{margin-top:44px;padding:26px;border:1px solid var(--line-subtle);border-radius:var(--radius-xl);background:var(--panel);text-align:center}
|
|
.lu-doc .post-footer p{margin:0 0 14px}
|
|
.lu-doc .cta-btn,.lu-doc .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;border:none}
|
|
.lu-doc .cta-btn:hover,.lu-doc .btn:hover{filter:brightness(1.08);color:#fff;border:none}
|
|
|
|
/* 404 */
|
|
main.wrap.lu-doc{text-align:center;min-height:56vh;display:flex;flex-direction:column;justify-content:center;align-items:center}
|
|
.lu-doc .code{font-family:var(--mono);font-size:.8rem;letter-spacing:0.1em;color:var(--accent-soft);text-transform:uppercase;margin-bottom:16px}
|
|
.lu-doc .a{color:var(--accent-soft)}
|
|
.lu-doc .actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:26px}
|
|
|
|
/* legacy .footer alias (guide/remote keep their own <div class="footer">) */
|
|
.footer{padding:40px clamp(24px,5vw,72px);border-top:1px solid var(--line-subtle);background:var(--bg-2);
|
|
font-family:var(--sans);font-size:.82rem;color:var(--fg-50);display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:center;max-width:none}
|
|
.footer a{color:var(--fg-50);transition:color .2s;border:none}
|
|
.footer a:hover{color:var(--accent-soft)}
|
|
|
|
/* article/blog top nav variants that survive (belt-and-braces restyle) */
|
|
.nav-logo{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--fg)}
|
|
.nav-links,.btn-nav{color:var(--fg-50)}
|
|
|
|
/* discord join page */
|
|
.lu-doc .stack{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}
|
|
.lu-doc .cta-primary{display:inline-flex;align-items:center;padding:12px 22px;background:var(--brand-discord);color:#fff;border-radius:var(--radius-sm);font-weight:600;border:none}
|
|
.lu-doc .cta-primary:hover{filter:brightness(1.08);color:#fff;border:none}
|
|
.lu-doc .cta-secondary{display:inline-flex;align-items:center;padding:12px 22px;background:var(--fill-subtle);color:var(--fg);border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-weight:600}
|
|
.lu-doc .cta-secondary:hover{border-color:var(--brand-discord);color:var(--fg)}
|
|
.lu-doc .divider{margin:30px 0;text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-30);border-top:1px solid var(--rule);height:1px}
|
|
.lu-doc .divider span{position:relative;top:-.7em;background:var(--bg);padding:0 12px}
|
|
.lu-doc .manual{background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-lg);padding:20px 24px;font-size:.95rem;line-height:1.7;color:var(--fg-70)}
|
|
.lu-doc .copy-row{display:flex;gap:10px;align-items:center;margin-top:16px}
|
|
.lu-doc .copy-code{font-family:var(--mono);font-size:.95rem;background:var(--fill-subtle);border:1px solid var(--line-subtle);border-radius:6px;padding:8px 14px;color:var(--accent-soft);user-select:all}
|
|
.lu-doc .copy-btn{padding:8px 14px;background:var(--accent);color:#fff;border-radius:6px;font-size:.8rem;font-weight:600}
|
|
.lu-doc .copy-btn.copied{background:var(--green)}
|
|
.lu-doc .small{font-size:.8rem;color:var(--fg-30);margin-top:20px}
|
|
|
|
/* ── Language toggle + Google Translate cleanup ── */
|
|
.lu-lang{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;background:none;padding:0;cursor:pointer;border-radius:var(--radius-sm);transition:background .15s}
|
|
.lu-lang:hover{background:var(--fill-faint)}
|
|
.lu-lang svg{width:20px;height:14px;border-radius:2.5px;display:block;box-shadow:0 0 0 1px rgba(127,127,127,.35)}
|
|
.lu-lang-wrap{position:relative;display:flex}
|
|
.lu-lang-wrap.fixed{position:fixed;top:14px;right:14px;z-index:1000}
|
|
.lu-lang-wrap.fixed .lu-lang{background:rgba(20,20,26,.7)}
|
|
.lu-lang-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:1001;min-width:128px;padding:4px;border-radius:var(--radius-sm);background:var(--panel);border:1px solid var(--line-subtle);box-shadow:0 14px 40px -12px rgba(0,0,0,.6)}
|
|
.lu-lang-menu[hidden]{display:none}
|
|
.lu-lang-opt{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:4px;background:none;color:var(--fg);font-family:var(--sans);font-size:.84rem;font-weight:600;line-height:1;text-align:left;cursor:pointer}
|
|
.lu-lang-opt:hover,.lu-lang-opt:focus-visible{background:var(--fill-faint);outline:none}
|
|
.lu-lang-opt svg{flex:none;width:20px;height:14px;border-radius:2.5px;display:block;box-shadow:0 0 0 1px rgba(127,127,127,.35)}
|
|
#lu-gt,#goog-gt-tt,.goog-te-banner-frame,.goog-te-balloon-frame,body>.skiptranslate,.VIpgJd-ZVi9od-aZ2wEe-wOHMyf{display:none!important}
|
|
body{top:0!important}
|
|
font.goog-text-highlight{background:none!important;box-shadow:none!important}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
Cloud crossreference: the .lu-cloud-box aside used inside articles and
|
|
the .lu-cloud-grid card row used on the homepage. Purely additive.
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
.lu-cloud-box{
|
|
border:1px solid rgba(139,92,246,.30);
|
|
border-left:3px solid var(--accent);
|
|
border-radius:var(--radius-md);
|
|
background:var(--fill-faint);
|
|
padding:16px 20px;
|
|
margin:0 0 24px;
|
|
}
|
|
.lu-cloud-kicker{
|
|
display:block;font-family:var(--mono);font-size:.62rem;font-weight:500;
|
|
letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:7px;
|
|
}
|
|
.lu-cloud-box p{font-family:var(--sans);font-size:.93rem;line-height:1.65;color:var(--fg-70);margin:0}
|
|
.lu-cloud-box a{color:var(--accent-soft);border-bottom:1px solid transparent}
|
|
.lu-cloud-box a:hover{color:var(--fg);border-bottom-color:var(--accent)}
|
|
|
|
.lu-cloud{padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(40px,6vh,72px)}
|
|
.lu-cloud h2{font-size:clamp(1.5rem,3vw,2.3rem);max-width:28ch;margin-bottom:14px}
|
|
.lu-cloud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px;text-align:left}
|
|
.lu-cloud-card{
|
|
padding:22px 20px;background:var(--panel);border:1px solid var(--line-subtle);
|
|
border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:9px;
|
|
transition:border-color .3s,transform .3s;
|
|
}
|
|
.lu-cloud-card:hover{border-color:rgba(139,92,246,.45);transform:translateY(-2px)}
|
|
.lu-cloud-card h3{font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:-0.01em;line-height:1.25;color:var(--fg)}
|
|
.lu-cloud-card p{font-family:var(--sans);font-size:.82rem;line-height:1.55;color:var(--fg-50);flex:1;margin:0}
|
|
.lu-cloud-card a{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--accent-soft);transition:color .2s}
|
|
.lu-cloud-card a::after{content:'→';margin-left:5px;opacity:.6;display:inline-block;transition:transform .2s}
|
|
.lu-cloud-card a:hover{color:var(--fg)}
|
|
.lu-cloud-card a:hover::after{transform:translateX(3px)}
|
|
|
|
@media(max-width:900px){
|
|
.lu-cloud-grid{grid-template-columns:repeat(2,1fr)}
|
|
}
|
|
@media(max-width:600px){
|
|
.lu-cloud-grid{grid-template-columns:1fr}
|
|
.lu-cloud-box{width:100%;padding:14px 16px;border-radius:var(--radius-sm)}
|
|
.lu-cloud-box p{font-size:.9rem}
|
|
}
|
|
|
|
|
|
/* The phone app banner (lu.js wirePhoneApp): in the page flow under the nav. */
|
|
.lu-phone-app{position:relative;display:flex;align-items:center;gap:9px;margin:10px 16px 0;padding:8px 6px 8px 10px;border:1px solid var(--brand-violet-strong);border-radius:12px;background:var(--panel);color:var(--fg);font-size:.8rem;line-height:1.3;z-index:2}
|
|
.lu-phone-app p{margin:0}
|
|
.lu-phone-app-icon{flex:none;width:28px;height:28px;padding:4px;border-radius:8px;background:rgba(139,92,246,.14);color:var(--accent-soft)}
|
|
.lu-phone-app-text{flex:1;min-width:0}
|
|
.lu-phone-app-title{font-weight:600;font-size:.84rem}
|
|
.lu-phone-app-note{font-size:.72rem;opacity:.75}
|
|
.lu-phone-app-note a{color:var(--accent-soft);white-space:nowrap}
|
|
.lu-phone-app-cta{flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 11px;border-radius:8px;background:var(--accent);color:#fff!important;font-size:.8rem;font-weight:600;text-decoration:none;white-space:nowrap}
|
|
.lu-phone-app-x{flex:none;width:32px;height:32px;margin-left:-4px;border:none;background:none;color:inherit;opacity:.6;cursor:pointer;font-size:.85rem}
|
|
html[data-theme="light"] .lu-phone-app-icon,html[data-theme="light"] .lu-phone-app-note a{color:var(--accent)}
|
|
@media(min-width:768px){.lu-phone-app{max-width:640px;margin:16px auto 0}}
|