/* Rafael Vrecar — CV website No external fonts, scripts, trackers, or third-party resources. Design tokens are kept at the top to make future changes easy. */ :root { --blue: #0e5484; --blue-dark: #0a4168; --ink: #30343a; --muted: #686f77; --line: #d9dde1; --surface: #f4f6f8; --white: #fff; --content-width: 1180px; --sidebar-width: 250px; --radius: 0.65rem; --radius-sm: 0.4rem; --shadow: 0 1px 2px rgb(29 45 58 / 5%), 0 20px 40px -16px rgb(29 45 58 / 14%); --shadow-lift: 0 2px 6px rgb(29 45 58 / 6%), 0 28px 48px -18px rgb(29 45 58 / 20%); --ease: cubic-bezier(.22, .61, .36, 1); --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--font-sans); font-size: 1rem; line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } /* Justification is applied to running prose only, and always together with hyphenation — justified text without hyphens tears open word spacing. Deliberately excluded: headings, the sidebar, meta lines and date columns, where the measure is too short for justification to do anything but harm. hyphenate-limit-chars keeps the browser from breaking off two-letter fragments; it needs the lang attribute on to pick a dictionary. */ .cv-section p, .detail-list li, .aside-list li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 4 3; } /* Ragged right on purpose. Bibliography entries and the two-column lists are full of proper nouns and titles that offer the browser no hyphenation points, so justifying them just stretches word spacing until it shows. Ragged-right bibliographies are the book convention for the same reason. */ .publications li, .compact-list li { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 4 3; } /* Short single-line entries: hyphenation stays useful, justification has nothing to justify and only risks stretched lines in the narrow columns. */ .timeline-date, .meta { text-align: left; hyphens: manual; } h1, h2, h3 { -webkit-hyphens: manual; hyphens: manual; } a { color: var(--blue); text-decoration-thickness: .08em; text-underline-offset: .18em; transition: color .15s var(--ease); } a:hover { color: var(--blue-dark); } a:focus-visible { outline: 3px solid rgb(14 84 132 / 35%); outline-offset: 3px; border-radius: 2px; } .skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; transform: translateY(-160%); padding: .65rem .85rem; color: var(--white); background: var(--ink); border-radius: var(--radius-sm); transition: transform .2s var(--ease); } .skip-link:focus { transform: none; } .site-header { color: var(--white); background: linear-gradient(165deg, var(--blue) 0%, var(--blue-dark) 100%); box-shadow: 0 24px 48px -28px rgb(10 65 104 / 55%); } .header-inner { width: min(var(--content-width), calc(100% - 2rem)); margin: 0 auto; padding: 2.35rem 0 2rem; } .header-inner h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.45rem); line-height: 1; font-weight: 500; letter-spacing: -.035em; } .header-inner h1 strong { font-weight: 700; } .content-shell { width: min(860px, calc(100% - 2rem)); margin: 0 auto; padding: 2.5rem 0 4rem; } .content-shell .cv-section p { margin: 0 0 .8rem; } .content-shell .cv-section p:last-child { margin-bottom: 0; } .page-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); width: min(var(--content-width), calc(100% - 2rem)); margin: 0 auto; padding: 2.25rem 0 4rem; } .sidebar { min-width: 0; } .sidebar-sticky { position: sticky; top: 1.25rem; max-height: calc(100vh - 2.5rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .sidebar-sticky::-webkit-scrollbar { width: 6px; } .sidebar-sticky::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } .sidebar-sticky::-webkit-scrollbar-track { background: transparent; } .portrait { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow .25s var(--ease); } .contact-lines { margin: 1.1rem 0 0; font-size: .86rem; line-height: 1.75; color: var(--muted); } .link-list { display: flex; flex-direction: column; margin-top: 1.5rem; border-top: 1px solid var(--line); } .link-list a { padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .86rem; text-decoration: none; transition: color .15s var(--ease), padding-left .15s var(--ease); } .link-list a:last-child { border-bottom: none; } .link-list a:hover { color: var(--blue-dark); padding-left: .3rem; } .cv-download { display: inline-block; margin-top: 1.05rem; padding: 0; color: var(--blue); background: none; border: 0; font: inherit; font-size: .8rem; text-decoration: none; cursor: pointer; transition: color .15s var(--ease); } .cv-download[hidden] { display: none; } .cv-download:hover { color: var(--blue-dark); } .cv-download:focus-visible { outline: 3px solid rgb(14 84 132 / 35%); outline-offset: 3px; border-radius: 2px; } /* Section navigation above the profile, listing the headings verbatim. Set as running text so the browser can balance the lines instead of leaving an orphaned second row. Deliberately not sticky — the back-to-top button is the way back up to it. */ .section-nav { margin: 0 0 2.2rem; padding: 0 0 1.05rem; border-bottom: 1px solid var(--line); } .section-nav ul { margin: 0; padding: 0; list-style: none; font-size: .9rem; line-height: 1.95; text-wrap: balance; } .section-nav li { display: inline; white-space: nowrap; } .section-nav li:not(:last-child)::after { content: "·"; margin: 0 .35rem 0 .55rem; color: var(--line); } .section-nav a { color: var(--blue); text-decoration: none; transition: color .15s var(--ease); } .section-nav a:hover { color: var(--blue-dark); } #expertise, #grants { scroll-margin-top: 1rem; } .main-content { min-width: 0; } .cv-section { scroll-margin-top: 1rem; margin-bottom: 3.2rem; } .cv-section > h2, .split-section h2 { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 1rem; color: var(--ink); font-size: clamp(1.45rem, 2.4vw, 1.85rem); line-height: 1.2; font-weight: 500; letter-spacing: -.01em; } .cv-section > h2::after, .split-section h2::after { content: ""; flex: 1; border-top: 1px solid var(--line); } .intro-section p { font-size: 1.04rem; } .timeline { display: grid; gap: 1.15rem; } .timeline-item { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 1.1rem; position: relative; } .timeline-item::before { content: ""; position: absolute; top: 0; bottom: -1.15rem; left: 7.72rem; width: 1px; background: var(--line); } .timeline-item:last-child::before { bottom: 0; } .timeline-date { margin: .1rem 0 0; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; text-align: right; } .timeline-item > div { padding-left: .8rem; } .timeline-item > div::before { content: ""; position: absolute; left: 7.49rem; top: .43rem; width: .48rem; height: .48rem; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--white); } .timeline h3 { margin: 0; font-size: 1.02rem; line-height: 1.4; } .timeline p { margin: .24rem 0 0; } .meta { color: var(--muted); font-size: .82rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; } .split-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 3.8rem); } .compact-list { margin: 0; padding-left: 1.15rem; } .compact-list li { margin: .28rem 0; } .subheading { margin: 1.5rem 0 1rem; color: var(--blue); font-size: 1.05rem; } .section-note { margin: -.6rem 0 1.25rem; color: var(--muted); font-size: .88rem; } .detail-list { margin: .55rem 0 0; padding-left: 1.1rem; } .detail-list li { margin: .28rem 0; } .publications { margin: 0; padding-left: 1.4rem; } .publications li { margin: 0 0 1rem; padding-left: .35rem; } .publications li::marker { color: var(--blue); font-weight: 700; } .print-footer { display: none; } .site-footer { padding: 1.2rem 1rem; color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); text-align: center; font-size: .78rem; } .site-footer p { margin: 0; } /* Running meta lines: keyword-style rows set at text size and separated by middots. Used for both topic keywords and summary figures, so the two read as the same kind of supporting information. */ .meta-line { display: flex; flex-wrap: wrap; gap: .1rem .5rem; margin: 0; padding: 0; color: var(--muted); font-size: .9rem; list-style: none; text-align: left; } .meta-line li:not(:last-child)::after { content: "·"; margin-left: .5rem; color: var(--line); } /* The figure itself carries the weight — no size change, so the line stays an even texture rather than a row of headlines. */ .meta-line b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .figure-line { margin: 1.5rem 0 0; padding-top: 1.05rem; border-top: 1px solid var(--line); } /* Variant for a line that opens a section: the h2 already draws a rule above, so the divider moves to the bottom. */ .figure-line--lead { margin: 0 0 1.6rem; padding: 0 0 1.1rem; border-top: 0; border-bottom: 1px solid var(--line); } .teaching-summary { max-width: 52rem; } .teaching-summary p { margin: 0 0 .75rem; } /* Keyword line in the manner of a paper's keyword list, instead of pills. */ .topic-label { margin: 1.5rem 0 .4rem; } .thesis-list li { margin-bottom: .75rem; } .aside-section { margin-top: -.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); } .aside-label, .topic-label { margin: 0 0 .75rem; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .aside-list { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .88rem; line-height: 1.6; } .aside-list li { margin: .3rem 0; } @media (max-width: 850px) { .page-shell { grid-template-columns: 1fr; gap: 2.2rem; } .sidebar-sticky { position: static; max-height: none; overflow: visible; } /* Portrait and contact details share one row; the text block takes the remaining width so the row never leaves a dead gap on the right. */ .sidebar-top { display: flex; align-items: center; gap: clamp(1rem, 4vw, 1.6rem); } .portrait { flex: 0 0 clamp(112px, 30vw, 152px); width: clamp(112px, 30vw, 152px); } .contact-lines { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .95rem; line-height: 1.85; overflow-wrap: anywhere; } .contact-lines a { display: inline-block; padding: .12rem 0; } /* Aligned rows instead of a ragged wrapped line; two columns only when there is genuinely room for them. */ .link-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); column-gap: clamp(1.25rem, 4vw, 2.5rem); margin-top: 1.6rem; } .link-list a { padding: .7rem 0; font-size: .92rem; } .link-list a, .link-list a:last-child { border-bottom: 1px solid var(--line); } .cv-download { margin-top: 1.2rem; font-size: .9rem; } } @media (max-width: 620px) { .header-inner { padding: 1.8rem 0 1.55rem; } .page-shell { width: min(100% - 1.25rem, var(--content-width)); padding-top: 1.2rem; } .split-section { grid-template-columns: 1fr; gap: 2.5rem; } .timeline-item { grid-template-columns: 1fr; gap: .15rem; } .timeline-date { text-align: left; color: var(--blue); font-weight: 700; } /* The section navigation as two aligned top-down columns; the running middot row wraps too raggedly at phone widths. */ .section-nav ul { column-count: 2; column-gap: 1.4rem; line-height: 1.45; } .section-nav li { display: block; break-inside: avoid; padding: .3rem 0; white-space: normal; } .section-nav li:not(:last-child)::after { content: none; } .timeline-item::before, .timeline-item > div::before { display: none; } .timeline-item > div { padding-left: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .back-to-top { transition: opacity .01ms !important; } } .back-to-top { position: fixed; right: 1.25rem; bottom: max(1.25rem, env(safe-area-inset-bottom) + .75rem); z-index: 40; display: flex; align-items: center; justify-content: center; width: 2.85rem; height: 2.85rem; padding: 0; color: var(--white); background: rgb(14 84 132 / 92%); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); border: 1px solid rgb(255 255 255 / 14%); border-radius: 999px; box-shadow: var(--shadow-lift); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(.5rem) scale(.92); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, background .15s var(--ease); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .back-to-top:hover { background: var(--blue-dark); } .back-to-top:active { transform: scale(.94); } .back-to-top:focus-visible { outline: 3px solid rgb(14 84 132 / 35%); outline-offset: 3px; } .back-to-top svg { width: 1.15rem; height: 1.15rem; } @media print { :root { --content-width: none; } .print-footer { position: fixed; right: 0; bottom: -.1rem; left: 0; display: block; margin: 0; padding: .22rem 0 0; color: var(--muted); background: var(--white); border-top: 1px solid var(--line); font-size: 7.5pt; text-align: right; } body { font-size: 9.5pt; } .site-header { color: var(--ink); background: transparent; border-bottom: 2px solid var(--blue); box-shadow: none; } .header-inner { width: 100%; padding: 0 0 1rem; } .page-shell { display: block; width: 100%; padding: .9rem 0 0; } .sidebar-sticky { position: static; max-height: none; overflow: visible; } .site-footer, .skip-link, .back-to-top, .cv-download, .section-nav { display: none; } /* The sidebar becomes an identity band across the top of page one: portrait and contact side by side, profile links in one wrapped row beneath, and the CV content full width from there on. */ .sidebar { margin-bottom: 1.5rem; } .sidebar-top { display: flex; align-items: center; gap: 1.1rem; } .portrait { width: 88px; flex: 0 0 88px; box-shadow: none; } .contact-lines { flex: 1 1 auto; margin: 0; font-size: 8.5pt; line-height: 1.6; } .link-list { display: flex; flex-flow: row wrap; gap: .1rem 1.1rem; margin-top: .7rem; padding-top: .45rem; } .link-list a, .link-list a:last-child { padding: .1rem 0; font-size: 8pt; border-bottom: none; } .cv-section { margin-bottom: 1.5rem; break-inside: auto; } .timeline-item, .publications li { break-inside: avoid; } .meta-line { font-size: 8.5pt; break-inside: avoid; } .figure-line { margin-top: .9rem; padding-top: .6rem; } .figure-line--lead { margin: 0 0 .9rem; padding: 0 0 .6rem; } .topic-label { margin-top: .9rem; } a { color: inherit; text-decoration: none; } }