style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Colors */
@layer base {
    :root {
        --mint-400: #9be9d8;
        --mint-300: #b6f3e5;
        --blue-300: #93c5fd;
        --blue-200: #bfdbfe;
        --lime-300: #bef264;
        --lime-200: #d9f99d;
        --green-300: #86efac;
        --green-200: #bbf7d0;
        --purple-300: #d8b4fe;
        --purple-200: #e9d5ff;
        --indigo-300: #a5b4fc;
        --indigo-200: #c7d2fe;
        --cyan-300: #67e8f9;
        --cyan-200: #a5f3fc;
        --blue-200: #bfdbfe;
        --blue-100: #dbeafe;
        --amber-200: #fde68a;
        --amber-100: #fef3c7;
        --teal-300: #5eead4;
        --teal-200: #99f6e4;
    }
}

/* Timeline Item */
.timeline-item {
    @apply relative;
}

.timeline-bar {
    @apply h-16 rounded-full flex items-center px-6 transition-all duration-500 ease-in-out;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.timeline-bar::before {
    content: '';
    @apply absolute inset-0 opacity-10;
    background: radial-gradient(circle at center, currentColor 1px, transparent 1px);
    background-size: 10px 10px;
}

.timeline-icon {
    @apply bg-white w-10 h-10 rounded-full flex items-center justify-center shadow-sm;
}

.timeline-icon i {
    @apply text-gray-700 w-4 h-4;
}

.timeline-text {
    @apply ml-4;
}

.timeline-text h3 {
    @apply text-gray-800 font-medium text-lg;
}

.timeline-text p {
    @apply text-gray-500 text-sm;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .timeline-bar {
        @apply h-24 px-4;
    }
    
    .timeline-text h3 {
        @apply text-base;
    }
    
    .timeline-text p {
        @apply text-xs;
    }
}

/* Hover Effects */
.timeline-bar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px -5px rgba(0, 0, 0, 0.15);
}

/* Phase Indicators */
[data-phase="discovery"] .timeline-bar {
    border-left: 4px solid #9be9d8;
}

[data-phase="design"] .timeline-bar {
    border-left: 4px solid #a5b4fc;
}

[data-phase="delivery"] .timeline-bar {
    border-left: 4px solid #5eead4;
}