/* ============================================== Charles Bulabula Portfolio Dark / Light via [data-theme] on Navy blue · Marianne · Responsive · Animated ============================================== */ /* ---- DARK theme (default) ---- */ :root, [data-theme="dark"] { --primary: #3b82f6; --primary-dark: #1d4ed8; --primary-rgb: 59, 130, 246; --bg: #0d1117; --bg-alt: #111827; --card: #1f2937; --avatar-bg: #1f2937; --dropdown-bg: #1e2a3a; --border: rgba(255,255,255,0.08); --border-rgb: 255,255,255; --text: rgba(255,255,255,0.68); --heading: #f1f5f9; --muted: rgba(255,255,255,0.4); } /* ---- LIGHT theme ---- */ [data-theme="light"] { --primary: #1d4ed8; --primary-dark: #1e3a8a; --primary-rgb: 29, 78, 216; --bg: #f8fafc; --bg-alt: #eef2f7; --card: #ffffff; --avatar-bg: #e2e8f0; --dropdown-bg: #ffffff; --border: rgba(15,23,42,0.1); --border-rgb: 15,23,42; --text: #475569; --heading: #0f172a; --muted: #94a3b8; } /* ---- Override Noxfolio body vars ---- */ body { background-color: var(--bg) !important; color: var(--text) !important; --base-color: var(--text) !important; --heading-color: var(--heading) !important; --primary-color: var(--primary) !important; --lighter-color: var(--card) !important; --border-color: var(--border) !important; } /* ---- Header ---- */ .main-header { background: color-mix(in srgb, var(--bg) 90%, transparent) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border) !important; transition: background 0.3s; } .main-header .navigation li a { color: var(--text) !important; transition: color 0.3s !important; } .main-header .navigation li a:hover { color: var(--primary) !important; } /* ---- Noxfolio overrides ---- */ .sub-title { color: var(--primary) !important; } .section-title h2 span { color: var(--primary) !important; } .section-title h2 { color: var(--heading) !important; } .section-title p { color: var(--text) !important; } .theme-btn, a.theme-btn { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } .theme-btn:hover, a.theme-btn:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; } .read-more { color: var(--primary) !important; } .read-more:hover { color: var(--primary-dark) !important; } .bg-lines span { background-color: var(--border) !important; } .for-bgc-black { background: var(--bg-alt) !important; } /* Social */ .social-style-one a { background: rgba(var(--primary-rgb), 0.1) !important; border-color: rgba(var(--primary-rgb), 0.25) !important; color: var(--primary) !important; } .social-style-one a:hover { background: var(--primary) !important; color: #fff !important; } /* Resume */ .resume-item { background: var(--card) !important; border-color: var(--border) !important; } .resume-item .icon i { color: var(--primary) !important; } .resume-item .years { color: var(--primary) !important; } .resume-item h4 { color: var(--heading) !important; } .resume-item .company { color: var(--text) !important; } /* Services */ .service-item { background: var(--card) !important; border-color: var(--border) !important; } .service-item .number { color: var(--primary) !important; } .service-item .details-btn { color: var(--primary) !important; } .service-item h4 { color: var(--heading) !important; } .service-item p { color: var(--text) !important; } /* Counter */ .count-text { color: var(--heading) !important; } .counter-title { color: var(--text) !important; } /* ---- Logo ---- */ .logo-text { font-size: 1.9rem !important; font-weight: 900 !important; color: var(--primary) !important; letter-spacing: 3px; } /* ---- Theme toggle ---- */ .theme-toggle-btn { background: transparent; border: 1.5px solid var(--border); color: var(--heading); width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: all 0.3s; flex-shrink: 0; } .theme-toggle-btn:hover { border-color: var(--primary); color: var(--primary); } /* ---- Language dropdown ---- */ .lang-dropdown { position: relative; user-select: none; } .lang-selected { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--border); border-radius: 8px; padding: 5px 10px; font-size: 0.85rem; font-weight: 600; color: var(--heading); cursor: pointer; transition: all 0.3s; white-space: nowrap; } .lang-dropdown:hover .lang-selected, .lang-dropdown.open .lang-selected { border-color: var(--primary); color: var(--primary); } .chev { font-size: 0.65rem; transition: transform 0.3s; } .lang-dropdown.open .chev { transform: rotate(180deg); } .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 140px; background: var(--dropdown-bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.2); display: none; z-index: 9999; } .lang-dropdown.open .lang-menu { display: block; } .lang-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; font-size: 0.88rem; font-weight: 500; color: var(--text); background: transparent; border: none; cursor: pointer; transition: background 0.2s; text-align: left; } .lang-option:hover { background: rgba(var(--primary-rgb), 0.1); } .lang-option.active { color: var(--primary); font-weight: 700; } .flag { font-size: 1.1rem; } /* ---- Hero ---- */ .hero-greeting { font-size: 1.25rem; font-weight: 400; display: block; margin-bottom: 4px; color: var(--text); } .hero-title { color: var(--primary); font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; } .hero-subtitle { font-size: 0.92rem; color: var(--text); margin-bottom: 4px; } .hero-location { font-size: 0.86rem; color: var(--muted); margin-bottom: 1.4rem; display: flex; align-items: center; gap: 6px; } .hero-location i { color: var(--primary); } .author-image-part { position: relative; display: flex; justify-content: center; align-items: center; min-height: 320px; } .author-image-part .bg-circle { background: var(--bg-alt) !important; } .hero-avatar { width: 280px; height: 280px; border-radius: 50%; background: var(--avatar-bg); border: 3px solid var(--primary); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; box-shadow: 0 0 60px rgba(var(--primary-rgb), 0.18); } .hero-icon { font-size: 2.8rem; color: var(--primary); margin-bottom: 8px; } .hero-initials { font-size: 1.5rem; font-weight: 900; color: var(--heading); letter-spacing: 3px; } .hero-badges { position: absolute; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; } .hero-badge { background: var(--card); border: 1px solid rgba(var(--primary-rgb), 0.3); border-radius: 10px; padding: 10px 14px; font-size: 0.8rem; font-weight: 600; color: var(--heading); display: flex; align-items: center; gap: 7px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); white-space: nowrap; } .hero-badge i { color: var(--primary); } /* ---- About ---- */ .about-content-part p { color: var(--text) !important; } .about-info-box .info-box-item .content span { color: var(--muted) !important; font-size: 0.75rem !important; text-transform: uppercase; letter-spacing: 0.5px; } .about-info-box .info-box-item .content a, .about-info-box .info-box-item .content span:last-child { color: var(--text) !important; } .about-info-box .info-box-item i { color: var(--primary) !important; } .about-avatar-wrap { position: relative; display: flex; justify-content: center; align-items: center; min-height: 380px; } .about-avatar-circle { width: 260px; height: 260px; border-radius: 50%; background: var(--avatar-bg); border: 3px solid var(--primary); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 50px rgba(var(--primary-rgb), 0.15); } .about-icon { font-size: 2.8rem; color: var(--primary); margin-bottom: 8px; } .about-initials { font-size: 1.4rem; font-weight: 900; color: var(--heading); letter-spacing: 3px; } .about-badge { position: absolute; top: 25px; right: 0; background: var(--card); border: 1px solid rgba(var(--primary-rgb), 0.25); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.85rem; color: var(--heading); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } .about-badge i { color: var(--primary); font-size: 1rem; } .about-badge.badge-bottom { top: auto; bottom: 25px; } .list-style-one li::before { display: none; } .list-style-one li { display: flex; align-items: center; gap: 8px; } .list-style-one li i { color: var(--primary); font-size: 0.75rem; } /* ---- Resume ---- */ .big-star-icon { font-size: 5rem; color: var(--primary); opacity: 0.1; } .resume-desc { font-size: 0.83rem; color: var(--text); margin-top: 6px; line-height: 1.55; } /* ---- Services ---- */ .service-icon-wrap { position: absolute; top: 24px; right: 60px; font-size: 1.5rem; color: rgba(var(--primary-rgb), 0.12); } /* ---- Skills ---- */ .skill-bars-wrap { padding-top: 10px; } .skill-bar-item { margin-bottom: 22px; } .skill-bar-header { display: flex; justify-content: space-between; margin-bottom: 8px; } .skill-name { font-weight: 600; font-size: 0.95rem; color: var(--heading); } .skill-percent { font-weight: 700; color: var(--primary); font-size: 0.9rem; } .skill-bar-bg { background: rgba(var(--primary-rgb), 0.1); border-radius: 50px; height: 7px; overflow: hidden; } .skill-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #60a5fa); border-radius: 50px; transition: width 1.4s ease; } .skill-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .skill-tag { background: rgba(var(--primary-rgb), 0.08); border: 1px solid rgba(var(--primary-rgb), 0.22); color: var(--primary); padding: 4px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 500; } .skill-content-part p { color: var(--text) !important; } /* ---- Contact ---- */ .remote-note { font-size: 0.88rem; color: var(--primary); margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; } .contact-info-wrap { display: flex; flex-direction: column; gap: 20px; } .contact-info-item { display: flex; align-items: flex-start; gap: 14px; } .c-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(var(--primary-rgb), 0.1); border: 1px solid rgba(var(--primary-rgb), 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); font-size: 1rem; } .contact-info-item div span { font-size: 0.72rem; color: var(--muted); display: block; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.8px; } .contact-info-item div a, .contact-info-item div p { font-size: 0.9rem; font-weight: 500; margin: 0; word-break: break-all; color: var(--text); } .contact-form-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 36px; } .contact-form-group { margin-bottom: 20px; } .contact-form-group label { display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin-bottom: 6px; } .contact-form-group input, .contact-form-group textarea { width: 100%; background: transparent !important; border: 1.5px solid var(--border) !important; border-radius: 8px !important; padding: 12px 14px !important; font-size: 0.95rem !important; color: var(--heading) !important; transition: border-color 0.3s; resize: none; } .contact-form-group input:focus, .contact-form-group textarea:focus { border-color: var(--primary) !important; outline: none; } .contact-form-group input::placeholder, .contact-form-group textarea::placeholder { color: var(--muted) !important; opacity: 1; } .send-btn { width: 100%; justify-content: center; gap: 8px; display: flex !important; } /* ---- Footer ---- */ .main-footer { border-top: 1px solid var(--border); background: var(--bg) !important; } .footer-logo { color: var(--primary) !important; font-weight: 900; font-size: 2rem; letter-spacing: 3px; text-decoration: none; } .copyright { font-size: 0.82rem; color: var(--muted); margin: 0; } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; } /* ============================================ ANIMATIONS ============================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideRight { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.35); } 70% { box-shadow: 0 0 0 18px rgba(var(--primary-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } /* Hero entrance */ .hero-content { animation: fadeUp 0.7s ease both; } .hero-counter-wrap { animation: fadeUp 0.7s 0.2s ease both; } .author-image-part { animation: fadeIn 0.9s 0.1s ease both; } /* Avatar pulse */ .hero-avatar { animation: pulse-ring 3s ease-out infinite; } /* Floating badges */ .hero-badge { animation: float 4s ease-in-out infinite; } .hero-badge:nth-child(2) { animation-delay: 0.8s; } .hero-badge:nth-child(3) { animation-delay: 1.6s; } /* Sections scroll-reveal via Intersection Observer (JS-free via CSS) */ .section-title, .resume-item, .service-item, .skill-bar-item, .about-content-part, .about-image-part, .contact-info-wrap, .contact-form-card { animation: fadeUp 0.6s ease both; animation-play-state: paused; } .animate-in { animation-play-state: running !important; } /* Stagger delays for children */ .resume-item:nth-child(1) { animation-delay: 0.0s; } .resume-item:nth-child(2) { animation-delay: 0.1s; } .resume-item:nth-child(3) { animation-delay: 0.2s; } .resume-item:nth-child(4) { animation-delay: 0.3s; } .resume-item:nth-child(5) { animation-delay: 0.4s; } .resume-item:nth-child(6) { animation-delay: 0.5s; } .service-item:nth-child(1) { animation-delay: 0.0s; } .service-item:nth-child(2) { animation-delay: 0.1s; } .service-item:nth-child(3) { animation-delay: 0.15s; } .service-item:nth-child(4) { animation-delay: 0.2s; } .service-item:nth-child(5) { animation-delay: 0.25s; } .service-item:nth-child(6) { animation-delay: 0.3s; } /* Skill bar fill animation */ .skill-bar-item:not(.animate-in) .skill-bar-fill { width: 0 !important; transition: width 0s; } .skill-bar-item.animate-in .skill-bar-fill { transition: width 1.2s ease; } /* ============================================ RESPONSIVE — MOBILE FIRST ============================================ */ /* ---- ≤ 576px (phones) ---- */ @media (max-width: 576px) { .main-hero-area { padding-top: 100px !important; padding-bottom: 50px !important; } .hero-content h1 { font-size: 1.9rem !important; line-height: 1.2 !important; } .hero-title { font-size: 1rem !important; } .hero-subtitle { font-size: 0.88rem !important; } .hero-btns { flex-direction: column; gap: 12px; } .hero-btns .theme-btn, .hero-btns .read-more { width: 100%; text-align: center; justify-content: center; display: flex; } .hero-badges { display: none; } .hero-avatar { width: 200px !important; height: 200px !important; margin: 0 auto; } .hero-icon { font-size: 1.8rem !important; } .hero-initials { font-size: 1.1rem !important; } .hero-counter-wrap { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 20px !important; margin-top: 20px; } .counter-item { text-align: center; min-width: 80px; } .about-avatar-wrap { min-height: auto; margin-bottom: 30px; } .about-avatar-circle { width: 180px !important; height: 180px !important; } .about-badge { display: none; } .about-info-box { display: flex !important; flex-direction: column !important; } .contact-form-card { padding: 20px !important; } .section-title h2 { font-size: 1.6rem !important; } .sub-title { font-size: 0.8rem !important; } } /* ---- 577–767px (large phones) ---- */ @media (min-width: 577px) and (max-width: 767px) { .hero-badges { display: none; } .hero-avatar { width: 240px !important; height: 240px !important; } .about-avatar-circle { width: 220px !important; height: 220px !important; } .about-badge { display: none; } .hero-counter-wrap { display: flex; flex-direction: column; } } /* ---- 768–991px (tablets) ---- */ @media (min-width: 768px) and (max-width: 991px) { .hero-badges { display: none; } .hero-avatar { width: 240px !important; height: 240px !important; } .about-badge { right: -10px; } .contact-form-card { padding: 28px; } } /* ---- All mobile (<992px) ---- */ @media (max-width: 991px) { .hero-counter-wrap { display: flex !important; flex-direction: row !important; gap: 20px; } .counter-item { border: none !important; padding: 0 !important; text-align: center; } .author-image-part { min-height: 260px; } } /* ---- About info box grid ---- */ .about-info-box { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; } @media (max-width: 480px) { .about-info-box { grid-template-columns: 1fr; } } .info-box-item { display: flex; align-items: flex-start; gap: 10px; } .info-box-item i { color: var(--primary) !important; font-size: 1.2rem; margin-top: 2px; } .info-box-item .content span { display: block; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } /* ---- Services responsive ---- */ @media (max-width: 576px) { .service-item { margin-bottom: 12px; } .service-icon-wrap { display: none; } } /* ---- Skills responsive ---- */ @media (max-width: 576px) { .skill-content-part { margin-bottom: 30px !important; } } /* ---- Prevent horizontal overflow ---- */ html, body { overflow-x: hidden; } html { scroll-behavior: smooth; } img { max-width: 100%; } .container { padding-left: 16px !important; padding-right: 16px !important; } @media (min-width: 576px) { .container { padding-left: 24px !important; padding-right: 24px !important; } } /* ============================================ SECTION SPACING — TIGHTER ON MOBILE ============================================ */ /* Reduce massive padding on all sections */ .pt-130 { padding-top: 90px !important; } .pb-100 { padding-bottom: 80px !important; } .pt-150 { padding-top: 110px !important; } .pb-80 { padding-bottom: 60px !important; } .py-130 { padding-top: 90px !important; padding-bottom: 90px !important; } @media (max-width: 991px) { .pt-130, .rpt-100 { padding-top: 70px !important; } .pb-100, .rpb-70 { padding-bottom: 55px !important; } .pt-150 { padding-top: 90px !important; } .py-130, .rpy-100 { padding-top: 70px !important; padding-bottom: 70px !important; } } @media (max-width: 576px) { .pt-130, .rpt-100, .pt-150 { padding-top: 55px !important; } .pb-100, .rpb-70 { padding-bottom: 45px !important; } .py-130, .rpy-100 { padding-top: 55px !important; padding-bottom: 55px !important; } .mb-55, .mb-60, .mb-70 { margin-bottom: 32px !important; } .mb-35, .mb-40 { margin-bottom: 22px !important; } } /* ============================================ HERO SECTION — PREMIUM POLISH ============================================ */ /* Counter wrap as clean horizontal row on mobile */ @media (max-width: 991px) { .hero-counter-wrap { display: flex !important; flex-direction: row !important; justify-content: center; gap: 0 !important; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 18px 24px !important; margin-top: 28px; } .counter-item { flex: 1; text-align: center; border: none !important; padding: 0 !important; position: relative; } .counter-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; bottom: 20%; width: 1px; background: var(--border); } .count-text { font-size: 1.8rem !important; } .counter-title { font-size: 0.72rem !important; color: var(--muted) !important; } } /* CV button style */ .cv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 8px; font-size: 0.88rem; font-weight: 600; border: 1.5px solid var(--primary); color: var(--primary) !important; background: transparent; cursor: pointer; text-decoration: none; transition: background 0.2s, color 0.2s; } .cv-btn:hover { background: rgba(var(--primary-rgb), 0.1); } /* ============================================ TIMELINE IMPROVEMENTS ============================================ */ /* Better card hover glow */ .tl-card:hover { box-shadow: 0 8px 32px rgba(var(--primary-rgb), 0.12) !important; } /* Job mode badge */ .job-mode { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: rgba(var(--primary-rgb), 0.1); color: var(--primary); margin-top: 10px; } /* ============================================ PROJECTS CAROUSEL ============================================ */ /* Smooth carousel scrolling */ .proj-carousel-wrap { position: relative; overflow: hidden; } .proj-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 20px; padding: 8px 4px 24px; scroll-padding-left: 4px; } .proj-carousel::-webkit-scrollbar { display: none; } /* Carousel nav arrows */ .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--border); color: var(--heading); font-size: 0.9rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.15); } .carousel-btn:hover { border-color: var(--primary); color: var(--primary); } .carousel-btn.prev { left: -20px; } .carousel-btn.next { right: -20px; } .carousel-btn:disabled { opacity: 0.3; pointer-events: none; } /* Dots */ .carousel-dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; } .carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); cursor: pointer; transition: background 0.2s, width 0.2s; } .carousel-dot.active { background: var(--primary); width: 20px; border-radius: 3px; } /* ============================================ CV MODAL ============================================ */ .cv-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 16px; } .cv-modal-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; width: 100%; max-width: 860px; height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.5); } .cv-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .cv-modal-title { font-size: 0.95rem; font-weight: 700; color: var(--heading); margin: 0; } .cv-modal-actions { display: flex; gap: 8px; align-items: center; } .cv-modal-body { flex: 1; overflow: hidden; } .cv-iframe { width: 100%; height: 100%; border: none; display: block; } .cv-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--muted); gap: 16px; } .cv-placeholder i { font-size: 3rem; opacity: 0.4; } @media (max-width: 576px) { .cv-overlay { padding: 0; } .cv-modal-panel { border-radius: 0; height: 100vh; max-width: 100%; } } /* ============================================ GENERAL POLISH ============================================ */ /* Smoother transitions */ a, button { transition: all 0.2s ease; } /* Better focus styles */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } /* Section title sub-title uppercase */ .sub-title { letter-spacing: 1.5px !important; } /* Services grid tighter on mobile */ @media (max-width: 576px) { .service-item { padding: 20px !important; } } /* Scrollbar refinement */ ::-webkit-scrollbar { width: 3px; } /* Better card shadows in light mode */ [data-theme="light"] .tl-card, [data-theme="light"] .skill-cat-card, [data-theme="light"] .edu-card, [data-theme="light"] .contact-form-card { box-shadow: 0 2px 12px rgba(0,0,0,0.06); } [data-theme="light"] .tl-card:hover, [data-theme="light"] .skill-cat-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.1); }