/* ============================================================ Resume Site template styles Themes are driven by [data-theme] on . Add more themes by copying a block and changing the variables. ============================================================ */ :root { --maxw: 820px; --radius: 14px; --gap: 28px; --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } /* ---------- THEMES ---------- */ body[data-theme="midnight"] { --bg: #0b1020; --surface: #141b30; --surface-2: #1b243d; --text: #e7ecf5; --muted: #94a3b8; --accent: #6ea8fe; --accent-2: #a78bfa; --border: #25304d; } body[data-theme="slate"] { --bg: #f5f6f8; --surface: #ffffff; --surface-2: #eef1f5; --text: #1b2230; --muted: #5b6678; --accent: #2563eb; --accent-2: #7c3aed; --border: #e2e6ee; } body[data-theme="warm"] { --bg: #fbf7f1; --surface: #ffffff; --surface-2: #f4ece1; --text: #2a2320; --muted: #6f635a; --accent: #c2570f; --accent-2: #b8860b; --border: #ece1d3; } /* ---------- BASE ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- TOP BAR ---------- */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .topbar__brand { font-weight: 700; letter-spacing: .2px; } .topbar__actions { display: flex; gap: 10px; } .btn-ghost, .btn-solid { font-family: var(--font); font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); transition: transform .08s ease, opacity .15s; } .btn-ghost { background: var(--surface); color: var(--text); } .btn-solid { background: var(--accent); color: #fff; border-color: transparent; } .btn-ghost:hover, .btn-solid:hover { transform: translateY(-1px); } /* ---------- PAGE ---------- */ .page { max-width: var(--maxw); margin: 0 auto; padding: 48px 22px 80px; } /* ---------- HERO ---------- */ .hero { margin-bottom: var(--gap); } .hero__photo { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border); margin-bottom: 18px; display: block; } .hero__name { font-size: clamp(34px, 6vw, 52px); font-weight: 800; line-height: 1.05; margin: 0 0 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__title { font-size: 20px; font-weight: 600; color: var(--text); margin: 0 0 10px; } .hero__tagline { font-size: 17px; color: var(--muted); margin: 0 0 18px; max-width: 60ch; } .hero__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 14px; margin-bottom: 18px; } .hero__meta span { display: inline-flex; align-items: center; gap: 6px; } .hero__links { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; font-weight: 500; color: var(--text); } .chip__icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--accent); } .chip__logo { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; background: #fff; } /* About (with optional photo) */ .about { display: flex; gap: 18px; align-items: flex-start; } .about__photo { width: 120px; height: 120px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border); flex: none; } .about__text { flex: 1; min-width: 0; } /* ---------- SECTIONS ---------- */ .section { margin-top: 40px; } .section__title { font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; } /* Experience */ .xp { margin-bottom: 14px; display: flex; gap: 14px; } .xp:last-child { margin-bottom: 0; } .xp__logo { width: 46px; height: 46px; border-radius: 9px; object-fit: contain; background: #fff; border: 1px solid var(--border); padding: 3px; flex: none; } .xp__body { flex: 1; min-width: 0; } .xp__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .xp__role { font-weight: 700; font-size: 16px; } .xp__company { color: var(--accent); font-weight: 600; } .xp__period { color: var(--muted); font-size: 14px; white-space: nowrap; } .xp__bullets { margin: 8px 0 0; padding-left: 18px; color: var(--text); } .xp__bullets li { margin-bottom: 4px; } /* Skills */ .skills { display: flex; flex-wrap: wrap; gap: 9px; } .skill { padding: 7px 13px; border-radius: 8px; font-size: 14px; font-weight: 500; background: var(--surface); border: 1px solid var(--border); } /* Projects */ .projects { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .project { display: block; } .project__img { width: 100%; height: 140px; object-fit: cover; border-radius: 9px; margin-bottom: 10px; border: 1px solid var(--border); } .project__name { font-weight: 700; margin-bottom: 4px; } .project__blurb { color: var(--muted); font-size: 14px; } /* Education */ .edu { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .edu + .edu { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .edu__logo { width: 42px; height: 42px; border-radius: 9px; object-fit: contain; background: #fff; border: 1px solid var(--border); padding: 3px; flex: none; } .edu__main { flex: 1; min-width: 0; } .edu__school { font-weight: 700; } .edu__degree { color: var(--muted); } .edu__period { color: var(--muted); font-size: 14px; } /* ---------- FOOTER ---------- */ .footer { text-align: center; color: var(--muted); font-size: 13px; padding: 30px 0 40px; } @media (max-width: 560px) { .projects { grid-template-columns: 1fr; } .about { flex-direction: column; } } /* ============================================================ PRINT — turns the live page into a clean PDF resume (browser: Ctrl/Cmd+P → Save as PDF) ============================================================ */ @media print { :root { --maxw: 100%; } body { background: #fff !important; color: #111 !important; } .no-print { display: none !important; } .page { padding: 0; max-width: 100%; } .hero__name { color: #111 !important; -webkit-text-fill-color: #111; background: none; } .hero__title, .xp__company, .section__title { color: #111 !important; } .card, .chip, .skill { border-color: #ccc !important; background: #fff !important; } .hero__photo { border-color: #ccc !important; width: 88px; height: 88px; } .about__photo, .xp__logo, .edu__logo, .chip__logo, .project__img { border-color: #ccc !important; } .hero__tagline, .hero__meta, .xp__period, .project__blurb, .edu__degree, .edu__period { color: #444 !important; } a { color: #111 !important; } .section { margin-top: 22px; break-inside: avoid; } .xp { break-inside: avoid; } }