/* ========================================================================== /resume — a screen + print rendering of public/Brian_Reed_Resume.pdf. Self-contained: this is the only stylesheet on the route, so it carries its own reset and forces a light "paper" look regardless of the page theme. Fonts (DM Sans / DM Mono) are loaded from Google Fonts in the page . ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink: #0d0d0d; --body: #181818; --muted: #4f4f4f; --faint: #6a6a6a; --rule: #c4c4c4; --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'DM Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace; /* Letter page geometry */ --page-w: 8.5in; --page-h: 11in; --pad-x: 0.7in; --pad-y: 0.6in; } html { background: #e7e5e1; /* Override the shared template's data-theme="dark"; the résumé is paper. */ color-scheme: light; } body { font-family: var(--sans); font-size: 11px; line-height: 1.5; color: var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding: 28px 16px; } /* Each .page is a physical 8.5in × 11in letter sheet. */ .pages { display: flex; flex-direction: column; align-items: center; gap: 24px; } .page { width: var(--page-w); min-height: var(--page-h); max-width: 100%; background: #fff; color: var(--body); padding: var(--pad-y) var(--pad-x); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 8px 28px rgba(0, 0, 0, 0.1); } /* No leading gap above the first block on a page (padding already insets it). */ .page > :first-child { margin-top: 0; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } /* Inline middle-dot separator shared by contact / skills / meta rows. */ .dot { color: var(--faint); margin: 0 0.4em; } .muted { color: var(--muted); } /* ---------- Header ---------- */ .hd { margin-bottom: 18px; } .name { font-family: var(--sans); font-weight: 700; font-size: 36px; line-height: 1.05; letter-spacing: -0.5px; color: var(--ink); } .sub { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.3px; margin-top: 7px; } .contact-line { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 6px; } .contact-line .dot { margin: 0 0.3em; } /* ---------- Section labels ---------- */ .sec-label { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--rule); padding-bottom: 6px; margin-bottom: 11px; } section { margin-top: 18px; } /* ---------- Summary / paragraph text ---------- */ .summary { font-size: 11.5px; line-height: 1.6; color: var(--body); } /* ---------- Skills ---------- */ .skills-grid { display: grid; grid-template-columns: 98px 1fr; row-gap: 7px; column-gap: 14px; } .skills-label { font-family: var(--mono); font-size: 10.5px; color: var(--faint); padding-top: 1px; } .skills-values { font-size: 11.5px; color: var(--ink); line-height: 1.55; } .skills-values .dot { margin: 0 0.35em; } /* ---------- Experience ---------- */ .job { margin-bottom: 13px; page-break-inside: avoid; break-inside: avoid; } .job-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .role { font-weight: 700; font-size: 12.5px; color: var(--ink); } .dates { font-family: var(--mono); font-size: 10.5px; color: var(--faint); white-space: nowrap; flex-shrink: 0; } .job-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; margin-bottom: 5px; } .bullets { list-style: none; } .bullets li { position: relative; padding-left: 15px; font-size: 11.5px; line-height: 1.5; color: var(--body); margin-bottom: 3.5px; } .bullets li::before { content: '–'; position: absolute; left: 0; color: var(--faint); } /* ---------- Compact one-line entries (early career, military) ---------- */ .compact { display: flex; align-items: baseline; gap: 0.35em; font-size: 11.5px; line-height: 1.5; color: var(--body); margin-bottom: 6px; page-break-inside: avoid; break-inside: avoid; } .compact strong, .cert strong { font-weight: 700; color: var(--ink); } .compact .muted { flex: 1; } .compact .dates, .cert .dates { margin-left: auto; padding-left: 1rem; } /* ---------- Certifications ---------- */ .cert { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 11.5px; margin-bottom: 5px; } /* ---------- Intro gate (full-page backdrop on load) ---------- CSS-only: the hidden checkbox is flipped by the "View" label, which hides the gate. Resets on every load, so the gate shows each visit. */ .intro-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .intro-gate { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 13, 10, 0.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: intro-fade 0.25s ease-out; } .intro-toggle:checked ~ .intro-gate { display: none; } @keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } } .intro-card { width: 100%; max-width: 400px; background: #fff; border-radius: 12px; padding: 34px 36px 32px; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4); } .intro-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; } .intro-title { font-family: var(--sans); font-weight: 700; font-size: 26px; letter-spacing: -0.4px; color: var(--ink); } .intro-text { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 8px; } .intro-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; } .intro-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 8px; border: 1px solid var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); background: #fff; cursor: pointer; user-select: none; transition: background 0.15s ease, color 0.15s ease; } .intro-btn:hover { background: #f1efea; text-decoration: none; } .intro-btn-primary { background: var(--ink); color: #fff; } .intro-btn-primary:hover { background: #2a2a2a; color: #fff; } .intro-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* ---------- Print ---------- */ @page { size: letter; margin: 0; } @media print { html, body { background: #fff; } body { padding: 0; } .intro-gate, .intro-toggle { display: none !important; } .pages { display: block; gap: 0; } .page { width: auto; min-height: auto; max-width: none; margin: 0; box-shadow: none; /* Padding stands in for the page margin (@page margin is 0). */ break-after: page; } .page:last-child { break-after: auto; } }