:root { --ink:#102a33; --muted:#587078; --paper:#f8faf8; --surface:#edf3ef; --line:#d4dfd9; --teal:#0f5a5d; --lime:#b9db58; --white:#fff; --shadow:0 18px 45px rgba(16,42,51,.09); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:5.5rem; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.6; } a { color:inherit; } .container { width:min(1120px, calc(100% - 3rem)); margin:auto; } .skip-link { position:fixed; top:.8rem; left:.8rem; z-index:20; padding:.7rem 1rem; background:var(--ink); color:white; transform:translateY(-160%); } .skip-link:focus { transform:none; } .site-header { position:sticky; top:0; z-index:10; border-bottom:1px solid transparent; background:rgba(248,250,248,.86); backdrop-filter:blur(14px); } .site-header.scrolled { border-color:var(--line); } .nav { min-height:5.1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand { display:flex; align-items:center; gap:.65rem; text-decoration:none; font-weight:750; letter-spacing:-.03em; } .brand span { display:grid; width:2.25rem; height:2.25rem; place-items:center; border-radius:50%; color:#fff; background:var(--teal); font-size:.75rem; letter-spacing:0; } .nav-menu { display:flex; align-items:center; gap:1.65rem; } .nav-menu a { color:var(--muted); text-decoration:none; font-size:.92rem; font-weight:650; } .nav-menu a:hover,.nav-menu a.active { color:var(--teal); } .nav-menu .nav-contact { padding:.55rem .9rem; color:var(--ink); border:1px solid var(--line); border-radius:999px; } .menu-toggle { display:none; border:0; background:none; padding:.6rem; cursor:pointer; } .menu-toggle span { display:block; width:1.5rem; height:2px; margin:.25rem; background:var(--ink); } .section { padding:clamp(4.5rem,9vw,8.25rem) 0; } .hero { min-height:calc(100vh - 5rem); display:grid; align-items:center; padding-top:4rem; } .hero-grid,.contact-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(2rem,7vw,7rem); align-items:center; } .eyebrow,.section-kicker,.type,.card-label { margin:0 0: 1rem; color:var(--teal); font-size:.75rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:.4rem; font-size:clamp(3.7rem,9vw,7.4rem); line-height:.94; letter-spacing:-.075em; } h2 { max-width:750px; margin-bottom:1.7rem; font-size:clamp(2.25rem,5vw,4.1rem); line-height:1.04; letter-spacing:-.06em; } h1 em,h2 em { color:var(--teal); font-style:normal; } h3 { font-size:1.18rem; letter-spacing:-.025em; } .hero-role { margin-bottom:1.35rem; font-size:clamp(1.1rem,2vw,1.4rem); color:var(--teal); font-weight:750; } .hero-copy { max-width:590px; margin-bottom:2rem; color:var(--muted); font-size:1.12rem; } .hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.4rem; } .button { display:inline-flex; align-items:center; justify-content:center; gap:.65rem; min-height:3rem; padding:.75rem 1.1rem; border:1px solid transparent; border-radius:.45rem; text-decoration:none; font:inherit; font-weight:750; cursor:pointer; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-2px); } .button-primary { color:#fff; background:var(--teal); } .button-primary:hover { background:#0a484b; } .button-secondary { border-color:var(--line); background:transparent; } .email-link { color:var(--teal); font-size:.9rem; font-weight:700; } .hero-card { position:relative; overflow:hidden; padding:2.1rem; color:#fff; background:var(--ink); border-radius:1rem; box-shadow:var(--shadow); } .hero-card:before { content:""; position:absolute; right:-5rem; bottom:-6rem; width:17rem; height:17rem; border:1px solid rgba(255,255,255,.3); border-radius:50%; } .orbit { position:absolute; border:1px solid rgba(185,219,88,.55); border-radius:50%; } .orbit-one { width:14rem;height:14rem;top:-8rem;right:-5rem; } .orbit-two { width:9rem;height:9rem;top:-4rem;right:-2rem; } .hero-card>* { position:relative; } .hero-card ul { padding:0; margin:2.2rem 0; list-style:none; } .hero-card li { display:flex; gap:1rem; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.15); font-weight:650; } .hero-card li span { color:var(--lime); font-size:.75rem; } .availability { display:flex; align-items:center; gap:.5rem; font-size:.83rem; color:#d9e5e1; } .availability i { width:.55rem;height:.55rem;border-radius:50%;background:var(--lime); } .split-section { display:grid; grid-template-columns:.45fr 1fr; gap:clamp(2rem,7vw,8rem); } .lead { color:#36515a; font-size:clamp(1.05rem,2vw,1.22rem); } .split-section p:not(.section-kicker) { max-width:740px; } .surface { background:var(--surface); } .section-heading { display:flex; justify-content:space-between; gap:2rem; margin-bottom:2.8rem; } .section-heading h2 { margin:0; } .skills-grid,.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .skill-card { min-height:190px; padding:1.5rem; border:1px solid var(--line); border-radius:.75rem; background:rgba(255,255,255,.48); } .skill-card h3 { margin:1.3rem 0 .75rem; } .skill-card p { margin:0; color:var(--muted); font-size:.94rem; } .skill-number,.project-index { color:var(--teal); font-size:.76rem; font-weight:800; letter-spacing:.1em; } .timeline { border-top:1px solid var(--line); } .timeline-item { display:grid; grid-template-columns:.43fr 1fr; gap:2rem; padding:2.25rem 0; border-bottom:1px solid var(--line); } .timeline-date { color:var(--teal); font-weight:750; } .timeline-item .type { margin-bottom:.25rem; font-size:.68rem; } .timeline-item h3 { margin-bottom:.25rem; font-size:1.35rem; } .organization { color:var(--muted); font-weight:650; } .timeline-item ul { padding-left:1.2rem; } .timeline-item li+li { margin-top:.45rem; } .projects-grid { grid-template-columns:repeat(2,1fr); } .project-card { display:flex; flex-direction:column; min-height:270px; padding:1.65rem; border:1px solid var(--line); border-radius:.75rem; background:var(--paper); transition:transform .2s,box-shadow .2s; } .project-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); } .project-top { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.78rem; } .project-card h3 { margin:2.8rem 0 .75rem; font-size:1.4rem; } .project-card p { color:var(--muted); } .tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:auto; padding-top:1.25rem; } .tags span { padding:.3rem .55rem; border-radius:999px; color:var(--teal); background:#e1eeee; font-size:.72rem; font-weight:750; } .contact { background:var(--ink); color:#fff; } .contact .section-kicker { color:var(--lime); } .contact h2 em { color:var(--lime); } .contact .lead { color:#d2ddda; } .contact-detail { display:block; width:max-content; max-width:100%; margin-top:.7rem; color:#fff; font-weight:700; } .contact-form { display:grid; gap:1rem; padding:1.6rem; border:1px solid rgba(255,255,255,.2); border-radius:.8rem; background:rgba(255,255,255,.06); } .form-note { margin:0; color:#c5d5d1; font-size:.79rem; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } label { display:block; margin-bottom:.35rem; font-size:.82rem; font-weight:750; } input,textarea { width:100%; border:1px solid rgba(255,255,255,.35); border-radius:.38rem; padding:.7rem .75rem; color:#fff; background:rgba(255,255,255,.08); font:inherit; } textarea { resize:vertical; } input[aria-invalid="true"],textarea[aria-invalid="true"] { border-color:#ffb4a9; } .field-error { display:block; min-height:1.1rem; margin-top:.25rem; color:#ffccc4; font-size:.75rem; } footer { color:var(--muted); background:var(--paper); } .footer-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.6rem 0; font-size:.88rem; } .footer-inner p { margin:0; } .back-top { color:var(--teal); font-weight:750; text-decoration:none; } .toast { position:fixed; right:1rem; bottom:1rem; z-index:30; max-width:min(360px,calc(100% - 2rem)); padding:1rem 1.2rem; border-radius:.5rem; color:#fff; background:var(--teal); box-shadow:var(--shadow); transform:translateY(150%); transition:transform .25s ease; } .toast.show { transform:none; } :focus-visible { outline:3px solid var(--lime); outline-offset:3px; } .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; } .reveal.visible { opacity:1; transform:none; }
@media (max-width:760px) { .container { width:min(100% - 2rem,1120px); } .menu-toggle { display:block; z-index:12; } .nav-menu { position:absolute; top:100%; right:1rem; left:1rem; display:grid; gap:.25rem; padding:1rem; border:1px solid var(--line); border-radius:.7rem; background:var(--paper); box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(-.5rem); transition:.2s; } .nav-menu.open { opacity:1; visibility:visible; transform:none; } .nav-menu a { padding:.75rem; } .nav-menu .nav-contact { text-align:center; } .hero { min-height:auto; } .hero-grid,.contact-grid,.split-section,.timeline-item { grid-template-columns:1fr; gap:1.75rem; } .skills-grid,.projects-grid { grid-template-columns:1fr; } .section-heading { display:block; } .section-heading .section-kicker { margin-bottom:1rem; } .timeline-item { gap:.35rem; } .form-row { grid-template-columns:1fr; gap:0; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition-duration:.01ms!important; animation-duration:.01ms!important; } .reveal { opacity:1; transform:none; } }