/* Styles personnalisés pour le Portfolio de Volonté Mukovi */ /* Import de Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap'); :root { --font-heading: 'Outfit', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --font-mono: 'Fira Code', monospace; } /* Theme variables (light defaults). Use the `.dark-theme` class on to enable dark mode. */ :root { /* Core colors */ --bg: #f8fafc; /* slate-50 */ --bg-alt: #f1f5f9; /* lighter alt */ --card-bg: #ffffff; /* cards / surfaces */ --text: #0f172a; /* slate-800 */ --text-strong: #0f172a; /* slate-900 */ --muted: #6b7280; /* slate-500 */ --muted-2: #94a3b8; /* slate-400 */ --border: #e6edf5; /* slate-100-ish */ --border-2: #e2e8f0; /* slate-200 */ --surface-900: #0f1724; /* dark surface */ --accent: #6366f1; /* indigo-600 */ } /* Dark theme overrides */ html.dark-theme { --bg: #0b1220; /* near slate-900 */ --bg-alt: #071024; --card-bg: #0b1220; /* keep cards dark */ --text: #e6eefc; /* light text */ --text-strong: #ffffff; --muted: #9aa7b8; --muted-2: #6b7a8a; --border: #102030; --border-2: #152033; --surface-900: #020617; --accent: #7c86ff; } /* Override common Tailwind utility classes so theme switching affects them */ .bg-white { background-color: var(--card-bg) !important; } .bg-slate-50 { background-color: var(--bg) !important; } .bg-slate-900 { background-color: var(--surface-900) !important; } .text-slate-900, .text-slate-800 { color: var(--text-strong) !important; } .text-slate-700, .text-slate-600 { color: var(--text) !important; } .text-slate-500, .text-slate-400 { color: var(--muted) !important; } .text-slate-300 { color: var(--muted-2) !important; } .border-slate-100 { border-color: var(--border) !important; } .border-slate-200 { border-color: var(--border-2) !important; } .border-slate-800 { border-color: rgba(255,255,255,0.06) !important; } .bg-indigo-600 { background-color: var(--accent) !important; } .text-indigo-600 { color: var(--accent) !important; } /* Body base */ body { background-color: var(--bg); color: var(--text); } /* Make selection color adapt a bit for dark */ ::selection { background: rgba(99,102,241,0.14); color: var(--text-strong); } body { font-family: var(--font-body); scroll-behavior: smooth; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); } code, pre { font-family: var(--font-mono); } /* Scrollbar personnalisée */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Animations Personnalisées */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .cursor-blink::after { content: '|'; animation: blink 1s infinite; color: #6366f1; font-weight: bold; } /* Lévitation des badges */ @keyframes float-slow { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(2deg); } } @keyframes float-medium { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-15px) rotate(-3deg); } } @keyframes float-fast { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-8px) rotate(4deg); } } .float-1 { animation: float-slow 6s ease-in-out infinite; } .float-2 { animation: float-medium 5s ease-in-out infinite; } .float-3 { animation: float-fast 4s ease-in-out infinite; } /* Ligne de scanning pour CampusFace */ @keyframes scan-line { 0% { top: 0%; } 50% { top: 100%; } 100% { top: 0%; } } .animate-scan-line { animation: scan-line 3s linear infinite; } /* Lueur d'Arduino LED */ .led-glow-red { box-shadow: 0 0 15px 5px rgba(239, 68, 68, 0.7); } .led-glow-green { box-shadow: 0 0 15px 5px rgba(34, 197, 94, 0.7); } .led-glow-yellow { box-shadow: 0 0 15px 5px rgba(234, 179, 8, 0.7); } /* Fond à motif de grille de points discret pour la Hero section */ .bg-grid-pattern { background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 24px 24px; } /* Glassmorphism Classes */ .glass-nav { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(226, 232, 240, 0.8); } .glass-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(226, 232, 240, 0.8); } /* Effets de transition de section */ .section-fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .section-fade-in.is-visible { opacity: 1; transform: translateY(0); }