Website/src/routes/layout.css

/* Font imports - must come first */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@import 'tailwindcss';

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

/* CSS Reset and Base Styles */
:root {
	--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	
	/* Animation durations */
	--transition-fast: 150ms;
	--transition-normal: 250ms;
	--transition-slow: 400ms;
	
	/* Spacing */
	--navbar-height: 60px;
}

/* Load local JetBrains Mono SemiBold from static folder so the site uses the exact semi-bold file */
@font-face {
	font-family: 'JetBrains Mono';
	src: url('/font/JetBrainsMono-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* Prefer the local semi-bold version when bold/600 weight is requested */
code, pre, kbd, samp, .terminal, .mono, .prompt, .prompt-mini, .hero-title {
	font-family: 'JetBrains Mono', var(--font-mono);
	font-weight: 600; /* Use the semi-bold file */
}

/* Ensure headings using monospace also render the semibold weight */
.heading-responsive, .hero-title, .terminal-title, .nav-brand {
	font-family: 'JetBrains Mono', var(--font-mono);
	font-weight: 600;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	background: #1e1e2e; /* Fallback dark bg to prevent white flash on mobile */
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	min-height: 100vh;
	min-height: 100dvh; /* Dynamic viewport height for mobile */
	background: #1e1e2e; /* Fallback dark bg to prevent white flash on mobile */
}

/* Terminal font for code elements */
code, pre, kbd, samp, .terminal, .mono {
	font-family: var(--font-mono);
}

/* Main content wrapper */
.main-content {
	padding-top: var(--navbar-height);
	min-height: 100vh;
	position: relative;
	z-index: 1;
}

/* Scrollbar styling - hidden but still scrollable */
::-webkit-scrollbar {
	display: none;
}

/* For Firefox */
html {
	scrollbar-width: none;
}

/* Keep scroll functionality */
body {
	-ms-overflow-style: none; /* IE and Edge */
}

/* Selection styling */
::selection {
	background: rgba(23, 147, 209, 0.3);
	color: inherit;
}

/* Focus styles */
:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Links */
a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast) ease;
}

/* Buttons reset */
button {
	font-family: inherit;
	cursor: pointer;
}

/* Animation utilities */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes glow {
	0%, 100% { 
		box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; 
	}
	50% { 
		box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor; 
	}
}

@keyframes typing {
	from { width: 0; }
	to { width: 100%; }
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* Utility classes */
.animate-fade-in {
	animation: fadeIn 0.5s ease-out;
}

.animate-fade-in-up {
	animation: fadeInUp 0.5s ease-out;
}

.animate-fade-in-down {
	animation: fadeInDown 0.5s ease-out;
}

.animate-slide-in-left {
	animation: slideInLeft 0.5s ease-out;
}

.animate-slide-in-right {
	animation: slideInRight 0.5s ease-out;
}

.animate-pulse {
	animation: pulse 2s ease-in-out infinite;
}

.animate-float {
	animation: float 3s ease-in-out infinite;
}

.animate-glow {
	animation: glow 2s ease-in-out infinite;
}

/* Stagger animation delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* Glass effect */
.glass {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Terminal window styling */
.terminal-window {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 
		0 25px 50px -12px rgba(0, 0, 0, 0.25),
		0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Container */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Grid system */
.grid-terminal {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Responsive text */
.text-responsive {
	font-size: clamp(1rem, 2.5vw, 1.25rem);
}

.heading-responsive {
	font-size: clamp(1.5rem, 5vw, 3rem);
}