145 lines
3.8 KiB
CSS
145 lines
3.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
--primary: 221.2 83.2% 53.3%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 221.2 83.2% 53.3%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 217.2 91.2% 59.8%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 224.3 76.3% 48%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground font-body;
|
|
}
|
|
|
|
/* Apply Manrope to all headings */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
@apply font-heading;
|
|
}
|
|
|
|
h1 { @apply text-h1 text-brand-navy; }
|
|
h2 { @apply text-h2 text-brand-navy; }
|
|
h3 { @apply text-h3 text-neutral-800; }
|
|
h4 { @apply text-h4 text-neutral-800; }
|
|
h5 { @apply text-h5 text-neutral-700; }
|
|
h6 { @apply text-h6 text-neutral-700; }
|
|
}
|
|
|
|
@layer components {
|
|
/* Button styles with Xpeditis branding */
|
|
.btn-primary {
|
|
@apply bg-accent text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-accent/90 transition-colors shadow-sm hover:shadow;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-primary text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-neutral-800 transition-colors shadow-sm hover:shadow;
|
|
}
|
|
|
|
.btn-success {
|
|
@apply bg-success text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-success-dark transition-colors shadow-sm hover:shadow;
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply border-2 border-primary text-primary font-heading font-semibold px-6 py-3 rounded-lg hover:bg-primary hover:text-white transition-colors;
|
|
}
|
|
|
|
/* Card styles */
|
|
.card {
|
|
@apply bg-white rounded-lg shadow-md p-6;
|
|
}
|
|
|
|
.card-header {
|
|
@apply font-heading font-semibold text-h4 text-brand-navy mb-4;
|
|
}
|
|
|
|
/* Badge styles */
|
|
.badge {
|
|
@apply inline-flex items-center px-3 py-1 rounded-full text-label font-body;
|
|
}
|
|
|
|
.badge-success {
|
|
@apply badge bg-success/10 text-success;
|
|
}
|
|
|
|
.badge-info {
|
|
@apply badge bg-accent/10 text-accent;
|
|
}
|
|
|
|
.badge-warning {
|
|
@apply badge bg-yellow-100 text-yellow-800;
|
|
}
|
|
|
|
.badge-error {
|
|
@apply badge bg-red-100 text-red-800;
|
|
}
|
|
|
|
/* Link styles */
|
|
.link {
|
|
@apply text-accent hover:text-accent/80 transition-colors underline-offset-2 hover:underline;
|
|
}
|
|
|
|
/* Form elements */
|
|
.input {
|
|
@apply border border-neutral-300 rounded-lg px-4 py-2.5 font-body text-body focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-colors;
|
|
}
|
|
|
|
.label {
|
|
@apply text-label text-neutral-600 font-body font-semibold mb-1.5 block uppercase tracking-wider;
|
|
}
|
|
|
|
/* Container with brand background */
|
|
.section-navy {
|
|
@apply bg-brand-navy text-white py-16;
|
|
}
|
|
|
|
.section-light {
|
|
@apply bg-brand-gray py-16;
|
|
}
|
|
}
|