/* ===================================================================== Resume — Modern Minimal Fady Massoud · v2 · May 2026 Single-column, ATS-safe, prints to clean 1–2 page PDF. ===================================================================== */ /* ---------- 1. Palette tokens ---------- */ /* The default palette is graphite + teal — restrained, modern. To swap palettes, change the class on in index.html: class="palette-default" → graphite + teal (recommended) class="palette-navy" → navy + copper (warmer / serious) class="palette-charcoal" → charcoal + sage (calmest) */ :root { /* Default: Graphite + Teal */ --ink: #1F2937; /* primary text */ --ink-strong: #0F172A; /* name + headlines */ --muted: #475569; /* meta, dates, secondary */ --soft: #64748B; /* tertiary, dot separators */ --accent: #0E7490; /* teal-ish accent */ --accent-ink: #155E75; /* darker accent for hover/links */ --rule: #E2E8F0; /* between-role rule */ --rule-strong:#94A3B8; /* main horizontal rule */ --bg: #FFFFFF; --bg-soft: #F8FAFC; } body.palette-navy { --ink: #111827; --ink-strong: #0B1220; --muted: #4B5563; --soft: #6B7280; --accent: #9A3412; /* copper */ --accent-ink: #7C2D12; --rule: #E5E7EB; --rule-strong:#9CA3AF; } body.palette-charcoal { --ink: #1F2937; --ink-strong: #111827; --muted: #4B5563; --soft: #6B7280; --accent: #0F766E; /* sage / muted teal */ --accent-ink: #115E59; --rule: #E5E7EB; --rule-strong:#9CA3AF; } /* ---------- 2. Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; } body { margin: 0; padding: 0; background: var(--bg-soft); color: var(--ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 400; font-size: 10.5pt; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; } a:hover { border-bottom-color: var(--accent); } strong { font-weight: 600; color: var(--ink-strong); } em { font-style: italic; color: var(--muted); } /* ---------- 3. Page frame ---------- */ .resume { max-width: 900px; /* recommended desktop max-width — wider than letter for breathing room */ margin: 0.4in auto; padding: 0.6in 0.6in; /* 57.6px ≈ within recommended 48-64px page padding */ background: var(--bg); box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 8px 32px rgba(15,23,42,0.06); border-radius: 4px; } /* ---------- 4. Header ---------- */ .r-header { margin-bottom: 0.25in; } .r-name { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 800; font-size: 28pt; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink-strong); margin: 0 0 0.08in 0; } .r-headline { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 600; font-size: 12.5pt; color: var(--ink); margin: 0 0 0.04in 0; letter-spacing: -0.005em; } .r-tagline { font-size: 9.5pt; color: var(--accent); font-weight: 500; margin: 0 0 0.12in 0; letter-spacing: 0.01em; } .r-contact { font-size: 9.5pt; color: var(--muted); margin: 0 0 0.04in 0; } .r-contact a { color: var(--muted); } .r-contact a:hover { color: var(--accent-ink); } .r-auth { font-size: 8.5pt; color: var(--soft); font-style: italic; margin: 0; } .dot { color: var(--soft); margin: 0 0.18em; font-weight: 400; } /* ---------- 5. Section rule + section titles ---------- */ .r-rule { border: 0; height: 2px; background: var(--ink-strong); margin: 0.18in 0 0.22in 0; border-radius: 1px; } .r-section { margin-bottom: 32px; /* mid-point of recommended 28-36px section spacing */ } .r-section-title { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 700; font-size: 10pt; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.10in 0; padding-bottom: 0.05in; border-bottom: 1px solid var(--rule); } /* ---------- 6. Summary ---------- */ .r-summary { margin: 0; font-size: 10.5pt; line-height: 1.55; color: var(--ink); text-align: justify; text-justify: inter-word; hyphens: auto; } /* ---------- 7. Skills definition-list ---------- Switched from flex to CSS Grid per the layout-recommendation pass: - 200px label column is the strongest balance for dense executive content - 1fr right column expands to fill the rest, maximising scan-line width - 20px gap separates label from value clearly without crowding Print and tablet media-queries override these grid template values. */ .r-skills { margin: 0; padding: 0; } .r-skill-row { display: grid; grid-template-columns: 200px 1fr; /* recommended fixed-px label column */ gap: 20px; margin: 0 0 0.07in 0; align-items: baseline; page-break-inside: avoid; break-inside: avoid; } .r-skill-row:last-child { margin-bottom: 0; } .r-skills dt { margin: 0; font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 700; /* bumped from 600 → 700 per recommendation */ font-size: 13px; /* recommended 13px desktop label size */ color: var(--ink-strong); line-height: 1.4; } .r-skills dd { margin: 0; font-size: 13px; /* match dt; was 10pt */ line-height: 1.55; /* recommended desktop body line-height */ color: var(--ink); } /* ---------- 8. Experience / Role block ---------- */ /* Don't apply page-break-inside: avoid to the role itself — a role with many bullets won't fit on one page near the bottom, which would force the whole thing to the next page and leave a huge gap. Instead, keep the head with at least one bullet, and keep individual bullets atomic. Handled in print. */ .r-role { margin: 0.05in 0 0.14in 0; } .r-role-head { margin-bottom: 0.06in; page-break-inside: avoid; break-inside: avoid; page-break-after: avoid; break-after: avoid; } .r-role-title-line { display: flex; justify-content: space-between; align-items: baseline; gap: 0.18in; } .r-role-title { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 700; font-size: 11.5pt; color: var(--ink-strong); margin: 0; letter-spacing: -0.005em; } .r-role-dates { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 9.5pt; color: var(--muted); white-space: nowrap; letter-spacing: 0.01em; } .r-role-company { font-size: 10pt; color: var(--muted); margin: 0.02in 0 0.05in 0; font-weight: 500; } .r-bullets { list-style: none; margin: 0; padding: 0; } .r-bullets li { position: relative; padding-left: 0.22in; margin: 0.04in 0; font-size: 10pt; line-height: 1.5; color: var(--ink); page-break-inside: avoid; break-inside: avoid; } .r-bullets li::before { content: "•"; position: absolute; left: 0.06in; top: 0; color: var(--accent); font-weight: 700; font-size: 11pt; } .r-bullets-tight li { margin: 0.025in 0; } .r-role-rule { border: 0; border-top: 1px solid var(--rule); margin: 0.14in 0; } .r-role-earlier .r-earlier-list { font-size: 10pt; line-height: 1.5; /* match .r-bullets li exactly */ color: var(--ink); margin: 0.05in 0 0 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 400; } /* ---------- 9. Education ---------- */ .r-edu { margin: 0.02in 0; font-size: 10pt; color: var(--ink); line-height: 1.5; } /* ---------- 10. Print rules ---------- */ /* Tuned to fit a content-rich senior-engineer resume into ~3 pages on US Letter without looking cramped. All compression is scoped to @media print so the on-screen view stays comfortable. */ @media print { html, body { background: white; font-size: 9.5pt; line-height: 1.42; } .resume { max-width: 100%; margin: 0; padding: 0; box-shadow: none; border-radius: 0; } /* Ensure backgrounds + accent colors print */ *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } /* Hyperlink discipline: keep colored, no underline */ a { color: inherit; border-bottom: none; } /* Page-break behavior: - Section titles stay with their first content - Role heads stay with at least one bullet (and are atomic themselves) - Individual bullets and skill rows are atomic - Roles themselves CAN split between bullets so we don't get huge gaps */ .r-section-title { page-break-after: avoid; break-after: avoid; } .r-role-head { page-break-after: avoid; break-after: avoid; page-break-inside: avoid; break-inside: avoid; } .r-bullets li { page-break-inside: avoid; break-inside: avoid; } .r-skill-row { page-break-inside: avoid; break-inside: avoid; } .r-edu { page-break-inside: avoid; break-inside: avoid; } @page { size: letter; /* Asymmetric margins: top 0.2in — tight, so the name sits near the page edge (saves ~0.15in vs 0.35in) sides 0.5in — comfortable text column bottom 0.35in — keeps standard breathing room for the last line / printer safety */ margin: 0.2in 0.5in 0.35in 0.5in; } /* === Header === Explicit text-align: left on every header element so the printed PDF always renders the name, headline, tagline, contact, and auth lines flush to the left margin — regardless of any inherited or browser- applied alignment. (Mobile centering is scoped to @media max-width and does not leak into @media print.) Header bottom margin tightened from 0.25in to 0.10in for print so the header block doesn't sit way above the horizontal rule. */ .r-header { text-align: left; margin-bottom: 0.10in; } .r-name { font-size: 22pt; line-height: 1.05; text-align: left; margin-top: 0; } .r-headline { font-size: 11pt; margin-bottom: 0.02in; text-align: left; } .r-tagline { font-size: 8.5pt; margin-bottom: 0.06in; text-align: left; } .r-contact { font-size: 8.5pt; margin-bottom: 0.02in; text-align: left; } .r-auth { font-size: 7.5pt; text-align: left; } .r-rule { margin: 0.06in 0 0.08in 0; height: 1.5pt; } /* === Section spacing — CONSISTENT breathing room before AND after each title. Target: ~0.20in visible whitespace before the title text, ~0.21in visible whitespace between the title's underline rule and the content below. */ .r-section { margin-bottom: 0; } .r-section-title { font-size: 9pt; margin: 0.20in 0 0.16in 0; padding-bottom: 0.05in; } .r-section:first-of-type .r-section-title { margin-top: 0.08in; } /* === Force Experience section to start on a new page === Page 1 = header + Summary + Core Competencies. Page 2 = Experience opens fresh — relies on @page top margin for breathing room. */ .r-section--experience { page-break-before: always; break-before: page; } .r-section--experience .r-section-title { margin-top: 0; } /* === Summary === */ .r-summary { font-size: 9.5pt; line-height: 1.42; } /* === Skills (grid per row) === Print-specific grid: recommended 2.0in label column, 0.22in gap between label and value. The grid-template-columns override is what lets each row keep its label flush-left while the dd flexes to fill the remaining width. Fonts stay compact (8.5pt dt, 9pt dd) to preserve the 3-page fit for this content-dense resume. */ .r-skill-row { grid-template-columns: 2.0in 1fr; gap: 0.22in; margin-bottom: 0.035in; padding: 0; } .r-skills dt { font-size: 8.5pt; line-height: 1.35; } .r-skills dd { font-size: 9pt; line-height: 1.40; } /* === Experience roles === */ .r-role { margin-bottom: 0.06in; } .r-role-head { margin-bottom: 0.03in; } .r-role-title { font-size: 10.5pt; } .r-role-dates { font-size: 8.5pt; } .r-role-company { font-size: 9pt; margin: 0; } .r-role-rule { margin: 0.05in 0; } /* === Bullets === */ .r-bullets li { font-size: 9.5pt; line-height: 1.42; margin: 0.015in 0; padding-left: 0.18in; } .r-bullets li::before { font-size: 10pt; left: 0.04in; } .r-bullets-tight li { margin: 0.01in 0; } /* === Education & earlier === .r-earlier-list matches .r-bullets li (9.5pt / 1.42) so the Earlier Experience block reads as the same typeface and rhythm as the bulleted role entries above it. */ .r-edu { font-size: 9pt; line-height: 1.40; margin: 0.015in 0; } .r-earlier-list { font-size: 9.5pt; line-height: 1.42; } } /* ---------- 11. Responsive (web view only) ---------- Breakpoints per layout recommendations: ≤ 768px → tablet / large phone — keep 2-column grid but narrower (140px label) ≤ 640px → small phone — stack vertically (label above value) */ @media (max-width: 768px) { .resume { padding: 20px 18px; margin: 0.2in auto; max-width: 100%; } /* Header on tablet / phone: - Name stays LEFT-aligned (large display type reads best from the left edge). - Headline / tagline / contact / auth are CENTERED so their multi-line wraps look intentionally balanced instead of left-flushed with a ragged right edge and orphan dots at line ends. */ .r-header { text-align: center; } .r-name { font-size: 22pt; text-align: left; } .r-headline { font-size: 11pt; } .r-tagline { font-size: 9pt; } .r-contact { font-size: 9pt; line-height: 1.55; } .r-auth { font-size: 8.5pt; } /* The dot separators were getting margin: 0 0.18em which sometimes left them dangling at line ends on narrow widths. Tighten the margin and let the line-height carry the breathing room. */ .r-header .dot { margin: 0 0.12em; } /* Core Competencies — recommended tablet ratio: 140px label, 14px gap. Grid overrides the desktop 200px / 20px values. */ .r-skill-row { grid-template-columns: 140px 1fr; gap: 14px; } .r-skills dt { font-size: 13px; line-height: 1.35; } .r-skills dd { font-size: 14px; line-height: 1.55; } .r-role-title-line { flex-direction: column; align-items: flex-start; gap: 0.02in; } .r-role-title { font-size: 11pt; } } /* On small phones (≤ 640px), stack the skill rows entirely: label on top, value below — more comfortable than fighting for width. Also shrink the header fonts more aggressively so the headline and tagline don't wrap awkwardly. */ @media (max-width: 640px) { .r-name { font-size: 19pt; letter-spacing: -0.015em; } .r-headline { font-size: 10.5pt; line-height: 1.35; } .r-tagline { font-size: 8.5pt; line-height: 1.4; } .r-contact { font-size: 8.5pt; line-height: 1.5; } .r-auth { font-size: 8pt; } .r-skill-row { display: block; /* stack — label then value */ } .r-skill-row dt { margin-bottom: 6px; font-size: 14px; } .r-skill-row dd { font-size: 14px; line-height: 1.55; } } /* ---------- 12. Print-only helpers ---------- */ .print-only { display: none; } @media print { .print-only { display: initial; } }