/* Basic reset */ body { margin: 0; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: #222; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Font display swap for icon fonts to prevent invisible text */ @font-face { font-family: 'bootstrap-icons'; font-display: swap; src: local('bootstrap-icons'); } @font-face { font-family: 'Font Awesome 6 Free'; font-display: swap; src: local('Font Awesome 6 Free'); } @font-face { font-family: 'Font Awesome 6 Brands'; font-display: swap; src: local('Font Awesome 6 Brands'); } /* Remove underlines from links */ a { text-decoration: none; color: #0d6efd; } a:hover { color: #0a58ca; } /* Typography tweaks */ h1,h2,h3,h4,h5,h6 { font-weight: 600; } .lead { font-weight: 300; } /* Page container adjustments */ .page-container { padding-top: 1.5rem; padding-bottom: 2.5rem; } /* Ensure main content area grows to fill available space when needed */ main.flex-fill { display: block; } /* Minor tweaks for navbar branding */ .navbar-brand { font-weight: 600; font-size: 1.05rem; } /* Header (hero) */ .site-header { background-color: #fece45 !important; color: #0b1726; display: flex; align-items: center; justify-content: center; min-height: 150px; box-sizing: border-box; } .site-header .container { display: flex; align-items: center; justify-content: center; } .header-banner-wrap { background-color: #fece45; display: flex; align-items: center; justify-content: center; } .header-banner { height: 220px; } .site-header .display-5 { color: #0b1726; } .site-header .lead { color: #0b1726; } /* Footer */ .site-footer { font-size: 0.95rem; } .site-footer a { text-decoration: none; } /* Social links in footer */ .site-footer .social-links { display: flex; gap: 0.75rem; align-items: center; } .site-footer .social-links a { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; } .site-footer .social-links a .social-text { font-size: 0.95rem; } .site-footer .social-links a i { font-size: 1.1rem; } /* Make sure navlink active state is visible */ .nav-link.active { background: rgba(255,255,255,0.12); border-radius: 4px; } /* Theme toggle */ .theme-toggle { min-width: 44px; } .theme-toggle i { font-size: 1rem; line-height: 1; } /* Dark theme overrides using data attribute on */ [data-theme="dark"] { background-color: #1e1e1e; color: #d4d4d4; } /* Ensure html/body/main and containers inherit dark background */ [data-theme="dark"], [data-theme="dark"] html, [data-theme="dark"] body { background-color: #1e1e1e; color: #d4d4d4; } [data-theme="dark"] .site-header { background-color: #252526; color: #d4d4d4; } [data-theme="dark"] .site-footer { background-color: #111111; color: #9a9a9a; } [data-theme="dark"] .navbar { background-color: #2d2d2d !important; } [data-theme="dark"] .nav-link, [data-theme="dark"] .nav-link.active { color: #d4d4d4 !important; } /* Keep containers transparent so page bg shows through, but ensure text color inherits */ [data-theme="dark"] .container, [data-theme="dark"] main, [data-theme="dark"] .page-container { background-color: transparent !important; color: inherit; } [data-theme="dark"] main, [data-theme="dark"] .main { background-color: transparent !important; color: inherit; } /* Typography */ [data-theme="dark"] h1,h2,h3,h4,h5,h6 { color: #e7e7e7; } [data-theme="dark"] p, [data-theme="dark"] .lead, [data-theme="dark"] .card-text { color: #c5c5c5; } [data-theme="dark"] a { color: #3794ff; } /* Form controls / cards / menus */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .card, [data-theme="dark"] .dropdown-menu { background-color: #2d2d2d; color: #d4d4d4; border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .btn-outline-secondary { color: #cfcfcf; border-color: rgba(255,255,255,0.12); } [data-theme="dark"] .btn-outline-secondary:hover { background: rgba(255,255,255,0.04); } [data-theme="dark"] .btn-outline-primary { color: #3794ff; border-color: #3794ff; } [data-theme="dark"] .btn-outline-primary:hover { background-color: #3794ff; color: #fff; } [data-theme="dark"] .btn-primary { background-color: #0d6efd; border-color: #0d6efd; } [data-theme="dark"] .btn-primary:hover { background-color: #0b5ed7; border-color: #0a58ca; } [data-theme="dark"] a:hover { color: #78baff; } [data-theme="dark"] :focus { outline: none; box-shadow: 0 0 0 0.15rem rgba(55,148,255,0.18); border-radius: 4px; } /* Responsive helpers (Bootstrap handles most) */ @media (max-width: 640px) { .page-container { padding-left: 0.6rem; padding-right: 0.6rem; } } /* Contact page */ .contact-form { max-width: 720px; margin: 0 auto 3rem auto; } /* Project Cards */ .project-card { transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid rgba(0,0,0,0.125); } .project-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .project-card .card-img-top { height: 200px; object-fit: cover; background-color: #f5f5f5; } .project-card .card-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; } .project-card .card-text { font-size: 0.9rem; color: #666; margin-bottom: 1rem; } .project-card .badge { font-size: 0.75rem; padding: 0.35em 0.65em; } /* Dark theme project cards */ [data-theme="dark"] .project-card { border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .project-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.5); } [data-theme="dark"] .project-card .card-img-top { background-color: #1a1a1a; } [data-theme="dark"] .project-card .card-text { color: #c5c5c5; } /* Category Cards */ .category-card { transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; border: 2px solid rgba(0,0,0,0.1); } .category-card:hover { transform: translateY(-6px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); border-color: #0d6efd; } .category-card i { color: #0d6efd; } [data-theme="dark"] .category-card { border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .category-card:hover { border-color: #3794ff; box-shadow: 0 6px 16px rgba(0,0,0,0.6); } [data-theme="dark"] .category-card i { color: #3794ff; } /* Dark theme badge improvements for better visibility */ [data-theme="dark"] .badge.bg-primary { background-color: #0d6efd !important; color: #fff !important; } [data-theme="dark"] .badge.bg-secondary { background-color: #6c757d !important; color: #fff !important; } [data-theme="dark"] .badge.bg-success { background-color: #198754 !important; color: #fff !important; } [data-theme="dark"] .badge.bg-warning { background-color: #ffc107 !important; color: #000 !important; } [data-theme="dark"] .badge.bg-danger { background-color: #dc3545 !important; color: #fff !important; } [data-theme="dark"] .badge.bg-info { background-color: #0dcaf0 !important; color: #000 !important; } /* Light theme focus outline for accessibility */ :focus { outline: none; box-shadow: 0 0 0 0.15rem rgba(13,110,253,0.25); border-radius: 4px; } /* Ensure navbar brand is visible in dark mode */ [data-theme="dark"] .navbar-brand { color: #ffffff !important; } /* Dark theme for "Read more" link buttons */ [data-theme="dark"] .btn-link { color: #3794ff; } [data-theme="dark"] .btn-link:hover { color: #78baff; } /* Dark theme card footer border */ [data-theme="dark"] .card-footer { border-top-color: rgba(255,255,255,0.08); }