/* ============================================ DARK MODE — Portfolio Inês Capela Applied via .dark class on ============================================ */ /* Smooth transition on theme switch */ html.dark-transition, html.dark-transition *, html.dark-transition *::before, html.dark-transition *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } /* ---- Base ---- */ html.dark body { background-color: #0c0f14; color: #e2e4e9; } /* ---- Navbar ---- */ html.dark nav.fixed.top-0 { background-color: rgba(12, 15, 20, 0.25); border-bottom-color: rgba(255, 255, 255, 0.06); } /* ---- "Get in touch" outline button ---- */ html.dark a[data-contact] { color: #9FD4D8; border-color: rgba(43, 163, 179, 0.4); } html.dark a[data-contact].bg-accent-600 { color: #ffffff; } html.dark a[data-contact]:hover { background-color: rgba(43, 163, 179, 0.1); } /* ---- Side nav — no background ---- */ html.dark #side-nav { background-color: transparent; } /* ---- Text colors ---- */ html.dark .text-gray-900 { color: #f0f1f3; } html.dark .text-gray-800 { color: #dcdee3; } html.dark .text-gray-700 { color: #c5c8cf; } html.dark .text-gray-600 { color: #9ea2ab; } html.dark .text-gray-500 { color: #7d828c; } html.dark .text-gray-400 { color: #5e636e; } html.dark .text-accent-800 { color: #9FD4D8; } html.dark .text-accent-700 { color: #7ac4ca; } /* ---- Background colors ---- */ html.dark .bg-white { background-color: #0c0f14; } html.dark .bg-gray-50 { background-color: #151820; } html.dark .bg-gray-100 { background-color: #1a1e28; } html.dark .bg-gray-900 { background-color: #1a1e28; } html.dark .bg-accent-50 { background-color: rgba(43, 163, 179, 0.08); } html.dark .bg-accent-50\/30 { background-color: rgba(43, 163, 179, 0.06); } /* ---- Borders ---- */ html.dark .border-gray-100 { border-color: rgba(255, 255, 255, 0.06); } html.dark .border-gray-200 { border-color: rgba(255, 255, 255, 0.08); } html.dark .border-gray-300 { border-color: rgba(255, 255, 255, 0.12); } html.dark .border-gray-50 { border-color: rgba(255, 255, 255, 0.04); } html.dark .border-accent-100 { border-color: rgba(43, 163, 179, 0.15); } html.dark hr.border-gray-100 { border-color: rgba(255, 255, 255, 0.06); } /* ---- Project cards (index) ---- */ html.dark .project-card { background-color: rgba(21, 24, 32, 0.7) !important; border-color: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html.dark .coming-soon-label { color: #9FD4D8; } html.dark .project-img-wrap { box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.4); } html.dark .project-card:hover .project-img-wrap { box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5); } /* Background gradient blobs — subdued in dark */ html.dark .bg-gradient-to-bl.from-accent-200\/90 { opacity: 0.15; } html.dark .bg-gradient-to-tl.from-blue-50\/30 { opacity: 0.08; } /* ---- Tags ---- */ html.dark .tag.bg-gray-100 { background-color: rgba(255, 255, 255, 0.06); color: #9ea2ab; } /* Glassmorphism tags on project cards */ html.dark .tag[class*="bg-accent-50"] { background-color: rgba(43, 163, 179, 0.12); border-color: rgba(43, 163, 179, 0.2); color: #9FD4D8; } html.dark .tag[class*="bg-blue-50"] { background-color: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.2); color: #93c5fd; } html.dark .tag[class*="bg-amber-50"] { background-color: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.2); color: #fcd34d; } html.dark .tag[class*="bg-rose-50"] { background-color: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.2); color: #fda4af; } /* ---- Gradient overlays (case study hero) ---- */ html.dark .bg-gradient-to-t.from-white { --tw-gradient-from: #0c0f14; } /* ---- Core Problem dark card — keep as-is, it's already dark ---- */ html.dark .bg-gray-900.text-white { background-color: #1a1e28; } /* ---- Comparison cards ---- */ html.dark .border-2.border-accent-500 { background-color: rgba(43, 163, 179, 0.06); } /* ---- Decision callout ---- */ html.dark .border-l-4.border-gray-900 { background-color: #151820; border-left-color: #f0f1f3; } html.dark .border-l-4.border-accent-500 { background-color: rgba(43, 163, 179, 0.08); } /* ---- Principle cards (solution) ---- */ html.dark .border.border-gray-200.rounded-xl.p-6 { border-color: rgba(255, 255, 255, 0.08); } html.dark .border.border-gray-200.rounded-xl.p-6:hover { border-color: rgba(43, 163, 179, 0.3); } /* ---- Closing CTA ---- */ html.dark .bg-accent-50.rounded-2xl { background-color: rgba(43, 163, 179, 0.08); } /* ---- Links section ---- */ html.dark .bg-gray-50.rounded-xl { background-color: #151820; } /* ---- Stat cards ---- */ html.dark .text-center.p-6.bg-gray-50.rounded-xl { background-color: #151820; } /* ---- About page ---- */ html.dark .p-4.bg-gray-50.rounded-xl { background-color: #151820; border-color: rgba(255, 255, 255, 0.06); } html.dark .bg-gradient-to-br.from-accent-100 { opacity: 0.8; } /* ---- Tool pills ---- */ html.dark .bg-gray-100.text-gray-600 { background-color: rgba(255, 255, 255, 0.06); color: #9ea2ab; } /* ---- Resume CTA ---- */ html.dark .bg-accent-50.border.border-accent-100.rounded-xl { background-color: rgba(43, 163, 179, 0.08); border-color: rgba(43, 163, 179, 0.15); } /* ---- Footer ---- */ html.dark footer { border-top-color: rgba(255, 255, 255, 0.06); } /* ---- Side nav ---- */ html.dark .side-nav-line { background-color: rgba(255, 255, 255, 0.15); } html.dark .side-nav-label { color: rgba(255, 255, 255, 0.2); } html.dark .side-nav-link:hover .side-nav-line, html.dark .side-nav-link.active .side-nav-line { background-color: #4db3bb; } html.dark .side-nav-link:hover .side-nav-label, html.dark .side-nav-link.active .side-nav-label { color: #4db3bb; } /* ---- Metadata bar ---- */ html.dark .metadata-grid { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark .metadata-grid [class*="border-black"] { border-color: rgba(255, 255, 255, 0.03) !important; } /* Legacy selectors kept for compatibility */ html.dark .grid.border.border-gray-200.rounded-lg { border-color: rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.02); } html.dark .border-r.border-gray-200, html.dark .border-b.border-gray-200 { border-color: rgba(255, 255, 255, 0.06); } /* ---- Strategic takeaway cards ---- */ html.dark .p-4.bg-gray-50.rounded-lg { background-color: #151820; } /* ---- Closing button outlines ---- */ html.dark .border.border-gray-300 { border-color: rgba(255, 255, 255, 0.15); color: #c5c8cf; } html.dark .border.border-gray-300:hover { border-color: rgba(255, 255, 255, 0.25); } /* ---- Hero gradient blobs in dark mode ---- */ html.dark .bg-gradient-to-bl.from-accent-300 { opacity: 0.25; } html.dark .bg-accent-200\/50 { opacity: 0.18; } html.dark .bg-gradient-to-l.from-accent-100\/40 { opacity: 0.12; } /* ---- Ambient margin blobs in dark mode ---- */ html.dark .bg-accent-100\/40, html.dark .bg-accent-100\/35, html.dark .bg-accent-200\/45 { opacity: 0.15; } html.dark #blob-solution { opacity: 0.3; } html.dark #blob-learnings { opacity: 0.15; } /* ---- Images — slightly rounded for softer dark look ---- */ html.dark main img { border-radius: 4px; } /* ---- Toggle button ---- */ .dark-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; cursor: pointer; color: #7d828c; transition: color 0.2s, background-color 0.2s; } .dark-toggle:hover { background-color: rgba(0, 0, 0, 0.05); color: #1a1e28; } html.dark .dark-toggle:hover { background-color: rgba(255, 255, 255, 0.08); color: #f0f1f3; } .dark-toggle svg { width: 18px; height: 18px; } /* Sun icon hidden by default, shown in dark mode */ .dark-toggle .icon-sun { display: none; } .dark-toggle .icon-moon { display: block; } html.dark .dark-toggle .icon-sun { display: block; } html.dark .dark-toggle .icon-moon { display: none; }