@tailwind base; @tailwind components; @tailwind utilities; /* Google Font - Poppins is loaded via in HTML for better performance */ @layer base { body { @apply font-poppins text-white bg-charcoal-dark; } h1, h2, h3, h4, h5, h6 { @apply font-bold; } } @layer components { /* PRIMARY BUTTONS - Solid backgrounds with white text */ .btn-gold-primary { @apply px-8 py-4 bg-[#D6AE3E] text-white font-bold uppercase tracking-wider transition-all duration-300 hover:bg-[#CA883A]; } .btn-grey-primary { @apply px-8 py-4 bg-[#26272B] text-white font-bold uppercase tracking-wider transition-all duration-300 hover:bg-opacity-80; } .btn-bronze-primary { @apply px-8 py-4 bg-[#CA883A] text-white font-bold uppercase tracking-wider transition-all duration-300 hover:bg-[#D6AE3E]; } /* SECONDARY BUTTONS - 2px solid border, no background */ .btn-gold-secondary { @apply px-8 py-4 border-2 border-[#D6AE3E] text-[#D6AE3E] bg-transparent font-bold uppercase tracking-wider transition-all duration-300 hover:bg-[#D6AE3E] hover:text-white; } .btn-white-secondary { @apply px-8 py-4 border-2 border-white text-white bg-transparent font-bold uppercase tracking-wider transition-all duration-300 hover:bg-white hover:text-[#26272B]; } .btn-bronze-secondary { @apply px-8 py-4 border-2 border-[#CA883A] text-[#CA883A] bg-transparent font-bold uppercase tracking-wider transition-all duration-300 hover:bg-[#CA883A] hover:text-white; } /* TERTIARY BUTTONS - No border, no background */ .btn-gold-tertiary { @apply px-8 py-4 text-[#D6AE3E] bg-transparent font-bold uppercase tracking-wider transition-all duration-300 hover:text-[#CA883A]; } .btn-white-tertiary { @apply px-8 py-4 text-white bg-transparent font-bold uppercase tracking-wider transition-all duration-300 hover:text-[#D6AE3E]; } .btn-bronze-tertiary { @apply px-8 py-4 text-[#CA883A] bg-transparent font-bold uppercase tracking-wider transition-all duration-300 hover:text-[#D6AE3E]; } /* Legacy button classes - mapped to new system */ .btn-primary { @apply btn-gold-primary text-[#26272B]; } .btn-secondary { @apply btn-gold-secondary; } .btn-outline { @apply btn-gold-secondary; } /* Section Styles */ .section { @apply py-16 md:py-24; } .section-light { @apply bg-white text-charcoal-dark; } .section-dark { @apply bg-charcoal-dark text-white; } .container-custom { @apply max-w-content mx-auto px-8 md:px-16; } /* Text highlights */ .text-gold { @apply text-goldcrest-primary italic; } /* Navigation */ .nav-link { @apply text-white hover:text-goldcrest-primary transition-colors duration-300 font-medium; } /* Footer */ .footer-link { @apply text-white hover:text-goldcrest-primary transition-colors duration-300; } /* Card Styles */ .service-card { @apply p-8 transition-transform duration-300 hover:translate-y-[-8px]; } /* Form Styles */ .form-input { @apply w-full px-4 py-3 bg-white border-2 border-charcoal-medium text-charcoal-dark focus:outline-none focus:border-goldcrest-primary transition-colors; } .form-textarea { @apply w-full px-4 py-3 bg-white border-2 border-charcoal-medium text-charcoal-dark focus:outline-none focus:border-goldcrest-primary transition-colors resize-vertical min-h-[150px]; } } /* Utility Classes */ @layer utilities { .text-gradient { background: linear-gradient(90deg, #CA883A 0%, #D6AE3E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } }