/** * modern.css — Portfolio Modernization Override * Daniel P Fernandes | danielpfernandes.github.io * Dark navy + indigo/cyan glassmorphism premium design */ /* ============================================================ CSS VARIABLES ============================================================ */ :root { --bg-base: #0a0f1e; --bg-surface: #0d1526; --bg-glass: rgba(255, 255, 255, 0.04); --bg-glass-hover: rgba(255, 255, 255, 0.07); --accent-1: #6366f1; --accent-2: #06b6d4; --accent-gradient: linear-gradient(135deg, #6366f1, #06b6d4); --accent-gradient-r: linear-gradient(135deg, #06b6d4, #6366f1); --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --border: rgba(255, 255, 255, 0.07); --border-accent: rgba(99, 102, 241, 0.35); --glow: rgba(99, 102, 241, 0.18); --glow-cyan: rgba(6, 182, 212, 0.18); --shadow: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.15); --radius: 12px; --radius-lg: 20px; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================ LIGHT MODE OVERRIDES (applied via data-theme="light" on ) ============================================================ */ [data-theme="light"] { --bg-base: #f1f5f9; --bg-surface: #ffffff; --bg-glass: rgba(0, 0, 0, 0.03); --bg-glass-hover: rgba(99, 102, 241, 0.06); --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --border: rgba(0, 0, 0, 0.08); --border-accent: rgba(99, 102, 241, 0.3); --glow: rgba(99, 102, 241, 0.12); --glow-cyan: rgba(6, 182, 212, 0.12); --shadow: 0 8px 32px rgba(0, 0, 0, 0.1); --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.1); } /* Light mode: sidebar */ [data-theme="light"] #header { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 60%, #ffffff 100%) !important; border-right: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.07) !important; } [data-theme="light"] #header::before { opacity: 0.5; } /* Light mode: profile name gradient still shows */ [data-theme="light"] #header .profile img { box-shadow: 0 0 0 3px var(--accent-1), 0 0 0 6px rgba(99, 102, 241, 0.1), 0 8px 24px rgba(0, 0, 0, 0.12) !important; } /* Light mode: nav links */ [data-theme="light"] .nav-menu a { color: #475569 !important; } [data-theme="light"] .nav-menu a:hover, [data-theme="light"] .nav-menu .active>a, [data-theme="light"] .nav-menu li:hover>a { color: #0f172a !important; background: rgba(99, 102, 241, 0.07) !important; } [data-theme="light"] .nav-menu a i { color: #94a3b8 !important; } /* Light mode: footer */ [data-theme="light"] #footer { border-top: 1px solid rgba(0, 0, 0, 0.08) !important; } /* Light mode: hero */ [data-theme="light"] #hero { background: linear-gradient(135deg, rgba(241, 245, 249, 0.82) 0%, rgba(232, 238, 255, 0.78) 50%, rgba(240, 253, 255, 0.82) 100%), url("../img/hero-bg.jpg") center center / cover no-repeat !important; } [data-theme="light"] #hero::before { background: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(99, 102, 241, 0.12) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 70%, rgba(6, 182, 212, 0.10) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 50% 50%, rgba(99, 102, 241, 0.04) 0%, transparent 70%); } [data-theme="light"] #hero h1 { background: linear-gradient(135deg, #0f172a 20%, var(--accent-1) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="light"] #hero p { color: #475569 !important; -webkit-text-fill-color: #475569 !important; } [data-theme="light"] #hero p span { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } /* Light mode: section bg */ [data-theme="light"] .section-bg { background: #ffffff !important; } /* Light mode: about list items */ [data-theme="light"] .about .content ul li { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } [data-theme="light"] .about .content ul li:hover { border-color: var(--border-accent) !important; box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1); } /* Light mode: skill categories */ [data-theme="light"] .skill-category { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } [data-theme="light"] .skill-category:hover { border-color: var(--border-accent) !important; } [data-theme="light"] .skills .progress .skill { color: #334155 !important; -webkit-text-fill-color: #334155 !important; } [data-theme="light"] .skills .progress-bar-wrap { background: rgba(99, 102, 241, 0.1) !important; } /* Light mode: resume items */ [data-theme="light"] .resume .resume-item { background: #ffffff; border-left-color: rgba(99, 102, 241, 0.2) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } [data-theme="light"] .resume .resume-item:hover { border-left-color: var(--accent-1) !important; box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1); } [data-theme="light"] .resume .resume-item h4 { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } [data-theme="light"] .resume .resume-item ul li { color: #475569 !important; } [data-theme="light"] .resume .resume-item ul li strong { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } /* Light mode: portfolio cards */ [data-theme="light"] .portfolio .portfolio-wrap { background: #ffffff; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07); } [data-theme="light"] .portfolio .portfolio-wrap p { background: linear-gradient(0deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.6) 70%, transparent 100%); } /* Light mode: portfolio filter */ [data-theme="light"] .portfolio #portfolio-flters { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } [data-theme="light"] .portfolio #portfolio-flters li { color: #475569 !important; } /* Light mode: back-to-top */ [data-theme="light"] .back-to-top { box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25) !important; } /* ============================================================ THEME TOGGLE BUTTON ============================================================ */ #theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-glass); color: var(--text-secondary); cursor: pointer; transition: var(--transition); margin: 0 auto 8px; font-size: 18px; } #theme-toggle-btn:hover { background: var(--accent-gradient); border-color: transparent; color: #fff; box-shadow: 0 4px 16px var(--glow); transform: scale(1.1) rotate(15deg); } #theme-toggle-btn i { line-height: 1; -webkit-text-fill-color: inherit; color: inherit !important; transition: transform 0.4s ease; } /* ============================================================ GLOBAL RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { background: var(--bg-base) !important; color: var(--text-primary) !important; font-family: 'Inter', 'Open Sans', sans-serif !important; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--accent-1); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-2); } a { color: var(--accent-2) !important; transition: var(--transition); } a:hover { color: var(--accent-1) !important; text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', 'Raleway', sans-serif !important; color: var(--text-primary) !important; } p, li, span, td, th { color: var(--text-secondary) !important; } /* ============================================================ BACK TO TOP BUTTON ============================================================ */ .back-to-top { background: var(--accent-gradient) !important; box-shadow: 0 0 20px var(--glow) !important; border-radius: 50% !important; transition: var(--transition) !important; } .back-to-top:hover { transform: translateY(-3px); box-shadow: 0 0 35px var(--glow) !important; background: var(--accent-gradient-r) !important; } /* ============================================================ SIDEBAR / HEADER ============================================================ */ #header { background: linear-gradient(180deg, #080d1b 0%, #0a1020 60%, #080d1b 100%) !important; border-right: 1px solid var(--border) !important; box-shadow: 4px 0 40px rgba(0, 0, 0, 0.5) !important; padding: 0 !important; overflow-x: hidden; } /* Glowing left accent stripe */ #header::before { content: ''; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: var(--accent-gradient); opacity: 0.6; z-index: 1; } /* Profile area */ #header .profile { padding: 36px 20px 20px; text-align: center; position: relative; } #header .profile::after { content: ''; display: block; width: 60%; height: 1px; background: var(--accent-gradient); margin: 20px auto 0; opacity: 0.4; } /* Profile image with gradient ring */ #header .profile img { width: 110px !important; height: 110px !important; object-fit: cover; border-radius: 50% !important; border: none !important; box-shadow: 0 0 0 3px var(--accent-1), 0 0 0 6px rgba(99, 102, 241, 0.15), 0 12px 40px rgba(0, 0, 0, 0.5) !important; transition: var(--transition) !important; margin: 0 auto 16px !important; display: block !important; } #header .profile img:hover { box-shadow: 0 0 0 3px var(--accent-2), 0 0 0 8px rgba(6, 182, 212, 0.2), 0 16px 50px rgba(0, 0, 0, 0.6) !important; transform: scale(1.04); } #header .profile h1 { font-size: 19px !important; font-weight: 700 !important; letter-spacing: 0.3px; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding-bottom: 2px; } #header .profile h1 a, #header .profile h1 a:hover { background: inherit; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none !important; } /* Social links */ #header .profile .social-links { margin-top: 14px !important; } #header .profile .social-links a { background: var(--bg-glass) !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; width: 38px !important; height: 38px !important; border-radius: 10px !important; margin: 0 4px !important; transition: var(--transition) !important; display: inline-flex !important; align-items: center; justify-content: center; } #header .profile .social-links a:hover { background: var(--accent-gradient) !important; border-color: transparent !important; color: #fff !important; transform: translateY(-3px); box-shadow: 0 6px 20px var(--glow) !important; } #header .profile .social-links a i { -webkit-text-fill-color: inherit; color: inherit !important; } /* ============================================================ NAVIGATION MENU ============================================================ */ .nav-menu { padding-top: 16px !important; padding-bottom: 80px; } .nav-menu a { color: var(--text-secondary) !important; padding: 11px 24px !important; margin-bottom: 2px !important; font-size: 13.5px !important; font-weight: 500; letter-spacing: 0.2px; border-radius: 0; position: relative; transition: var(--transition) !important; } .nav-menu a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 60%; background: var(--accent-gradient); border-radius: 0 3px 3px 0; transition: var(--transition); opacity: 0; } .nav-menu a:hover::before, .nav-menu .active>a::before, .nav-menu li:hover>a::before { width: 3px; opacity: 1; } .nav-menu a:hover, .nav-menu .active>a, .nav-menu li:hover>a { color: var(--text-primary) !important; background: var(--bg-glass-hover) !important; text-decoration: none !important; } .nav-menu a i { color: var(--text-muted) !important; font-size: 20px !important; transition: var(--transition); } .nav-menu a:hover i, .nav-menu .active>a i, .nav-menu li:hover>a i { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================ FOOTER (sidebar) ============================================================ */ #footer { background: transparent !important; border-top: 1px solid var(--border) !important; color: var(--text-muted) !important; font-size: 11px !important; } #footer .copyright, #footer .credits, #footer .credits a { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } #footer .credits a:hover { color: var(--accent-2) !important; -webkit-text-fill-color: var(--accent-2) !important; } /* ============================================================ HERO SECTION ============================================================ */ #hero { background: linear-gradient(rgba(10, 15, 30, 0.72), rgba(10, 15, 30, 0.72)), url("../img/hero-bg.jpg") center center / cover no-repeat !important; position: relative; overflow: hidden; } /* Animated gradient mesh background */ #hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(99, 102, 241, 0.18) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 70%, rgba(6, 182, 212, 0.14) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 50% 50%, rgba(99, 102, 241, 0.06) 0%, transparent 70%); animation: heroGlow 8s ease-in-out infinite alternate; z-index: 0; } @keyframes heroGlow { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05) translate(1%, -1%); } 100% { opacity: 1; transform: scale(1.02) translate(-1%, 1%); } } /* Grid lines decoration */ #hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px); background-size: 60px 60px; z-index: 0; } #hero .hero-container { position: relative; z-index: 2 !important; } #hero h1 { font-size: 62px !important; font-weight: 800 !important; line-height: 1.1 !important; background: linear-gradient(135deg, #ffffff 30%, var(--accent-2) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px !important; letter-spacing: -1px; } #hero p { font-size: 20px !important; color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; font-weight: 400; } #hero p span { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; border-bottom: 2px solid var(--accent-1) !important; padding-bottom: 2px !important; } /* CTA button */ .hero-cta { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 36px !important; padding: 14px 32px !important; background: var(--accent-gradient) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-radius: 50px !important; font-weight: 600 !important; font-size: 15px !important; text-decoration: none !important; box-shadow: 0 8px 32px rgba(99, 102, 241, 0.35) !important; transition: var(--transition) !important; letter-spacing: 0.3px; } .hero-cta:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 40px rgba(99, 102, 241, 0.5) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } @media (max-width: 768px) { #hero h1 { font-size: 36px !important; line-height: 1.2 !important; } #hero p { font-size: 16px !important; } } /* ============================================================ SECTIONS GENERAL ============================================================ */ section { padding: 70px 0 !important; } .section-bg { background: var(--bg-surface) !important; position: relative; } .section-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(99, 102, 241, 0.04) 0%, transparent 70%); pointer-events: none; } /* Section Title */ .section-title { padding-bottom: 36px !important; } .section-title h2 { font-size: 34px !important; font-weight: 800 !important; color: var(--text-primary) !important; margin-bottom: 16px !important; padding-bottom: 16px !important; letter-spacing: -0.5px; } .section-title h2::after { background: var(--accent-gradient) !important; height: 3px !important; width: 48px !important; border-radius: 2px; bottom: 0 !important; left: 0 !important; } .section-title p { font-size: 15px !important; color: var(--text-secondary) !important; max-width: 600px; line-height: 1.7; } /* ============================================================ ABOUT SECTION ============================================================ */ .about { position: relative; } .about .content h3 { color: var(--text-primary) !important; font-size: 22px !important; font-weight: 700 !important; margin-bottom: 24px; display: inline-flex; align-items: center; gap: 10px; } .about .content h3::before { content: ''; display: inline-block; width: 4px; height: 22px; background: var(--accent-gradient); border-radius: 2px; flex-shrink: 0; } .about .content ul { list-style: none !important; padding: 0 !important; } .about .content ul li { padding: 12px 16px !important; margin-bottom: 10px !important; background: var(--bg-glass) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; transition: var(--transition) !important; } .about .content ul li:hover { background: var(--bg-glass-hover) !important; border-color: var(--border-accent) !important; transform: translateX(4px); } .about .content ul i.icofont-rounded-right, .about .content ul i.icofont-circled-right { color: var(--accent-1) !important; -webkit-text-fill-color: var(--accent-1) !important; } .about .content ul strong { color: var(--text-primary) !important; } /* Badges section */ .badges-active, .badges-expired { margin-top: 30px !important; gap: 12px; } .badges-expired { opacity: 0.5; margin-top: 16px !important; } .badges-expired::before { content: 'Expired Certifications'; display: block; width: 100%; text-align: center; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted) !important; margin-bottom: 12px; padding-top: 20px; border-top: 1px solid var(--border); } /* ============================================================ SKILLS SECTION ============================================================ */ .skills .progress { height: auto !important; background: none !important; overflow: visible !important; margin-bottom: 20px !important; } .skills .progress .skill { font-size: 12px !important; font-weight: 600 !important; color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; text-transform: uppercase !important; letter-spacing: 0.8px; margin-bottom: 8px !important; padding: 0 !important; display: flex !important; justify-content: space-between !important; align-items: center; } .skills .progress .skill .val { font-style: normal !important; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; font-size: 12px; } .skills .progress-bar-wrap { background: rgba(255, 255, 255, 0.06) !important; border-radius: 50px !important; height: 7px !important; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); } .skills .progress-bar { height: 7px !important; background: var(--accent-gradient) !important; border-radius: 50px !important; position: relative; overflow: hidden; } /* Shimmer animation on skill bars */ .skills .progress-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%); animation: shimmer 2.5s ease-in-out infinite; transform: translateX(-100%); } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } /* Skill category headings */ .skill-category { background: var(--bg-glass) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 20px 20px 10px !important; margin-bottom: 20px !important; transition: var(--transition) !important; } .skill-category:hover { border-color: var(--border-accent) !important; background: var(--bg-glass-hover) !important; } .skill-category h5 { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--border) !important; } .skills h4 { font-size: 15px !important; font-weight: 700 !important; color: var(--text-primary) !important; margin-bottom: 16px !important; display: flex; align-items: center; gap: 8px; } .skills h4::before { content: ''; width: 3px; height: 16px; background: var(--accent-gradient); border-radius: 2px; flex-shrink: 0; } /* ============================================================ RESUME SECTION ============================================================ */ .resume .resume-title { font-size: 18px !important; font-weight: 700 !important; color: var(--text-primary) !important; margin-top: 32px !important; margin-bottom: 24px !important; display: flex; align-items: center; gap: 10px; } .resume .resume-title::before { content: ''; flex-shrink: 0; width: 28px; height: 3px; background: var(--accent-gradient); border-radius: 2px; } .resume .resume-item { padding: 20px 20px 20px 28px !important; margin-bottom: 8px !important; margin-top: 0 !important; border-left: 2px solid rgba(99, 102, 241, 0.3) !important; background: var(--bg-glass); border-radius: 0 var(--radius) var(--radius) 0 !important; position: relative; transition: var(--transition) !important; } .resume .resume-item:hover { background: var(--bg-glass-hover) !important; border-left-color: var(--accent-1) !important; transform: translateX(3px); } /* Timeline dot */ .resume .resume-item::before { content: '' !important; width: 12px !important; height: 12px !important; background: var(--accent-gradient) !important; border: none !important; border-radius: 50% !important; left: -7px !important; top: 24px !important; box-shadow: 0 0 12px var(--glow) !important; } .resume .resume-item h4 { font-size: 15px !important; font-weight: 700 !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; text-transform: none !important; letter-spacing: 0; margin-bottom: 8px !important; } .resume .resume-item a h4 { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .resume .resume-item h5 { font-size: 12px !important; background: rgba(99, 102, 241, 0.15) !important; border: 1px solid rgba(99, 102, 241, 0.25) !important; color: var(--accent-1) !important; -webkit-text-fill-color: var(--accent-1) !important; padding: 3px 12px !important; border-radius: 50px !important; font-weight: 600 !important; display: inline-block !important; margin-bottom: 8px !important; } .resume .resume-item h6 { font-size: 11px !important; color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; background: none !important; padding: 0 !important; display: inline-block; margin-left: 8px; font-weight: 500 !important; } .resume .resume-item p em { color: var(--accent-2) !important; -webkit-text-fill-color: var(--accent-2) !important; font-style: italic; font-size: 13px; } .resume .resume-item ul { padding-left: 16px !important; } .resume .resume-item ul li { padding-bottom: 6px !important; font-size: 13.5px !important; color: var(--text-secondary) !important; line-height: 1.6; } .resume .resume-item ul li strong { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; } /* ============================================================ PORTFOLIO SECTION ============================================================ */ .portfolio #portfolio-flters { background: var(--bg-glass) !important; border: 1px solid var(--border) !important; border-radius: 50px !important; padding: 4px 8px !important; display: inline-flex !important; gap: 4px; } .portfolio #portfolio-flters li { cursor: pointer; padding: 8px 18px !important; font-size: 13px !important; font-weight: 600; color: var(--text-secondary) !important; border-radius: 50px !important; transition: var(--transition) !important; letter-spacing: 0.3px; } .portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active { background: var(--accent-gradient) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } /* Portfolio cards */ .portfolio .portfolio-wrap { border-radius: var(--radius) !important; overflow: hidden !important; border: 1px solid var(--border) !important; transition: var(--transition) !important; background: var(--bg-surface); } .portfolio .portfolio-wrap img { transition: transform 0.5s ease !important; } .portfolio .portfolio-wrap:hover { border-color: var(--border-accent) !important; box-shadow: 0 16px 48px rgba(99, 102, 241, 0.2) !important; transform: translateY(-4px); } .portfolio .portfolio-wrap:hover img { transform: scale(1.06) !important; } .portfolio .portfolio-wrap p { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, rgba(10, 15, 30, 0.95) 0%, rgba(10, 15, 30, 0.6) 70%, transparent 100%); color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; font-size: 13px !important; font-weight: 600; padding: 32px 16px 12px !important; margin: 0 !important; z-index: 4; transform: translateY(0); transition: var(--transition); display: flex; align-items: flex-end; min-height: 60px; } /* Portfolio hover glass overlay */ .portfolio .portfolio-wrap::before { background: rgba(10, 15, 30, 0.25) !important; } /* Portfolio links (icon overlay) */ .portfolio .portfolio-wrap .portfolio-links { bottom: 0 !important; background: transparent; z-index: 5; top: 0 !important; display: flex !important; align-items: flex-start !important; justify-content: flex-end !important; padding: 12px !important; opacity: 0; transition: var(--transition); } .portfolio .portfolio-wrap:hover .portfolio-links { opacity: 1 !important; } .portfolio .portfolio-wrap .portfolio-links a { background: rgba(99, 102, 241, 0.8) !important; width: 38px !important; height: 38px !important; border-radius: 10px !important; font-size: 18px !important; display: flex; align-items: center; justify-content: center; transition: var(--transition) !important; backdrop-filter: blur(8px); } .portfolio .portfolio-wrap .portfolio-links a:hover { background: var(--accent-1) !important; transform: scale(1.1); } /* ============================================================ GITHUB SECTION ============================================================ */ #github-container a { color: var(--accent-2) !important; } /* ============================================================ MOBILE NAV TOGGLE ============================================================ */ .mobile-nav-toggle i { color: var(--accent-1) !important; } .mobile-nav-active #header { box-shadow: 0 0 60px rgba(0, 0, 0, 0.8) !important; } /* ============================================================ AOS OVERRIDE for dark background (pointer-events rule removed to avoid blocking interaction on sections before AOS initializes) ============================================================ */ /* ============================================================ RESPONSIVE ADJUSTMENTS ============================================================ */ @media (max-width: 1199px) { body #main { margin-left: 0; } } @media (max-width: 768px) { body .section-title h2 { font-size: 26px; } body .skill-category { padding: 16px 14px 8px; } }