/* ── Design Tokens ─────────────────────────────────────────────────────────── */ :root { --color-hero: #0D1B2A; --color-bg: #F8FAFC; --color-bg-alt: #F1F5F9; --color-surface: #FFFFFF; --color-border: #E2E8F0; --color-text: #0D1B2A; --color-text-muted: #64748B; --color-accent: #D4AF37; --color-accent-light:#F0D060; --color-navy: #0D1B2A; --color-navy-mid: #1E3A5F; --font-sans: 'Inter', system-ui, sans-serif; --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --shadow-float: 0 8px 32px rgba(13,27,42,0.10); --shadow-float-lg: 0 16px 48px rgba(13,27,42,0.15); } /* Blazor applies 'dark' to the root div, not , so use .dark not html.dark */ .dark { --color-bg: #0D1B2A; --color-bg-alt: #0A1520; --color-surface: #1A2942; --color-border: #2D4A6B; --color-text: #F1F5F9; --color-text-muted: #94A3B8; --shadow-float: 0 8px 32px rgba(0,0,0,0.40); --shadow-float-lg: 0 16px 48px rgba(0,0,0,0.50); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); background-color: var(--color-bg); color: var(--color-text); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); line-height: 1.2; margin: 0; } a { color: inherit; text-decoration: none; } .section-container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; } .section-title { font-family: var(--font-display); font-size: clamp(1.75rem,4vw,2.25rem); font-weight: 800; color: var(--color-text); margin-bottom: 0.5rem; } .accent-line { width: 4rem; height: 4px; background: var(--color-accent); border-radius: 9999px; margin-bottom: 2rem; } .card-float { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 1rem; box-shadow: var(--shadow-float); transition: box-shadow 0.2s ease, transform 0.2s ease; } .card-float:hover { box-shadow: var(--shadow-float-lg); transform: translateY(-2px); } .btn-gold { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--color-accent); color: var(--color-navy); border-radius: 0.75rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background 0.2s ease; } .btn-gold:hover { background: var(--color-accent-light); } .tech-badge { display: inline-block; padding: 0.2rem 0.65rem; font-size: 0.72rem; font-weight: 500; border-radius: 9999px; background: var(--color-navy); color: var(--color-accent); border: 1px solid rgba(212,175,55,0.2); white-space: nowrap; } .skill-pill { display: inline-flex; align-items: center; padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 500; border-radius: 9999px; background: var(--color-bg-alt); color: var(--color-text); border: 1px solid var(--color-border); white-space: nowrap; } .clip-diagonal-down { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); padding-bottom: 8rem; } .clip-diagonal-up { clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); padding-top: 8rem; } .geometric-overlay { background-image: linear-gradient(rgba(212,175,55,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,0.03) 1px, transparent 1px); background-size: 60px 60px; } .orb { position: absolute; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(212,175,55,0.12), transparent 70%); filter: blur(40px); pointer-events: none; } .nav-link { font-size: 0.9rem; font-weight: 500; color: var(--color-text-muted); transition: color 0.2s ease; padding: 0.375rem 0.625rem; border-radius: 0.5rem; } .nav-link:hover, .nav-link.active { color: var(--color-text); }