@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Open+Sans:wght@300;400;500;600;700&display=swap');
:root {
--color-burgundy: #8B1C3A;
--color-dark-navy: #1a1a2e;
--color-yellow: #FFE600;
--color-light-yellow: #FFF9C4;
--color-dark: #1a1a1a;
--color-gray: #666666;
--color-light-gray: #f5f5f5;
--color-light-blue: #E8F4FC;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Open Sans', sans-serif;
color: var(--color-dark);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
line-height: 1.2;
}
.font-script {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
}
.text-burgundy {
color: var(--color-burgundy);
}
.bg-burgundy {
background-color: var(--color-burgundy);
}
.text-yellow {
color: var(--color-yellow);
}
.bg-yellow {
background-color: var(--color-yellow);
}
.bg-light-yellow {
background-color: var(--color-light-yellow);
}
.bg-dark-navy {
background-color: var(--color-dark-navy);
}
.bg-light-blue {
background-color: var(--color-light-blue);
}
/* Custom button styles */
.btn-primary {
@apply px-8 py-3 rounded-full font-medium transition-all duration-300;
background-color: var(--color-dark-navy);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(26, 26, 46, 0.3);
}
.btn-outline {
@apply px-8 py-3 rounded-full font-medium transition-all duration-300;
border: 2px solid var(--color-dark-navy);
color: var(--color-dark-navy);
background: transparent;
}
.btn-outline:hover {
background-color: var(--color-dark-navy);
color: white;
}
.btn-yellow {
@apply px-8 py-3 rounded-full font-medium transition-all duration-300;
background-color: var(--color-yellow);
color: var(--color-dark);
}
.btn-yellow:hover {
background-color: #E6CF00;
transform: translateY(-2px);
}
.btn-burgundy {
@apply px-8 py-3 rounded-full font-medium transition-all duration-300;
background-color: var(--color-burgundy);
color: white;
}
.btn-burgundy:hover {
background-color: #7A1833;
transform: translateY(-2px);
}
/* Section styles */
.section-container {
@apply max-w-6xl mx-auto px-4 py-16;
}
.section-title {
@apply text-3xl md:text-4xl lg:text-5xl font-medium text-center mb-8;
font-family: 'Cormorant Garamond', serif;
}
/* Number circles */
.number-circle {
@apply w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm;
background-color: var(--color-burgundy);
}
/* Card styles */
.pricing-card {
@apply bg-white rounded-lg p-6 shadow-lg transition-all duration-300;
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
/* Timeline styles */
.timeline-dot {
@apply w-3 h-3 rounded-full;
background-color: var(--color-dark-navy);
}
.timeline-line {
@apply w-px h-full absolute left-1/2 transform -translate-x-1/2;
background-color: var(--color-dark-navy);
}
/* Overlay styles */
.dark-overlay {
background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7));
}
/* Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fadeInUp {
animation: fadeInUp 0.6s ease-out forwards;
}
/* Slider dots */
.slider-dot {
@apply w-2 h-2 rounded-full bg-white/50 transition-all duration-300 cursor-pointer;
}
.slider-dot.active {
@apply bg-white w-3;
}
/* Tab styles */
.tab-button {
@apply px-6 py-3 text-lg font-medium transition-all duration-300 border-b-2 border-transparent;
}
.tab-button.active {
border-color: var(--color-dark-navy);
color: var(--color-dark-navy);
}
.tab-button:hover {
color: var(--color-dark-navy);
}
/* Icon container */
.icon-container {
@apply w-20 h-20 flex items-center justify-center mx-auto mb-4;
}
/* Testimonial card */
.testimonial-card {
@apply bg-white p-6 rounded-lg shadow-md;
}
/* Video play button */
.play-button {
@apply w-16 h-16 rounded-full bg-white/80 flex items-center justify-center transition-all duration-300;
}
.play-button:hover {
@apply bg-white scale-110;
}
/* Chat bubble */
.chat-bubble {
@apply bg-white rounded-2xl p-4 shadow-lg relative;
}
.chat-bubble::before {
content: '';
@apply absolute w-4 h-4 bg-white transform rotate-45;
bottom: -8px;
left: 20px;
}
/* Scroll to top */
.scroll-top {
@apply fixed bottom-8 right-8 w-12 h-12 rounded-full bg-dark-navy text-white flex items-center justify-center cursor-pointer transition-all duration-300 opacity-0 pointer-events-none;
}
.scroll-top.visible {
@apply opacity-100 pointer-events-auto;
}
.scroll-top:hover {
transform: translateY(-4px);
}
/* Mobile menu */
.mobile-menu {
@apply fixed inset-0 bg-white z-50 transform translate-x-full transition-transform duration-300;
}
.mobile-menu.open {
@apply translate-x-0;
}
/* Image hover effects */
.team-member-image {
@apply overflow-hidden rounded-lg;
}
.team-member-image img {
@apply transition-transform duration-500;
}
.team-member-image:hover img {
@apply scale-105;
}
