/* This new global stylesheet will be linked in every page. It defines our theme, fonts, particle effects, and "warp drive" transitions. */ /* --- Import Fonts --- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Orbitron:wght@700;800;900&display=swap'); /* --- Tailwind Base --- */ @tailwind base; @tailwind components; @tailwind utilities; /* --- Base Theme & Typography --- */ html { scroll-behavior: smooth; } body { background-color: #020418; /* brand-primary */ color: #E5E7EB; /* brand-text */ font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: 'Orbitron', sans-serif; } /* --- Global Theme Colors --- */ :root { --brand-primary: #020418; --brand-secondary: #10142C; --brand-accent: #00F6FF; --brand-accent-hover: #9EFFFD; --brand-magenta: #F000B8; --brand-text: #E5E7EB; --brand-text-muted: #9CA3AF; } /* --- Particle Canvas (Site-wide Background) --- */ .particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -10; opacity: 0.7; } /* --- Reusable Header/Nav Link Styling --- */ .nav-link { @apply px-4 py-2 rounded-md text-brand-text-muted transition-all duration-300; } .nav-link:hover { @apply text-brand-accent bg-brand-accent/10; } /* Active link class (we'll add this with JS) */ .nav-link.active { @apply text-brand-accent bg-brand-accent/20 shadow-inner; } /* --- Glow Animation --- */ .animate-glow { animation: glow 3s ease-in-out infinite alternate; } .heading-glow { text-shadow: 0 0 3px rgba(0, 246, 255, 0.7), 0 0 5px rgba(0, 246, 255, 0.5); } @keyframes glow { from { text-shadow: 0 0 5px var(--brand-accent), 0 0 10px var(--brand-accent), 0 0 15px var(--brand-accent); box-shadow: 0 0 10px -5px var(--brand-accent); } to { text-shadow: 0 0 10px var(--brand-accent), 0 0 20px var(--brand-accent), 0 0 30px var(--brand-accent); box-shadow: 0 0 20px -5px var(--brand-accent); } } /* --- Page Content Wrapper --- */ /* This ensures our content sits on top of the fixed particle canvas and has a minimum height to fill the screen. */ .page-wrapper { position: relative; z-index: 10; min-height: 100vh; padding-top: 5rem; /* 80px, the height of our header */ display: flex; flex-direction: column; } main { flex-grow: 1; } /* --- "Warp Drive" Page Transition --- */ /* We will add/remove this class to the to create the fade-out/fade-in effect. */ body.is-navigating { opacity: 0; transition: opacity 0.3s ease-out; } /* --- Skeleton Loader Placeholder --- */ .skeleton-loader { @apply bg-brand-secondary/50 rounded-md animate-pulse; } /* --- Global Scrollbar Styling (Optional but thematic) --- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--brand-primary); } ::-webkit-scrollbar-thumb { background: var(--brand-secondary); border: 1px solid var(--brand-accent); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--brand-accent); } /* --- Misc Helper Classes --- */ .chat-bubble-3d { border: 1px solid rgba(0, 246, 255, 0.1); box-shadow: inset 0 1px 1px rgba(0, 246, 255, 0.15), 0 1px 3px rgba(0,0,0,0.4); }