/* --- Accent Color Themes --- */ /* Default: Purple Theme */ :root { --primary-gradient: linear-gradient(45deg, #8b5cf6, #ec4899); --primary-color: #8b5cf6; } /* Teal Theme */ [data-theme="teal"] { --primary-gradient: linear-gradient(45deg, #14b8a6, #2563eb); --primary-color: #14b8a6; } /* Green Theme */ [data-theme="green"] { --primary-gradient: linear-gradient(45deg, #22c55e, #a3e635); --primary-color: #22c55e; } /* Orange Theme */ [data-theme="orange"] { --primary-gradient: linear-gradient(45deg, #f97316, #facc15); --primary-color: #f97316; } /* Red Theme */ [data-theme="red"] { --primary-gradient: linear-gradient(45deg, #e11d48, #f43f5e); --primary-color: #e11d48; } /* Cyan Theme */ [data-theme="cyan"] { --primary-gradient: linear-gradient(45deg, #0891b2, #0ea5e9); --primary-color: #0891b2; } /* Indigo Theme */ [data-theme="indigo"] { --primary-gradient: linear-gradient(45deg, #4f46e5, #7c3aed); --primary-color: #4f46e5; } /* Amber Theme */ [data-theme="amber"] { --primary-gradient: linear-gradient(45deg, #d97706, #f59e0b); --primary-color: #d97706; } /* --- Background Color Themes --- */ /* Default BG: Charcoal */ :root { --secondary-text: #a1a1aa; --dark-bg: #121212; --light-text: #f9fafb; --card-bg: #1e1e1e; --border-color: #2f2f2f; } /* Dark Blue BG */ [data-bg-theme="dark-blue"] { --secondary-text: #a1a1aa; --dark-bg: #111827; --light-text: #f9fafb; --card-bg: #1f2937; --border-color: #374151; } /* Light BG */ [data-bg-theme="light"] { --secondary-text: #4b5563; --dark-bg: #f9fafb; --light-text: #111827; --card-bg: #ffffff; --border-color: #e5e7eb; } /* Slate BG */ [data-bg-theme="slate"] { --secondary-text: #cbd5e1; --dark-bg: #1e293b; --light-text: #f8fafc; --card-bg: #334155; --border-color: #475569; } /* Rose BG */ [data-bg-theme="rose"] { --secondary-text: #fbcfe8; --dark-bg: #261722; --light-text: #fce7f3; --card-bg: #3a2032; --border-color: #542d48; } /* Navy BG */ [data-bg-theme="navy"] { --secondary-text: #a7b3ce; --dark-bg: #0c1427; --light-text: #f0f8ff; --card-bg: #1a2338; --border-color: #2c3a5c; } body { background-color: var(--dark-bg); color: var(--light-text); font-family: 'Lato', sans-serif; transition: background-color 0.3s ease, color 0.3s ease; } /* Animated background (opt-in via .bg-animated on ) */ body.bg-animated::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Stronger, visible animation overlay for hero when enabled */ /* Light Theme Specific Overrides */ [data-bg-theme="light"] .navbar { background-color: rgba(255, 255, 255, 0.8); } [data-bg-theme="light"] .nav-link { color: var(--light-text) !important; } [data-bg-theme="light"] #home { background: linear-gradient(rgba(249, 250, 251, 0.8), rgba(249, 250, 251, 1)), url('https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; background-attachment: fixed; } [data-bg-theme="light"] .btn-outline-light { border-color: var(--light-text); color: var(--light-text); } [data-bg-theme="light"] .btn-outline-light:hover { background-color: var(--light-text); color: var(--dark-bg); } [data-bg-theme="light"] #contact .fs-2 { color: var(--light-text) !important; } [data-bg-theme="light"] footer { background-color: #e5e7eb !important; color: #111827; } [data-bg-theme="light"] .switcher-btn { background: var(--card-bg); color: var(--light-text); border: 1px solid var(--border-color); } [data-bg-theme="light"] .modal-content { background-color: var(--dark-bg); color: var(--light-text); } h1, h2, h3, h4, h5, h6, .navbar-brand, .btn { font-family: 'Poppins', sans-serif; } .navbar { background-color: rgba(18, 18, 18, 0.8); backdrop-filter: blur(10px); transition: background-color 0.3s ease; } /* Force black burger icon (navbar toggler) */ .navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* Improve mobile navbar contrast */ @media (max-width: 991.98px) { .navbar .navbar-collapse { background-color: rgba(18, 18, 18, 0.95); border: 1px solid var(--border-color); border-radius: 12px; padding: 8px 12px; margin-top: 8px; } .navbar .nav-link { color: #f9fafb !important; } /* Light background theme: dark text in mobile menu */ [data-bg-theme="light"] .navbar .navbar-collapse { background-color: rgba(255, 255, 255, 0.98); border-color: #e5e7eb; } [data-bg-theme="light"] .navbar .nav-link { color: #111827 !important; } .navbar .nav-link:hover, .navbar .nav-link.active { color: var(--primary-color) !important; } } .nav-link { color: var(--light-text) !important; } .nav-link:hover, .nav-link.active { color: var(--primary-color) !important; transition: color 0.3s ease; } .navbar-nav .nav-item .lang-btn.active { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff !important; } .lang-btn { font-weight: bold; font-size: 0.8rem; padding: 0.2rem 0.5rem !important; margin-left: 5px !important; border: 1px solid transparent; border-radius: 5px; } section { padding: 80px 0; overflow: hidden; } #home { background: linear-gradient(rgba(18, 18, 18, 0.8), rgba(18, 18, 18, 1)), url('https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; background-attachment: fixed; position: relative; /* ensure scroll indicator positions within section */ } .scroll-down-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; } .scroll-down-indicator a { font-size: 1.5rem; color: var(--light-text); opacity: 0.7; transition: opacity 0.3s ease; } .scroll-down-indicator a:hover { opacity: 1; } /* Mobile layout adjustments for hero */ @media (max-width: 576px) { #home { align-items: flex-start; padding-top: 72px; padding-bottom: 110px; /* reserve space for scroll indicator */ } .scroll-down-indicator { bottom: 16px; } /* Smaller hero subtitle on phones */ h2[data-translate-key="heroSubtitle"] { font-size: 14px !important; line-height: 1.3; } /* Center About text on phones */ #about .col-lg-7 { text-align: center; } #about .col-lg-7 .mt-4 { display: flex; justify-content: center; } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-20px); } 60% { transform: translateX(-50%) translateY(-10px); } } #home h2 #typing-effect { background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; transition: background 0.3s ease; } .btn-primary { background: var(--primary-gradient); border: none; padding: 12px 30px; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } .btn-outline-light { padding: 12px 30px; font-weight: bold; transition: all 0.3s ease; border-color: var(--light-text); color: var(--light-text); } .btn-outline-light:hover { background-color: var(--light-text); color: var(--dark-bg); } #about img { border: 5px solid var(--primary-color); transition: border-color 0.3s ease; } .profile-picture { width: 350px; height: 350px; object-fit: cover; object-position: center; } .skill-card { background-color: var(--card-bg); border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; height: 100%; border: 1px solid var(--border-color); box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .skill-card:hover { transform: translateY(-10px); border-color: var(--primary-color); } .skill-card i { background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background 0.3s ease; } .skill-card p { color: var(--secondary-text); } .project-card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .project-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); } .project-card .card-body { background-color: var(--card-bg); transition: background-color 0.3s ease; } .project-card .card-title { color: var(--light-text); } .project-card .card-text { color: var(--secondary-text); } #contact .form-control { background-color: var(--card-bg); border: 1px solid var(--border-color); color: var(--light-text); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } #contact .form-control::placeholder { color: var(--secondary-text); } #contact .form-control:focus { background-color: var(--card-bg); color: var(--light-text); border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25); } #contact .fs-2 { color: var(--light-text) !important; transition: color 0.3s ease; } #contact .fs-2:hover { color: var(--primary-color) !important; } footer { background-color: #e5e7eb !important; color: #111827; transition: background-color 0.3s ease, color 0.3s ease; } .bg-alternate { background-color: var(--card-bg); transition: background-color 0.3s ease; } /* --- Fixed Contact --- */ #fixed-contact { position: fixed; top: 76px; /* below fixed navbar */ left: 20px; background-color: var(--card-bg); color: var(--light-text); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-color); z-index: 998; /* keep below cookie banner/theme switcher */ font-size: 0.9rem; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: all 0.3s ease; } #fixed-contact a { color: var(--primary-color); text-decoration: none; font-weight: bold; } [data-bg-theme="light"] #fixed-contact { box-shadow: 0 4px 10px rgba(0,0,0,0.05); } @media (max-width: 576px) { #fixed-contact { top: 64px; left: 12px; padding: 6px 10px; font-size: 0.85rem; } } /* --- GDPR & Modal Styles --- */ #cookie-banner { position: fixed; bottom: -100%; /* Start hidden */ left: 0; width: 100%; background-color: var(--card-bg); padding: 15px 0; border-top: 1px solid var(--border-color); z-index: 1001; /* Above theme switcher */ transition: bottom 0.5s ease-in-out, background-color 0.3s ease, border-color 0.3s ease; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); } #cookie-banner.show { bottom: 0; } #cookie-banner p { color: var(--secondary-text); font-size: 0.9rem; margin: 0; } #cookie-banner a { color: var(--primary-color); text-decoration: none; } #cookie-banner a:hover { text-decoration: underline; } .modal-content { background-color: var(--card-bg); color: var(--light-text); border: 1px solid var(--border-color); } .modal-header { border-bottom: 1px solid var(--border-color); } /* --- Theme Switcher Styles --- */ .theme-switcher { position: fixed; bottom: 20px; right: 20px; z-index: 1000; } .theme-switcher .switcher-btn { width: 50px; height: 50px; background: var(--card-bg); color: var(--light-text); border-radius: 50%; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .theme-switcher .switcher-btn:hover { background: var(--primary-color); color: #fff; } .theme-switcher .palette { position: absolute; bottom: 65px; right: 0; background: var(--card-bg); border-radius: 8px; padding: 15px; width: 220px; border: 1px solid var(--border-color); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; box-shadow: 0 0 20px rgba(0,0,0,0.1); } .theme-switcher .palette.active { opacity: 1; visibility: visible; transform: translateY(0); } .theme-switcher h5 { font-size: 0.9rem; color: var(--secondary-text); text-transform: uppercase; margin-bottom: 10px; margin-top: 10px; } .theme-switcher h5:first-child { margin-top: 0; } .theme-switcher .color-options, .theme-switcher .bg-options { display: flex; flex-wrap: wrap; gap: 10px; } .theme-switcher .color-option { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid var(--border-color); transition: transform 0.2s ease, border-color 0.3s ease; } .theme-switcher .color-option:hover { transform: scale(1.1); } .theme-switcher .bg-option { flex-grow: 1; padding: 5px 10px; border-radius: 5px; cursor: pointer; text-align: center; font-size: 0.9rem; border: 1px solid var(--border-color); transition: all 0.2s ease; color: var(--secondary-text); } .theme-switcher .bg-option.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); } /* Effect toggle styling */ /* --- Typing Effect (console-like cursor) --- */ #typing-effect, #typing-effect .ti-cursor { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Fira Code", monospace; letter-spacing: 0.02em; } .ti-cursor { display: none !important; } /* Match the cursor to the typed gradient only when it follows the typed span */ #typing-effect::after { content: "_"; display: inline-block; margin-left: 2px; animation: ti-underscore-blink 1s steps(1) infinite; background: inherit; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--primary-color); /* fallback for non-WebKit */ } @keyframes ti-underscore-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .text-theme-color { color: var(--primary-color); } .why-hire-me-card { position: relative; z-index: 0; height: 100%; min-height: 260px; border-radius: 16px; overflow: hidden; background-color: var(--card-bg); background-size: cover; background-position: center; border: 1px solid var(--border-color); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); transition: transform 0.25s ease, box-shadow 0.25s ease, background-size 0.4s ease; color: #ffffff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } .why-hire-me-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); background-size: 108%; } /* Image darkening overlay for better text contrast */ .why-hire-me-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.12) 35%, rgba(0,0,0,0.38) 100%); pointer-events: none; } /* Top accent bar */ .why-hire-me-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--primary-gradient); opacity: 0.9; } /* Headline emphasis inside card */ .why-hire-me-card h4 { margin: 0; line-height: 1.4; letter-spacing: 0.2px; font-size: 1.05rem; } /* Header bar inside image card */ .why-hire-me-card__header { position: absolute; top: 0; left: 0; right: 0; background: var(--primary-gradient); color: #fff; border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0 6px 16px rgba(0,0,0,0.25); } /* Keep spacing tidy on small screens */ @media (max-width: 576px) { .why-hire-me-card { min-height: 220px; } .why-hire-me-card h4 { font-size: 0.98rem; } } /* Light theme tweaks for readability */ [data-bg-theme="light"] .why-hire-me-card { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } /* Card-specific background images */ #hire-card-1 { background-image: url('../hireCard1.png'); } #hire-card-2 { background-image: url('../hireCard2.png'); } #hire-card-3 { background-image: url('../hireCard3.png'); } .project-card .card-img-top { height: 200px; object-fit: cover; object-position: top; }