/* ========================================================================== cv.marvinbuth.dev — one-page recruiter CV Zero dependencies. Light/dark themes via data-theme on . The print layer is tuned so the whole CV lands on a single A4 page. ========================================================================== */ /* --------------------------------------------------------------- tokens --- */ :root { --bg: #ffffff; --surface: #ffffff; --fg: #111827; --muted: #5b6472; /* 5.98:1 on white */ --accent: #0f172a; --link: #0369a1; /* 5.93:1 on white */ --rule: #d9dee6; --rule-strong: #0f172a; --chip: #f3f4f6; --font-system: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; } html[data-theme="dark"] { --bg: #0b0f1a; --surface: #0f1524; --fg: #e5e7eb; --muted: #a3adbd; --accent: #dbe3ef; --link: #7dd3fc; --rule: #232c3d; --rule-strong: #6b7a90; --chip: #111827; } /* ----------------------------------------------------------------- base --- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-system); font-size: 15px; line-height: 1.45; overflow-wrap: break-word; } h1, h2, h3 { margin: 0; } p, ul { margin: 0; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 50; padding: .55rem .9rem; background: var(--surface); color: var(--fg); border: 1px solid var(--rule); font-weight: 700; } .skip-link:focus { left: 0; } .sheet { max-width: 940px; margin: 0 auto; padding: clamp(18px, 4vw, 34px) clamp(16px, 4vw, 34px) clamp(28px, 5vw, 44px); } /* --------------------------------------------------------------- header --- */ .head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; padding-bottom: .7rem; border-bottom: 2px solid var(--rule-strong); } @media (min-width: 780px) { .head { grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; } .head-side { text-align: right; } } .head-name { font-size: clamp(27px, 4.4vw, 34px); font-weight: 800; letter-spacing: -.01em; line-height: 1.08; } .head-title { margin-top: .28rem; font-size: clamp(15px, 1.9vw, 17.5px); font-weight: 700; color: var(--accent); line-height: 1.25; } .head-focus { margin-top: .3rem; font-size: 11.5px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; color: var(--muted); line-height: 1.45; } .head-contact { list-style: none; padding: 0; font-size: 13px; line-height: 1.85; color: var(--muted); } /* Inline anchors are only as tall as their text (18px), which fails the 24x24 minimum target size. inline-block plus vertical padding fixes both the size and the spacing between the stacked links. Reverted for print. */ .head-contact a { display: inline-block; padding: 3px 0; } .controls { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; } @media (min-width: 780px) { .controls { justify-content: flex-end; } } .control { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--chip); color: var(--fg); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .control:hover { border-color: var(--link); } select.control { appearance: none; padding-right: .7rem; } .control-icon { font-size: 13px; line-height: 1; } /* -------------------------------------------------------------- blocks --- */ .block { margin-top: 1.15rem; } .block-title { margin-bottom: .45rem; padding-bottom: .18rem; border-bottom: 1px solid var(--rule); font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); } .profile { font-size: 14.5px; max-width: 92ch; } /* -------------------------------------------------------- competencies --- */ /* 180px lets all four groups sit on one row from roughly 870px of content width while still collapsing cleanly on tablets and phones. min() keeps the track from ever exceeding a narrow viewport. */ .comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: .55rem 1.3rem; } .comp-title { font-size: 12.5px; font-weight: 800; color: var(--accent); letter-spacing: .01em; } .comp-list { margin-top: .12rem; font-size: 13px; color: var(--fg); line-height: 1.42; } /* ------------------------------------------------------------ experience --- */ .role { margin-top: .6rem; } .role:first-of-type { margin-top: .1rem; } .role-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .9rem; } .role-title { font-size: 14.5px; font-weight: 800; color: var(--accent); line-height: 1.3; } .role-org-inline { font-weight: 700; color: var(--fg); } .role-when { flex: none; font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; } .role-org { font-size: 13.5px; font-weight: 700; color: var(--fg); } .role-meta { font-size: 12px; color: var(--muted); line-height: 1.4; } .role-line { font-size: 13.5px; line-height: 1.42; } .points { margin-top: .2rem; padding-left: 1.05rem; font-size: 13.5px; } .points li { margin: .1rem 0; line-height: 1.42; } /* --------------------------------------------- education / dev / extras --- */ .edu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: .5rem 1.4rem; } .edu-title { font-size: 13.5px; font-weight: 800; color: var(--accent); } .edu-line { font-size: 13px; color: var(--fg); line-height: 1.4; } .edu-when { color: var(--muted); font-weight: 600; } .edu-row { margin-top: .4rem; font-size: 13px; line-height: 1.4; } .edu-label { display: inline-block; min-width: 4.6rem; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } /* ================================================================ print === Single A4 page. Sizes are in pt and deliberately tight; every value below was tuned against the generated PDF until the content fit one sheet with a little slack left over. ========================================================================= */ /* 9mm vertical keeps the browser-generated header/footer bands (Safari draws them at roughly 4-12pt and 828-836pt) clear of the content box while buying height. */ @page { size: A4; margin: 9mm 12mm; } @media print { /* Force the light palette even when the screen theme is dark: the attribute selector has to be repeated or html[data-theme="dark"] wins. */ html, html[data-theme="dark"] { --bg: #ffffff; --surface: #ffffff; --fg: #111111; --muted: #454c58; --accent: #0f172a; --link: #111111; --rule: #b9c1cc; --rule-strong: #0f172a; --chip: transparent; } /* Pin the print font to the Arial metric family. The screen stack starts with ui-sans-serif/system-ui, which resolves to a different face on every OS. SF Pro on macOS renders this document about 9% taller than the Linux fallback it was first measured against, which was enough to push the final section onto a second sheet in Safari. Arial, Helvetica and Liberation Sans/Arimo share metrics, so the printed height is now the same on macOS, Windows and Linux and local measurements are predictive. */ body { background: #fff; font-family: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", Arimo, sans-serif; font-size: 9.5pt; line-height: 1.22; } .sheet { max-width: none; padding: 0; } .no-print, .skip-link, .controls { display: none !important; } a { color: inherit; text-decoration: none; } /* Nothing may break: the whole document is meant to be one page. The legacy page-break-* properties are kept alongside the modern ones for older WebKit. */ .head, .block, .role, .comp, .edu, .points li { break-inside: avoid; page-break-inside: avoid; } h1, h2, h3, .block-title { break-after: avoid; page-break-after: avoid; } /* The screen rule that puts contact details beside the name is behind a min-width media query that a 186mm print column never satisfies, so it has to be restated here — otherwise the header stacks and wastes ~55pt. */ .head { grid-template-columns: minmax(0, 1fr) auto; gap: 4pt 14pt; padding-bottom: 3.5pt; border-bottom-width: 1.4pt; } .head-side { text-align: right; } .head-name { font-size: 19pt; } .head-title { margin-top: .5pt; font-size: 10.6pt; line-height: 1.18; } .head-focus { margin-top: 1pt; font-size: 6.9pt; letter-spacing: .02em; line-height: 1.24; } .head-contact { font-size: 8.2pt; line-height: 1.3; } .head-contact a { display: inline; padding: 0; } .block { margin-top: 5pt; } .block-title { margin-bottom: 1.8pt; padding-bottom: .7pt; font-size: 7.4pt; letter-spacing: .11em; } .profile { font-size: 9.5pt; max-width: none; line-height: 1.22; } .comp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3pt 9pt; } .comp-title { font-size: 8.1pt; } .comp-list { margin-top: .5pt; font-size: 8.3pt; line-height: 1.24; } .role { margin-top: 3pt; } .role:first-of-type { margin-top: 1pt; } .role-head { gap: 0 8pt; } .role-title { font-size: 9.7pt; line-height: 1.18; } .role-when { font-size: 8.1pt; } .role-org { font-size: 9.1pt; } .role-meta { font-size: 7.5pt; line-height: 1.2; } .role-line { font-size: 9.5pt; line-height: 1.22; } .points { margin-top: 1pt; padding-left: 10pt; font-size: 9.5pt; } .points li { margin: 0; line-height: 1.22; } .edu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2pt 12pt; } .edu-title { font-size: 8.9pt; } .edu-line { font-size: 8.6pt; line-height: 1.24; } .edu-row { margin-top: 1.5pt; font-size: 8.6pt; line-height: 1.24; } .edu-label { min-width: 38pt; font-size: 7.1pt; } }