/* resume.itsnez.com — the real PDF, rendered with PDF.js in a modern viewer shell. Fixed toolbar + one scroll container. never scrolls. */ :root { --chrome-bg: #202124; --chrome-border: #3c4043; --chrome-text: #e8eaed; --chrome-muted: #9aa0a6; --canvas-bg: #525659; /* same grey as Chrome's PDF viewer */ --accent: #8ab4f8; --toolbar-h: 52px; --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; } body { font-family: var(--font); color: var(--chrome-text); background: var(--canvas-bg); -webkit-font-smoothing: antialiased; } .app { height: 100dvh; display: flex; flex-direction: column; } /* ---------------- Toolbar ---------------- */ .toolbar { flex: 0 0 auto; height: calc(var(--toolbar-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; background: var(--chrome-bg); box-shadow: 0 1px 0 var(--chrome-border), 0 2px 8px rgba(0,0,0,.4); z-index: 10; user-select: none; } .toolbar__left { display: flex; align-items: center; min-width: 0; } .toolbar__center { display: flex; align-items: center; gap: 2px; justify-self: center; } .toolbar__right { display: flex; align-items: center; gap: 2px; justify-self: end; } .toolbar__name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toolbar__divider{ width: 1px; height: 22px; background: var(--chrome-border); margin: 0 6px; } .tb-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--chrome-text); cursor: pointer; text-decoration: none; transition: background .12s ease; } .tb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tb-btn:hover { background: rgba(255,255,255,.1); } .tb-btn:active { background: rgba(255,255,255,.18); } .tb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .tb-btn:disabled { opacity: .3; cursor: default; } .tb-btn:disabled:hover { background: transparent; } .page-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; margin: 0 4px; } .page-indicator__input { width: 40px; height: 28px; padding: 0 4px; text-align: center; font: inherit; color: var(--chrome-text); background: rgba(0,0,0,.35); border: 1px solid transparent; border-radius: 4px; -moz-appearance: textfield; } .page-indicator__input::-webkit-outer-spin-button, .page-indicator__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .page-indicator__input:focus { outline: none; border-color: var(--accent); } .page-indicator__sep { color: var(--chrome-muted); } .zoom { display: inline-flex; align-items: center; } .zoom__value { appearance: none; border: 0; background: transparent; color: var(--chrome-text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 54px; height: 28px; padding: 0 6px; border-radius: 4px; cursor: pointer; } .zoom__value:hover { background: rgba(255,255,255,.1); } /* ---------------- Viewer ---------------- */ .viewer { flex: 1 1 auto; min-height: 0; position: relative; overflow-x: auto; overflow-y: scroll; /* always reserve the scrollbar so fit-to-width is stable */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; /* we handle pinch-zoom ourselves */ outline: none; background: var(--canvas-bg); } .doc { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); min-width: max-content; transform-origin: 0 0; /* live pinch preview */ } .page { position: relative; flex: 0 0 auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.15); overflow: hidden; } .page canvas { display: block; } .page.is-loading::after { content: ""; position: absolute; inset: 0; background: #fff; } /* PDF.js text layer — invisible, selectable text on top of the canvas */ .textLayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 1; opacity: 1; } .textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; } .textLayer span.markedContent { top: 0; height: 0; } .textLayer ::selection { background: rgba(0, 100, 255, .35); color: transparent; } .textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: -1; cursor: default; user-select: none; } .textLayer.selecting .endOfContent { top: 0; } .status { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 6px; background: rgba(32,33,36,.9); color: var(--chrome-text); font-size: 13px; pointer-events: none; } .status[hidden] { display: none; } /* ---------------- Mobile ---------------- */ @media (max-width: 640px) { .toolbar { grid-template-columns: 1fr auto; gap: 6px; padding-left: 10px; padding-right: 6px; } .toolbar__center { display: none; } .zoom { display: none; } .toolbar__divider { display: none; } #printBtn { display: none; } .doc { gap: 8px; padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); } .page { box-shadow: 0 1px 2px rgba(0,0,0,.5); } } /* Floating page pill on phones (created by JS) */ .page-pill { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: none; align-items: center; padding: 6px 14px; border-radius: 999px; background: rgba(32,33,36,.9); color: var(--chrome-text); font-size: 13px; font-variant-numeric: tabular-nums; box-shadow: 0 4px 16px rgba(0,0,0,.4); backdrop-filter: blur(6px); z-index: 20; pointer-events: none; transition: opacity .25s ease; } .page-pill.is-hidden { opacity: 0; } @media (max-width: 640px) { .page-pill { display: inline-flex; } } @media (prefers-reduced-motion: reduce) { .page-pill { transition: none; } }