@tailwind base;
@tailwind components;
@tailwind utilities;
/* Import the Outer font */
@font-face {
font-family: 'Outer';
src: url('/static/fonts/Outer.otf') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Custom styles */
body {
font-family: 'Outer', system-ui, sans-serif;
background-color: #111827;
color: #F9FAFB;
}
/* Add any additional custom styles here */
/* Import Outer Sans font */
@import url('https://api.fontshare.com/v2/css?f[]=outer-sans@1,800,500,400,700,600&display=swap');
/* Custom components */
@layer components {
.btn {
@apply px-6 py-3 rounded-lg font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}
.btn-primary {
@apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
}
.btn-secondary {
@apply bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus:ring-secondary-500;
}
.card {
@apply bg-white rounded-xl shadow-soft p-6 transition-all duration-200;
}
.card-hover {
@apply hover:shadow-hover hover:-translate-y-1;
}
.form-input {
@apply rounded-lg border-secondary-200 focus:border-primary-500 focus:ring focus:ring-primary-200 focus:ring-opacity-50;
}
}
/* Custom base styles */
@layer base {
body {
@apply bg-gray-50 text-secondary-900 font-sans;
}
h1, h2, h3, h4, h5, h6 {
@apply font-heading font-bold text-secondary-900;
}
h1 {
@apply text-4xl md:text-5xl;
}
h2 {
@apply text-3xl md:text-4xl;
}
h3 {
@apply text-2xl md:text-3xl;
}
a {
@apply text-primary-600 hover:text-primary-700 transition-colors duration-200;
}
}