/* ============================================================ PRO THEME — Applied when has class .pro-theme ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;600;700;800&display=swap'); /* ---------- CSS Variables ---------- */ .pro-theme { --bg-primary: #0d1117; --bg-secondary: #161b27; --bg-card: #1e2435; --accent-cyan: #00d4ff; --accent-purple: #7c3aed; --grad: linear-gradient(135deg, #00d4ff, #7c3aed); --text-primary: #e6edf3; --text-muted: #8b949e; --border: rgba(0, 212, 255, 0.25); font-family: 'Inter', sans-serif !important; background-color: var(--bg-primary); color: var(--text-primary); } /* ---------- Global ---------- */ .pro-theme h1, .pro-theme h2, .pro-theme h3, .pro-theme h4, .pro-theme h5, .pro-theme h6 { color: var(--text-primary); font-family: 'Inter', sans-serif; } .pro-theme p { color: var(--text-muted); line-height: 1.8; } .pro-theme strong { color: var(--text-primary); } /* ---------- Loader ---------- */ .pro-theme .loader { background-color: var(--bg-primary); } /* ---------- Hero Overlay ---------- */ .pro-theme .overlay { background: linear-gradient( 135deg, rgba(7, 10, 18, 0.72) 0%, rgba(124, 58, 237, 0.18) 50%, rgba(7, 10, 18, 0.72) 100% ); animation: heroShift 8s ease-in-out infinite alternate; } @keyframes heroShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* ---------- Hero Title ---------- */ .pro-theme .titleMessage .heading { text-shadow: 0 0 40px rgba(0, 212, 255, 0.55), 0 2px 8px rgba(0, 0, 0, 0.9); letter-spacing: 10px; } .pro-theme .titleMessage .heading .main { font-weight: 700; font-family: 'Inter', sans-serif; } /* ---------- Navigation ---------- */ .pro-theme #navigation { background: rgba(13, 17, 23, 0.88) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); padding: 14px 10px; } .pro-theme .navbar-brand, .pro-theme .navbar-brand:hover { color: var(--accent-cyan) !important; font-weight: 700; letter-spacing: 2px; } .pro-theme #navigation li a { color: var(--text-primary) !important; font-weight: 400; letter-spacing: 1.5px; transition: color 0.2s; } .pro-theme #navigation li a:hover { color: var(--accent-cyan) !important; text-decoration: none; } .pro-theme .navbar-toggler { border-color: var(--border); } /* ---------- About Section ---------- */ .pro-theme #about.section { background-color: var(--bg-primary); } .pro-theme .aboutImage { border-radius: 16px; border: 2px solid var(--border); box-shadow: 0 0 50px rgba(0, 212, 255, 0.12), 0 20px 60px rgba(0, 0, 0, 0.5); } .pro-theme #about h4.mb-3 { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; font-size: 1.4rem; } /* ---------- Skills Section ---------- */ .pro-theme .skillsSection { background-color: var(--bg-secondary); color: var(--text-primary); } .pro-theme .skillsSection h2 { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pro-theme .skillsSection > .container > .row > .col-md-12 p { color: var(--text-muted); } .pro-theme .chart .percent { color: var(--accent-cyan); font-weight: 600; } .pro-theme .skill h4 { color: var(--text-primary); font-weight: 600; margin-top: 8px; } .pro-theme .skill p { color: var(--text-muted); font-size: 12px; } /* ---------- Stats Section ---------- */ .pro-theme .statsSection { background-color: var(--bg-primary); } .pro-theme .squareItem { margin-top: 30px; } .pro-theme .squareInnerContainer { background-color: var(--bg-card); border-color: var(--border); border-radius: 0 0 10px 10px; border-top: none; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); } .pro-theme .squareInnerContainer::before, .pro-theme .squareInnerContainer::after { border-color: var(--accent-cyan); box-shadow: 0 0 8px rgba(0, 212, 255, 0.4); } .pro-theme .squareContent h2.counter { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; } .pro-theme .squareContent h3 { color: var(--text-muted); } .pro-theme .squareIcon { color: var(--accent-cyan); filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5)); } /* ---------- Contact Section ---------- */ .pro-theme .contactSection { background-color: var(--bg-secondary); color: var(--text-primary); } .pro-theme .contactSection .subHeading { color: var(--accent-cyan); letter-spacing: 3px; text-transform: uppercase; font-size: 13px; font-weight: 600; } .pro-theme .contactSection h2 { color: var(--text-primary); font-weight: 700; } .pro-theme .contactButton { border: 1px solid var(--accent-cyan); color: var(--accent-cyan); background: transparent; border-radius: 8px; letter-spacing: 2px; font-weight: 600; transition: all 0.3s ease; margin: 10px 8px 0; } .pro-theme .contactButton:hover { background: var(--accent-cyan); color: var(--bg-primary); box-shadow: 0 0 25px rgba(0, 212, 255, 0.45); text-decoration: none; } /* ---------- Portfolio Section ---------- */ .pro-theme #Portfolio.section { background-color: var(--bg-primary); } .pro-theme .section .heading h2 { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pro-theme .filter a { color: var(--text-muted); border-color: var(--border); border-radius: 6px; transition: all 0.2s; } .pro-theme .filter a:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); text-decoration: none; } .pro-theme .filter .current { background: var(--grad); color: #fff; border-color: transparent; } .pro-theme .items a { background-color: var(--accent-cyan); } .pro-theme .items .icons i { color: var(--bg-primary); } .pro-theme .items li img { border-radius: 4px; } /* ---------- Footer ---------- */ .pro-theme .copyrightSection { background: #080b10; border-top: 1px solid var(--border); } /* ============================================================ THEME TOGGLE BUTTON ============================================================ */ .theme-toggle-btn { position: fixed; bottom: 28px; right: 28px; z-index: 9999; display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 50px; border: 2px solid #000; background: #fff; color: #000; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22); text-transform: uppercase; font-family: inherit; } .theme-toggle-btn:hover { background: #000; color: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); } .theme-toggle-btn .toggle-icon { font-size: 16px; line-height: 1; } /* Night-mode state of the button */ .pro-theme .theme-toggle-btn { background: rgba(13, 17, 23, 0.92); border-color: #00d4ff; color: #00d4ff; box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3), 0 0 0 1px rgba(0, 212, 255, 0.1); font-family: 'Inter', sans-serif; } .pro-theme .theme-toggle-btn:hover { background: #00d4ff; color: #0d1117; box-shadow: 0 6px 28px rgba(0, 212, 255, 0.55); }