533 lines
16 KiB
CSS
533 lines
16 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* ── Dark Base (Aligned with marketing look) ───── */
|
|
--color-base: #05070c;
|
|
--color-surface: #0b111c;
|
|
--color-sidebar: #080d17;
|
|
|
|
/* Shadows */
|
|
--color-shadow-dark: #02050b;
|
|
--color-shadow-light: #111a2a;
|
|
|
|
/* Brand */
|
|
--color-accent: #25D366;
|
|
--color-accent-dark: #1aab52;
|
|
|
|
/* Text */
|
|
--color-text-primary: #edf3ff;
|
|
--color-text-secondary:#93a2bb;
|
|
--color-text-muted: #627189;
|
|
|
|
/* Radii */
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 24px;
|
|
--radius-pill:9999px;
|
|
|
|
--font-sans: 'Nunito', system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
[data-theme='light'] {
|
|
--color-base: #f5f7fb;
|
|
--color-surface: #eef2f8;
|
|
--color-sidebar: #e8edf6;
|
|
|
|
--color-shadow-dark: #d4dcec;
|
|
--color-shadow-light: #ffffff;
|
|
|
|
--color-accent: #149c4a;
|
|
--color-accent-dark: #0f7e3a;
|
|
|
|
--color-text-primary: #0f172a;
|
|
--color-text-secondary: #334155;
|
|
--color-text-muted: #64748b;
|
|
}
|
|
|
|
@layer base {
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
@apply bg-base text-text-primary font-sans antialiased;
|
|
background-color: var(--color-base);
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
color: var(--color-text-primary);
|
|
caret-color: var(--color-text-primary);
|
|
}
|
|
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
textarea:-webkit-autofill,
|
|
textarea:-webkit-autofill:hover,
|
|
textarea:-webkit-autofill:focus,
|
|
select:-webkit-autofill,
|
|
select:-webkit-autofill:hover,
|
|
select:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: var(--color-text-primary);
|
|
-webkit-box-shadow: 0 0 0 1000px var(--color-base) inset;
|
|
box-shadow: 0 0 0 1000px var(--color-base) inset;
|
|
transition: background-color 9999s ease-in-out 0s;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
|
|
/* ── Core Neumorphic Surfaces ─────────────────── */
|
|
.neu-raised {
|
|
background: var(--color-base);
|
|
box-shadow:
|
|
8px 8px 20px var(--color-shadow-dark),
|
|
-8px -8px 20px var(--color-shadow-light);
|
|
}
|
|
|
|
.neu-raised-sm {
|
|
background: var(--color-base);
|
|
box-shadow:
|
|
4px 4px 10px var(--color-shadow-dark),
|
|
-4px -4px 10px var(--color-shadow-light);
|
|
}
|
|
|
|
.neu-inset {
|
|
background: var(--color-base);
|
|
box-shadow:
|
|
inset 5px 5px 12px var(--color-shadow-dark),
|
|
inset -5px -5px 12px var(--color-shadow-light);
|
|
}
|
|
|
|
.neu-inset-sm {
|
|
background: var(--color-base);
|
|
box-shadow:
|
|
inset 2px 2px 6px var(--color-shadow-dark),
|
|
inset -2px -2px 6px var(--color-shadow-light);
|
|
}
|
|
|
|
/* ── Buttons ──────────────────────────────────── */
|
|
.neu-btn {
|
|
background: var(--color-base);
|
|
box-shadow:
|
|
4px 4px 10px var(--color-shadow-dark),
|
|
-4px -4px 10px var(--color-shadow-light);
|
|
@apply rounded-lg flex items-center justify-center font-bold text-text-secondary transition-all text-sm;
|
|
cursor: pointer;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
.neu-btn:hover {
|
|
box-shadow:
|
|
6px 6px 14px var(--color-shadow-dark),
|
|
-6px -6px 14px var(--color-shadow-light);
|
|
@apply text-text-primary;
|
|
transform: translateY(-1px);
|
|
}
|
|
.neu-btn:active {
|
|
box-shadow:
|
|
inset 2px 2px 6px var(--color-shadow-dark),
|
|
inset -2px -2px 6px var(--color-shadow-light);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.neu-btn-accent {
|
|
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
|
|
box-shadow:
|
|
0 4px 22px rgba(37,211,102,0.35),
|
|
4px 4px 12px var(--color-shadow-dark),
|
|
-2px -2px 8px var(--color-shadow-light);
|
|
@apply rounded-lg flex items-center justify-center font-bold text-white transition-all text-sm border-none outline-none cursor-pointer;
|
|
}
|
|
.neu-btn-accent:hover {
|
|
box-shadow:
|
|
0 6px 30px rgba(37,211,102,0.5),
|
|
4px 4px 14px var(--color-shadow-dark),
|
|
-2px -2px 10px var(--color-shadow-light);
|
|
transform: translateY(-1px);
|
|
}
|
|
.neu-btn-accent:active {
|
|
box-shadow:
|
|
inset 2px 2px 6px var(--color-accent-dark),
|
|
inset -2px -2px 6px rgba(255,255,255,0.1);
|
|
transform: translateY(0);
|
|
}
|
|
.neu-btn-accent:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.neu-btn-danger {
|
|
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
|
box-shadow:
|
|
0 4px 22px rgba(239,68,68,0.35),
|
|
4px 4px 12px var(--color-shadow-dark),
|
|
-2px -2px 8px var(--color-shadow-light);
|
|
@apply rounded-lg flex items-center justify-center font-bold text-white transition-all text-sm border-none outline-none cursor-pointer;
|
|
}
|
|
.neu-btn-danger:hover {
|
|
box-shadow:
|
|
0 6px 30px rgba(239,68,68,0.5),
|
|
4px 4px 14px var(--color-shadow-dark),
|
|
-2px -2px 10px var(--color-shadow-light);
|
|
transform: translateY(-1px);
|
|
}
|
|
.neu-btn-danger:active {
|
|
box-shadow:
|
|
inset 2px 2px 6px #b91c1c,
|
|
inset -2px -2px 6px rgba(255,255,255,0.1);
|
|
transform: translateY(0);
|
|
}
|
|
.neu-btn-danger:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
/* ── Form Inputs ──────────────────────────────── */
|
|
.neu-input {
|
|
background: var(--color-base);
|
|
box-shadow:
|
|
inset 4px 4px 8px var(--color-shadow-dark),
|
|
inset -4px -4px 8px var(--color-shadow-light);
|
|
@apply rounded-xl px-4 py-2.5 w-full text-text-primary text-sm font-semibold border-none outline-none transition-all;
|
|
}
|
|
.neu-input::placeholder {
|
|
color: var(--color-text-muted);
|
|
font-weight: 500;
|
|
}
|
|
.neu-input:focus {
|
|
box-shadow:
|
|
inset 4px 4px 8px var(--color-shadow-dark),
|
|
inset -4px -4px 8px var(--color-shadow-light),
|
|
0 0 0 2px rgba(37,211,102,0.3);
|
|
}
|
|
|
|
.neu-input:-webkit-autofill,
|
|
.neu-input:-webkit-autofill:hover,
|
|
.neu-input:-webkit-autofill:focus,
|
|
.neu-input:-webkit-autofill:active {
|
|
-webkit-text-fill-color: var(--color-text-primary) !important;
|
|
caret-color: var(--color-text-primary) !important;
|
|
-webkit-box-shadow: 0 0 0 1000px var(--color-base) inset !important;
|
|
box-shadow: 0 0 0 1000px var(--color-base) inset !important;
|
|
background-color: var(--color-base) !important;
|
|
border-radius: 12px;
|
|
transition: background-color 9999s ease-in-out 0s;
|
|
}
|
|
|
|
/* ── Status Badges ────────────────────────────── */
|
|
.badge-success {
|
|
@apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[11px] font-black uppercase tracking-wider;
|
|
background: rgba(37,211,102,0.12);
|
|
color: #4ade80;
|
|
border: 1px solid rgba(37,211,102,0.2);
|
|
}
|
|
.badge-error {
|
|
@apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[11px] font-black uppercase tracking-wider;
|
|
background: rgba(239,68,68,0.12);
|
|
color: #f87171;
|
|
border: 1px solid rgba(239,68,68,0.2);
|
|
}
|
|
.badge-warning {
|
|
@apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[11px] font-black uppercase tracking-wider;
|
|
background: rgba(251,191,36,0.12);
|
|
color: #fbbf24;
|
|
border: 1px solid rgba(251,191,36,0.2);
|
|
}
|
|
.badge-neutral {
|
|
@apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[11px] font-black uppercase tracking-wider;
|
|
background: rgba(255,255,255,0.06);
|
|
color: var(--color-text-secondary);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
.badge-verified {
|
|
@apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[11px] font-black uppercase tracking-wider;
|
|
background: rgba(99,102,241,0.12);
|
|
color: #a5b4fc;
|
|
border: 1px solid rgba(99,102,241,0.2);
|
|
}
|
|
|
|
/* ── Divider ──────────────────────────────────── */
|
|
.neu-divider {
|
|
border: none;
|
|
border-top: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
/* ── Select Options ───────────────────────────── */
|
|
select option { background: var(--color-surface); color: var(--color-text-primary); }
|
|
|
|
/* ── Scrollbar ────────────────────────────────── */
|
|
::-webkit-scrollbar { width: 5px; height: 5px; }
|
|
::-webkit-scrollbar-track { background: var(--color-base); }
|
|
::-webkit-scrollbar-thumb { background: var(--color-shadow-light); border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
|
|
|
|
/* ── Marketing: Glass primitives ─────────────── */
|
|
.glass-panel {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
@apply backdrop-blur-xl rounded-xl transition-all duration-300;
|
|
}
|
|
.glass-panel:hover {
|
|
background: rgba(255,255,255,0.05);
|
|
border-color: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.solid-panel {
|
|
background: #111111;
|
|
border: 1px solid #222222;
|
|
@apply rounded-xl shadow-2xl shadow-black/50;
|
|
}
|
|
|
|
/* ── Marketing: Buttons ──────────────────────── */
|
|
.btn-primary {
|
|
@apply bg-accent hover:bg-[#20bd5a] text-black font-bold px-6 py-2.5 rounded-[9999px] transition-all duration-300 hover:-translate-y-0.5 shadow-[0_0_20px_rgba(37,211,102,0.3)] hover:shadow-[0_0_30px_rgba(37,211,102,0.5)] cursor-pointer no-underline inline-flex items-center;
|
|
}
|
|
.btn-secondary {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
@apply text-text-primary font-bold px-6 py-2.5 rounded-[9999px] transition-all duration-300 shadow-lg hover:bg-white/5 cursor-pointer no-underline inline-flex items-center;
|
|
}
|
|
.btn-icon {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
@apply text-text-secondary hover:text-white transition-all duration-200 rounded-lg flex items-center justify-center cursor-pointer;
|
|
}
|
|
|
|
/* ── Marketing: Typography ───────────────────── */
|
|
.text-gradient {
|
|
background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.text-gradient-accent {
|
|
background: linear-gradient(135deg, var(--color-accent) 0%, #4ade80 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* ── Marketing: Code blocks ──────────────────── */
|
|
.syntax-wrapper {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
@apply rounded-xl overflow-hidden shadow-2xl;
|
|
}
|
|
.syntax-wrapper pre {
|
|
margin: 0 !important;
|
|
border-radius: var(--radius-xl) !important;
|
|
font-size: 0.85rem !important;
|
|
line-height: 1.7 !important;
|
|
background: #050505 !important;
|
|
}
|
|
|
|
/* ── Marketing: Layout ───────────────────────── */
|
|
.section-pad { @apply py-16 sm:py-20 lg:py-24 px-4 sm:px-6 lg:px-8; }
|
|
}
|
|
|
|
[data-theme='light'] .text-white {
|
|
color: var(--color-text-primary) !important;
|
|
}
|
|
|
|
[data-theme='light'] .text-gradient {
|
|
background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
[data-theme='light'] .glass-panel,
|
|
[data-theme='light'] .solid-panel,
|
|
[data-theme='light'] .neu-raised,
|
|
[data-theme='light'] .neu-raised-sm,
|
|
[data-theme='light'] .neu-inset,
|
|
[data-theme='light'] .neu-inset-sm {
|
|
border-color: rgba(15, 23, 42, 0.08) !important;
|
|
}
|
|
|
|
[data-theme='light'] .bg-white\/5,
|
|
[data-theme='light'] .bg-white\/8,
|
|
[data-theme='light'] .bg-white\/10 {
|
|
background-color: rgba(15, 23, 42, 0.04) !important;
|
|
}
|
|
|
|
[data-theme='light'] .bg-white\/12 {
|
|
background-color: rgba(15, 23, 42, 0.07) !important;
|
|
}
|
|
|
|
[data-theme='light'] .hover\:bg-white\/5:hover,
|
|
[data-theme='light'] .hover\:bg-white\/8:hover,
|
|
[data-theme='light'] .hover\:bg-white\/10:hover,
|
|
[data-theme='light'] .hover\:bg-white\/12:hover {
|
|
background-color: rgba(15, 23, 42, 0.08) !important;
|
|
}
|
|
|
|
[data-theme='light'] .hover\:text-white:hover,
|
|
[data-theme='light'] .focus\:text-white:focus {
|
|
color: var(--color-text-primary) !important;
|
|
}
|
|
|
|
[data-theme='light'] .group:hover .group-hover\:text-white {
|
|
color: var(--color-text-primary) !important;
|
|
}
|
|
|
|
[data-theme='light'] .group:hover .group-hover\:text-white\/10,
|
|
[data-theme='light'] .group:hover .group-hover\:text-white\/5 {
|
|
color: rgba(15, 23, 42, 0.16) !important;
|
|
}
|
|
|
|
[data-theme='light'] .glass-panel {
|
|
background: rgba(255,255,255,0.7);
|
|
border-color: rgba(15,23,42,0.12);
|
|
}
|
|
|
|
[data-theme='light'] .glass-panel:hover {
|
|
background: rgba(255,255,255,0.88);
|
|
border-color: rgba(15,23,42,0.18);
|
|
}
|
|
|
|
[data-theme='light'] .solid-panel {
|
|
background: #f8fbff;
|
|
border-color: rgba(15,23,42,0.1);
|
|
box-shadow: 0 14px 40px rgba(15,23,42,0.12);
|
|
}
|
|
|
|
[data-theme='light'] .btn-icon:hover {
|
|
color: var(--color-text-primary);
|
|
background: rgba(15,23,42,0.08);
|
|
border-color: rgba(15,23,42,0.18);
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
@keyframes pulseGlow {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.4); }
|
|
50% { box-shadow: 0 0 0 10px rgba(37,211,102,0); }
|
|
}
|
|
@keyframes slideRight {
|
|
0% { opacity: 0; transform: translate3d(-14px, 0, 0); }
|
|
100% { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
}
|
|
@keyframes blink {
|
|
0%, 49% { opacity: 1; }
|
|
50%, 100% { opacity: 0; }
|
|
}
|
|
@keyframes revealUp {
|
|
0% { opacity: 0; transform: translate3d(0, 18px, 0); }
|
|
100% { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
}
|
|
@keyframes drift {
|
|
0%, 100% { transform: translate3d(0, 0, 0); }
|
|
50% { transform: translate3d(8px, -10px, 0); }
|
|
}
|
|
@keyframes pageFadeIn {
|
|
from { opacity: 0; transform: translateY(14px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes digitPop {
|
|
0% { opacity: 0; transform: translateY(10px) scale(0.65); }
|
|
65% { transform: translateY(-2px) scale(1.1); }
|
|
100% { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
@utility animate-float { animation: float 4s ease-in-out infinite; }
|
|
@utility animate-float-slow { animation: float 6s ease-in-out infinite; }
|
|
@utility animate-pulse-glow { animation: pulseGlow 2s infinite; }
|
|
@utility animate-slide-right { animation: slideRight 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
|
|
@utility animate-blink { animation: blink 1s steps(1, end) infinite; }
|
|
@utility animate-reveal-up { animation: revealUp 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
|
|
@utility animate-drift { animation: drift 8s ease-in-out infinite; }
|
|
|
|
.page-fade-in {
|
|
animation: pageFadeIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
|
|
}
|
|
|
|
.fx-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 280ms ease, box-shadow 320ms ease, background-color 320ms ease;
|
|
}
|
|
|
|
.fx-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -120% -40%;
|
|
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.12) 48%, transparent 66%);
|
|
transform: translateX(-35%) rotate(8deg);
|
|
transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1), opacity 340ms ease;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.fx-card:hover {
|
|
transform: translateY(-5px) scale(1.008);
|
|
box-shadow: 0 22px 56px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.06) inset;
|
|
}
|
|
|
|
.fx-card:hover::before {
|
|
transform: translateX(70%) rotate(8deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
.fx-splash-orb {
|
|
position: absolute;
|
|
border-radius: 9999px;
|
|
pointer-events: none;
|
|
filter: blur(90px);
|
|
opacity: 0.28;
|
|
animation: drift 12s ease-in-out infinite;
|
|
}
|
|
|
|
.fx-hover-tilt {
|
|
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.fx-hover-tilt:hover {
|
|
transform: translateY(-4px) rotateX(2deg) rotateY(-2deg);
|
|
}
|
|
|
|
.animate-float,
|
|
.animate-float-slow,
|
|
.animate-slide-right,
|
|
.animate-reveal-up,
|
|
.animate-drift {
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.fx-splash-orb {
|
|
display: none;
|
|
}
|
|
|
|
.fx-card::before {
|
|
display: none;
|
|
}
|
|
|
|
.fx-hover-tilt,
|
|
.fx-hover-tilt:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.glass-panel,
|
|
.solid-panel {
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|