/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; height: 100%; } :root { --primary-red: #cc0000; --dark-red: #990000; --light-red: #ff3333; --black: #000000; --dark-gray: #1a1a1a; --medium-gray: #333333; --light-gray: #666666; --off-white: #f0f0f0; --white: #ffffff; } /* Light theme overrides (applied when .theme-light is on or ) */ .theme-light { --primary-red: #cc0000; --dark-red: #990000; --light-red: #ff3333; --black: #ffffff; /* page background becomes light */ --dark-gray: #f1f1f1; --medium-gray: #d0d0d0; --light-gray: #6b6b6b; --off-white: #121212; /* primary text becomes dark */ --white: #000000; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--black); color: var(--off-white); line-height: 1.6; } /* Global link defaults: remove underlines site-wide and keep color inheritance. Specific link colors (nav, cards, footer, etc.) remain controlled by their selectors. */ a { text-decoration: none; color: inherit; } a:hover, a:focus { text-decoration: none; color: inherit; outline: none; } /* Mailto (email) links: make them clearly red and high-contrast across themes */ a[href^="mailto:"]:not(.contact-mail-btn) { color: var(--primary-red); font-weight: 700; text-decoration: none; } a[href^="mailto:"]:not(.contact-mail-btn):hover { color: var(--dark-red); } a[href^="mailto:"]:not(.contact-mail-btn):visited { color: var(--primary-red); } /* Prevent horizontal scrolling caused by very wide elements */ html, body { overflow-x: hidden; } /* Breaking News Bar */ .breaking-news-bar { background-color: var(--primary-red); color: var(--white); display: flex; align-items: center; padding: 8px 0; overflow: hidden; position: relative; width: 100%; } .breaking-label { background-color: var(--black); color: var(--white); padding: 4px 12px; font-weight: bold; text-transform: uppercase; font-size: 0.8rem; margin-right: 15px; white-space: nowrap; position: relative; z-index: 2; } .news-ticker { display: flex; padding-left: 15px; white-space: nowrap; overflow: hidden; } /* Theme toggle button */ .theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.06); color: var(--off-white); padding: 8px 10px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; margin-right: 8px; } .theme-toggle i { font-size: 1rem; } .theme-toggle[aria-pressed="true"] { background: rgba(255,255,255,0.04); } /* Light theme specifics for toggle */ .theme-light .theme-toggle { border-color: rgba(0,0,0,0.08); color: var(--off-white); } .news-ticker span { display: inline-block; padding-right: 50px; animation: ticker 30s linear infinite; } @keyframes ticker { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* About Button Section Styles */ .about-button-section { padding: 4rem 2rem; text-align: center; background-color: var(--dark-gray); margin-top: 3rem; } .about-button-container { margin-top: 2rem; } .about-cta-button { display: inline-flex; align-items: center; gap: 1rem; padding: 1rem 2rem; font-size: 1.2rem; color: var(--white); background-color: var(--primary-red); border: none; border-radius: 5px; text-decoration: none; transition: all 0.3s ease; } .about-cta-button:hover { background-color: var(--dark-red); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(204, 0, 0, 0.2); } .about-cta-button i { transition: transform 0.3s ease; } .about-cta-button:hover i { transform: translateX(5px); } .news-ticker { display: flex; animation: ticker 30s linear infinite; white-space: nowrap; margin-left: 15px; position: relative; padding-left: 100px; /* Create space for the BREAKING label */ } .news-ticker span { margin-right: 40px; font-size: 0.9rem; } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Only apply the continuous marquee animation on larger screens */ @media (min-width: 521px) { .news-ticker { animation: ticker 20s linear infinite; } } /* Header */ .news-header { background-color: var(--dark-gray); border-bottom: 3px solid var(--primary-red); } .header-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--medium-gray); } .date-time span { margin-right: 15px; font-size: 0.9rem; color: var(--light-gray); } .header-social a { color: var(--light-gray); margin-left: 15px; font-size: 1.2rem; } .header-social a:hover { color: var(--primary-red); } .visit-counter { color: var(--light-gray); font-size: 0.9rem; display: flex; align-items: center; gap: 8px; } .header-main { display: flex; justify-content: space-between; align-items: center; padding: 20px; } .logo-section { display: flex; align-items: center; } .logo { height: 60px; margin-right: 15px; } .site-title h1 { color: var(--primary-red); font-size: 2.2rem; margin-bottom: 0; } .site-title p { color: var(--light-gray); font-size: 0.9rem; margin-bottom: 0; letter-spacing: 1px; } .profile-section { display: flex; align-items: center; } /* Mobile menu toggle button */ .mobile-menu-toggle { display: none; background: transparent; border: none; width: 48px; height: 48px; align-items: center; justify-content: center; cursor: pointer; } .mobile-menu-toggle .hamburger { display: block; width: 26px; height: 2px; background: var(--off-white); position: relative; } .mobile-menu-toggle .hamburger::before, .mobile-menu-toggle .hamburger::after { content: ''; position: absolute; left: 0; width: 26px; height: 2px; background: var(--off-white); } .mobile-menu-toggle .hamburger::before { top: -8px; } .mobile-menu-toggle .hamburger::after { top: 8px; } .profile-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-red); margin-right: 15px; } .profile-info h2 { color: var(--white); margin-bottom: 0; } .profile-info p { color: var(--light-gray); margin-bottom: 0; font-size: 0.9rem; } /* Navigation */ .main-nav { background-color: var(--medium-gray); border-top: 1px solid var(--light-gray); } .main-nav ul { display: flex; list-style: none; justify-content: center; } .main-nav li { position: relative; } .main-nav a { display: block; padding: 15px 20px; color: var(--off-white); font-weight: 600; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; } .main-nav a:hover { background-color: var(--primary-red); color: var(--white); } .main-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: var(--primary-red); transition: width 0.3s ease; } .main-nav a:hover::after { width: 100%; } /* Sticky nav - toggled by JS. When sticky, we fix the nav to the top and add a small shadow. Body receives padding to prevent content jump (set by JS to the nav height). */ .main-nav.sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; /* above most page elements but below any modals */ box-shadow: 0 6px 22px rgba(0,0,0,0.6); transform: translateZ(0); } /* optional transition when toggling sticky state */ .main-nav { transition: box-shadow 200ms ease, background-color 150ms ease; } /* small helper class for body applied when nav is fixed; JS also sets inline padding-top to match nav height */ body.nav-fixed { /* fallback padding if JS doesn't run; will be overridden by inline style set by JS */ padding-top: 60px; } /* Hero Section */ .hero-section { padding: 80px 20px; text-align: center; position: relative; overflow: hidden; } .hero-video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .hero-background-video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } .hero-content { position: relative; z-index: 1; background: rgba(0, 0, 0, 0.6); padding: 2rem; border-radius: 10px; backdrop-filter: blur(5px); } .hero-title { color: var(--primary-red); font-size: 3.5rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; } .hero-subtitle { font-size: 1.2rem; max-width: 800px; margin: 0 auto 2rem; color: var(--off-white); } .hero-buttons { margin-bottom: 3rem; } .btn { display: inline-block; padding: 12px 30px; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; margin: 0 10px; } .btn-primary { background-color: var(--primary-red); color: var(--white); border: 2px solid var(--primary-red); } .btn-primary:hover { background-color: var(--dark-red); border-color: var(--dark-red); color: var(--white); } .btn-secondary { background-color: transparent; color: var(--off-white); border: 2px solid var(--off-white); } .btn-secondary:hover { background-color: var(--off-white); color: var(--black); } /* News Grid Section */ .news-grid-section { padding: 60px 20px; background-color: var(--dark-gray); } .section-header { text-align: center; margin-bottom: 40px; } .section-header h2 { color: var(--primary-red); font-size: 2.2rem; margin-bottom: 10px; } .section-header p { color: var(--light-gray); font-size: 1rem; } .news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; width: 100%; max-width: none; /* let grid stretch to section width */ margin: 0 auto; padding: 0 20px; } .news-card { background-color: var(--black); border-radius: 8px; overflow: hidden; border: 1px solid var(--medium-gray); transition: transform 0.3s ease, box-shadow 0.3s ease; min-width: 0; /* prevent overflow */ } .news-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(204, 0, 0, 0.2); } .news-image { width: 100%; height: 180px; background-color: var(--medium-gray); display: flex; align-items: center; justify-content: center; color: var(--light-gray); } .news-content { padding: 20px; } .news-title { color: var(--white); font-size: 1.1rem; margin-bottom: 10px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; } .news-title a { color: var(--white); text-decoration: none; } .news-title a:hover { color: var(--primary-red); } .news-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 0.85rem; color: var(--light-gray); } .news-source { background-color: var(--primary-red); color: var(--white); padding: 3px 8px; border-radius: 4px; font-weight: 600; } .news-date { color: var(--light-gray); } .news-excerpt { color: var(--light-gray); font-size: 0.95rem; line-height: 1.5; } .loading-news { text-align: center; padding: 40px; grid-column: 1 / -1; } .loading-news i { font-size: 2rem; color: var(--primary-red); margin-bottom: 15px; } .loading-news p { color: var(--light-gray); } /* Medium Articles Section */ .medium-section { padding: 60px 20px; background-color: var(--black); } .medium-feed-container { max-width: 1600px; margin: 0 auto; } .medium-feed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 8px; } .article-card { background-color: var(--dark-gray); border-radius: 8px; overflow: hidden; border: 1px solid var(--medium-gray); transition: transform 0.3s ease, box-shadow 0.3s ease; min-width: 0; /* prevent overflow */ } .article-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(204, 0, 0, 0.2); } .article-thumbnail { height: 180px; background-color: var(--medium-gray); overflow: hidden; } .article-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .article-card:hover .article-thumbnail img { transform: scale(1.05); } .thumbnail-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--light-gray); font-size: 3rem; } .article-content { padding: 20px; } .article-title { margin-bottom: 12px; } .article-title a { color: var(--white); text-decoration: none; font-size: 1.1rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; } .article-title a:hover { color: var(--primary-red); } .article-meta { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 0.8rem; color: var(--light-gray); } .article-meta span { display: flex; align-items: center; gap: 5px; } .article-excerpt { color: var(--light-gray); font-size: 0.85rem; line-height: 1.5; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; } .article-actions { text-align: right; } .read-more { color: var(--primary-red); text-decoration: none; font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 5px; transition: gap 0.3s ease; } .read-more:hover { gap: 10px; } .view-all-container { grid-column: 1 / -1; text-align: center; padding: 30px; } /* Loading and Error States */ .loading-articles { text-align: center; padding: 40px; grid-column: 1 / -1; } .loading-articles i { font-size: 2rem; color: var(--primary-red); margin-bottom: 15px; } .loading-articles p { color: var(--light-gray); } .feed-error { text-align: center; padding: 40px; grid-column: 1 / -1; background-color: var(--dark-gray); border-radius: 8px; border: 1px solid var(--medium-gray); } .feed-error i { font-size: 3rem; color: var(--primary-red); margin-bottom: 15px; } .feed-error h3 { color: var(--white); margin-bottom: 10px; } .feed-error p { color: var(--light-gray); margin-bottom: 20px; } .error-actions { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; } /* Content Grid Section */ .content-grid-section { padding: 60px 20px; background-color: var(--dark-gray); } .content-grid { display: grid; grid-template-columns: 1fr; /* single wide column layout */ gap: 30px; width: 100%; max-width: none; /* let sections fill available width */ margin: 0 auto; padding-left: 20px; padding-right: 20px; } .grid-column.main-column { display: flex; flex-direction: column; gap: 30px; } .grid-column.sidebar { display: flex; flex-direction: column; gap: 30px; } .grid-section { background-color: var(--black); border-radius: 8px; border: 1px solid var(--medium-gray); overflow: hidden; } .grid-section .section-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: var(--medium-gray); border-bottom: 2px solid var(--primary-red); margin-bottom: 8px; } .grid-section .section-header h2 { font-size: 1.3rem; margin-bottom: 0; display: flex; align-items: center; gap: 10px; } .see-all { color: var(--light-gray); font-size: 0.9rem; text-decoration: none; display: flex; align-items: center; gap: 5px; } .see-all:hover { color: var(--primary-red); } /* Sidebar News */ .sidebar-news { padding: 20px; } /* TryHackMe Card */ .tryhackme-card { padding: 20px; display: flex; align-items: center; justify-content: center; } .tryhackme-card .thm-inner { max-width: 720px; background: #111; border: 1px solid rgba(255,0,0,0.06); padding: 18px; border-radius: 8px; text-align: center; } .thm-logo { width: 78px; height: 78px; object-fit: contain; margin-bottom: 8px; } .thm-username { color: var(--primary-red); margin-bottom: 6px; font-size: 1.15rem; } .thm-desc { color: var(--light-gray); margin-bottom: 12px; } .thm-actions { display: flex; gap: 10px; justify-content: center; } .thm-actions .btn { padding: 8px 14px; } .sidebar-news-item { padding: 15px 0; border-bottom: 1px solid var(--medium-gray); } .sidebar-news-item:last-child { border-bottom: none; } .sidebar-news-title { font-size: 0.95rem; margin-bottom: 8px; line-height: 1.4; } .sidebar-news-title a { color: var(--white); text-decoration: none; } .sidebar-news-title a:hover { color: var(--primary-red); } .sidebar-news-meta { font-size: 0.8rem; color: var(--light-gray); display: flex; justify-content: space-between; } /* Quick Stats */ .quick-stats { padding: 20px; } .stat-card { display: flex; align-items: center; gap: 15px; padding: 15px; background-color: var(--dark-gray); border-radius: 6px; margin-bottom: 15px; transition: transform 0.3s ease; } .stat-card:hover { transform: translateX(5px); } .stat-card:last-child { margin-bottom: 0; } .stat-card i { font-size: 1.5rem; color: var(--primary-red); width: 40px; text-align: center; } .stat-info h3 { font-size: 1rem; margin-bottom: 5px; color: var(--white); } .stat-info p { font-size: 0.85rem; color: var(--light-gray); margin-bottom: 0; } /* --- Projects Section Modern Styles --- */ .projects-main { background: linear-gradient(135deg, #1a1a1a 60%, #222 100%); padding: 56px 0 40px 0; margin-top: 0; } /* Projects - Responsive, self-contained layout */ .projects-inner { max-width: 1280px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px); box-sizing: border-box; } .projects-title { text-align: center; font-size: 2.4rem; color: var(--primary-red); margin-bottom: 1.25rem; letter-spacing: 2px; } .projects-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 1.5rem; } .category-btn { background: transparent; color: var(--primary-red); border: 1px solid rgba(204,0,0,0.25); border-radius: 8px; padding: 8px 16px; font-size: 1rem; cursor: pointer; font-weight: 700; transition: background 0.18s, color 0.18s, transform 0.12s; } .category-btn:hover { transform: translateY(-2px); } .category-btn.active { background: var(--primary-red); color: #fff; border-color: var(--primary-red); } /* Recent row uses a responsive grid that adapts from 4 -> 3 -> 2 -> 1 columns */ .projects-row { display: grid; gap: 24px; align-items: start; margin-bottom: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* Grid view for category pages -- similar to row but with tighter max columns */ .projects-grid { display: grid; gap: 24px; justify-items: center; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 1.6rem; } /* Project card - fluid width, fixed aspect proportions for image */ .project-card { width: 100%; background: #181818; border-radius: 12px; box-shadow: 0 6px 30px rgba(0,0,0,0.25); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; max-width: 100%; position: relative; /* allow thumbnail overlay */ border: 2px solid rgba(255,255,255,0.03); } .project-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.35); } .project-image { width: 100%; height: 160px; object-fit: cover; background: #222; } .project-image-placeholder { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #111 0%, #1a1a1a 100%); color: #444; font-weight: 700; border-bottom: 1px solid #222; } .project-info { padding: 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1 1 auto; } .project-title { font-size: 1.05rem; color: var(--primary-red); margin: 0; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } .project-description { color: #ccc; font-size: 0.92rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; line-clamp: 3; } .project-skills { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; } .project-skill { background: #111; color: var(--primary-red); border: 2px solid rgba(204,0,0,0.14); padding: 4px 8px; border-radius: 6px; font-size: 0.78rem; } /* Thumbnail (optional) shown on the card; source is set from projects.json (thumbnail or image) It sits above the image in the top-left corner for quick visual identification. */ .project-thumb { position: absolute; top: 12px; left: 12px; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 2px solid rgba(255,255,255,0.06); background: #111; box-shadow: 0 6px 18px rgba(0,0,0,0.35); z-index: 6; } @media (max-width: 520px) { .project-thumb { width: 48px; height: 48px; top: 10px; left: 10px; } } /* Pagination controls stay centered */ .projects-pagination { margin-top: 1.6rem; margin-bottom: 1.6rem; } /* Breakpoints: control how many columns are visible */ @media (min-width: 1300px) { .projects-row, .projects-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1000px) and (max-width:1299px) { .projects-row, .projects-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 700px) and (max-width:999px) { .projects-row, .projects-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 699px) { .projects-row, .projects-grid { grid-template-columns: 1fr; } } /* Small-screen polish: ensure container padding stays reasonable */ @media (max-width: 520px) { .projects-inner { padding-inline: 12px; } .project-image { height: 140px; } } /* Skills Section */ .skills-section { padding: 48px 20px; background: linear-gradient(180deg, #0f0f0f 0%, #141414 100%); } .skills-content { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px); display: grid; grid-template-columns: 1fr; gap: 20px; } .skills-grid { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; } .skill-badge { background: #111; color: var(--primary-red); border: 2px solid rgba(204,0,0,0.12); padding: 8px 12px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; } .skills-details { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; } .skill-detail { background: #121212; border: 2px solid rgba(255,0,0,0.04); padding: 14px 16px; border-radius: 8px; } .skill-detail h3 { color: var(--primary-red); margin-bottom: 8px; font-size: 1.05rem; } .skill-detail p { color: #cfcfcf; line-height: 1.5; margin: 0; } @media (min-width: 900px) { .skills-content { grid-template-columns: 1fr 480px; align-items: start; } .skills-details { margin-top: 0; } } /* Experience Section */ .experience-section { padding: 40px 20px; background: linear-gradient(180deg, #0f0f0f 0%, #141414 100%); } .experience-section .section-header { background-color: var(--medium-gray); border-bottom: 2px solid var(--primary-red); padding: 16px 20px; } .experience-content { max-width: 1100px; margin: 18px auto 0 auto; display: flex; flex-direction: column; gap: 14px; } .exp-item { background: #121212; border: 2px solid rgba(255,0,0,0.06); padding: 14px; border-radius: 8px; } .exp-meta { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; } .exp-role { color: var(--primary-red); font-size: 1.05rem; margin:0; } .exp-date { color: var(--light-gray); font-size: 0.85rem; } .exp-desc { color: #ccc; font-size: 0.95rem; line-height:1.5; margin:0; } @media (max-width: 760px) { .experience-content { padding: 0 8px; } .exp-meta { flex-direction: column; align-items:flex-start; gap:6px; } } /* About Section */ .about-section { padding: 60px 20px; background: linear-gradient(135deg, #0f0f0f 0%, #141414 100%); } .about-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; } .about-profile { text-align: center; } .about-profile-img { width: 260px; height: 260px; border-radius: 16px; object-fit: cover; margin-bottom: 20px; border: 3px solid var(--primary-red); box-shadow: 0 8px 32px rgba(204,0,0,0.2); } .about-name { color: var(--white); font-size: 1.8rem; margin-bottom: 8px; } .about-title { color: var(--primary-red); font-size: 1.1rem; margin-bottom: 20px; } .about-bio { text-align: left; color: var(--off-white); } .about-bio p { margin-bottom: 1.2rem; line-height: 1.7; font-size: 1.05rem; } .about-bio .highlight { color: var(--primary-red); font-weight: 600; } .security-challenge { margin-top: 30px; padding: 24px; background: rgba(0,0,0,0.3); border-radius: 12px; border: 1px solid rgba(204,0,0,0.1); } .challenge-title { color: var(--primary-red); font-size: 1.2rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .challenge-content { color: #ddd; font-family: monospace; line-height: 1.6; white-space: pre-wrap; } @media (max-width: 800px) { .about-content { grid-template-columns: 1fr; text-align: center; } .about-profile { max-width: 300px; margin: 0 auto; } .about-bio { text-align: center; } } /* Additional targeted tweaks for About page on small screens */ @media (max-width: 800px) { /* Reduce outer padding so content sits nicely on phones */ .about-section { padding: 28px 12px; } /* Slightly tighter grid gap / better centering */ .about-content { gap: 20px; align-items: center; } /* Smaller, more readable body text on mobile */ .about-bio { font-size: 1rem; line-height: 1.6; padding: 0 6px; } .about-bio p { text-align: left; margin-bottom: 1rem; } /* Make the challenge box more compact and prevent overflow */ .security-challenge { padding: 14px; margin-top: 18px; } .challenge-title { font-size: 1rem; } .challenge-content { font-size: 0.92rem; white-space: pre-wrap; overflow-x: auto; word-break: break-word; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Ensure images inside about don't overflow the viewport */ .about-profile-img, .profile-img { max-width: 100%; height: auto; } /* Make sure any very long words (URLs) wrap inside paragraphs */ .about-bio p { overflow-wrap: anywhere; } } @media (max-width: 420px) { .about-section { padding: 20px 10px; } .about-name { font-size: 1.25rem; } .about-bio { font-size: 0.98rem; } .challenge-content { font-size: 0.88rem; } } /* Additional mobile tweaks: header, navigation, and about image sizing */ @media (max-width: 800px) { /* Header: stack elements and reduce sizes */ .header-main { flex-direction: column; align-items: center; gap: 12px; padding: 12px 16px; text-align: center; } .logo { height: 48px; margin-right: 8px; } .site-title h1 { font-size: 1.25rem; line-height: 1.15; } .site-title p { font-size: 0.85rem; } /* Hide less-important header items to reduce clutter */ .header-social { display: none; } .date-time { display: none; } .visit-counter { display: none; } /* Make profile section more compact and stack it under the title */ .profile-section { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .profile-img { width: 56px; height: 56px; margin-right: 8px; } /* About profile image: smaller and round for mobile */ .about-profile-img { width: 160px; height: 160px; border-radius: 50%; margin-bottom: 14px; } .about-name { font-size: 1.4rem; } .about-bio p { font-size: 1rem; } /* Show mobile menu toggle and make nav collapsible */ .mobile-menu-toggle { display: flex; } .main-nav ul { flex-direction: column; display: none; /* hidden on mobile until toggled */ width: 100%; margin: 0; } .main-nav.mobile-open ul { display: flex; } .main-nav a { padding: 12px 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.02); } /* Make sticky nav less intrusive on mobile */ .main-nav.sticky { box-shadow: 0 6px 18px rgba(0,0,0,0.45); } } /* Extra small screens */ @media (max-width: 420px) { .site-title h1 { font-size: 1.05rem; } .about-profile-img { width: 120px; height: 120px; } .about-bio p { font-size: 0.98rem; } .about-section { padding: 28px 10px; } } /* TryHackMe card - improved mobile layout */ @media (max-width: 860px) { .tryhackme-card { padding: 12px 10px; display: block; width: 100%; } .tryhackme-card .thm-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px; gap: 8px; box-sizing: border-box; width: 100%; background: transparent; /* keep consistent with surrounding card */ } .thm-logo { width: 72px; height: 72px; margin-bottom: 6px; } .thm-username { font-size: 1.05rem; } .thm-desc { font-size: 0.95rem; color: var(--light-gray); padding: 0 6px; } .thm-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; align-items: center; padding: 6px 0 0; } .thm-actions .btn { width: 100%; max-width: 320px; padding: 10px 14px; } } @media (max-width: 420px) { .thm-logo { width: 56px; height: 56px; } .thm-username { font-size: 1rem; } .thm-desc { font-size: 0.92rem; } .thm-actions .btn { max-width: 100%; } } /* About Button Section */ .about-button-section { padding: 100px 20px; background: linear-gradient(135deg, #0f0f0f 0%, #141414 100%); text-align: center; margin-top: 40px; } .about-cta-button { display: inline-flex; align-items: center; gap: 12px; background: var(--primary-red); color: var(--white); padding: 18px 36px; border-radius: 8px; font-size: 1.2rem; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; border: 2px solid var(--primary-red); } .about-cta-button:hover { background: transparent; color: var(--primary-red); transform: translateY(-2px); } .about-cta-button i { transition: transform 0.3s ease; } .about-cta-button:hover i { transform: translateX(6px); } /* Education Section */ .education-section { padding: 40px 20px; background: linear-gradient(180deg, #0f0f0f 0%, #111 100%); } .education-section .section-header { background-color: var(--medium-gray); border-bottom: 2px solid var(--primary-red); padding: 16px 20px; } .education-content { max-width: 1100px; margin: 18px auto 0 auto; display:flex; flex-direction: column; gap: 14px; } .edu-item { background: #121212; border: 2px solid rgba(255,0,0,0.06); padding: 14px; border-radius: 8px; } .edu-meta { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; } .edu-institution { color: var(--primary-red); font-size: 1.05rem; margin:0; } .edu-date { color: var(--light-gray); font-size: 0.85rem; } .edu-desc { color:#ccc; margin:0 0 6px 0; } .cert-list { list-style: none; padding-left: 0; margin: 0; color: #ddd; } .cert-list li { padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,0.03); font-size: 0.95rem; } @media (max-width: 760px) { .education-content { padding: 0 8px; } .edu-meta { flex-direction: column; align-items:flex-start; gap:6px; } } /* old duplicated Projects rules removed — replaced by a consolidated, responsive implementation earlier */ /* Modal Styles (unchanged) */ .project-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; } .modal-content { background: #222; border-radius: 14px; max-width: 540px; width: 95vw; padding: 2.2rem 2rem 1.5rem 2rem; box-shadow: 0 8px 32px rgba(204,0,0,0.18); position: relative; color: #fff; text-align: left; /* allow long project descriptions to scroll inside the modal */ max-height: 80vh; overflow-y: auto; } .close-modal { position: absolute; top: 18px; right: 22px; font-size: 2rem; color: var(--primary-red); cursor: pointer; font-weight: bold; z-index: 2; } .modal-title { font-size: 1.7rem; color: var(--primary-red); margin-bottom: 0.7rem; } .modal-date { font-size: 1rem; color: #ccc; margin-bottom: 1rem; } .modal-images { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.2rem; } .modal-main-image { width: 180px; height: 120px; object-fit: cover; border-radius: 7px; border: 2px solid var(--primary-red); } .modal-extra-image { width: 80px; height: 60px; object-fit: cover; border-radius: 5px; border: 1px solid #444; } .modal-description { margin-bottom: 1rem; color: #eee; } .modal-skills { margin-bottom: 1rem; } .modal-link { display: inline-block; background: var(--primary-red); color: #fff; padding: 7px 18px; border-radius: 5px; text-decoration: none; font-weight: bold; margin-top: 0.5rem; transition: background 0.2s; } .modal-link:hover { background: var(--light-red); } /* Legacy small-screen project tweaks removed - handled by new responsive grid rules above */ /* Hero and general responsive tweaks */ @media (max-width: 760px) { .hero-section { padding: 40px 12px; } .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1rem; max-width: 92%; } .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; } .hero-stats .stat-item .stat-number { font-size: 1.25rem; } .site-title h1 { font-size: 1.1rem; } } @media (max-width: 420px) { .hero-title { font-size: 1.6rem; } .hero-subtitle { font-size: 0.95rem; } .hero-stats { grid-template-columns: 1fr; } .site-title h1 { font-size: 1rem; } .projects-title { font-size: 1.6rem; } .section-header h2 { font-size: 1.1rem; } } /* Additional mobile polish */ @media (max-width: 520px) { /* Header top stacks, compact spacing */ .header-top { flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 12px; } .date-time { order: 1; } .header-social { order: 3; } .visit-counter { order: 2; } .header-social a { margin-left: 10px; } /* Reduce logo/profile sizes */ .logo { height: 44px; margin-right: 8px; } .profile-img { width: 48px; height: 48px; } /* Simplify header on very small screens: hide verbose site title but keep compact profile info */ .site-title { display: none; } .profile-info { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; color: var(--light-gray); } .profile-info h2 { font-size: 0.95rem; color: var(--primary-red); margin-bottom: 0; } .profile-info p { font-size: 0.75rem; color: var(--light-gray); margin: 0; } .logo-section { display: flex; align-items: center; gap: 8px; } .header-main { align-items: center; } /* Ensure hamburger appears on the right */ .mobile-menu-toggle { margin-left: auto; } /* Hide the long news ticker on very small screens to avoid overflow */ /* Make the news ticker compact but visible on mobile: prevent overflow and keep items inline A JS-driven mobile ticker will cycle items; desktop uses the CSS marquee animation. */ .news-ticker { display: block; overflow: hidden; white-space: nowrap; font-size: 0.9rem; max-width: 100%; } .news-ticker span { display: inline-block; padding-right: 12px; } /* Prevent content from shifting right or being cut off - force consistent box-sizing and alignment */ html, body, .content-grid, .content-grid * { box-sizing: border-box; } .content-grid { padding-left: 8px; padding-right: 8px; max-width: 100%; } .content-grid .grid-section { margin: 0 auto 14px auto; width: 100%; padding-left: 0; padding-right: 0; } /* Force these sections to be full width (with comfortable max-width) and centered */ .medium-feed, #news, .tryhackme-card, .projects-grid, .projects-row { max-width: 420px; width: calc(100% - 12px); /* left-align on very small screens (slightly inset) */ margin-left: 6px; margin-right: auto; padding-left: 4px; padding-right: 8px; } /* Make sure article/news/project images and cards never overflow */ .medium-feed .article-card, #news .news-card, .project-card { width: 100%; max-width: 100%; } .article-thumbnail img, .news-card img, .project-image { max-width: 100%; height: auto; display: block; } .grid-column.main-column { padding: 0; } /* reduce section header padding on small screens so header and content align */ .grid-section .section-header { padding-left: 12px; padding-right: 12px; } /* Ensure internal content doesn't cause overflow */ .news-card img, .article-thumbnail img, .project-image { max-width: 100%; height: auto; } /* Hero video height reduced and overlay tightened */ .hero-video-container { height: 380px; } .hero-background-video { height: 380px; } .hero-content { padding: 1.2rem; margin-top: 10px; } .hero-buttons { display: flex; flex-direction: column; gap: 10px; } .hero-buttons .btn { width: 100%; padding: 12px 14px; font-size: 0.95rem; } /* Project cards: allow flexible height to avoid cutting off content */ .project-card { width: 92vw; height: auto; min-height: 320px; } .projects-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 12px; } .projects-row { flex-direction: column; gap: 14px; } /* Pagination centered and compact */ .projects-pagination { padding: 6px 0; } /* TryHackMe card tighter */ .tryhackme-card .thm-inner { padding: 12px; } .thm-desc { font-size: 0.9rem; } } @media (max-width: 380px) { .hero-video-container { height: 320px; } .hero-background-video { height: 320px; } .hero-title { font-size: 1.4rem; } .hero-subtitle { font-size: 0.85rem; } .project-card { min-height: 300px; } } /* Strong mobile single-column override to avoid layout/overflow issues */ @media (max-width: 520px) { /* Stack everything into one column */ .content-grid { display: block !important; padding: 0 12px !important; } .grid-column.main-column { width: 100% !important; padding: 0 !important; } .grid-section { width: 100% !important; margin: 12px 0 !important; border-radius: 8px; overflow: hidden; } /* Medium feed becomes single column cards full-width */ .medium-feed { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; width: 100% !important; } .medium-feed .article-card { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* Trending news: stack cards vertically and ensure images scale */ #news { display: block !important; width: 100% !important; } #news .news-card { width: 100% !important; max-width: 100% !important; margin: 0 0 12px 0 !important; } #news .news-image, #news .news-image img { width: 100% !important; height: auto !important; } /* TryHackMe card full width */ .tryhackme-card { width: 100% !important; padding: 12px !important; box-sizing: border-box; } .tryhackme-card .thm-inner { width: 100%; } /* Projects: single column list */ .projects-row, .projects-grid { display: block !important; width: 100% !important; } .projects-grid { gap: 12px !important; } .projects-grid .project-card, .projects-row .project-card { width: 100% !important; max-width: 100% !important; margin: 0 0 14px 0 !important; } /* Reduce large paddings that cause misalignment */ .section-header { padding-left: 12px !important; padding-right: 12px !important; } .article-content, .news-content, .project-info { padding-left: 12px !important; padding-right: 12px !important; } /* Make background video usable on mobile: smaller, well-contained, and performant */ .hero-video-container { display: block !important; height: 220px; } .hero-background-video { height: 220px; } .hero-content { background: linear-gradient(180deg, rgba(0,0,0,0.78), rgba(0,0,0,0.5)); padding: 0.9rem; margin-top: 8px; } /* Ensure no horizontal scroll */ html, body { overflow-x: hidden !important; } } /* Responsive header/nav */ @media (max-width: 860px) { .header-main { padding: 12px; } .logo { height: 48px; } .site-title h1 { font-size: 1.2rem; } .profile-img { width: 56px; height: 56px; } .profile-info h2 { font-size: 1rem; } .mobile-menu-toggle { display: flex; z-index: 1200; position: relative; } /* Hide desktop nav and show mobile-friendly overlay when opened */ .main-nav ul { display: none; } /* Full-screen overlay menu when mobile-open is active. This avoids layout shifts and ensures the nav is always clickable and above other content. */ .main-nav.mobile-open { position: fixed; inset: 0 0 0 0; z-index: 1200; display: block; background: rgba(10,10,10,0.98); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity 220ms ease, transform 220ms ease; opacity: 1; } .main-nav.mobile-open ul { display: flex; flex-direction: column; gap: 6px; align-items: stretch; justify-content: flex-start; padding: 84px 12px 40px; /* leave space for header area */ margin: 0 auto; max-width: 520px; } .main-nav.mobile-open ul li a { padding: 14px 16px; display: block; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 1.05rem; } /* Make sure links are large enough to tap */ .main-nav.mobile-open ul li { list-style: none; } /* Close button inside mobile nav overlay */ .mobile-nav-close { /* keep hidden by default (desktop) and use fixed positioning so it sits above overlay regardless of ancestor stacking contexts */ position: fixed; top: 12px; right: 12px; z-index: 1210; /* above overlay content */ background: transparent; border: 1px solid rgba(255,255,255,0.06); color: var(--off-white); width: 44px; height: 44px; border-radius: 8px; display: none; /* shown only on small screens when overlay is active */ align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; } /* Force hidden by default on all viewports unless explicitly shown in the mobile overlay state */ .mobile-nav-close { display: none !important; } .mobile-nav-close:focus { outline: 2px solid var(--primary-red); outline-offset: 2px; } .mobile-nav-close:hover { background: rgba(255,255,255,0.02); transform: scale(1.03); } .main-nav.mobile-open .mobile-nav-close { display: flex !important; } } /* Pagination Controls */ .projects-pagination { display: flex; justify-content: center; margin-top: 1.6rem; margin-bottom: 1.6rem; } .pagination-nav { display: inline-flex; gap: 8px; align-items: center; } .pagination-btn { background: #222; color: var(--primary-red); border: 1px solid var(--primary-red); padding: 8px 12px; border-radius: 6px; cursor: pointer; font-weight: 700; min-width: 44px; text-align: center; } .pagination-btn:hover:not(:disabled) { background: var(--primary-red); color: #fff; } .pagination-btn:disabled { opacity: 0.45; cursor: default; filter: grayscale(0.2); } .pagination-btn.active { background: var(--primary-red); color: #fff; box-shadow: 0 6px 18px rgba(204,0,0,0.18); } @media (max-width: 520px) { .pagination-btn { padding: 6px 8px; min-width: 34px; } } /* Credly Badges Section Styles */ .credly-section { /* Mobile navigation overlay behavior */ .main-nav { position: relative; z-index: 1150; } /* When mobile nav is opened we make it a full-screen overlay for a smooth experience */ .main-nav.mobile-open { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(10,10,10,0.98), rgba(20,20,20,0.98)); display: block; padding-top: 80px; /* space for header */ transition: transform 260ms ease, opacity 260ms ease; overflow-y: auto; } .main-nav.mobile-open ul { display: flex; flex-direction: column; gap: 0; align-items: stretch; justify-content: flex-start; padding: 8px 0 40px; } .main-nav.mobile-open a { font-size: 1.05rem; padding: 14px 20px; } /* Lock body scroll when nav is open (JS will toggle .nav-locked on body) */ body.nav-locked { overflow: hidden; height: 100%; } padding: 36px 20px; background: linear-gradient(180deg, #0e0e0e 0%, #131313 100%); } .credly-section .section-header { background-color: var(--medium-gray); border-bottom: 2px solid var(--primary-red); padding: 12px 20px; margin-bottom: 12px; } .credly-controls { display: flex; gap: 12px; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto 18px auto; padding: 0 8px; } .credly-filters { display: flex; gap: 8px; flex-wrap: wrap; } .credly-search-wrapper { margin-left: auto; } .credly-search { padding: 8px 12px; border-radius: 6px; border: 1px solid #333; background: #0f0f0f; color: var(--off-white); min-width: 220px; } .filter-btn { background: #111; color: var(--light-gray); border: 1px solid #333; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; } .filter-btn.active, .filter-btn:hover { background: var(--primary-red); color: #fff; border-color: var(--primary-red); } .credly-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 1200px; margin: 0 auto; } .credly-card { background: #121212; border: 2px solid rgba(255,0,0,0.06); border-radius: 10px; padding: 12px; display: flex; gap: 12px; align-items: center; } .credly-card-img { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .credly-card-img img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #333; } .credly-badge-placeholder { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; background:#222; color:var(--primary-red); font-weight:700; font-size:1.1rem; border-radius:8px; border:1px solid rgba(255,0,0,0.06); } .credly-card-body { flex:1; min-width: 0; } .credly-card-title { color: var(--primary-red); font-size: 1rem; margin-bottom: 6px; line-height:1.2; } .credly-card-issuer { color: var(--light-gray); font-size: 0.85rem; margin-bottom: 8px; } .credly-card-actions { display:flex; gap:8px; } .no-results { color: var(--light-gray); text-align:center; padding: 18px; grid-column: 1 / -1; } @media (max-width: 760px) { .credly-controls { flex-direction: column; align-items: stretch; gap: 8px; } .credly-search { width: 100%; } } .credly-showmore-wrap { text-align: center; margin-top: 12px; } .credly-showmore-btn { padding: 10px 18px; border-radius: 8px; font-weight: 700; } /* Footer styles - refreshed visual treatment */ .site-footer { background: linear-gradient(180deg, #060606 0%, #0f0f0f 100%); color: var(--off-white); border-top: 1px solid rgba(255,255,255,0.03); padding: 36px 20px 22px; position: relative; } /* subtle top accent bar */ .site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, rgba(204,0,0,1), rgba(255,85,85,0.6)); opacity: 0.08; } .site-footer .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 280px; gap: 20px 32px; align-items: start; } .site-footer .footer-col { display:flex; flex-direction:column; gap:12px; } .site-footer .footer-brand { display:flex; gap:12px; align-items:center; } .site-footer .footer-brand img { height:40px; width:auto; border-radius:6px; border:1px solid rgba(255,255,255,0.03); } .site-footer .brand-name { font-size:1rem; font-weight:800; color:var(--primary-red); } .site-footer .footer-desc { color:var(--light-gray); line-height:1.6; font-size:0.95rem; } .site-footer .footer-links { display:flex; gap:24px; flex-wrap:wrap; } .site-footer .footer-col h3, .site-footer .footer-col h4 { color: var(--primary-red); margin-bottom: 6px; font-size:0.95rem; } .site-footer .footer-col ul { list-style: none; padding: 0; margin: 0; } .site-footer .footer-col ul li { margin: 6px 0; } .site-footer .footer-col ul li a { color: var(--off-white); text-decoration: none; transition: color 160ms ease, transform 160ms ease; font-size:0.95rem; } .site-footer .footer-col ul li a:hover { color: var(--primary-red); transform: translateX(4px); } .site-footer .footer-cta { background: rgba(255,255,255,0.02); padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.02); text-align:right; } .site-footer .footer-cta h4 { margin:0 0 6px 0; color:var(--white); } .site-footer .footer-cta p { margin:0; color:var(--light-gray); font-size:0.95rem; } .site-footer .cta-btn { margin-top:10px; display:inline-flex; gap:8px; align-items:center; background:var(--primary-red); color:#fff; padding:10px 14px; border-radius:8px; text-decoration:none; font-weight:700; } .site-footer .cta-btn:hover { background:var(--dark-red); } .site-footer .footer-social { display:flex; gap:10px; margin-top:8px; } .site-footer .footer-social a { color: var(--white); font-size: 1.05rem; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:8px; background: rgba(255,255,255,0.02); transition: all 160ms ease; } .site-footer .footer-social a:hover { background: var(--primary-red); color: #fff; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(204,0,0,0.12); } .footer-bottom { max-width: 1200px; margin: 18px auto 0 auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,0.03); } .footer-bottom p { color: var(--light-gray); margin: 0; font-size: 0.9rem; } /* reduce empty space in small screens by stacking more tightly */ @media (max-width: 1024px) { .site-footer .footer-inner { grid-template-columns: 1fr 320px; } } @media (max-width: 880px) { .site-footer { padding: 28px 16px 18px; } .site-footer .footer-inner { grid-template-columns: 1fr; } .site-footer .footer-right { align-items:flex-start; } .footer-bottom { flex-direction: column; gap:8px; align-items:center; } } /* Light theme footer tweaks: ensure legible dark text on light backgrounds */ .theme-light .site-footer { background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); color: var(--dark-gray); border-top: 1px solid rgba(0,0,0,0.06); } .theme-light .site-footer .footer-desc, .theme-light .site-footer .footer-col ul li a, .theme-light .site-footer .footer-bottom p { color: var(--dark-gray); } .theme-light .site-footer .footer-social a { background: rgba(0,0,0,0.03); color: var(--dark-gray); } .theme-light .site-footer .footer-social a:hover { background: var(--primary-red); color: #fff; } .theme-light .site-footer .footer-cta { background: #fff; border:1px solid #eee; } .theme-light .site-footer .cta-btn { background: var(--primary-red); } @media (max-width: 880px) { .site-footer .footer-inner { grid-template-columns: 1fr; } .site-footer .footer-right { align-items:flex-start; } .footer-bottom { flex-direction: column; gap:8px; align-items:center; } } @media (max-width: 760px) { .site-footer .footer-inner { gap: 12px; } .footer-bottom { flex-direction: column-reverse; align-items: center; gap: 8px; } } /* Contact CTA styles */ .contact-cta-section { padding: 3rem 2rem; background: linear-gradient(180deg, rgba(255,0,0,0.02), transparent); text-align: center; } .contact-cta-inner { max-width: 900px; margin: 0 auto; } .contact-cta-text { color: var(--off-white); font-size: 1.05rem; margin-bottom: 1.2rem; color: var(--light-gray); } .contact-mail-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 8px; font-weight: 700; text-decoration: none; background: var(--primary-red); color: #fff; border: 2px solid var(--primary-red); } /* ensure mailto buttons keep button colors and don't inherit the generic mailto link color */ .contact-mail-btn[href^="mailto:"] { background: var(--primary-red); color: #fff; border: 2px solid var(--primary-red); } .contact-mail-btn:hover { background: var(--dark-red); border-color: var(--dark-red); color: #fff; } @media (max-width: 520px) { .contact-cta-text { font-size: 0.98rem; } .contact-mail-btn { width: 100%; justify-content: center; } } /* Light-theme visual overrides for elements that used hard-coded dark rgba values */ .theme-light .hero-content { /* lighter overlay so hero text remains readable on light background */ background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85)); color: var(--off-white); } .theme-light .security-challenge { background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.06); color: var(--off-white); } .theme-light .modal-content { background: #ffffff; color: var(--off-white); box-shadow: 0 8px 32px rgba(0,0,0,0.08); } .theme-light .project-modal { /* keep overlay slightly dark for focus but less intense */ background: rgba(0,0,0,0.45); } .theme-light .about-button-section, .theme-light .education-section, .theme-light .credly-section { background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%); color: var(--off-white); } .theme-light .credly-search, .theme-light .filter-btn, .theme-light .pagination-btn { background: #fff; color: var(--light-gray); border-color: #e3e3e3; } /* Ensure filter buttons show red hover/active state in light mode */ .theme-light .credly-controls .filter-btn:hover, .theme-light .credly-controls .filter-btn.active, .theme-light .filter-btn:hover, .theme-light .filter-btn.active { background: var(--primary-red) !important; color: #fff !important; border-color: var(--primary-red) !important; } /* also support keyboard focus visibility */ .theme-light .filter-btn:focus-visible { outline: 3px solid rgba(204,0,0,0.12); outline-offset: 2px; } .theme-light .site-footer { background: linear-gradient(180deg, #ffffff, #f6f6f6); color: #2c2c2c; border-top: 3px solid rgba(0,0,0,0.06); } .theme-light .site-footer .footer-desc, .theme-light .site-footer .footer-bottom p { color: #555; } .theme-light .site-footer .footer-col ul li a { color: #2c2c2c; } .theme-light .site-footer .footer-social a { background: rgba(0,0,0,0.04); color: #333; } .theme-light .site-footer .footer-social a:hover { background: var(--primary-red); color: #fff; transform: translateY(-2px); } /* Soften shadows in light mode */ .theme-light .project-card, .theme-light .credly-card, .theme-light .edu-item { box-shadow: 0 6px 14px rgba(0,0,0,0.06); } .theme-light .project-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.08); } .theme-light .pagination-btn.active { box-shadow: 0 6px 18px rgba(0,0,0,0.06); } /* Make sure smaller UI controls in header-top align properly with the moved toggle */ .header-top { display: flex; align-items: center; gap: 12px; } .header-top .theme-toggle { margin-left: 6px; } /* Fix any remaining blocks that used rgba black backgrounds */ .theme-light .security-challenge pre.challenge-content, .theme-light .challenge-content { color: var(--light-gray); } /* Additional light-mode overrides for sticky nav and thumbnails */ .theme-light .main-nav.sticky { box-shadow: 0 6px 18px rgba(0,0,0,0.08); } .theme-light .project-thumb { box-shadow: 0 6px 12px rgba(0,0,0,0.06); } /* Fix TryHackMe card in light mode */ .theme-light .tryhackme-card .thm-inner { background: #ffffff; border: 1px solid rgba(0,0,0,0.06); color: var(--off-white); } .theme-light .thm-desc { color: var(--off-white); } .theme-light .thm-username { color: var(--primary-red); } /* Fix Skills section in light mode */ .theme-light .skills-section { background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%); color: var(--off-white); } .theme-light .skill-badge { background: #ffffff; color: var(--off-white); border: 1px solid #e6e6e6; } /* Fix About section in light mode */ .theme-light .about-section { background: linear-gradient(180deg, #ffffff, #fafafa); color: var(--off-white); } .theme-light .about-profile img { border: 3px solid var(--primary-red); box-shadow: 0 6px 18px rgba(0,0,0,0.06); } .theme-light .about-bio { color: var(--off-white); } /* Fix Credly section specifics */ .theme-light .credly-section { background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%); color: var(--off-white); } .theme-light .credly-card, .theme-light .credly-card-body { background: #ffffff; color: var(--off-white) !important; border: 1px solid #eee; box-shadow: 0 6px 14px rgba(0,0,0,0.04); } /* Ensure sidebar/news links readable in light mode */ .theme-light .sidebar-news-title a { color: var(--off-white); } .theme-light .projects-row, .theme-light .projects-grid { background: transparent; } .theme-light .project-card { background: #ffffff; color: var(--off-white) !important; border: 1px solid #eee; box-shadow: 0 6px 14px rgba(0,0,0,0.04); } .theme-light .project-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.06); } .theme-light .project-info { color: var(--off-white) !important; } .theme-light .project-description { color: var(--off-white) !important; } .theme-light .project-image-placeholder { background: linear-gradient(180deg, #f6f6f6 0%, #ffffff 100%); color: var(--off-white) !important; border-bottom: 1px solid #eee; } /* Skills detail adjustments */ .theme-light .skill-detail { background: #ffffff; border: 1px solid #eee; color: var(--off-white) !important; } .theme-light .skill-detail h3 { color: var(--primary-red); } /* Experience & Education sections in light mode */ .theme-light .experience-section, .theme-light .education-section { background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); color: var(--off-white); } .theme-light .experience-section .section-header, .theme-light .education-section .section-header { background-color: #f3f3f3; border-bottom: 2px solid rgba(204,0,0,0.08); } .theme-light .exp-item { background: #ffffff; border: 2px solid #eee; color: var(--off-white) !important; box-shadow: 0 6px 14px rgba(0,0,0,0.04); } .theme-light .exp-role { color: var(--primary-red); } .theme-light .exp-desc { color: var(--off-white); } /* Ensure education items match experience */ .theme-light .edu-item { background: #ffffff; border: 2px solid #eee; color: var(--light-gray); box-shadow: 0 6px 14px rgba(0,0,0,0.04); } /* Additional light-mode fixes: override remaining dark hard-coded backgrounds and improve contrast */ .theme-light .project-image { background: linear-gradient(180deg,#f6f6f6,#ffffff); } .theme-light .project-image-placeholder { background: linear-gradient(180deg,#fafafa,#fff); color:#666; } .theme-light .project-skill { background: #fff; color: var(--off-white); border: 2px solid #eee; } .theme-light .project-skill::before { /* subtle accent dot */ content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: linear-gradient(45deg, var(--light-red), var(--primary-red)); vertical-align: middle; } .theme-light .skill-badge { background: #fff; color: var(--off-white); border: 1px solid #eee; } .theme-light .cert-list li { color: var(--off-white); border-bottom: 1px dashed #eee; } .theme-light .cert-list { color: var(--off-white); } .theme-light .education-section { background: linear-gradient(180deg,#ffffff,#fbfbfb); } .theme-light .edu-item .cert-list li { color: var(--off-white); } /* Mobile nav background when opened */ .theme-light .main-nav.mobile-open ul { background: #ffffff; border-top: 1px solid rgba(204,0,0,0.06); } /* Make sure small text and labels in cards are high-contrast */ .theme-light .project-title, .theme-light .project-description, .theme-light .thm-desc, .theme-light .about-bio p, .theme-light .exp-desc { color: var(--off-white); } /* Slight visual polish: give project cards a subtle border-left accent using primary red */ .theme-light .project-card { border-left: 4px solid rgba(204,0,0,0.06); } /* Tone down overly bright primary-red on chip text by using dark text and a subtle red border */ .theme-light .project-skill, .theme-light .skill-badge { color: var(--off-white); border-color: rgba(204,0,0,0.12); } /* Projects container background for light mode */ .theme-light .projects-main { background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); } /* Override grey text used in dark theme to readable dark text in light mode */ .theme-light .project-description, .theme-light .skill-detail p, .theme-light .exp-desc, .theme-light .cert-list li, .theme-light .project-image-placeholder .placeholder-text { color: var(--off-white) !important; } .theme-light .edu-desc { color: var(--off-white); } .theme-light .skill-detail p { color: var(--off-white) !important; } /* Project skills preview style */ .project-skills-preview { margin-top: 0.5rem; font-size: 0.85rem; color: var(--light-gray); } .skills-preview-text { display: inline-block; } .skills-more-count { display: inline-block; margin-left: 0.5rem; padding: 0.2rem 0.5rem; background: rgba(204, 0, 0, 0.1); color: var(--primary-red); border-radius: 12px; font-size: 0.75rem; } /* Light theme adjustments */ .theme-light .project-skills-preview { color: var(--medium-gray); } .theme-light .skills-more-count { background: rgba(204, 0, 0, 0.08); }