/* ---------- BLOCK: manual-theme-toggle ---------- */ .theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 1000; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-heading); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px var(--shadow); transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .theme-toggle:hover { transform: scale(1.08); border-color: var(--accent); } /* ---------- BLOCK: automatic-theme-toggle ---------- */ :root { --bg-body: #f4f4f4; --bg-card: #ffffff; --text-main: #4f4f4f; --text-heading: #292929; --text-muted: #767676; --accent: #3B82C4; --accent-hover: #2f6ba3; --accent-text: #2565AE; --accent-text-hover: #184A6E; --border: rgba(0, 0, 0, 0.1); --shadow: rgba(0, 0, 0, 0.1); --accent-border: rgba(59, 130, 196, 0.4); --accent-tint: rgba(59, 130, 196, 0.1); } /* Auto Dark Mode (matches OS/Browser settings) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-body: #121212; --bg-card: #1e1e1e; --text-main: #c4c4c4; --text-heading: #f0f0f0; --text-muted: #999999; --accent: #5FA8DE; --accent-hover: #7EC8F2; --accent-text: #7EC8F2; --accent-text-hover: #A0DBFA; --border: rgba(255, 255, 255, 0.12); --shadow: rgba(0, 0, 0, 0.5); --accent-border: rgba(95, 168, 222, 0.4); --accent-tint: rgba(95, 168, 222, 0.1); } } /* Manual Dark Mode Override (when data-theme="dark" is on ) */ [data-theme="dark"] { --bg-body: #121212; --bg-card: #1e1e1e; --text-main: #c4c4c4; --text-heading: #f0f0f0; --text-muted: #999999; --accent: #5FA8DE; --accent-hover: #7EC8F2; --accent-text: #7EC8F2; --accent-text-hover: #A0DBFA; --border: rgba(255, 255, 255, 0.12); --shadow: rgba(0, 0, 0, 0.5); --accent-border: rgba(95, 168, 222, 0.4); --accent-tint: rgba(95, 168, 222, 0.1); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 24px 16px; font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 1.6; color: var(--text-main); background: var(--bg-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; color: var(--text-heading); font-weight: bold; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } p { margin: 0 0 1rem; } .icon { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.5; vertical-align: -0.15em; margin-right: 0.4em; } .icon--lg { width: 1.6em; height: 1.6em; fill: currentColor; stroke: none; margin-right: 0.6em; } /* ---------- BLOCK: resume (the whole card) ---------- */ .resume { max-width: 1100px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 1rem 3rem var(--shadow); padding: 48px; } /* ---------- BLOCK: resume-header ---------- */ .resume-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 24px; } .resume-header__name { font-size: 2.75rem; line-height: 0.85; font-weight: 900; letter-spacing: 0.25rem; text-transform: uppercase; color: var(--accent-text); margin-top: 0; margin-bottom: 5px; } .resume-header__domain { display: block; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1rem; color: #888888; margin-top: 0; padding-bottom: 4px; margin-bottom: 4px; } .resume-header__tagline { font-size: 1.25rem; font-weight: 300; } .resume-header__contact { padding-left: 24px; border-left: 1px solid var(--border); font-size: 0.85rem; } .resume-header__contact-item { margin-bottom: 8px; } .resume-header__contact-item:last-child { margin-bottom: 0; } .resume-header__contact-link:hover { color: var(--accent); } /* ---------- BLOCK: resume-intro ---------- */ .resume-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .resume-intro__photo { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .resume-intro__text { flex: 1; min-width: 260px; font-size: 0.9rem; margin: 0; } /* ---------- Layout wrapper: resume-body ---------- */ .resume-body { display: flex; flex-wrap: wrap; gap: 0; } .resume-body__main { flex: 2; min-width: 320px; padding: 24px 40px 24px 0; } @media (max-width: 800px) { .resume-body__main { padding: 24px 0; } } /* ---------- BLOCK: resume-section (reused for every sidebar/main section: Work, Projects, Skills, Education...) ---------- */ .resume-section { padding-bottom: 24px; } .resume-section:last-child { padding-bottom: 0; } .resume-section__heading { position: relative; padding-left: 16px; margin-bottom: 20px; font-size: 1.1rem; letter-spacing: 0.1rem; text-transform: uppercase; color: var(--accent-text); } .resume-section__heading::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); } /* ---------- BLOCK: entry (one work/project item) ---------- */ .entry { margin-bottom: 20px; } .entry:last-child { margin-bottom: 0; } .entry__heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; } .entry__title { font-size: 1rem; } .entry__meta { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; } .entry__description { font-size: 0.9rem; } .entry__list { margin-top: 8px; padding-left: 20px; list-style: disc; font-size: 0.9rem; } .entry__list li { margin-bottom: 4px; } .theme-link { text-decoration: underline; text-decoration-color: rgba(41, 41, 41, 0.3); } .theme-link:hover { color: var(--accent); text-decoration-color: var(--accent-text-hover); } /* ---------- BLOCK: resume-footer ---------- */ .resume-footer { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); text-align: center; } .resume-footer__social { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 24px; color: var(--text-muted); font-size: 0.8rem; } .resume-footer__social-link { display: flex; align-items: center; } .resume-footer__social-link:hover { color: var(--accent); } @media (max-width: 500px) { .resume-footer__social-label { display: none; } } /* ---------- Responsive: resume card padding on phones ---------- */ @media (max-width: 600px) { .resume { padding: 24px 20px; } .resume-header { flex-direction: column; align-items: flex-start; } .resume-header__contact { padding-left: 0; border-left: 0; } } /* ---------- BLOCK: doc-index ---------- */ .doc-index__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--border); } .doc-index__row:first-of-type { border-top: 1px solid var(--border); } .doc-index__title { font-size: 1rem; font-weight: 700; color: var(--text-heading); margin: 0 0 2px; } .doc-index__desc { font-size: 0.9rem; color: var(--text-muted); margin: 0; max-width: 46ch; } .doc-index__download { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.85rem; font-weight: 500; color: var(--accent-text); text-decoration: none; white-space: nowrap; border: 1px solid var(--accent-border); border-radius: 4px; padding: 6px 14px; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .doc-index__download:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-text-hover); } @media (max-width: 560px) { .doc-index__row { grid-template-columns: 1fr; } .doc-index__download { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; } } /* ---------- BLOCK: tag-list (compact skill/tech tags) ---------- */ .tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .tag-list:last-child { margin-bottom: 0; } .tag-list__item { font-size: 0.85rem; color: var(--text-heading); background: var(--bg-body); border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; }