Carlos (Almeira)
b2daaa2108
- Removed next/font/google from layout.tsx - Added standard Google Fonts <link> in HTML head - Defined --font-inter and --font-outfit in globals.css - This allows the build to pass in environments with restricted internet access.
105 lines
2.6 KiB
CSS
105 lines
2.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
@layer base {
|
|
:root {
|
|
--bg-dark: 15 23 42; /* slate-900 */
|
|
--accent-glow: rgba(6, 182, 212, 0.4); /* cyan-500 */
|
|
--futuristic-cyan: #06b6d4;
|
|
--futuristic-pink: #ec4899;
|
|
--futuristic-blue: #3b82f6;
|
|
--font-outfit: 'Outfit', sans-serif;
|
|
--font-inter: 'Inter', sans-serif;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.font-outfit {
|
|
font-family: var(--font-outfit), sans-serif;
|
|
}
|
|
.font-inter {
|
|
font-family: var(--font-inter), sans-serif;
|
|
}
|
|
|
|
.glass-panel {
|
|
@apply bg-slate-900/40 backdrop-blur-xl border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.3)];
|
|
}
|
|
|
|
.holographic-text {
|
|
@apply bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600;
|
|
}
|
|
|
|
/* Links futuristas */
|
|
.futuristic-link {
|
|
@apply relative overflow-hidden rounded-full px-5 py-2 font-medium tracking-wide border border-white/5 transition-all duration-300;
|
|
}
|
|
|
|
.futuristic-link::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
transform: translateX(-100%);
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.futuristic-link:hover::before {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.futuristic-link:hover {
|
|
@apply border-cyan-500/50 shadow-[0_0_15px_rgba(6,182,212,0.3)] bg-cyan-500/10 text-cyan-300;
|
|
}
|
|
|
|
.futuristic-link.active {
|
|
@apply border-cyan-400 shadow-[0_0_20px_rgba(6,182,212,0.5)] bg-cyan-500/20 text-white;
|
|
}
|
|
|
|
/* Hero effects */
|
|
.mesh-bg {
|
|
background-color: #020617;
|
|
background-image:
|
|
radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
|
|
radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%),
|
|
radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
|
|
}
|
|
}
|
|
|
|
/* Base keyframes para microanimaciones */
|
|
@keyframes float {
|
|
0% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
100% { transform: translateY(0px); }
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulseGlow {
|
|
0% { box-shadow: 0 0 0 0 var(--accent-glow); }
|
|
70% { box-shadow: 0 0 20px 10px rgba(6, 182, 212, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
|
|
}
|
|
|
|
.animate-glow {
|
|
animation: pulseGlow 2s infinite;
|
|
}
|
|
|
|
/* Scrollbar futurista */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #020617;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #06b6d4; /* Cyan */
|
|
background: linear-gradient(180deg, #06b6d4 0%, #3b82f6 100%);
|
|
border-radius: 10px;
|
|
border: 2px solid #020617;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #22d3ee;
|
|
}
|