115 lines
3.2 KiB
CSS
115 lines
3.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer utilities {
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 228 18% 7%;
|
|
--foreground: 210 20% 95%;
|
|
--card: 225 15% 12%;
|
|
--card-foreground: 210 20% 95%;
|
|
--popover: 225 15% 12%;
|
|
--popover-foreground: 210 20% 95%;
|
|
--primary: 24 95% 53%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 225 12% 15%;
|
|
--secondary-foreground: 210 20% 90%;
|
|
--muted: 225 12% 15%;
|
|
--muted-foreground: 215 12% 50%;
|
|
--accent: 24 80% 50%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--destructive: 0 72% 51%;
|
|
--destructive-foreground: 210 20% 95%;
|
|
--border: 220 10% 20%;
|
|
--input: 220 10% 20%;
|
|
--ring: 24 95% 53%;
|
|
--chart-1: 24 95% 53%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
--radius: 1rem;
|
|
--glass: 225 15% 14%;
|
|
--glass-border: 220 15% 24%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
/* Apple Frosted Glass utilities */
|
|
@layer components {
|
|
.glass {
|
|
@apply border-white/[0.08] bg-white/[0.04] backdrop-blur-2xl;
|
|
}
|
|
.glass-strong {
|
|
@apply border-white/[0.12] bg-white/[0.07] backdrop-blur-3xl;
|
|
}
|
|
.glass-card {
|
|
@apply rounded-2xl border border-white/[0.08] bg-white/[0.05] backdrop-blur-2xl shadow-lg shadow-black/10;
|
|
}
|
|
.glass-input {
|
|
@apply rounded-xl border border-white/[0.1] bg-white/[0.06] backdrop-blur-xl text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary/30 transition-all;
|
|
}
|
|
.glass-button {
|
|
@apply rounded-xl border border-white/[0.1] bg-white/[0.06] backdrop-blur-xl text-foreground transition-all hover:bg-white/[0.1] active:scale-[0.98];
|
|
}
|
|
.glass-nav {
|
|
@apply border-t border-white/[0.08] bg-black/40 backdrop-blur-3xl supports-[backdrop-filter]:bg-black/30;
|
|
}
|
|
.glass-header {
|
|
@apply border-b border-white/[0.06] bg-background/60 backdrop-blur-2xl supports-[backdrop-filter]:bg-background/40;
|
|
}
|
|
.glass-tag {
|
|
@apply rounded-full border border-white/[0.1] bg-white/[0.06] px-2.5 py-0.5 text-[10px] font-medium backdrop-blur-sm;
|
|
}
|
|
.glass-avatar {
|
|
@apply rounded-full border border-white/[0.1] bg-white/[0.08] backdrop-blur-xl;
|
|
}
|
|
}
|
|
|
|
/* Smooth scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* Hide scrollbar for mobile app feel */
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.hide-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Safe area for PWA */
|
|
@supports(padding: max(0px)) {
|
|
.safe-bottom {
|
|
padding-bottom: max(1rem, env(safe-area-inset-bottom));
|
|
}
|
|
}
|
|
|
|
/* Subtle noise texture for depth */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
opacity: 0.015;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
}
|