full upgrade to dev
This commit is contained in:
191
app/globals.css
191
app/globals.css
@@ -2,152 +2,181 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
|
||||
|
||||
:root {
|
||||
/* Organic Modern Palette */
|
||||
--background: #FDFCF8; /* Cream */
|
||||
--foreground: #292524; /* Warm Grey */
|
||||
--card: rgba(255, 255, 255, 0.6);
|
||||
--card-foreground: #292524;
|
||||
--popover: #FFFFFF;
|
||||
--popover-foreground: #292524;
|
||||
--primary: #292524;
|
||||
--primary-foreground: #FDFCF8;
|
||||
--secondary: #E7E5E4;
|
||||
--secondary-foreground: #292524;
|
||||
--muted: #F5F5F4;
|
||||
--muted-foreground: #78716C;
|
||||
--accent: #F3F1E7; /* Sand */
|
||||
--accent-foreground: #292524;
|
||||
--destructive: #EF4444;
|
||||
--destructive-foreground: #FDFCF8;
|
||||
--border: #E7E5E4;
|
||||
--input: #E7E5E4;
|
||||
--ring: #A7F3D0; /* Mint ring */
|
||||
--radius: 1rem;
|
||||
/* Organic Modern Palette */
|
||||
--background: #fdfcf8; /* Cream */
|
||||
--foreground: #292524; /* Warm Grey */
|
||||
--card: rgba(255, 255, 255, 0.6);
|
||||
--card-foreground: #292524;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #292524;
|
||||
--primary: #292524;
|
||||
--primary-foreground: #fdfcf8;
|
||||
--secondary: #e7e5e4;
|
||||
--secondary-foreground: #292524;
|
||||
--muted: #f5f5f4;
|
||||
--muted-foreground: #78716c;
|
||||
--accent: #f3f1e7; /* Sand */
|
||||
--accent-foreground: #292524;
|
||||
--destructive: #ef4444;
|
||||
--destructive-foreground: #fdfcf8;
|
||||
--border: #e7e5e4;
|
||||
--input: #e7e5e4;
|
||||
--ring: #a7f3d0; /* Mint ring */
|
||||
--radius: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: 'Inter', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: "Inter", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* Custom Selection */
|
||||
::selection {
|
||||
background: #A7F3D0; /* Mint */
|
||||
color: #292524;
|
||||
background: #a7f3d0; /* Mint */
|
||||
color: #292524;
|
||||
}
|
||||
|
||||
/* Smooth Scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Liquid Glass Effects */
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(12px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(120%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(12px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(120%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||||
will-change: backdrop-filter;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.02),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.02),
|
||||
inset 0 0 20px rgba(255, 255, 255, 0.5);
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.85);
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.03),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.02),
|
||||
inset 0 0 20px rgba(255, 255, 255, 0.5);
|
||||
transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
will-change: transform, box-shadow;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
box-shadow:
|
||||
0 20px 25px -5px rgba(0, 0, 0, 0.05),
|
||||
0 10px 10px -5px rgba(0, 0, 0, 0.01),
|
||||
inset 0 0 20px rgba(255, 255, 255, 0.8);
|
||||
transform: translateY(-4px) scale(1.005);
|
||||
border-color: #ffffff;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
box-shadow:
|
||||
0 20px 25px -5px rgba(0, 0, 0, 0.08),
|
||||
0 10px 10px -5px rgba(0, 0, 0, 0.02),
|
||||
inset 0 0 20px rgba(255, 255, 255, 0.8);
|
||||
transform: translateY(-4px) scale(1.005);
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Typography & Headings */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
letter-spacing: -0.02em;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 700;
|
||||
color: #292524;
|
||||
}
|
||||
|
||||
/* Improve text contrast */
|
||||
p,
|
||||
span,
|
||||
div {
|
||||
color: #44403c;
|
||||
}
|
||||
|
||||
/* Utility for the liquid melt effect container */
|
||||
.liquid-container {
|
||||
filter: url('#goo');
|
||||
}
|
||||
/* Liquid container removed - no filters applied */
|
||||
|
||||
/* Hide scrollbar but keep functionality */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #D6D3D1;
|
||||
border-radius: 4px;
|
||||
background: #d6d3d1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #A8A29E;
|
||||
background: #a8a29e;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 5s ease-in-out infinite;
|
||||
animation: float 8s ease-in-out infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@keyframes liquid-pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Liquid Blobs Background */
|
||||
.liquid-bg-blob {
|
||||
position: absolute;
|
||||
filter: blur(80px);
|
||||
opacity: 0.6;
|
||||
z-index: -1;
|
||||
animation: float 10s ease-in-out infinite;
|
||||
position: absolute;
|
||||
filter: blur(80px);
|
||||
opacity: 0.6;
|
||||
z-index: -1;
|
||||
animation: float 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Markdown Specifics for Blog/Projects */
|
||||
.markdown h1 {
|
||||
@apply text-4xl font-bold mb-6 text-stone-800 tracking-tight;
|
||||
@apply text-4xl font-bold mb-6 text-stone-900 tracking-tight;
|
||||
}
|
||||
.markdown h2 {
|
||||
@apply text-2xl font-semibold mt-8 mb-4 text-stone-800 tracking-tight;
|
||||
@apply text-2xl font-semibold mt-8 mb-4 text-stone-900 tracking-tight;
|
||||
}
|
||||
.markdown p {
|
||||
@apply mb-4 leading-relaxed text-stone-600;
|
||||
@apply mb-4 leading-relaxed text-stone-700;
|
||||
}
|
||||
.markdown a {
|
||||
@apply text-stone-800 underline decoration-liquid-mint decoration-2 underline-offset-2 hover:text-black transition-colors;
|
||||
@apply text-stone-900 underline decoration-liquid-mint decoration-2 underline-offset-2 hover:text-black transition-colors duration-300;
|
||||
}
|
||||
.markdown ul {
|
||||
@apply list-disc list-inside mb-4 space-y-2 text-stone-600;
|
||||
@apply list-disc list-inside mb-4 space-y-2 text-stone-700;
|
||||
}
|
||||
.markdown code {
|
||||
@apply bg-stone-100 px-1.5 py-0.5 rounded text-sm text-stone-800 font-mono;
|
||||
@apply bg-stone-100 px-1.5 py-0.5 rounded text-sm text-stone-900 font-mono;
|
||||
}
|
||||
.markdown pre {
|
||||
@apply bg-stone-900 text-stone-50 p-4 rounded-xl overflow-x-auto mb-6;
|
||||
}
|
||||
@apply bg-stone-900 text-stone-50 p-4 rounded-xl overflow-x-auto mb-6;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user