/* Ivan's resume site. * * One stylesheet, three jobs: the screen version, the phone version, and the * printed page. The print block at the bottom is the actual resume a visitor * downloads, so treat it as a deliverable rather than an afterthought — if you * change the layout above, print the page and look at it. * * Colour is set in one place. Light values live on :root; the dark values are * applied either because the visitor's device asked for dark, or because they * pressed the toggle, which sets data-theme on . An explicit choice * always wins over the device preference — hence the :not() guard. */ :root { /* Warm neutrals rather than the blue-grey default, and a deep teal-green in place of #1d4ed8. The stock bright blue reads as software; this is a resume for ten years of customer service and hospitality, and it should look like a person who is calm and good at their job. The neutrals carry a slight warm bias so the page feels like paper instead of a dialog box. */ --ink: #1c1917; --ink-soft: #57534e; --ink-faint: #79716b; --paper: #fdfcfa; --paper-tint: #f6f2ec; --paper-raised: #ffffff; --rule: #e7e1d8; --rule-soft: #f0ebe3; --accent: #155e52; --accent-ink: #ffffff; --accent-soft: #e3eeeb; /* Display for the name and section heads; text for everything else. Both chosen to print well, because this page's main job is to become a PDF. */ --font-display: Newsreader, Georgia, 'Times New Roman', serif; --font-text: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06); --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --radius: 12px; --radius-sm: 8px; --measure: 50rem; --bar: 3.5rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --ink: #ece7e1; --ink-soft: #b9b2a9; --ink-faint: #938c83; --paper: #12110f; --paper-tint: #1a1815; --paper-raised: #1d1b18; --rule: #2e2b27; --rule-soft: #23211d; /* Lifted well off the light value: #155e52 on a dark ground fails contrast for text, and this accent is used for links as well as fills. */ --accent: #5fb9a6; --accent-ink: #10201c; --accent-soft: #1b2b27; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); } } :root[data-theme='dark'] { /* Kept identical to the prefers-color-scheme block above. Two copies is how one of them drifts, and the toggle would then produce a different dark than the operating system does. */ --ink: #ece7e1; --ink-soft: #b9b2a9; --ink-faint: #938c83; --paper: #12110f; --paper-tint: #1a1815; --paper-raised: #1d1b18; --rule: #2e2b27; --rule-soft: #23211d; --accent: #5fb9a6; --accent-ink: #10201c; --accent-soft: #1b2b27; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16.5px/1.65 var(--font-text); -webkit-font-smoothing: antialiased; } .wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; } a { color: var(--accent); } .link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Keyboard users get to the resume without tabbing through the whole bar. */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 0.6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 20; } .skip-link:focus { left: 0; } /* ---- sticky bar --------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* Older browsers with no color-mix still need a solid background, or the bar sits transparent over the text scrolling underneath it. */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { .topbar { background: var(--paper); } } .topbar.is-stuck { border-bottom-color: var(--rule); box-shadow: var(--shadow-sm); } .topbar__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--bar); } .topbar__name { font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; } .topbar.is-stuck .topbar__name { opacity: 1; transform: none; } .topbar__nav { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; margin-right: auto; } .topbar__nav::-webkit-scrollbar { display: none; } .topbar__nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; font-weight: 500; padding: 0.35rem 0.7rem; border-radius: 999px; white-space: nowrap; } .topbar__nav a:hover { color: var(--ink); background: var(--rule-soft); } .topbar__nav a[aria-current='true'] { color: var(--accent); background: var(--accent-soft); } .topbar__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .icon-btn { appearance: none; border: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink-soft); border-radius: 999px; padding: 0.35rem 0.75rem; font: inherit; font-size: 0.85rem; cursor: pointer; white-space: nowrap; } .icon-btn:hover { color: var(--ink); border-color: var(--ink-faint); } /* On a phone the bar has room for the section links or the buttons, not both. The links win: the download sits in the hero and again at the foot. */ @media (max-width: 40rem) { .topbar__name, .icon-btn, #print-top { display: none; } .topbar__nav { margin: 0; } } /* The bar only draws its edge once you have moved off the top, so the page opens as one uninterrupted sheet rather than a strip and then a header. */ .topbar.is-stuck { border-bottom-color: var(--rule); box-shadow: var(--shadow-sm); } .topbar__link { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.35rem 0.05rem; border-bottom: 2px solid transparent; white-space: nowrap; } .topbar__link:hover, .topbar__link:focus-visible { color: var(--accent); border-bottom-color: var(--accent); } .topbar__name { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; } /* ---- hero --------------------------------------------------------------- */ .hero { /* The wash used to bloom from 15% / -8rem, which put its brightest part above the top of the element — so most of what you saw was the flat tint and the header read as an empty band with a name in it. Anchored inside the box now, behind the monogram, so it reads as light falling on the page. Rendering-only, so it is hidden from print. */ background: radial-gradient(46rem 20rem at 8% 42%, var(--accent-soft), transparent 72%), var(--paper-tint); border-bottom: 1px solid var(--rule); /* Tighter at the top, because the sticky bar already sits above it. The old 3.25rem stacked with that bar and left a dead strip before anything began. */ padding: 2.25rem 0 2.25rem; } .hero__id { display: flex; /* Aligned to the top rather than centred: the name plus the headline is taller than the monogram, and centring pushed the monogram down against the headline instead of setting it beside the name. */ align-items: flex-start; gap: 1.25rem; } /* A hairline ring, so the monogram sits on the wash rather than floating in it. */ .avatar { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow-sm); } .avatar { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); /* Set in the display face so the monogram and the name are the same voice. Until 2026-08-28 this rendered as a plain coloured disc, because the CSS centres text that nothing ever wrote — see initialsFrom() in app.js. */ font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; letter-spacing: 0.01em; box-shadow: var(--shadow); } .eyebrow { margin: 0 0 0.4rem; font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); } h1 { margin: 0; font-family: var(--font-display); font-weight: 500; /* A serif at this size does not need negative tracking; the old -0.025em was compensating for a grotesque that is no longer here. */ font-size: clamp(2.1rem, 7vw, 3.15rem); line-height: 1.05; letter-spacing: -0.012em; text-wrap: balance; } .headline { font-size: 1.05rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.002em; margin: 0.45rem 0 0; font-size: clamp(1rem, 3.2vw, 1.18rem); color: var(--ink-soft); text-wrap: balance; } /* Contact details as tappable chips rather than a run-on line. */ .meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; font-size: 0.93rem; } .chip { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--paper-raised); border: 1px solid var(--rule); color: var(--ink-soft); border-radius: 999px; padding: 0.35rem 0.85rem; text-decoration: none; box-shadow: var(--shadow-sm); } a.chip:hover { color: var(--accent); border-color: var(--accent); } .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; } .actions-note { margin: 0.75rem 0 0; min-height: 1.2rem; font-size: 0.9rem; color: var(--ink-faint); } .btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink); border-radius: var(--radius-sm); padding: 0.7rem 1.15rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 0.12s ease, border-color 0.15s ease, color 0.15s ease; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn:active { transform: translateY(1px); } .btn--solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn--solid:hover { color: var(--accent-ink); opacity: 0.92; } .btn--sm { padding: 0.45rem 0.9rem; font-size: 0.9rem; } /* ---- sections ----------------------------------------------------------- */ main { padding: 2.75rem 1.25rem 0; } .section { margin: 0 0 2.75rem; scroll-margin-top: calc(var(--bar) + 1rem); } .section h2 { margin: 0 0 1.25rem; font-size: 0.8rem; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); display: flex; align-items: center; gap: 0.75rem; } /* The rule after the heading, drawn as a line that fills whatever space is left, so the heading never floats over an empty row. */ .section h2::after { content: ''; flex: 1; height: 1px; background: var(--rule); } .lede { margin: 0; font-size: 1.08rem; color: var(--ink-soft); text-wrap: pretty; } /* Experience reads as a timeline: one rail down the left, a marker per job. */ .timeline { position: relative; } .timeline::before { content: ''; position: absolute; left: 0.3rem; top: 0.55rem; bottom: 0.55rem; width: 2px; background: var(--rule); } .timeline .entry { padding-left: 1.75rem; } .timeline .entry::before { content: ''; position: absolute; left: 0; top: 0.5rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); } /* The current job gets a filled marker — a small cue that costs nothing. */ .timeline .entry--current::before { background: var(--accent); } .entry { position: relative; margin: 0 0 1.75rem; } .entry:last-child { margin-bottom: 0; } .entry__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; } .entry h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; letter-spacing: -0.01em; } .dates { margin: 0; color: var(--ink-faint); font-size: 0.86rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .org { margin: 0.15rem 0 0.6rem; color: var(--ink-soft); font-weight: 500; } .entry ul { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); } .entry li { margin: 0.3rem 0; } .entry li::marker { color: var(--ink-faint); } .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .tags li { background: var(--accent-soft); color: var(--ink); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.92rem; font-weight: 500; } /* Education and projects sit in cards rather than on the timeline. */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; } .grid .entry { margin: 0; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.15rem; box-shadow: var(--shadow-sm); } .grid .entry p:last-child { margin-bottom: 0; } /* Prompts shown while the page is still being filled in. Deliberately look unfinished — they are instructions to whoever is editing, not content. */ .hint { color: var(--ink-faint); font-style: italic; } .hint--box { margin: 0; border: 1px dashed var(--rule); border-radius: var(--radius); padding: 0.9rem 1rem; background: var(--paper-tint); } /* ---- footer and the draft bar ------------------------------------------- */ .page-foot { border-top: 1px solid var(--rule); margin-top: 1.5rem; padding-top: 1.5rem; padding-bottom: 3.5rem; color: var(--ink-soft); font-size: 0.92rem; } .references { margin: 0 0 0.75rem; } /* ---- hidden means hidden -------------------------------------------------- The browser's own rule is `[hidden] { display: none }`, and ANY author rule that sets display on the same element beats it — so `.preview-bar { display: flex }` silently un-hid an element the JavaScript had correctly hidden. The result was on Ivan's live resume: every visitor, on a browser that had never edited anything, was told "You are looking at your own unsent draft. Only this browser can see it." The JS was right the whole time — the element carried the hidden attribute — and the CSS overruled it. This rule restores the intent for every element in this stylesheet at once, rather than patching the one that was noticed. Anything given `hidden` is hidden, whatever display it would otherwise have. */ [hidden] { display: none !important; } .preview-bar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; align-items: center; background: var(--accent-soft); border-bottom: 1px solid var(--rule); padding: 0.7rem 1.25rem; font-size: 0.92rem; } .preview-bar__actions { display: flex; gap: 1rem; } /* ---- the editor --------------------------------------------------------- */ .editor { padding-bottom: 4rem; } .editor h2 { margin-top: 2.5rem; } .field { margin: 0 0 1rem; } .field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.3rem; } .field small { display: block; color: var(--ink-faint); font-weight: 400; margin-top: 0.15rem; } input[type="text"], input[type="email"], textarea { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 0.65rem 0.8rem; } input:focus, textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } textarea { min-height: 6rem; resize: vertical; } .card { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem; margin: 0 0 1rem; background: var(--paper-tint); } .card__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.75rem; } .card__head h3 { margin: 0; font-size: 1rem; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } @media (max-width: 34rem) { .row { grid-template-columns: 1fr; } } .sticky-actions { position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--rule); padding: 0.9rem 0; margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } .status { color: var(--ink-soft); font-size: 0.92rem; } /* ---- print: this is the resume ------------------------------------------ */ @media print { :root, :root[data-theme='dark'] { --ink: #000; --ink-soft: #222; --ink-faint: #444; --paper: #fff; --paper-tint: #fff; --paper-raised: #fff; --rule: #bbb; --rule-soft: #ddd; --accent: #000; --accent-soft: #fff; --accent-ink: #fff; --shadow: none; --shadow-sm: none; } @page { margin: 14mm; } body { font-size: 10.5pt; line-height: 1.4; background: #fff; } .no-print, .topbar, .preview-bar, .actions, .actions-note, .avatar, .skip-link, .hint, .eyebrow, noscript { display: none !important; } .wrap { max-width: none; padding: 0; } main { padding: 0; } .hero { background: none; border-bottom: 1px solid #000; padding: 0 0 0.4rem; margin-bottom: 0.9rem; } .hero__id { display: block; } h1 { font-size: 20pt; } .headline { font-size: 11pt; } /* Contact chips print as plain text separated by rules, not as pills. */ .meta { margin-top: 0.35rem; font-size: 9.5pt; gap: 0 0.6rem; } .chip { background: none; border: 0; box-shadow: none; padding: 0; color: #000; } .chip + .chip::before { content: '·'; margin-right: 0.6rem; color: #555; } .section { margin-bottom: 1rem; } .section h2 { font-size: 9pt; margin-bottom: 0.45rem; color: #000; } .section h2::after { background: #000; } /* Keep a job and its bullets together, and never strand a heading at the bottom of a page. */ .entry { margin-bottom: 0.8rem; break-inside: avoid; page-break-inside: avoid; } .section h2, h3 { break-after: avoid; page-break-after: avoid; } .entry ul, .lede, .org { color: #000; } /* The timeline is screen furniture — on paper it wastes the left margin. */ .timeline::before, .timeline .entry::before { display: none; } .timeline .entry { padding-left: 0; } .grid { display: block; } .grid .entry { border: 0; padding: 0; box-shadow: none; background: none; margin-bottom: 0.5rem; } .tags { gap: 0.25rem 0.5rem; } .tags li { background: none; border: 1px solid #999; padding: 0.1rem 0.45rem; font-size: 9.5pt; } a, .link { color: #000; text-decoration: none; } .page-foot { border-top: 1px solid #bbb; padding: 0.5rem 0 0; font-size: 9pt; } }