332 lines
16 KiB
CSS
332 lines
16 KiB
CSS
@import "tailwindcss";
|
|
@theme {
|
|
--color-bg: #0a0a0f;
|
|
--color-s0: #0c0c12;
|
|
--color-s1: #111117;
|
|
--color-s2: #16161e;
|
|
--color-s3: #1c1c26;
|
|
--color-hover: #1a1a24;
|
|
--color-surface: #101019;
|
|
--color-surface2: #1d1d28;
|
|
--color-b1: rgba(255,255,255,0.06);
|
|
--color-b2: rgba(255,255,255,0.10);
|
|
--color-t1: #f0f0f5;
|
|
--color-t2: #8888a0;
|
|
--color-t3: #44445a;
|
|
--color-dim: #5c5c70;
|
|
--color-akzent: #4f8ef7;
|
|
--color-akzent2: #7c5cff;
|
|
--color-success: #3ecf8e;
|
|
--color-warning: #f5a623;
|
|
--color-danger: #f05252;
|
|
--color-purple: #c084fc;
|
|
|
|
--font-sans: "Inter", system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", monospace;
|
|
}
|
|
|
|
/* ── Keyframes ── */
|
|
@keyframes clu-pulse { 0%{transform:scale(.6);opacity:.5} 100%{transform:scale(2.4);opacity:0} }
|
|
@keyframes clu-type-in { to{opacity:1;transform:translateY(0)} }
|
|
@keyframes clu-blink { 50%{opacity:0} }
|
|
@keyframes clu-spin { to{transform:rotate(360deg)} }
|
|
@keyframes clu-dot-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
|
|
|
|
@layer utilities {
|
|
.dot-pulse { animation: clu-dot-pulse 2s infinite; }
|
|
.clu-reset { all: revert; }
|
|
.clu-spin { animation: clu-spin .8s linear infinite; }
|
|
}
|
|
|
|
@layer components {
|
|
|
|
/* Login ambient background */
|
|
.clu-login-body::before {
|
|
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
|
|
background:
|
|
radial-gradient(60% 50% at 12% 10%,rgba(79,142,247,.10),transparent 65%),
|
|
radial-gradient(50% 50% at 88% 100%,rgba(124,92,255,.08),transparent 65%);
|
|
}
|
|
.clu-login-body::after {
|
|
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
|
|
linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
|
|
background-size:32px 32px;
|
|
mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
|
|
}
|
|
|
|
/* Brand marks */
|
|
.clu-brand-mark {
|
|
background:linear-gradient(135deg,#4f8ef7 0%,#7c5cff 100%);
|
|
box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 6px 16px rgba(79,142,247,.30);
|
|
display:grid;place-items:center;
|
|
}
|
|
.clu-brand-mark::before {
|
|
content:"";width:11px;height:11px;border-radius:50%;
|
|
background:#0a0a0f;box-shadow:inset 0 0 0 2px #fff;
|
|
}
|
|
.clu-brand-mark-sm {
|
|
background:linear-gradient(135deg,#4f8ef7 0%,#7c5cff 100%);
|
|
box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 4px 12px rgba(79,142,247,.25);
|
|
display:grid;place-items:center;
|
|
}
|
|
.clu-brand-mark-sm::before {
|
|
content:"";width:10px;height:10px;border-radius:50%;
|
|
background:#0c0c12;box-shadow:inset 0 0 0 2px #fff;
|
|
}
|
|
|
|
/* Pulse dot */
|
|
.clu-pulse-dot { position:relative;flex:none; }
|
|
.clu-pulse-dot::after {
|
|
content:"";position:absolute;inset:-3px;border-radius:50%;
|
|
background:currentColor;opacity:.35;animation:clu-pulse 1.8s ease-out infinite;
|
|
}
|
|
|
|
/* Input with :focus-within */
|
|
.clu-input {
|
|
display:flex;align-items:center;gap:10px;padding:0 12px;
|
|
background:#101019;border:1px solid rgba(255,255,255,.06);border-radius:8px;
|
|
transition:border-color .15s,background .15s,box-shadow .15s;height:40px;
|
|
}
|
|
.clu-input:hover { border-color:rgba(255,255,255,.10); }
|
|
.clu-input:focus-within {
|
|
border-color:rgba(79,142,247,.50);background:#12121c;
|
|
box-shadow:0 0 0 3px rgba(79,142,247,.10);
|
|
}
|
|
.clu-input input {
|
|
flex:1;background:none;border:0;outline:0;
|
|
color:#f0f0f5;font-size:13.5px;font-family:inherit;min-width:0;height:100%;
|
|
}
|
|
.clu-input input::placeholder { color:#5c5c70; }
|
|
|
|
/* Divider */
|
|
.clu-divider {
|
|
display:flex;align-items:center;gap:12px;color:#5c5c70;
|
|
font-size:11px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;
|
|
}
|
|
.clu-divider::before,.clu-divider::after {
|
|
content:"";flex:1;height:1px;background:rgba(255,255,255,.06);
|
|
}
|
|
|
|
/* SSO button */
|
|
.clu-sso-btn {
|
|
display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;
|
|
background:#101019;border:1px solid rgba(255,255,255,.06);border-radius:8px;
|
|
color:#f0f0f5;font-size:12.5px;font-weight:500;transition:all .15s;cursor:pointer;font-family:inherit;
|
|
}
|
|
.clu-sso-btn:hover { background:#1d1d28;border-color:rgba(255,255,255,.10); }
|
|
|
|
/* Primary button */
|
|
.clu-btn-primary {
|
|
display:inline-flex;align-items:center;justify-content:center;gap:8px;
|
|
padding:10px 16px;background:#4f8ef7;color:#fff;border-radius:8px;
|
|
font-weight:500;font-size:13.5px;height:40px;width:100%;
|
|
transition:background .15s,transform .05s;border:none;cursor:pointer;font-family:inherit;
|
|
box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 1px 3px rgba(79,142,247,.35);
|
|
}
|
|
.clu-btn-primary:hover { background:#5e98f7; }
|
|
.clu-btn-primary:active { transform:translateY(1px); }
|
|
.clu-btn-primary:disabled { opacity:.7;cursor:not-allowed; }
|
|
.clu-btn-primary svg.arrow { transition:transform .15s; }
|
|
.clu-btn-primary:hover:not(:disabled) svg.arrow { transform:translateX(2px); }
|
|
|
|
/* Alt button */
|
|
.clu-alt-btn {
|
|
display:flex;align-items:center;gap:10px;padding:9px 12px;
|
|
background:transparent;border:1px solid rgba(255,255,255,.06);border-radius:8px;
|
|
font-size:12.5px;color:#f0f0f5;font-weight:500;transition:all .15s;
|
|
width:100%;cursor:pointer;font-family:inherit;
|
|
}
|
|
.clu-alt-btn:hover { border-color:rgba(255,255,255,.10);background:#101019; }
|
|
|
|
/* Live side glow */
|
|
.clu-live-side::before {
|
|
content:"";position:absolute;inset:0;pointer-events:none;
|
|
background:radial-gradient(80% 50% at 100% 0%,rgba(79,142,247,.12),transparent 65%);
|
|
}
|
|
|
|
/* Terminal */
|
|
.clu-term-line {
|
|
display:flex;gap:10px;align-items:flex-start;
|
|
opacity:0;transform:translateY(4px);animation:clu-type-in .35s ease forwards;
|
|
}
|
|
.clu-term-ok { color:#3ecf8e; }
|
|
.clu-term-warn { color:#f5a623; }
|
|
.clu-term-err { color:#f05252; }
|
|
.clu-term-acc { color:#4f8ef7; }
|
|
.clu-term-dim { color:#5c5c70; }
|
|
.clu-term-pkg { color:#c084fc; }
|
|
|
|
/* Cursor */
|
|
.clu-cursor {
|
|
display:inline-block;width:7px;height:13px;background:#4f8ef7;
|
|
vertical-align:-2px;animation:clu-blink 1s steps(1) infinite;margin-left:2px;
|
|
}
|
|
|
|
/* Dashboard topbar */
|
|
.clu-topbar {
|
|
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
|
|
background:rgba(10,10,15,.85);
|
|
}
|
|
|
|
/* Search */
|
|
.clu-search {
|
|
display:flex;align-items:center;gap:8px;padding:6px 10px;
|
|
background:#101019;border:1px solid rgba(255,255,255,.06);border-radius:7px;
|
|
color:#8888a0;transition:border-color .15s;min-width:280px;
|
|
}
|
|
.clu-search:hover { border-color:rgba(255,255,255,.10); }
|
|
.clu-search:focus-within { border-color:rgba(79,142,247,.5);background:#12121c; }
|
|
.clu-search input {
|
|
flex:1;background:none;border:0;outline:0;
|
|
color:#f0f0f5;font-size:12.5px;font-family:inherit;min-width:0;
|
|
}
|
|
.clu-search input::placeholder { color:#8888a0; }
|
|
|
|
/* Dashboard button */
|
|
.clu-btn-dash {
|
|
display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
|
|
background:#4f8ef7;color:#fff;border-radius:7px;font-weight:500;font-size:12.5px;
|
|
transition:background .15s;border:none;cursor:pointer;font-family:inherit;
|
|
box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 1px 3px rgba(79,142,247,.35);
|
|
}
|
|
.clu-btn-dash:hover { background:#5e98f7; }
|
|
|
|
/* Metric top stripe */
|
|
.clu-metric { position:relative;overflow:hidden; }
|
|
.clu-metric::before { content:"";position:absolute;top:0;left:0;right:0;height:2px;background:#4f8ef7; }
|
|
.clu-metric-success::before { background:#3ecf8e; }
|
|
.clu-metric-warning::before { background:#f5a623; }
|
|
.clu-metric-danger::before { background:#f05252; }
|
|
.clu-metric-neutral::before { background:#5c5c70; }
|
|
|
|
/* Nav active bar */
|
|
.clu-nav-active { position:relative; }
|
|
.clu-nav-active::before {
|
|
content:"";position:absolute;left:-12px;top:6px;bottom:6px;
|
|
width:2px;border-radius:2px;background:#4f8ef7;
|
|
}
|
|
|
|
/* Row actions */
|
|
.clu-row-actions { display:flex;gap:4px;justify-content:flex-end;opacity:0;transition:opacity .15s; }
|
|
tr:hover .clu-row-actions { opacity:1; }
|
|
|
|
/* Plan box overlay */
|
|
.clu-plan-box { position:relative;overflow:hidden; }
|
|
.clu-plan-box::before {
|
|
content:"";position:absolute;inset:0;pointer-events:none;
|
|
background:radial-gradient(120% 80% at 0% 0%,rgba(79,142,247,.10),transparent 60%);
|
|
}
|
|
|
|
/* Chart axis */
|
|
.clu-chart-axis { font-family:var(--font-mono);font-size:9.5px;fill:#5c5c70; }
|
|
|
|
/* ── Stepper ── */
|
|
.clu-stepper { display:flex;align-items:center;gap:10px;margin-top:28px;font-family:var(--font-mono);font-size:11px;color:#44445a; }
|
|
.clu-step { display:flex;align-items:center;gap:7px; }
|
|
.clu-step-num { width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.06);display:grid;place-items:center;font-size:10.5px;color:#8888a0;background:#101019; }
|
|
.clu-step.active .clu-step-num { border-color:#4f8ef7;color:#4f8ef7;background:rgba(79,142,247,.12); }
|
|
.clu-step.done .clu-step-num { border-color:#3ecf8e;color:#0a0a0f;background:#3ecf8e; }
|
|
.clu-step-label { font-size:11px;color:#8888a0;text-transform:uppercase;letter-spacing:.06em;font-weight:500; }
|
|
.clu-step.active .clu-step-label { color:#f0f0f5; }
|
|
.clu-step-line { flex:1;height:1px;background:rgba(255,255,255,.06);min-width:14px;max-width:28px; }
|
|
|
|
/* ── Two-column field row ── */
|
|
.clu-field-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
|
|
|
|
/* ── Input suffix ── */
|
|
.clu-input.with-suffix { padding-right:0; }
|
|
.clu-input-suffix { height:100%;display:flex;align-items:center;padding:0 12px;border-left:1px solid rgba(255,255,255,.06);color:#8888a0;font-family:var(--font-mono);font-size:11.5px;background:rgba(255,255,255,.015);border-top-right-radius:8px;border-bottom-right-radius:8px; }
|
|
|
|
/* ── Input valid checkmark ── */
|
|
.clu-input-check { color:#3ecf8e;display:none;flex:none; }
|
|
.clu-input.valid .clu-input-check { display:inline-flex; }
|
|
|
|
/* ── Slug preview ── */
|
|
.clu-slug-preview { font-family:var(--font-mono);font-size:11px;color:#8888a0;margin-top:4px; }
|
|
.clu-slug-preview b { color:#4f8ef7;font-weight:500; }
|
|
|
|
/* ── Password strength meter ── */
|
|
.clu-pw-meter { display:flex;gap:4px;margin-top:6px; }
|
|
.clu-pw-meter span { flex:1;height:3px;border-radius:2px;background:#16161e;transition:background .2s; }
|
|
.clu-pw-meter.s1 span:nth-child(-n+1) { background:#f05252; }
|
|
.clu-pw-meter.s2 span:nth-child(-n+2) { background:#f5a623; }
|
|
.clu-pw-meter.s3 span:nth-child(-n+3) { background:#4f8ef7; }
|
|
.clu-pw-meter.s4 span { background:#3ecf8e; }
|
|
.clu-pw-rules { display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;font-family:var(--font-mono);font-size:10.5px;color:#5c5c70; }
|
|
.clu-pw-rule { display:inline-flex;align-items:center;gap:5px; }
|
|
.clu-pw-rule .clu-pw-bullet { width:5px;height:5px;border-radius:50%;background:#5c5c70;transition:background .15s; }
|
|
.clu-pw-rule.ok { color:#3ecf8e; }
|
|
.clu-pw-rule.ok .clu-pw-bullet { background:#3ecf8e; }
|
|
|
|
/* ── Checkbox ── */
|
|
.clu-checkbox { display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:#8888a0;cursor:pointer;user-select:none;line-height:1.45; }
|
|
.clu-checkbox .clu-check-box { width:15px;height:15px;border-radius:4px;border:1px solid rgba(255,255,255,.10);background:#101019;display:grid;place-items:center;transition:all .15s;flex:none;margin-top:1px; }
|
|
.clu-checkbox input:checked ~ .clu-check-box { background:#4f8ef7;border-color:#4f8ef7; }
|
|
.clu-checkbox input:checked ~ .clu-check-box svg { opacity:1;transform:scale(1); }
|
|
.clu-checkbox .clu-check-box svg { opacity:0;transform:scale(.6);transition:all .15s;color:#fff; }
|
|
.clu-checkbox:hover { color:#f0f0f5; }
|
|
|
|
/* ── Trial card (signup right panel) ── */
|
|
.clu-trial-card { background:#16161e;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:18px 20px;position:relative;overflow:hidden; }
|
|
.clu-trial-card::before { content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#4f8ef7,#7c5cff); }
|
|
.clu-trial-row { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px; }
|
|
.clu-trial-tag { font-family:var(--font-mono);font-size:10.5px;color:#4f8ef7;background:rgba(79,142,247,.12);padding:3px 8px;border-radius:5px;border:1px solid rgba(79,142,247,.25);font-weight:500;text-transform:uppercase;letter-spacing:.05em; }
|
|
.clu-trial-count { font-family:var(--font-mono);font-size:11px;color:#8888a0;display:inline-flex;align-items:center;gap:6px; }
|
|
.clu-trial-title { font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin-top:12px; }
|
|
.clu-trial-title em { font-style:normal;background:linear-gradient(90deg,#4f8ef7,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700; }
|
|
.clu-trial-sub { color:#8888a0;font-size:13px;margin-top:6px; }
|
|
|
|
/* ── Benefit list ── */
|
|
.clu-benefit-list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px; }
|
|
.clu-benefit { display:flex;gap:12px;align-items:flex-start; }
|
|
.clu-benefit-ico { width:30px;height:30px;border-radius:8px;background:rgba(79,142,247,.12);border:1px solid rgba(79,142,247,.22);color:#4f8ef7;display:grid;place-items:center;flex:none; }
|
|
.clu-benefit-ico.success { background:rgba(62,207,142,.12);border-color:rgba(62,207,142,.22);color:#3ecf8e; }
|
|
.clu-benefit-ico.purple { background:rgba(124,92,255,.12);border-color:rgba(124,92,255,.25);color:#a78bfa; }
|
|
.clu-benefit-ico.warn { background:rgba(245,166,35,.10);border-color:rgba(245,166,35,.22);color:#f5a623; }
|
|
.clu-benefit-title { font-size:13.5px;font-weight:500;color:#f0f0f5; }
|
|
.clu-benefit-desc { font-size:12.5px;color:#8888a0;margin-top:2px;line-height:1.5; }
|
|
|
|
/* ── Quote card ── */
|
|
.clu-quote-card { background:#16161e;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:18px 20px;margin-top:auto; }
|
|
.clu-quote-text { font-size:13.5px;color:#dcdce8;line-height:1.55; }
|
|
.clu-quote-text::before { content:"\201E";color:#4f8ef7;font-size:24px;line-height:0;margin-right:4px;vertical-align:-6px;font-weight:600; }
|
|
.clu-quote-text::after { content:"\201D";color:#4f8ef7;font-weight:600; }
|
|
.clu-quote-author { display:flex;align-items:center;gap:10px;margin-top:12px; }
|
|
.clu-avatar { width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3ecf8e,#2a9d6f);display:grid;place-items:center;color:#0a0a0f;font-weight:600;font-size:12px;font-family:var(--font-mono); }
|
|
.clu-author-name { font-size:12px;color:#f0f0f5;font-weight:500; }
|
|
.clu-author-role { font-size:11px;color:#8888a0;font-family:var(--font-mono); }
|
|
|
|
/* ── Logo strip ── */
|
|
.clu-logos { display:flex;align-items:center;gap:20px;flex-wrap:wrap;opacity:.55;font-family:var(--font-mono);font-size:11px;color:#8888a0;text-transform:uppercase;letter-spacing:.08em; }
|
|
.clu-logo-pill { padding:5px 10px;border:1px solid rgba(255,255,255,.06);border-radius:5px;background:#101019; }
|
|
|
|
/* Login page responsive grid */
|
|
.clu-login-grid {
|
|
display:grid;
|
|
grid-template-columns:minmax(420px,1fr) 1fr;
|
|
min-height:100vh;
|
|
min-height:100dvh;
|
|
position:relative;
|
|
z-index:10;
|
|
}
|
|
.clu-form-side { padding:32px 48px; }
|
|
.clu-sso-row { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
|
|
@media(max-width:1080px){
|
|
.clu-login-grid { grid-template-columns:1fr; }
|
|
.clu-live-side { display:none !important; }
|
|
.clu-form-side { padding:28px 36px; }
|
|
}
|
|
@media(max-width:640px){
|
|
.clu-form-side { padding:20px; }
|
|
.clu-sso-row { grid-template-columns:1fr; }
|
|
.clu-login-status { display:none !important; }
|
|
.clu-field-row { grid-template-columns:1fr; }
|
|
.clu-step-label { display:none; }
|
|
}
|
|
@media(max-width:390px){
|
|
.clu-form-side { padding:16px; }
|
|
}
|
|
}
|