/* Custom CSS variables for dark/light mode */ :root { --bg-color-light: #f0f2f5; --text-color-light: #e0e7ff; --card-bg-light: rgba(255, 255, 255, 0.08); --border-color-light: rgba(255, 255, 255, 0.05); --header-bg-light: rgba(255, 255, 255, 0.05); --primary-glow: #00eaff; --secondary-glow: #e0aaff; --gradient-start: #00c6ff; --gradient-end: #a78bfa; --modal-bg-light: rgba(255, 255, 255, 0.1); --chat-bubble-user-light: rgba(0, 198, 255, 0.2); --chat-bubble-ai-light: rgba(167, 139, 250, 0.2); } html.dark { --bg-color-dark: #1a202c; --text-color-dark: #e2e8f0; --card-bg-dark: rgba(26, 32, 44, 0.08); --border-color-dark: rgba(255, 255, 255, 0.03); --header-bg-dark: rgba(26, 32, 44, 0.05); --primary-glow: #8affd1; --secondary-glow: #c4b5fd; --gradient-start: #8affd1; --gradient-end: #c4b5fd; --modal-bg-dark: rgba(26, 32, 44, 0.1); --chat-bubble-user-dark: rgba(138, 255, 209, 0.2); --chat-bubble-ai-dark: rgba(196, 181, 253, 0.2); } /* Base styles */ body { font-family: 'Inter', sans-serif; color: var(--text-color-dark); /* Default to dark theme text color */ transition: color 0.3s ease; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background-color: #000; } html.dark body { color: var(--text-color-dark); } /* Glassy Effect Mixin */ .glassy { backdrop-filter: blur(35px) saturate(180%); -webkit-backdrop-filter: blur(35px) saturate(180%); background-color: var(--card-bg-dark); border: 1px solid var(--border-color-dark); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.02); border-radius: 20px; transition: all 0.4s ease-out; } html.dark .glassy { background-color: var(--card-bg-dark); border: 1px solid var(--border-color-dark); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.02); } /* Header Specific Styles */ .header-glassy { backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); background-color: var(--header-bg-dark); border-bottom: 1px solid var(--border-color-dark); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } html.dark .header-glassy { background-color: var(--header-bg-dark); border-bottom: 1px solid var(--border-color-dark); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } /* Preloader Styles */ #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000000; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.7s ease-out; } .spinner-container { position: relative; width: 80px; height: 80px; } .spinner { position: absolute; border-radius: 50%; animation: spin 1.5s linear infinite; } .spinner:nth-child(1) { width: 80px; height: 80px; border: 8px solid rgba(255, 255, 255, 0.1); border-top: 8px solid var(--primary-glow); box-shadow: 0 0 25px var(--primary-glow); } .spinner:nth-child(2) { width: 60px; height: 60px; border: 6px solid rgba(255, 255, 255, 0.1); border-top: 6px solid var(--secondary-glow); animation-delay: 0.2s; box-shadow: 0 0 20px var(--secondary-glow); top: 10px; left: 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Particle.js container */ #particles-js { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -2; background: linear-gradient(135deg, #0a0a1a, #1a0a2a); transition: background 0.5s ease; } html.dark #particles-js { background: linear-gradient(135deg, #050510, #100515); } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: var(--gradient-end); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--gradient-start); } /* Gradient for special text and buttons */ .gradient-text { background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); } .gradient-button { background-image: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); box-shadow: 0 6px 20px rgba(0, 198, 255, 0.4); transition: all 0.3s ease; border: none; } .gradient-button:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 30px rgba(0, 198, 255, 0.6); } html.dark .gradient-button { box-shadow: 0 6px 20px rgba(138, 255, 209, 0.4); } html.dark .gradient-button:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 30px rgba(138, 255, 209, 0.6); } /* Link Card specific styles */ .link-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease; min-height: 120px; overflow: hidden; opacity: 0; /* Initially hidden for fade-in effect */ transform: translateY(20px); /* Initially slightly below for fade-in effect */ transition: opacity 1.2s ease-out, transform 1.2s ease-out; /* Smoother transition */ } .link-card.fade-in { opacity: 1; transform: translateY(0); } .link-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; background: radial-gradient(circle at center, rgba(var(--primary-glow-rgb), 0.1) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; z-index: 0; } .link-card:hover::before { opacity: 1; } .link-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4); } /* Social icon within link card */ .link-card .social-icon-in-card { font-size: 3rem; /* Adjust size as needed */ margin-bottom: 1rem; color: var(--primary-glow); /* Example color, can be customized per icon */ transition: color 0.3s ease, transform 0.4s ease; /* Added transform for spinning */ } .link-card:hover .social-icon-in-card { color: var(--secondary-glow); /* Change color on hover */ transform: rotateY(360deg); /* Spin effect */ } /* Button container for slide effect */ .link-card-button-container { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem; display: flex; justify-content: center; align-items: center; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); transform: translateY(100%); /* Start off-screen */ opacity: 0; transition: transform 0.4s ease-out, opacity 0.4s ease-out; z-index: 3; /* Ensure button is above other content */ } .link-card:hover .link-card-button-container { transform: translateY(0); /* Slide up */ opacity: 1; } .link-card-button { padding: 0.75rem 1.5rem; border-radius: 9999px; /* Fully rounded */ font-weight: 600; text-decoration: none; color: white; background-image: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); box-shadow: 0 4px 15px rgba(0, 198, 255, 0.3); transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; } .link-card-button:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0, 198, 255, 0.5); } html.dark .link-card-button { box-shadow: 0 4px 15px rgba(138, 255, 209, 0.3); } html.dark .link-card-button:hover { box-shadow: 0 6px 20px rgba(138, 255, 209, 0.5); } /* Adjust content positioning when button container is present */ .link-card-content { padding-bottom: 3rem; /* Make space for the button */ } /* General section padding and positioning */ section { position: relative; z-index: 1; padding-top: 10rem; padding-bottom: 10rem; } /* Avatar glow */ .avatar-glow { box-shadow: 0 0 30px rgba(138, 255, 209, 0.6), inset 0 0 15px rgba(138, 255, 209, 0.4); transition: all 0.4s ease; } html.dark .avatar-glow { box-shadow: 0 0 30px rgba(138, 255, 209, 0.6), inset 0 0 15px rgba(138, 255, 209, 0.4); } .avatar-glow:hover { transform: scale(1.05); box-shadow: 0 0 40px rgba(138, 255, 209, 0.8), inset 0 0 20px rgba(138, 255, 209, 0.6); } html.dark .avatar-glow:hover { box-shadow: 0 0 40px rgba(138, 255, 209, 0.8), inset 0 0 20px rgba(138, 255, 209, 0.6); } /* Define RGB values for JS use in radial gradients */ .light-mode-rgb { --primary-glow-rgb: 0, 234, 255; --secondary-glow-rgb: 224, 170, 255; } .dark-mode-rgb { --primary-glow-rgb: 138, 255, 209; --secondary-glow-rgb: 196, 181, 253; } /* Gemini Assistant Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .modal-overlay.active { opacity: 1; visibility: visible; } .gemini-modal { background-color: var(--modal-bg-dark); border: 1px solid var(--border-color-dark); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.02); border-radius: 20px; width: 90%; max-width: 600px; height: 80%; max-height: 700px; display: flex; flex-direction: column; overflow: hidden; transform: translateY(20px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .modal-overlay.active .gemini-modal { transform: translateY(0); opacity: 1; } html.dark .gemini-modal { background-color: var(--modal-bg-dark); border: 1px solid var(--border-color-dark); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.02); } .modal-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color-dark); display: flex; justify-content: space-between; align-items: center; font-size: 1.5rem; font-weight: 700; color: var(--primary-glow); letter-spacing: 0.05em; } html.dark .modal-header { border-bottom: 1px solid var(--border-color-dark); } .modal-close-button { background: none; border: none; font-size: 2rem; color: var(--text-color-dark); cursor: pointer; transition: color 0.3s ease, transform 0.2s ease; } .modal-close-button:hover { color: var(--primary-glow); transform: rotate(90deg); } html.dark .modal-close-button { color: var(--text-color-dark); } .chat-history { flex-grow: 1; padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; scroll-behavior: smooth; } .chat-bubble { max-width: 80%; padding: 0.8rem 1.2rem; border-radius: 15px; line-height: 1.4; word-wrap: break-word; } .chat-bubble.user { align-self: flex-end; background-color: var(--chat-bubble-user-dark); border: 1px solid rgba(138, 255, 209, 0.3); color: var(--text-color-dark); } html.dark .chat-bubble.user { background-color: var(--chat-bubble-user-dark); border: 1px solid rgba(138, 255, 209, 0.3); color: var(--text-color-dark); } .chat-bubble.ai { align-self: flex-start; background-color: var(--chat-bubble-ai-dark); border: 1px solid rgba(196, 181, 253, 0.3); color: var(--text-color-dark); } html.dark .chat-bubble.ai { background-color: var(--chat-bubble-ai-dark); border: 1px solid rgba(196, 181, 253, 0.3); color: var(--text-color-dark); } .chat-input-area { padding: 1.5rem; border-top: 1px solid var(--border-color-dark); display: flex; gap: 1rem; } html.dark .chat-input-area { border-top: 1px solid var(--border-color-dark); } .chat-input { flex-grow: 1; padding: 0.8rem 1.2rem; border-radius: 10px; background-color: rgba(26, 32, 44, 0.1); border: 1px solid var(--border-color-dark); color: var(--text-color-dark); outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .chat-input:focus { border-color: var(--primary-glow); box-shadow: 0 0 0 2px rgba(var(--primary-glow-rgb), 0.3); } html.dark .chat-input { background-color: rgba(26, 32, 44, 0.1); border: 1px solid var(--border-color-dark); color: var(--text-color-dark); } .chat-send-button { padding: 0.8rem 1.2rem; border-radius: 10px; background-image: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); color: white; font-weight: 600; border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.3s ease; } .chat-send-button:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(var(--primary-glow-rgb), 0.4); } .chat-send-button:disabled { opacity: 0.5; cursor: not-allowed; } .loading-indicator { display: flex; align-items: center; gap: 0.5rem; color: var(--primary-glow); font-style: italic; align-self: flex-start; } .loading-indicator .dot { width: 8px; height: 8px; background-color: var(--primary-glow); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out; } .loading-indicator .dot:nth-child(2) { animation-delay: -0.3s; } .loading-indicator .dot:nth-child(3) { animation-delay: -0.6s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } } /* Custom Modal for "Link Not Added" */ .custom-alert-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 1001; /* Higher than Gemini modal */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .custom-alert-modal-overlay.active { opacity: 1; visibility: visible; } .custom-alert-modal { background-color: var(--modal-bg-dark); border: 1px solid var(--border-color-dark); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.01); border-radius: 15px; padding: 2rem; text-align: center; width: 90%; max-width: 400px; transform: translateY(-20px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .custom-alert-modal-overlay.active .custom-alert-modal { transform: translateY(0); opacity: 1; } .custom-alert-modal h3 { font-size: 1.8rem; font-weight: 700; color: var(--primary-glow); margin-bottom: 1rem; } .custom-alert-modal p { font-size: 1.1rem; color: var(--text-color-dark); margin-bottom: 1.5rem; } .custom-alert-modal-button { padding: 0.75rem 1.5rem; border-radius: 10px; background-image: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); color: white; font-weight: 600; border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.3s ease; } .custom-alert-modal-button:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(var(--primary-glow-rgb), 0.4); }

Welcome, I am Emon

About The Architect

Hey, it’s me Emon. I like to explore things. I don’t have much to say, but if you want to know anything about me, you can ask my AI right here or DM me on Facebook. Have a great day ♥️