/* ── Yuri Marca — CV site ─────────────────────────────────────────── */ :root { --ym-accent: #18bc9c; --ym-ink: #2c3e50; --ym-muted: #7b8a99; --ym-rule: #e4e8ec; --ym-surface: #f7f9fa; } /* Quarto stamps .quarto-dark on when the dark theme is active. */ body.quarto-dark { --ym-accent: #3fd9b8; --ym-ink: #e9ecef; --ym-muted: #9aa7b4; --ym-rule: #3d4650; --ym-surface: #2b333c; } /* Readable measure for a long single-page CV */ main.content { max-width: 54rem; } /* ── Hero ─────────────────────────────────────────────────────────── */ .hero { display: flex; align-items: center; gap: 2rem; margin: 1rem 0 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--ym-rule); } .hero-photo { width: 9.5rem; height: 9.5rem; flex: 0 0 auto; border-radius: 50%; object-fit: cover; border: 4px solid var(--ym-surface); box-shadow: 0 2px 12px rgba(44, 62, 80, 0.13); } .hero-text h1 { margin: 0 0 0.2rem; font-size: 2.3rem; font-weight: 700; letter-spacing: -0.02em; } .hero-role { display: block; font-size: 1.12rem; font-weight: 600; color: var(--ym-accent); } .hero-loc { display: block; font-size: 0.9rem; color: var(--ym-muted); margin-bottom: 0.9rem; } .hero-text .btn { margin: 0 0.35rem 0.4rem 0; } /* darkly renders btn-outline-secondary as dark grey on dark — unreadable. */ body.quarto-dark .hero-text .btn-outline-secondary { color: var(--ym-ink); border-color: #525d69; } body.quarto-dark .hero-text .btn-outline-secondary:hover, body.quarto-dark .hero-text .btn-outline-secondary:focus { color: #fff; background-color: #525d69; border-color: #525d69; } .hero-text p:last-child { margin-bottom: 0; } /* Screen-hidden; the print block above reveals it. */ .print-contact { display: none; } @media (max-width: 640px) { .hero { flex-direction: column; text-align: center; gap: 1.2rem; } .hero-text h1 { font-size: 1.9rem; } } /* ── Section headings ─────────────────────────────────────────────── */ main.content h2 { margin-top: 3rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--ym-rule); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; } /* ── Experience / research / education entries ────────────────────── */ .role { margin: 1.75rem 0; padding-left: 1rem; border-left: 3px solid var(--ym-rule); transition: border-color 0.15s ease; } .role:hover { border-left-color: var(--ym-accent); } .role h3.role-title { margin: 0 0 0.15rem; font-size: 1.1rem; font-weight: 700; color: var(--ym-ink); } .role-sub { font-weight: 600; color: var(--ym-accent); } .role-meta { display: block; font-size: 0.85rem; color: var(--ym-muted); margin-bottom: 0.6rem; } .role ul { margin-bottom: 0; } .role li { margin-bottom: 0.35rem; } /* ── Skill / language tags ────────────────────────────────────────── */ .skills p { margin-bottom: 0.9rem; line-height: 2.1; } .skills strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ym-muted); margin-bottom: 0.3rem; } .tag { display: inline-block; padding: 0.16rem 0.6rem; margin: 0 0.3rem 0.35rem 0; border: 1px solid var(--ym-rule); border-radius: 999px; background: var(--ym-surface); font-size: 0.85rem; color: var(--ym-ink); white-space: nowrap; } /* ── Selected work cards ──────────────────────────────────────────── */ .work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1.25rem 0; } .work-card { padding: 1.1rem; border: 1px solid var(--ym-rule); border-radius: 8px; background: var(--ym-surface); } .work-card p { margin-bottom: 0.6rem; font-size: 0.93rem; } .work-card p:last-child { margin-bottom: 0; } .work-link { font-size: 0.85rem; font-weight: 600; } /* ── Publications ─────────────────────────────────────────────────── */ .awards { display: block; padding: 0.7rem 1rem; margin-bottom: 1rem; border-left: 3px solid var(--ym-accent); border-radius: 0 6px 6px 0; background: var(--ym-surface); font-size: 0.93rem; } /* ── Small screens ────────────────────────────────────────────────── */ @media (max-width: 600px) { .tag { white-space: normal; } main.content h2 { margin-top: 2.25rem; } } /* ── Print: the page is a CV, so Ctrl+P should produce one ────────── */ @media print { /* Chrome/Firefox drop backgrounds by default; force readable ink. */ :root { --ym-ink: #000; --ym-muted: #444; --ym-rule: #bbb; --ym-surface: #fff; } .navbar, .hero-text .btn, #contact, footer, .quarto-search { display: none !important; } body, main.content { max-width: none; margin: 0; padding: 0; font-size: 10.5pt; color: #000; } a { color: #000; text-decoration: none; } /* The button row is hidden in print, so surface contact details as text. */ .print-contact { display: block !important; font-size: 9.5pt; color: #333; } .hero { padding-bottom: 1rem; margin-bottom: 1.25rem; } .hero-photo { width: 6rem; height: 6rem; box-shadow: none; } main.content h2 { margin-top: 1.4rem; font-size: 1.15rem; break-after: avoid; } /* Never split an entry or card across a page boundary. */ .role, .work-card, .awards { break-inside: avoid; page-break-inside: avoid; } .work-grid { display: block; } .work-card { margin-bottom: 0.6rem; border: 1px solid #ccc; } .tag { border: 1px solid #ccc; background: #fff; } }