/* ABOUTME: Global Tailwind CSS for the landing page */
/* ABOUTME: Imports Tailwind directives and Pierre custom styles */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Pierre gradient utilities */
.gradient-pierre {
background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
}
.gradient-pierre-text {
background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-activity {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}
.gradient-nutrition {
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}
.gradient-recovery {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
}
/* Card hover effect */
.card-hover {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(124, 58, 237, 0.15);
}
/* Protocol badge backdrop */
.protocol-badge {
backdrop-filter: blur(8px);
}
/* Animated gradient mesh background */
.gradient-mesh {
background:
radial-gradient(at 20% 30%, rgba(124, 58, 237, 0.3) 0px, transparent 50%),
radial-gradient(at 80% 20%, rgba(6, 182, 212, 0.25) 0px, transparent 50%),
radial-gradient(at 60% 80%, rgba(99, 102, 241, 0.2) 0px, transparent 50%),
radial-gradient(at 10% 90%, rgba(16, 185, 129, 0.15) 0px, transparent 50%);
animation: meshMove 20s ease-in-out infinite;
}
@keyframes meshMove {
0%, 100% {
background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%;
}
25% {
background-position: 20% 20%, 80% 10%, 60% 90%, 10% 80%;
}
50% {
background-position: 10% 40%, 90% 30%, 40% 70%, 20% 60%;
}
75% {
background-position: 30% 10%, 70% 40%, 70% 80%, 5% 90%;
}
}
/* Floating animation for logo elements */
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(2deg); }
}
.float-slow {
animation: float 8s ease-in-out infinite;
}
.float-medium {
animation: float 6s ease-in-out infinite;
animation-delay: -2s;
}
.float-fast {
animation: float 4s ease-in-out infinite;
animation-delay: -1s;
}
/* Stat counter animation */
@keyframes countUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.stat-animate {
animation: countUp 0.6s ease-out forwards;
}
.stat-animate:nth-child(1) { animation-delay: 0.1s; }
.stat-animate:nth-child(2) { animation-delay: 0.2s; }
.stat-animate:nth-child(3) { animation-delay: 0.3s; }
/* Glow effect for stats */
.stat-glow {
position: relative;
}
.stat-glow::before {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
border-radius: inherit;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
filter: blur(20px);
}
.stat-glow:hover::before {
opacity: 0.5;
}
/* Section divider with gradient line */
.section-divider {
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(124, 58, 237, 0.5) 50%, transparent 100%);
}
/* Code block styling for B2B section */
.code-block {
background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
border: 1px solid rgba(124, 58, 237, 0.2);
font-family: 'JetBrains Mono', monospace;
}
/* Pulse animation for live indicator */
@keyframes pulse-ring {
0% { transform: scale(0.8); opacity: 1; }
100% { transform: scale(2); opacity: 0; }
}
.pulse-ring {
animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
/* Mobile menu animation */
.mobile-menu-enter {
animation: slideDown 0.3s ease-out forwards;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Icon container styling */
.icon-container {
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.icon-container:hover {
transform: scale(1.05);
}
/* Background pattern using logo nodes concept */
.node-pattern {
background-image:
radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.08) 2px, transparent 2px),
radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.08) 2px, transparent 2px),
radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.08) 2px, transparent 2px);
background-size: 60px 60px;
}
/* Modal animation */
.modal-content,
.tools-modal-content,
.pillar-modal-content {
transform: scale(0.95);
opacity: 0;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
.gradient-mesh,
.float-slow,
.float-medium,
.float-fast,
.stat-animate,
.pulse-ring,
.mobile-menu-enter {
animation: none !important;
}
.stat-animate {
opacity: 1;
transform: none;
}
}
