File size: 2,685 Bytes
b8e6434 77efd75 b8e6434 77efd75 9b881be 77efd75 b8e6434 77efd75 9b881be 77efd75 9b881be 77efd75 9b881be 77efd75 b8e6434 8a01da9 43e744c 77efd75 8a01da9 77efd75 8a01da9 77efd75 71e92c7 77efd75 8a01da9 77efd75 8a01da9 71e92c7 8a01da9 71e92c7 8a01da9 71e92c7 8a01da9 b8e6434 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | @tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 263.4 70% 50.4%;
--primary-foreground: 210 20% 98%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 263.4 70% 50.4%;
--radius: 0.75rem;
}
@layer base {
body {
background-color: #030303;
color: hsl(var(--foreground));
font-feature-settings: "rlig" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
background-image:
radial-gradient(at 0% 0%, hsla(263, 70%, 50%, 0.15) 0px, transparent 50%),
radial-gradient(at 100% 100%, hsla(190, 70%, 50%, 0.1) 0px, transparent 50%);
background-attachment: fixed;
}
}
@layer components {
.glass-card {
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
border-color: rgba(255, 255, 255, 0.2);
background-color: rgba(0, 0, 0, 0.5);
}
.premium-gradient {
background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
}
.text-gradient {
background-image: linear-gradient(to right, #818cf8, #c084fc, #f472b6);
-webkit-background-clip: text;
color: transparent;
}
}
/* Global Scrollbar Reset & Premium 2026 Styling */
* {
scrollbar-width: thin;
scrollbar-color: rgba(168, 85, 247, 0.3) transparent;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(168, 85, 247, 0.5) 0%, rgba(99, 102, 241, 0.5) 100%);
border-radius: 10px;
border: none;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(168, 85, 247, 0.8) 0%, rgba(99, 102, 241, 0.8) 100%);
width: 5px;
}
/* Specific for the sidebar to ensure absolute minimalism */
.custom-scrollbar::-webkit-scrollbar {
width: 2px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #a855f7;
box-shadow: 0 0 10px rgba(168, 85, 247, 0.8);
}
::selection {
background: rgba(34, 211, 238, 0.3);
}
button,
input,
textarea,
select {
font: inherit;
}
|