csgowtf/src/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* CS2 Custom Font */
@font-face {
	font-family: 'CS Regular';
	src:
		url('/fonts/cs_regular.woff2') format('woff2'),
		url('/fonts/cs_regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@layer base {
	:root {
		/* Default to dark theme */
		color-scheme: dark;
	}

	body {
		@apply bg-base-100 text-base-content;
		font-family:
			system-ui,
			-apple-system,
			BlinkMacSystemFont,
			'Segoe UI',
			Roboto,
			sans-serif;
		font-feature-settings:
			'rlig' 1,
			'calt' 1;
	}

	/* CS2 Font for headlines only */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family:
			'CS Regular',
			system-ui,
			-apple-system,
			BlinkMacSystemFont,
			'Segoe UI',
			Roboto,
			sans-serif;
	}
}

@layer components {
	/* Custom scrollbar */
	.scrollbar-thin {
		scrollbar-width: thin;
		scrollbar-color: theme('colors.base-300') transparent;
	}

	.scrollbar-thin::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	.scrollbar-thin::-webkit-scrollbar-track {
		background: transparent;
	}

	.scrollbar-thin::-webkit-scrollbar-thumb {
		background-color: theme('colors.base-300');
		border-radius: 4px;
	}

	.scrollbar-thin::-webkit-scrollbar-thumb:hover {
		background-color: theme('colors.base-content');
	}

	/* Loading skeleton */
	.skeleton {
		@apply animate-pulse rounded bg-base-300;
	}

	/* Team colors */
	.team-t {
		@apply text-terrorist;
	}

	.team-ct {
		@apply text-ct;
	}

	.bg-team-t {
		@apply bg-terrorist;
	}

	.bg-team-ct {
		@apply bg-ct;
	}
}

@layer utilities {
	/* Animations */
	.animate-fade-in {
		animation: fadeIn 0.3s ease-in-out;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.animate-slide-in {
		animation: slideIn 0.3s ease-out;
	}

	@keyframes slideIn {
		from {
			transform: translateX(-100%);
		}
		to {
			transform: translateX(0);
		}
	}
}