297 lines
6.7 KiB
CSS
297 lines
6.7 KiB
CSS
@font-face {
|
|
font-family: 'Montserrat';
|
|
src: url('/fonts/Montserrat-Light.ttf') format('truetype');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Montserrat';
|
|
src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Montserrat';
|
|
src: url('/fonts/Montserrat-Medium.ttf') format('truetype');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Montserrat';
|
|
src: url('/fonts/Montserrat-SemiBold.ttf') format('truetype');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Montserrat';
|
|
src: url('/fonts/Montserrat-Bold.ttf') format('truetype');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@import "tailwindcss";
|
|
|
|
/* Source the JS config for extended theme values */
|
|
@config "../../tailwind.config.ts";
|
|
|
|
/* Theme variables - using CSS custom properties with Tailwind v4 @theme */
|
|
@theme {
|
|
/* Container */
|
|
--container-2xl: 1400px;
|
|
|
|
/* Custom spacing */
|
|
--spacing-18: 4.5rem;
|
|
--spacing-22: 5.5rem;
|
|
|
|
/* Font families */
|
|
--font-sans: 'Montserrat', system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
|
|
/* Border radius */
|
|
--radius-lg: var(--radius);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
|
|
/* Custom font sizes */
|
|
--text-display-lg: 3rem;
|
|
--text-display-lg--line-height: 1.1;
|
|
--text-display-lg--font-weight: 700;
|
|
|
|
--text-display: 2.25rem;
|
|
--text-display--line-height: 1.2;
|
|
--text-display--font-weight: 700;
|
|
|
|
--text-heading: 1.5rem;
|
|
--text-heading--line-height: 1.3;
|
|
--text-heading--font-weight: 600;
|
|
|
|
--text-subheading: 1.125rem;
|
|
--text-subheading--line-height: 1.4;
|
|
--text-subheading--font-weight: 600;
|
|
|
|
--text-body: 1rem;
|
|
--text-body--line-height: 1.5;
|
|
--text-body--font-weight: 400;
|
|
|
|
--text-small: 0.875rem;
|
|
--text-small--line-height: 1.5;
|
|
--text-small--font-weight: 400;
|
|
|
|
--text-tiny: 0.75rem;
|
|
--text-tiny--line-height: 1.5;
|
|
--text-tiny--font-weight: 400;
|
|
|
|
/* Brand colors */
|
|
--color-brand-red: #de0f1e;
|
|
--color-brand-red-hover: #c00d1a;
|
|
--color-brand-red-light: #fee2e2;
|
|
--color-brand-blue: #053d57;
|
|
--color-brand-blue-light: #0a5a7c;
|
|
--color-brand-teal: #557f8c;
|
|
--color-brand-teal-light: #6a9aa8;
|
|
|
|
/* Keyframes */
|
|
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
--animate-fade-in: fade-in 0.2s ease-out;
|
|
--animate-fade-out: fade-out 0.2s ease-out;
|
|
--animate-slide-in-from-top: slide-in-from-top 0.3s ease-out;
|
|
--animate-slide-in-from-bottom: slide-in-from-bottom 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes accordion-down {
|
|
from { height: 0; }
|
|
to { height: var(--radix-accordion-content-height); }
|
|
}
|
|
|
|
@keyframes accordion-up {
|
|
from { height: var(--radix-accordion-content-height); }
|
|
to { height: 0; }
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
@keyframes slide-in-from-top {
|
|
from { transform: translateY(-10px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
@keyframes slide-in-from-bottom {
|
|
from { transform: translateY(10px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
/* MOPC Brand Colors - mapped to shadcn/ui variables */
|
|
--background: 0 0% 99.5%;
|
|
--foreground: 220 13% 18%;
|
|
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 220 13% 18%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 220 13% 18%;
|
|
|
|
/* Primary - MOPC Red */
|
|
--primary: 354 90% 47%;
|
|
--primary-foreground: 0 0% 100%;
|
|
|
|
/* Secondary - Warm gray */
|
|
--secondary: 30 6% 96%;
|
|
--secondary-foreground: 220 13% 18%;
|
|
|
|
--muted: 30 6% 96%;
|
|
--muted-foreground: 220 8% 46%;
|
|
|
|
/* Accent - Light teal tint for hover states */
|
|
--accent: 194 30% 94%;
|
|
--accent-foreground: 220 13% 18%;
|
|
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
|
|
--border: 30 6% 91%;
|
|
--input: 30 6% 91%;
|
|
--ring: 220 9% 76%;
|
|
|
|
--radius: 0.5rem;
|
|
|
|
/* Semantic colors */
|
|
--success: 142 76% 36%;
|
|
--warning: 38 92% 50%;
|
|
--info: 194 25% 44%;
|
|
}
|
|
|
|
.dark {
|
|
--background: 220 15% 8%;
|
|
--foreground: 0 0% 98%;
|
|
|
|
--card: 220 15% 10%;
|
|
--card-foreground: 0 0% 98%;
|
|
|
|
--popover: 220 15% 10%;
|
|
--popover-foreground: 0 0% 98%;
|
|
|
|
--primary: 354 90% 50%;
|
|
--primary-foreground: 0 0% 100%;
|
|
|
|
--secondary: 220 15% 18%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
|
|
--muted: 220 15% 18%;
|
|
--muted-foreground: 0 0% 64%;
|
|
|
|
--accent: 194 20% 18%;
|
|
--accent-foreground: 0 0% 98%;
|
|
|
|
--destructive: 0 84% 55%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
|
|
--border: 220 15% 22%;
|
|
--input: 220 15% 22%;
|
|
--ring: 220 10% 50%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground overflow-x-hidden;
|
|
font-feature-settings: "rlig" 1, "calt" 1;
|
|
}
|
|
|
|
/* Smooth scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Focus styles */
|
|
*:focus-visible {
|
|
@apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
|
|
}
|
|
|
|
.leaflet-container:focus,
|
|
.leaflet-container:focus-visible {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
ring: none;
|
|
--tw-ring-shadow: none;
|
|
--tw-ring-offset-shadow: none;
|
|
}
|
|
|
|
/* Selection color */
|
|
::selection {
|
|
@apply bg-primary/20 text-foreground;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/* Hide scrollbar but keep functionality */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Text balance for better typography */
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* Animation utilities */
|
|
.animate-in {
|
|
animation: fade-in 0.2s ease-out, slide-in-from-bottom 0.3s ease-out;
|
|
}
|
|
|
|
/* Container for admin/jury views */
|
|
.container-app {
|
|
@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar for non-hidden areas */
|
|
@media (min-width: 768px) {
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: hsl(var(--muted));
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--muted-foreground) / 0.3);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--muted-foreground) / 0.5);
|
|
}
|
|
}
|