:root { --primary-color: #0d6efd; --accent-color: #ffc107; --dark: #0a0a0a; --muted: #6c757d; --surface-bg: #ffffff; --surface-border: rgba(15, 23, 42, 0.08); --section-bg: #f8f9fb; --contrast-bg: #0b1529; } :root[data-bs-theme='dark'] { --muted: #94a3b8; --surface-bg: #1f2937; --surface-border: rgba(255, 255, 255, 0.08); --section-bg: #0f172a; --contrast-bg: #020617; } body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--section-bg); color: var(--bs-body-color); transition: background-color .3s ease, color .3s ease; } .section-title { text-transform: uppercase; letter-spacing: .3em; font-size: .85rem; color: var(--muted); } .hero { min-height: 80vh; display: flex; align-items: center; background: radial-gradient(circle at top left, rgba(13,110,253,.1), transparent 55%); } .hero h1 { font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 700; } .skill-card { border-radius: 1rem; border: 1px solid var(--surface-border); background: var(--surface-bg); padding: 1.2rem; box-shadow: 0 1rem 2.5rem rgba(15,23,42,.07); } .project-card img { height: 220px; object-fit: cover; border-radius: .8rem; } .timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary-color); position: absolute; left: -6px; top: 4px; } .timeline-line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(15,23,42,.15); } footer { background: var(--contrast-bg); color: #e2e8f0; } .cv-card img { width: 160px; height: 160px; object-fit: cover; } .filter-card { border: 1px solid rgba(13, 110, 253, 0.1); border-radius: 1rem; background: var(--surface-bg); } .activity-timeline { position: relative; } .activity-card { border-radius: 1rem; border: 1px solid var(--surface-border); background: var(--surface-bg); } .activity-icon { width: 48px; height: 48px; border-radius: 16px; background: rgba(13,110,253,.1); color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .education-card { border-radius: 1rem; border: 1px solid var(--surface-border); border-left: 4px solid var(--primary-color); background: var(--surface-bg); } .preference-toolbar { z-index: 1040; background: rgba(255, 255, 255, .85); border-radius: 999px; padding: .35rem .75rem; box-shadow: 0 1rem 2rem rgba(15, 23, 42, .15); } [data-bs-theme='dark'] .preference-toolbar { background: rgba(15, 23, 42, .85); } @media (max-width: 575px) { .preference-toolbar { left: 50%; transform: translateX(-50%); right: auto; } }