/* ============================================================ DARK MODE — activated by data-theme="dark" on ============================================================ */ [data-theme="dark"] { --light: #160a2e; --light-2: #1e1040; --white: #1a0d38; --text: #f3e8ff; --text-muted: #c084fc; --text-dim: #9061c2; --border: #3b1f5e; --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --shadow: 0 4px 16px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.35); --shadow-lg: 0 20px 60px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.4); --shadow-pink: 0 6px 24px rgba(244,114,182,.35); --violet-soft: rgba(244,114,182,.14); color-scheme: only dark; } [data-theme="dark"] html { background: #0f0520; } [data-theme="dark"] body { background: #0f0520; } /* Hero — restore dark in dark mode */ [data-theme="dark"] #hero { background: var(--dark); } [data-theme="dark"] #hero::after { background: linear-gradient(to bottom, transparent, var(--dark) 40%); } [data-theme="dark"] #hero::before { background-image: radial-gradient(circle, rgba(244,114,182,.12) 1px, transparent 1px); } [data-theme="dark"] .hero-orb-1 { background: radial-gradient(circle, rgba(244,114,182,.3) 0%, rgba(244,114,182,.08) 45%, transparent 70%); } [data-theme="dark"] .hero-orb-2 { background: radial-gradient(circle, rgba(251,207,232,.18) 0%, transparent 70%); } [data-theme="dark"] .hero-name { background: linear-gradient(140deg, #ffffff 30%, rgba(244,114,182,.95) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="dark"] .hero-role { color: rgba(255,255,255,.4); } [data-theme="dark"] .typed-text { color: rgba(255,255,255,.8); } [data-theme="dark"] .cursor { background: var(--violet-glow); } [data-theme="dark"] .hero-bio { color: rgba(255,255,255,.52); } [data-theme="dark"] .hero-available { color: var(--violet-glow); border-color: rgba(244,114,182,.28); } [data-theme="dark"] .stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); box-shadow: 3px 3px 0 0 rgba(0,0,0,.3); } [data-theme="dark"] .stat:hover { background: rgba(244,114,182,.1); border-color: rgba(244,114,182,.4); box-shadow: 4px 4px 0 0 rgba(244,114,182,.25); transform: translate(-1px,-1px); } [data-theme="dark"] .stat-num { color: rgba(255,255,255,.95); } [data-theme="dark"] .stat-label { color: rgba(255,255,255,.58); } [data-theme="dark"] .hero-scroll span { color: rgba(255,255,255,.2); } [data-theme="dark"] .scroll-line { background: linear-gradient(to right, rgba(244,114,182,.7), transparent); } [data-theme="dark"] #hero .btn-outline-dark { background: transparent; color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.18); box-shadow: none; } [data-theme="dark"] #hero .btn-outline-dark:hover { background: rgba(244,114,182,.12); border-color: rgba(244,114,182,.5); color: var(--violet-glow); box-shadow: none; } /* Icon flip */ [data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; } /* Theme toggle in light-nav on dark mode */ [data-theme="dark"] #navbar.light-nav #theme-toggle { border-color: rgba(244,114,182,.2); color: rgba(244,114,182,.7); } [data-theme="dark"] #navbar.light-nav #theme-toggle:hover { background: rgba(244,114,182,.12); border-color: rgba(244,114,182,.5); color: var(--violet-glow); } /* Mobile menu */ [data-theme="dark"] .mobile-menu { background: rgba(15,5,32,.98); border-bottom-color: rgba(244,114,182,.1); } [data-theme="dark"] .mobile-link { color: rgba(255,255,255,.5); border-bottom-color: rgba(244,114,182,.1); } [data-theme="dark"] .mobile-link:hover { color: var(--violet-glow); } /* Navbar — logo always visible regardless of scroll state */ [data-theme="dark"] .nav-logo { color: rgba(255,255,255,.9); } [data-theme="dark"] .nav-logo span { color: var(--violet-glow); } [data-theme="dark"] #navbar.light-nav { background: rgba(15,5,32,.92); border-bottom-color: rgba(244,114,182,.1); box-shadow: none; } [data-theme="dark"] #navbar.light-nav .nav-logo { color: #fff; } [data-theme="dark"] #navbar.light-nav .nav-logo span { color: var(--violet-glow); } [data-theme="dark"] #navbar.light-nav .nav-links a { color: rgba(255,255,255,.45); } [data-theme="dark"] #navbar.light-nav .nav-links a::after { background: var(--violet-glow); } [data-theme="dark"] #navbar.light-nav .nav-links a:hover { color: #fff; } [data-theme="dark"] #navbar.light-nav .nav-links a.active { color: var(--violet-glow); } [data-theme="dark"] #navbar.light-nav .hamburger span { background: rgba(255,255,255,.6); } /* Section chrome */ [data-theme="dark"] .section-title { background: linear-gradient(130deg, #f3e8ff 30%, var(--violet-glow) 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="dark"] .section-sub { color: rgba(255,255,255,.55); } [data-theme="dark"] .section-eyebrow { color: var(--violet-glow); } [data-theme="dark"] .section-num { -webkit-text-stroke-color: rgba(244,114,182,.08); } /* About */ [data-theme="dark"] #about { background: #130926; background-image: radial-gradient(circle, rgba(244,114,182,.1) 1px, transparent 1px); background-size: 22px 22px; } [data-theme="dark"] .about-card { background: #231050; border-color: rgba(244,114,182,.3); box-shadow: 5px 5px 0 0 rgba(244,114,182,.3); } [data-theme="dark"] .about-item { border-bottom-color: rgba(244,114,182,.1); } [data-theme="dark"] .about-item:hover { background: rgba(244,114,182,.06); } [data-theme="dark"] .about-icon { background: rgba(244,114,182,.14); color: var(--violet-glow); border-color: rgba(244,114,182,.25); } [data-theme="dark"] .about-item:nth-child(2) .about-icon { background: rgba(5,150,105,.15); color: #34d399; border-color: rgba(5,150,105,.3); } [data-theme="dark"] .about-item:nth-child(3) .about-icon { background: rgba(194,65,12,.15); color: #fb923c; border-color: rgba(194,65,12,.3); } [data-theme="dark"] .about-item:nth-child(4) .about-icon { background: rgba(29,78,216,.15); color: #60a5fa; border-color: rgba(29,78,216,.3); } [data-theme="dark"] .about-item:nth-child(5) .about-icon { background: rgba(180,83,9,.15); color: #fbbf24; border-color: rgba(180,83,9,.3); } [data-theme="dark"] .about-link { background: rgba(244,114,182,.06); border-color: rgba(244,114,182,.12); color: rgba(255,255,255,.5); box-shadow: 2px 2px 0 0 rgba(244,114,182,.1); } [data-theme="dark"] .about-link:hover { background: rgba(244,114,182,.12); border-color: rgba(244,114,182,.4); color: var(--violet-glow); box-shadow: 3px 3px 0 0 var(--violet); } [data-theme="dark"] .about-text p { color: rgba(255,255,255,.72); } [data-theme="dark"] .about-text strong { color: #ffffff; } [data-theme="dark"] .about-item strong { color: #f3e8ff; } [data-theme="dark"] .about-item p { color: rgba(255,255,255,.52); } /* Skills */ [data-theme="dark"] #skills { background: #1a0d38; } [data-theme="dark"] .marquee-wrap { background: #130926; border-top-color: rgba(244,114,182,.12); border-bottom-color: rgba(244,114,182,.12); } [data-theme="dark"] .marquee-track span { color: rgba(255,255,255,.35); } [data-theme="dark"] .skill-category { background: #231050; border-color: rgba(244,114,182,.15); box-shadow: 3px 3px 0 0 rgba(244,114,182,.12); } [data-theme="dark"] .skill-category:hover { border-color: var(--violet); box-shadow: 4px 4px 0 0 var(--violet); } [data-theme="dark"] .skill-cat-title { color: var(--violet-glow); } [data-theme="dark"] .skill-tag { background: rgba(244,114,182,.07); border-color: rgba(244,114,182,.15); color: rgba(255,255,255,.65); box-shadow: 2px 2px 0 0 rgba(244,114,182,.1); } [data-theme="dark"] .skill-tag:hover { background: rgba(244,114,182,.18); color: var(--violet-glow); border-color: rgba(244,114,182,.4); box-shadow: 2px 2px 0 0 var(--violet); } [data-theme="dark"] .skill-tag.rust, [data-theme="dark"] .skill-tag.html, [data-theme="dark"] .skill-tag.git { background: rgba(194,65,12,.16); color: #fb923c; border-color: rgba(194,65,12,.35); } [data-theme="dark"] .skill-tag.go, [data-theme="dark"] .skill-tag.node, [data-theme="dark"] .skill-tag.py { background: rgba(5,150,105,.14); color: #34d399; border-color: rgba(5,150,105,.35); } [data-theme="dark"] .skill-tag.js, [data-theme="dark"] .skill-tag.ws, [data-theme="dark"] .skill-tag.linux { background: rgba(217,119,6,.14); color: #fbbf24; border-color: rgba(217,119,6,.35); } [data-theme="dark"] .skill-tag.ts, [data-theme="dark"] .skill-tag.api, [data-theme="dark"] .skill-tag.sql { background: rgba(37,99,235,.14); color: #60a5fa; border-color: rgba(37,99,235,.35); } [data-theme="dark"] .skill-tag.css, [data-theme="dark"] .skill-tag.dom, [data-theme="dark"] .skill-tag.docker { background: rgba(3,105,161,.14); color: #38bdf8; border-color: rgba(3,105,161,.35); } [data-theme="dark"] .skill-tag.php, [data-theme="dark"] .skill-tag.sys, [data-theme="dark"] .skill-tag.fw, [data-theme="dark"] .skill-tag.async { background: rgba(244,114,182,.14); color: var(--violet-glow); border-color: rgba(244,114,182,.3); } [data-theme="dark"] .skill-tag.gql { background: rgba(157,23,77,.14); color: #f472b6; border-color: rgba(157,23,77,.35); } [data-theme="dark"] .skill-tag.sec, [data-theme="dark"] .skill-tag.mem { background: rgba(190,18,60,.14); color: #f87171; border-color: rgba(190,18,60,.35); } [data-theme="dark"] .skill-tag.conc { background: rgba(15,118,110,.14); color: #2dd4bf; border-color: rgba(15,118,110,.35); } [data-theme="dark"] .skill-tag.algo { background: rgba(51,65,85,.22); color: #94a3b8; border-color: rgba(51,65,85,.4); } [data-theme="dark"] .skill-tag.vsc { background: rgba(29,78,216,.14); color: #60a5fa; border-color: rgba(29,78,216,.35); } /* Projects */ [data-theme="dark"] .project-card { background: #1a0d38; border-color: rgba(244,114,182,.1); box-shadow: 4px 4px 0 0 rgba(0,0,0,.5); } [data-theme="dark"] .project-card:hover { box-shadow: 7px 7px 0 0 rgba(244,114,182,.25); } [data-theme="dark"] .project-card[data-tags~="rust"] { background: rgba(194,65,12,.1); } [data-theme="dark"] .project-card[data-tags~="go"] { background: rgba(5,150,105,.08); } [data-theme="dark"] .project-card[data-tags~="javascript"] { background: rgba(217,119,6,.08); } [data-theme="dark"] .project-card[data-tags~="typescript"] { background: rgba(37,99,235,.09); } [data-theme="dark"] .project-card[data-tags~="python"] { background: rgba(22,163,74,.08); } [data-theme="dark"] .project-card[data-tags~="php"] { background: rgba(244,114,182,.08); } [data-theme="dark"] .project-card[data-tags~="security"] { background: rgba(244,114,182,.08); } [data-theme="dark"] .project-card[data-tags~="html"] { background: rgba(234,88,12,.08); } [data-theme="dark"] .project-card[data-tags~="rust"]:hover { box-shadow: 7px 7px 0 0 rgba(194,65,12,.3); } [data-theme="dark"] .project-card[data-tags~="go"]:hover { box-shadow: 7px 7px 0 0 rgba(5,150,105,.28); } [data-theme="dark"] .project-card[data-tags~="javascript"]:hover { box-shadow: 7px 7px 0 0 rgba(217,119,6,.28); } [data-theme="dark"] .project-card[data-tags~="typescript"]:hover { box-shadow: 7px 7px 0 0 rgba(37,99,235,.28); } [data-theme="dark"] .project-card[data-tags~="python"]:hover { box-shadow: 7px 7px 0 0 rgba(22,163,74,.28); } [data-theme="dark"] .project-card[data-tags~="php"]:hover { box-shadow: 7px 7px 0 0 rgba(244,114,182,.32); } [data-theme="dark"] .project-card[data-tags~="security"]:hover { box-shadow: 7px 7px 0 0 rgba(244,114,182,.32); } [data-theme="dark"] .project-card[data-tags~="html"]:hover { box-shadow: 7px 7px 0 0 rgba(234,88,12,.28); } [data-theme="dark"] .project-top::before { color: rgba(255,255,255,.2); } [data-theme="dark"] .project-title { color: #f3e8ff; } [data-theme="dark"] .project-desc { color: rgba(255,255,255,.52); } [data-theme="dark"] .projects-count { color: rgba(255,255,255,.38); } [data-theme="dark"] .project-update { color: rgba(255,255,255,.3); } [data-theme="dark"] .project-footer { border-top-color: rgba(244,114,182,.1); } [data-theme="dark"] .project-card.senior-project { background: linear-gradient(145deg, rgba(245,158,11,.1), rgba(194,65,12,.08)); box-shadow: 4px 4px 0 0 rgba(245,158,11,.3); border-color: rgba(245,158,11,.22); } [data-theme="dark"] .project-card.senior-project:hover { box-shadow: 7px 7px 0 0 rgba(245,158,11,.4); } [data-theme="dark"] .senior-badge { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.28); color: #fbbf24; } [data-theme="dark"] .lang-badge { background: rgba(244,114,182,.08); color: rgba(255,255,255,.55); border-color: rgba(244,114,182,.15); } [data-theme="dark"] .lang-badge.rust { background: rgba(194,65,12,.2); color: #fb923c; border-color: rgba(194,65,12,.4); } [data-theme="dark"] .lang-badge.go { background: rgba(5,150,105,.18); color: #34d399; border-color: rgba(5,150,105,.4); } [data-theme="dark"] .lang-badge.js { background: rgba(217,119,6,.18); color: #fbbf24; border-color: rgba(217,119,6,.4); } [data-theme="dark"] .lang-badge.ts { background: rgba(37,99,235,.18); color: #60a5fa; border-color: rgba(37,99,235,.4); } [data-theme="dark"] .lang-badge.py { background: rgba(22,163,74,.18); color: #4ade80; border-color: rgba(22,163,74,.4); } [data-theme="dark"] .lang-badge.php { background: rgba(244,114,182,.16); color: var(--violet-glow); border-color: rgba(244,114,182,.35); } [data-theme="dark"] .lang-badge.html { background: rgba(194,65,12,.2); color: #fb923c; border-color: rgba(194,65,12,.4); } [data-theme="dark"] .lang-badge.css { background: rgba(3,105,161,.18); color: #38bdf8; border-color: rgba(3,105,161,.4); } [data-theme="dark"] .platform-badge.reboot { background: rgba(194,65,12,.18); color: #fb923c; border-color: rgba(194,65,12,.35); } [data-theme="dark"] .platform-badge.github { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); border-color: transparent; } [data-theme="dark"] .platform-badge.collab { background: rgba(244,114,182,.14); color: var(--violet-glow); border-color: rgba(244,114,182,.3); } /* Carousel */ [data-theme="dark"] .carousel-wrap::before { background: linear-gradient(to right, #1e1040, transparent); } [data-theme="dark"] .carousel-wrap::after { background: linear-gradient(to left, #1e1040, transparent); } [data-theme="dark"] .carousel-btn { background: #1a0d38; border-color: rgba(244,114,182,.15); color: rgba(255,255,255,.7); box-shadow: 3px 3px 0 0 rgba(0,0,0,.4); } [data-theme="dark"] .carousel-btn:hover { background: var(--violet); border-color: var(--violet-2); color: #fff; box-shadow: 4px 4px 0 0 var(--violet-2); } [data-theme="dark"] .carousel-dot { background: rgba(255,255,255,.15); } [data-theme="dark"] .carousel-dot.active { background: var(--violet); } [data-theme="dark"] .carousel-dot:hover:not(.active) { background: rgba(244,114,182,.4); } /* Search + Filter */ [data-theme="dark"] .search-bar input { background: #1a0d38; border-color: rgba(244,114,182,.12); color: #f3e8ff; box-shadow: 2px 2px 0 0 rgba(0,0,0,.4); } [data-theme="dark"] .search-bar input::placeholder { color: rgba(255,255,255,.22); } [data-theme="dark"] .search-bar input:focus { border-color: rgba(244,114,182,.6); background: rgba(244,114,182,.07); box-shadow: 3px 3px 0 0 var(--violet); } [data-theme="dark"] .search-clear { color: rgba(255,255,255,.4); } [data-theme="dark"] .search-clear:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.07); } [data-theme="dark"] .filter-btn { background: #1a0d38; border-color: rgba(244,114,182,.12); color: rgba(255,255,255,.45); box-shadow: 2px 2px 0 0 rgba(0,0,0,.3); } [data-theme="dark"] .filter-btn:hover { border-color: var(--violet-glow); color: var(--violet-glow); box-shadow: 2px 2px 0 0 var(--violet); } [data-theme="dark"] .filter-btn.active { background: var(--violet); color: #fff; border-color: var(--violet-2); box-shadow: 3px 3px 0 0 var(--violet-2); } /* Experience */ [data-theme="dark"] #experience { background: #130926; background-image: radial-gradient(circle, rgba(244,114,182,.1) 1px, transparent 1px); background-size: 22px 22px; } [data-theme="dark"] .timeline::before { background: linear-gradient(to bottom, var(--violet-glow), transparent); } [data-theme="dark"] .timeline-item::before { background: var(--violet-glow); border-color: #130926; } [data-theme="dark"] .timeline-body { background: #231050; border-color: rgba(244,114,182,.18); box-shadow: 4px 4px 0 0 rgba(0,0,0,.45); } [data-theme="dark"] .timeline-body:hover { border-color: var(--violet); box-shadow: 5px 5px 0 0 var(--violet); } [data-theme="dark"] .timeline-role { color: #f3e8ff; } [data-theme="dark"] .timeline-org { color: rgba(255,255,255,.6); } [data-theme="dark"] .timeline-desc { color: rgba(255,255,255,.56); } [data-theme="dark"] .timeline-badge { color: var(--violet-glow); background: rgba(244,114,182,.14); border-color: rgba(244,114,182,.3); } [data-theme="dark"] .timeline-date { color: var(--violet-glow); background: rgba(244,114,182,.12); border-color: rgba(244,114,182,.25); } [data-theme="dark"] .timeline-tags span { background: rgba(244,114,182,.08); border-color: rgba(244,114,182,.18); color: rgba(255,255,255,.55); } /* Contact */ [data-theme="dark"] #contact { background: #130926; border-top-color: rgba(244,114,182,.08); } [data-theme="dark"] #contact::before { background-image: radial-gradient(circle, rgba(244,114,182,.1) 1.5px, transparent 1.5px); } [data-theme="dark"] .contact-info h3 { color: rgba(255,255,255,.9); } [data-theme="dark"] .contact-info > p { color: rgba(255,255,255,.38); } [data-theme="dark"] .contact-card { background: transparent; border-color: rgba(255,255,255,.08); box-shadow: none; } [data-theme="dark"] .contact-card:hover { background: rgba(244,114,182,.07); border-color: rgba(244,114,182,.35); box-shadow: 4px 4px 0 0 rgba(244,114,182,.2); } [data-theme="dark"] .github-icon { background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); } [data-theme="dark"] .email-icon { background: rgba(217,119,6,.14); color: #fbbf24; } [data-theme="dark"] .reboot-icon { background: rgba(194,65,12,.14); color: #fb923c; } [data-theme="dark"] .linkedin-icon { background: rgba(10,102,194,.18); color: #60a5fa; } [data-theme="dark"] .contact-card strong { color: rgba(255,255,255,.9); } [data-theme="dark"] .contact-card span { color: rgba(255,255,255,.32); } [data-theme="dark"] .contact-form { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.09); box-shadow: 5px 5px 0 0 rgba(244,114,182,.15); } [data-theme="dark"] .form-group label { color: rgba(255,255,255,.45); } [data-theme="dark"] .form-group:focus-within label { color: var(--violet-glow); } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group textarea { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); color: rgba(255,255,255,.85); } [data-theme="dark"] .form-group input:hover, [data-theme="dark"] .form-group textarea:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); } [data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group textarea:focus { border-color: rgba(244,114,182,.7); background: rgba(244,114,182,.06); box-shadow: 3px 3px 0 0 rgba(244,114,182,.25); } [data-theme="dark"] .form-group input::placeholder, [data-theme="dark"] .form-group textarea::placeholder { color: rgba(255,255,255,.17); } [data-theme="dark"] .form-note { color: rgba(255,255,255,.3); } [data-theme="dark"] .form-note.success { color: #4ade80; } [data-theme="dark"] .form-note.error { color: #f87171; } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #0f0520; }