/* The page itself, and the only place it is styled. * * The browser loads this to draw the preview and the export loads the same * file, which is what stops "what I saw" and "what downloaded" from drifting * apart. Templates never add selectors here — render() emits a block of custom * properties and the knobs below switch on data attributes. That is how ten * templates, and the 288 combinations behind them, stay one stylesheet. * * Paper is white because paper is white. The site around it is near-black; * that contrast is the editor, not the document. */ /* The page is rendered inside pages that have their own stylesheet, and those set things like `p { color: … }` site-wide. Left alone, a paragraph inside a resume inherits the website's grey — which on the dark sidebar of Slate came out at a contrast ratio of 1.88:1, effectively invisible. * * `:where()` keeps this at the specificity of a bare element selector, so it * beats the host page's rule by load order and loses to every rule below that * actually means to colour something. */ :where(.paper) p, :where(.paper) ul, :where(.paper) li, :where(.paper) h1, :where(.paper) h2, :where(.paper) span { color: inherit; } .paper { /* Fallbacks only — render() overrides every one of these from the design. */ --page-w: 794px; /* A4 at 96dpi */ --page-h: 1123px; --margin-top: 48px; --margin-side: 52px; --margin-bottom: 48px; --accent: #2b4a7a; --ink: #16181d; --ink-dim: #4b5262; --scale: 1; --line: 1.45; --gap-section: 18px; --side-w: 0px; --font-head: 'Helvetica Neue', Helvetica, 'Liberation Sans', Arial, sans-serif; --font-body: 'Helvetica Neue', Helvetica, 'Liberation Sans', Arial, sans-serif; --gap-item: calc(var(--gap-section) * 0.55); --size-name: calc(25px * var(--scale)); --size-head: calc(12px * var(--scale)); --size-body: calc(10.5px * var(--scale)); --size-small: calc(9.5px * var(--scale)); --side-bg: color-mix(in srgb, var(--accent) 7%, #fff); position: relative; width: var(--page-w); height: var(--page-h); padding: var(--margin-top) var(--margin-side) var(--margin-bottom); box-sizing: border-box; overflow: hidden; background: #fff; color: var(--ink); font: var(--size-body)/var(--line) var(--font-body); /* Resume text is small and dark on white. Antialiasing it the way the rest of the site is antialiased makes it look lighter than it will print. */ -webkit-font-smoothing: auto; } /* The measuring pass needs every block laid out at its real width but with no page boundary cutting it off. Same width, same fonts, unbounded height. */ .paper.measuring { height: auto; min-height: 0; overflow: visible; position: absolute; left: -10000px; top: 0; visibility: hidden; } .paper[data-density="compact"] { --line: 1.28; --gap-section: 12px; } /* ------------------------------------------------------------------ sheet */ .sheet { display: block; } .sheet.two { display: grid; grid-template-columns: var(--side-w) 1fr; column-gap: calc(var(--margin-side) * 0.42); align-items: start; } .sheet.two.sidebar-right { grid-template-columns: 1fr var(--side-w); } .sheet.two.sidebar-right .col-side { order: 2; } .col-side { background: var(--side-bg); /* The tint bleeds out through the side and bottom margins, or it reads as a stray grey box floating in the page. It does NOT bleed upward: the header spans the full width above it, and pulling the tint up put a panel over the candidate's own headline. */ margin: 0 0 calc(var(--margin-bottom) * -1); padding: 2px calc(var(--margin-side) * 0.45) var(--margin-bottom); /* Taller than any page, and clipped by the page box. That is what makes the tint reach the bottom edge whatever the content does. */ min-height: var(--page-h); font-size: var(--size-small); } /* On a continuation page there is no header, so the tint does start at the top. */ .paper > .sheet:first-child .col-side { margin-top: calc(var(--margin-top) * -1); padding-top: var(--margin-top); } .sheet.two.sidebar-left .col-side { margin-left: calc(var(--margin-side) * -1); padding-left: var(--margin-side); } .sheet.two.sidebar-right .col-side { margin-right: calc(var(--margin-side) * -1); padding-right: var(--margin-side); } /* ------------------------------------------------------------------- head */ /* The contact block is in the body of the document and never in a printed header region: parsers routinely ignore that region, and a resume that arrives without a phone number has failed at the only thing it does. */ .doc-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: var(--gap-section); } .head-text { flex: 1; min-width: 0; } .name { margin: 0; font-family: var(--font-head); font-size: var(--size-name); line-height: 1.12; font-weight: 700; letter-spacing: -0.2px; } .name .ph { color: #b9bec9; font-weight: 500; } .headline { margin: 3px 0 0; font-size: calc(var(--size-body) * 1.08); color: var(--ink-dim); } .contact { margin: 7px 0 0; font-size: var(--size-small); color: var(--ink-dim); } .contact .sep { padding: 0 6px; opacity: 0.5; } /* stacked — the default: name, headline, contact, one under the other. */ /* split — contact moves to the right of the name, on the same line. */ .head-split .head-text { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 20px; } .head-split .name { grid-column: 1; } .head-split .headline { grid-column: 1; } .head-split .contact { grid-column: 2; grid-row: 1 / span 2; text-align: right; margin-top: 0; } .head-split .contact .sep { display: block; height: 0; overflow: hidden; } .head-split .contact { display: flex; flex-direction: column; gap: 2px; } /* banner — a coloured band behind the name, bled to the page edge. */ .head-banner { background: var(--accent); color: #fff; margin: calc(var(--margin-top) * -1) calc(var(--margin-side) * -1) var(--gap-section); padding: calc(var(--margin-top) * 1.1) var(--margin-side) calc(var(--margin-top) * 0.95); } .head-banner .headline, .head-banner .contact { color: rgba(255,255,255,0.85); } /* bordered — a rule under the whole header block. */ .head-bordered { border-bottom: 2px solid var(--accent); padding-bottom: 12px; } .photo { flex: 0 0 auto; width: 84px; height: 84px; overflow: hidden; background: #e9ecf1; } .photo-circle { border-radius: 50%; } .photo-square { border-radius: 6px; } .photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .head-banner .photo-empty { background: rgba(255,255,255,0.25); } /* --------------------------------------------------------------- headings */ .sec-head { margin: var(--gap-section) 0 7px; font-family: var(--font-head); font-size: var(--size-head); font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: var(--accent); } .col > .sec-head:first-child, .doc-head + .sheet .col > .sec-head:first-child { margin-top: 0; } .paper[data-rule="underline"] .sec-head { border-bottom: 1px solid currentColor; padding-bottom: 3px; } .paper[data-rule="bar"] .sec-head { background: var(--accent); color: #fff; padding: 3px 8px; margin-left: -8px; margin-right: -8px; } .paper[data-rule="accent-left"] .sec-head { border-left: 3px solid var(--accent); padding-left: 8px; } /* rule="none" adds nothing, which is the point of it. */ /* ------------------------------------------------------------------ items */ .item { margin-top: var(--gap-item); } .col > .item:first-child, .sec-head + .item { margin-top: 0; } .item-top { display: flex; align-items: baseline; gap: 16px; } .item-titles { flex: 1; min-width: 0; } .item-a { font-weight: 700; } .item-b { color: var(--ink-dim); } .item-a + .item-b::before { content: ' — '; } .item-when { flex: 0 0 auto; text-align: right; font-size: var(--size-small); color: var(--ink-dim); white-space: nowrap; } .item-where::before { content: ' · '; } /* A sidebar is too narrow for a date on the right of a title. */ .col-side .item-top { display: block; } .col-side .item-when { text-align: left; white-space: normal; } .bul { margin: 4px 0 0; padding-left: 16px; } .bul li { margin: 2px 0; } /* A bullet is ordinary prose and already wraps at its spaces — this is only for the one token that has none: a long link a[href] carries as its own visible text (a URL used as itself), which would otherwise run past the margin rather than break, since nothing about *that* token is a word boundary a browser would wrap on by default. */ .bul li, .summary, .rt-list li { overflow-wrap: break-word; word-break: break-word; } /* The continuation of an item cut across a page carries no repeated title, so it needs its own top spacing. */ .item[data-part] { margin-top: 0; } .summary { margin: 0; } /* A sub-list inside the profile paragraph — the one place free-form prose can carry its own bullet points, distinct from .bul's per-item list. */ .rt-list { margin: 4px 0 0; padding-left: 16px; } .rt-list li { margin: 2px 0; } .skill { margin: 3px 0; } .skill-group { font-weight: 700; } .skill-group::after { content: ':'; } .col-side .skill { margin: 5px 0; } .col-side .skill-group { display: block; } .col-side .skill-group::after { content: ''; } .page-num { position: absolute; right: var(--margin-side); bottom: calc(var(--margin-bottom) * 0.42); font-size: calc(var(--size-small) * 0.9); color: #9aa1ad; } /* --------------------------------------------------- the ATS-safe export */ /* Not a template — a refusal. Whatever the design says, this is one column, standard headings and no decoration, because that is what parses. */ .paper.ats { --side-w: 0px; } .paper.ats .sheet { display: block; } .paper.ats .col-side { background: none; margin: 0; padding: 0; min-height: 0; font-size: var(--size-body); } .paper.ats .head-banner { background: none; color: var(--ink); margin: 0 0 var(--gap-section); padding: 0; } .paper.ats .head-banner .headline, .paper.ats .head-banner .contact { color: var(--ink-dim); } .paper.ats .photo { display: none; } .paper.ats .sec-head { background: none; color: var(--ink); border-left: 0; padding-left: 0; margin-left: 0; margin-right: 0; border-bottom: 1px solid var(--ink); padding-bottom: 3px; } /* ------------------------------------------------------------------ print */ @media print { @page { margin: 0; } .paper { box-shadow: none !important; margin: 0 !important; /* Each composed page is one printed page. The last must not emit a break, or every PDF ends on a blank sheet. */ break-after: page; page-break-after: always; } .paper:last-of-type { break-after: auto; page-break-after: auto; } .paper.measuring { display: none !important; } } /* ========================================================================== The templates. The knobs above decide structure — columns, where the header sits, whether a heading has a rule. They are not enough on their own: ten designs that differ only by a border are ten of the same design, which is what the first pass produced and what a filled preview made obvious. What actually separates one resume template from another is typography — the size and weight of the name, how the headings are set, where the dates sit, and how much air there is. That lives here, one block per template. ========================================================================== */ /* ---------------------------------------------------------------- plain */ /* The baseline: sans throughout, accent headings under a hairline. Nothing to argue with, which is the whole brief. */ .paper[data-template="plain"] { --size-name: calc(26px * var(--scale)); } .paper[data-template="plain"] .sec-head { letter-spacing: 1.2px; } /* ----------------------------------------------------------- quiet serif */ /* Centred. That one decision changes the whole document — a centred header and centred rules read as a printed programme rather than a form, which is the register senior and traditional roles are read in. */ .paper[data-template="quiet"] { --size-name: calc(32px * var(--scale)); --size-head: calc(10px * var(--scale)); --gap-item: calc(var(--gap-section) * 0.7); } .paper[data-template="quiet"] .doc-head { display: block; text-align: center; } .paper[data-template="quiet"] .name { font-weight: 500; letter-spacing: -0.6px; } .paper[data-template="quiet"] .headline { font-style: italic; margin-top: 5px; } .paper[data-template="quiet"] .contact { margin-top: 9px; } .paper[data-template="quiet"] .sec-head { color: var(--ink); letter-spacing: 3px; font-weight: 600; text-align: center; margin-bottom: 11px; /* A hairline either side of the word, rather than under it. */ display: flex; align-items: center; gap: 12px; } .paper[data-template="quiet"] .sec-head::before, .paper[data-template="quiet"] .sec-head::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .35; } .paper[data-template="quiet"] .item-a { font-weight: 600; } /* ----------------------------------------------------------------- rule */ /* Heading bars, bled to the text edge, and tight rows beneath them. Built for a resume with a lot in it. */ .paper[data-template="rule"] { --size-name: calc(24px * var(--scale)); --size-head: calc(10.5px * var(--scale)); } .paper[data-template="rule"] .sec-head { letter-spacing: 1.6px; } .paper[data-template="rule"] .item-a { text-transform: none; } .paper[data-template="rule"] .bul li { margin: 1px 0; } /* --------------------------------------------------------------- ledger */ /* The one genuinely different layout: dates move to a column of their own on the left, so the eye reads down a single line of years. Finance and law set documents this way and recognise it. */ .paper[data-template="ledger"] { --size-name: calc(27px * var(--scale)); --size-head: calc(10px * var(--scale)); } .paper[data-template="ledger"] .name { font-weight: 600; } .paper[data-template="ledger"] .sec-head { border-bottom: 0; border-top: 2px solid var(--accent); padding: 7px 0 0; letter-spacing: 1.8px; color: var(--ink); } .paper[data-template="ledger"] .col-main .item-top { display: grid; grid-template-columns: 104px 1fr; align-items: baseline; gap: 0; } .paper[data-template="ledger"] .col-main .item-when { order: -1; text-align: left; white-space: normal; font-variant-numeric: tabular-nums; } .paper[data-template="ledger"] .col-main .item-where { display: block; } .paper[data-template="ledger"] .col-main .item-where::before { content: ''; } .paper[data-template="ledger"] .col-main .bul { margin-left: 104px; padding-left: 14px; } /* ---------------------------------------------------------------- dense */ /* Run-in headings: the section title sits on the same line as the first entry instead of above it. That is a line and a half saved per section, which over six sections is most of the reason a fourth job fits. */ .paper[data-template="dense"] { --size-name: calc(20px * var(--scale)); --size-head: calc(9px * var(--scale)); --size-body: calc(9.6px * var(--scale)); --gap-item: 4px; --gap-section: 11px; } .paper[data-template="dense"] .sec { display: grid; grid-template-columns: 88px 1fr; column-gap: 12px; align-items: start; } .paper[data-template="dense"] .sec-head { grid-column: 1; margin: 0; padding: 2px 0 0; border-bottom: 0; border-right: 2px solid var(--accent); padding-right: 10px; text-align: right; letter-spacing: 1px; align-self: stretch; } .paper[data-template="dense"] .sec > :not(.sec-head) { grid-column: 2; } .paper[data-template="dense"] .doc-head { padding-bottom: 6px; border-bottom: 2px solid var(--accent); } .paper[data-template="dense"] .headline { margin-top: 1px; } .paper[data-template="dense"] .contact { margin-top: 3px; } .paper[data-template="dense"] .bul { margin-top: 2px; } .paper[data-template="dense"] .bul li { margin: 0.5px 0; } /* ---------------------------------------------------------------- first */ /* Hanging headings: the section title sits out in a left gutter with the content beside it. Still one column in reading order — a parser sees heading then content, exactly as it would in Plain — but it looks nothing like it, and the extra air suits a resume that does not have ten years in it yet. */ .paper[data-template="first"] { --size-name: calc(30px * var(--scale)); --size-head: calc(10.5px * var(--scale)); --size-body: calc(11px * var(--scale)); --gap-item: calc(var(--gap-section) * 0.7); } .paper[data-template="first"] .sec { display: grid; grid-template-columns: 118px 1fr; column-gap: 18px; align-items: start; } .paper[data-template="first"] .sec-head { grid-column: 1; margin: 2px 0 0; border-bottom: 0; padding: 0; text-align: right; letter-spacing: 1.4px; color: var(--accent); } .paper[data-template="first"] .sec > :not(.sec-head) { grid-column: 2; } .paper[data-template="first"] .doc-head { border-bottom: 3px solid var(--accent); padding-bottom: 14px; } .paper[data-template="first"] .name { letter-spacing: -0.4px; } /* --------------------------------------------------------------- accent */ /* Colour where a parser never looks: a full-bleed band behind the name, and a bar beside each heading. */ .paper[data-template="accent"] { --size-name: calc(28px * var(--scale)); } .paper[data-template="accent"] .name { font-weight: 600; } .paper[data-template="accent"] .sec-head { letter-spacing: 1.4px; } /* ------------------------------------------------- margin, panel, portrait */ /* Three sidebar templates that were the same page with the tint at a different opacity. A filled preview made that obvious, so they are three different ideas now: a rule, a panel, and a portrait. All three get a wider narrow column — 232px was tight enough that a skill list wrapped every line, which reads as a mistake rather than a layout. */ .paper[data-columns="sidebar-left"], .paper[data-columns="sidebar-right"] { --side-w: 248px; } .paper[data-template="margin"], .paper[data-template="panel"], .paper[data-template="portrait"] { --size-name: calc(25px * var(--scale)); } .paper[data-template="margin"] .col-side .sec-head, .paper[data-template="panel"] .col-side .sec-head, .paper[data-template="portrait"] .col-side .sec-head { font-size: calc(var(--size-head) * 0.9); letter-spacing: 1.3px; } .paper[data-template="margin"] .col-side .skill-group, .paper[data-template="panel"] .col-side .skill-group, .paper[data-template="portrait"] .col-side .skill-group { color: var(--ink); margin-bottom: 1px; } /* margin — no fill at all. A hairline divides the columns and the narrow one is simply set quieter. Cleaner than a tint, and it prints on any printer. */ .paper[data-template="margin"] .col-side { background: none; padding-left: 0; padding-right: calc(var(--margin-side) * 0.55); margin-left: 0; border-right: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink-dim); } .paper[data-template="margin"] .col-side .sec-head { color: var(--ink); } .paper[data-template="margin"] .sheet.two { column-gap: calc(var(--margin-side) * 0.55); } /* panel — the tint is the idea, so it is strong enough to be one, and the headings sit on it rather than under a rule. */ .paper[data-template="panel"] { --side-bg: color-mix(in srgb, var(--accent) 12%, #fff); } .paper[data-template="panel"] .col-side .sec-head { border-bottom: 0; color: var(--accent); margin-bottom: 4px; } .paper[data-template="panel"] .col-side .skill { margin: 2px 0 8px; } /* portrait — the photo leads, and the column under it is tinted faintly so the picture is the thing that stands out rather than the panel. */ .paper[data-template="portrait"] { --side-bg: color-mix(in srgb, var(--accent) 6%, #fff); } .paper[data-template="portrait"] .doc-head { align-items: center; } .paper[data-template="portrait"] .photo { width: 96px; height: 96px; } .paper[data-template="portrait"] .col-side .sec-head { border-bottom-color: color-mix(in srgb, var(--accent) 30%, transparent); } /* ========================================================================== The second set. These are layouts rather than typefaces. The first ten differed by type and spacing, which is a real difference on paper and an invisible one in a thumbnail — so each of these changes the shape of the page. ========================================================================== */ /* The monogram is emitted by every template and shown by one. */ .monogram { display: none; } .paper[data-template="monogram"] .monogram { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 62px; height: 62px; background: var(--accent); color: #fff; font-family: var(--font-head); font-size: calc(23px * var(--scale)); font-weight: 600; letter-spacing: 1px; } /* ---------------------------------------------------------------- slate */ /* A filled column rather than a tinted one. The strongest thing in the set, and the reason it is marked caution: a parser reading straight across the page meets white-on-dark text where it expected a margin. */ .paper[data-template="slate"] { --side-bg: var(--accent); --size-name: calc(26px * var(--scale)); } .paper[data-template="slate"] .col-side { color: rgba(255,255,255,0.86); /* It does NOT reach up through the header. The header spans the full width above the columns, so pulling the fill up put a dark panel across the candidate's own email address — the same mistake the tinted sidebars made, and more obvious here because the fill is opaque. */ padding-top: 10px; } .paper[data-template="slate"] .doc-head { border-bottom: 2px solid var(--accent); } .paper[data-template="slate"] .col-side .sec-head { color: #fff; border-bottom-color: rgba(255,255,255,0.28); } .paper[data-template="slate"] .col-side .skill-group, .paper[data-template="slate"] .col-side .item-a { color: #fff; } .paper[data-template="slate"] .col-side .item-b, .paper[data-template="slate"] .col-side .item-when { color: rgba(255,255,255,0.65); } .paper[data-template="slate"] .doc-head { padding-bottom: 10px; } /* -------------------------------------------------------------- timeline */ /* A rule down the years with a mark at each role. Drawn with a border and a pseudo-element, so the reading order is untouched — a parser sees the same heading, the same title, the same bullets. */ .paper[data-template="timeline"] { --size-name: calc(26px * var(--scale)); } .paper[data-template="timeline"] .sec-experience, .paper[data-template="timeline"] .sec-projects { padding-left: 20px; } .paper[data-template="timeline"] .sec-experience .item, .paper[data-template="timeline"] .sec-projects .item { position: relative; border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); padding-left: 18px; margin-left: 4px; padding-bottom: 6px; } .paper[data-template="timeline"] .sec-experience .item::before, .paper[data-template="timeline"] .sec-projects .item::before { content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff; } .paper[data-template="timeline"] .sec-experience .sec-head, .paper[data-template="timeline"] .sec-projects .sec-head { margin-left: -20px; } /* ----------------------------------------------------------------- grid */ /* Every section in a box. Borders, not tables — the markup is the same sequence of headings and paragraphs it always was. */ .paper[data-template="grid"] { --size-name: calc(24px * var(--scale)); --gap-section: 10px; } .paper[data-template="grid"] .sec { border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 3px; padding: 9px 12px 11px; margin-top: var(--gap-section); } .paper[data-template="grid"] .sec { border-color: color-mix(in srgb, var(--accent) 35%, transparent); padding: 0 0 11px; overflow: hidden; } .paper[data-template="grid"] .sec > :not(.sec-head) { margin-left: 12px; margin-right: 12px; } .paper[data-template="grid"] .sec-head { margin: 0 0 9px; letter-spacing: 1.4px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); padding: 6px 12px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); } .paper[data-template="grid"] .doc-head { margin-bottom: 4px; } /* ------------------------------------------------------------- monogram */ .paper[data-template="monogram"] { --size-name: calc(27px * var(--scale)); } .paper[data-template="monogram"] .doc-head { align-items: center; gap: 16px; } .paper[data-template="monogram"] .sec-head { color: var(--ink); letter-spacing: 2px; } /* ---------------------------------------------------------------- block */ /* The name sits in a colour block, contact beside it. The block stops at the text edge rather than bleeding, which keeps it looking deliberate. */ .paper[data-template="block"] { --size-name: calc(26px * var(--scale)); } .paper[data-template="block"] .doc-head { align-items: stretch; gap: 0; } .paper[data-template="block"] .head-text { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 20px; } .paper[data-template="block"] .name { background: var(--accent); color: #fff; padding: 20px 24px; grid-row: 1 / span 2; align-self: start; margin-left: calc(var(--margin-side) * -1); padding-left: var(--margin-side); } .paper[data-template="block"] .headline { grid-column: 2; margin: 0 0 2px; } .paper[data-template="block"] .contact { grid-column: 2; margin: 0; } .paper[data-template="block"] .sec-head { color: var(--accent); letter-spacing: 1.6px; border-bottom: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); padding-bottom: 3px; } /* ----------------------------------------------------------------- edge */ /* A band down the left edge of the sheet. Decoration outside the text column, so it costs a parser nothing at all. */ .paper[data-template="edge"] { --size-name: calc(26px * var(--scale)); } .paper[data-template="edge"]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 26px; background: var(--accent); } .paper[data-template="edge"] .sheet, .paper[data-template="edge"] .doc-head { margin-left: 22px; } .paper[data-template="edge"] .sec-head { border-left-width: 4px; } /* ------------------------------------------------------------ corporate */ /* No colour anywhere, a centred name set small, and rules that do the work. The register a bank or a chambers reads documents in. */ .paper[data-template="corporate"] { --size-name: calc(21px * var(--scale)); --size-head: calc(9.5px * var(--scale)); } .paper[data-template="corporate"] .doc-head { display: block; text-align: center; /* A double rule, the oldest mark of a formal document there is. */ border-bottom: 3px double var(--ink); padding-bottom: 10px; } .paper[data-template="corporate"] .name { letter-spacing: 3px; font-weight: 600; } .paper[data-template="corporate"] .headline { margin-top: 4px; font-size: var(--size-small); } .paper[data-template="corporate"] .sec-head { color: var(--ink); letter-spacing: 2.2px; border-bottom: 0; border-top: 1px solid var(--ink); padding: 6px 0 0; } /* ------------------------------------------------------------ editorial */ /* The name at a size nothing else on the page competes with, and headings whose rule runs all the way to the margin. */ .paper[data-template="editorial"] { --size-name: calc(42px * var(--scale)); --size-head: calc(9.5px * var(--scale)); } .paper[data-template="editorial"] .name { font-weight: 400; letter-spacing: -1.4px; line-height: 1; } .paper[data-template="editorial"] .headline { margin-top: 8px; font-size: var(--size-body); } .paper[data-template="editorial"] .doc-head { padding-bottom: 12px; } .paper[data-template="editorial"] .sec-head { display: flex; align-items: center; gap: 10px; color: var(--accent); letter-spacing: 2.6px; } .paper[data-template="editorial"] .sec-head::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .4; } /* ----------------------------------------------------------------- mono */ /* Wide-spaced capitals, hairlines, and dates that line up because the figures are tabular. Reads like a specification, which suits the people it is for. */ .paper[data-template="mono"] { --size-name: calc(22px * var(--scale)); --size-head: calc(9px * var(--scale)); } .paper[data-template="mono"] .name { letter-spacing: 2px; font-weight: 600; text-transform: uppercase; } .paper[data-template="mono"] .sec-head { color: var(--ink-dim); letter-spacing: 4px; font-weight: 500; border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); } .paper[data-template="mono"] .item-when { font-variant-numeric: tabular-nums; } .paper[data-template="mono"] .item-a { font-weight: 600; letter-spacing: .2px; } /* ---------------------------------------------------------------- brief */ /* Contact in a column of its own on the right, and everything else pulled in tight. For one page when one page is genuinely all there is. */ .paper[data-template="brief"] { --size-name: calc(23px * var(--scale)); --size-head: calc(9.5px * var(--scale)); --gap-item: 5px; } .paper[data-template="brief"] .head-text { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: end; } .paper[data-template="brief"] .name { grid-column: 1; } .paper[data-template="brief"] .headline { grid-column: 1; } .paper[data-template="brief"] .contact { grid-column: 2; grid-row: 1 / span 2; margin: 0; text-align: right; display: flex; flex-direction: column; gap: 2px; } .paper[data-template="brief"] .contact .sep { display: none; } .paper[data-template="brief"] .sec-head { letter-spacing: 1.6px; padding-bottom: 2px; } /* ========================================================================== The third set. Written after twenty templates still read as one document. The cause was restraint: everything stayed one column, black on white, with hairlines, because that is what parses cleanest. These use the levers that actually separate one page from another — a large field of colour, a different column ratio, a different type scale — and two of them change the order of the sections, which no amount of CSS can do. ========================================================================== */ /* ----------------------------------------------------------------- hero */ /* A quarter of the page is the header. Nothing else on the sheet competes with the name, which is the entire idea. */ .paper[data-template="hero"] { --size-name: calc(40px * var(--scale)); --size-head: calc(10.5px * var(--scale)); } .paper[data-template="hero"] .head-banner { padding: calc(var(--margin-top) * 1.6) var(--margin-side) calc(var(--margin-top) * 1.3); margin-bottom: calc(var(--gap-section) * 1.3); } .paper[data-template="hero"] .name { font-weight: 700; letter-spacing: -1.2px; line-height: 1.02; } .paper[data-template="hero"] .headline { margin-top: 10px; font-size: calc(var(--size-body) * 1.25); color: rgba(255,255,255,0.9); } .paper[data-template="hero"] .contact { margin-top: 12px; } .paper[data-template="hero"] .sec-head { letter-spacing: 2px; } /* ------------------------------------------------------------------ duo */ /* Two columns of equal weight. A sidebar is a margin with things in it; this is a page in two halves, which reads completely differently. */ .paper[data-template="duo"] { --side-w: 46%; --size-name: calc(24px * var(--scale)); } .paper[data-template="duo"] .sheet.two { grid-template-columns: var(--side-w) 1fr; column-gap: calc(var(--margin-side) * 0.62); } .paper[data-template="duo"] .col-side { background: none; margin: 0; padding: 0; min-height: 0; font-size: var(--size-body); border-right: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); padding-right: calc(var(--margin-side) * 0.62); } .paper[data-template="duo"] .col-side .item-top { display: flex; } .paper[data-template="duo"] .col-side .sec-head { color: var(--accent); } .paper[data-template="duo"] .doc-head { border-bottom: 2px solid var(--accent); padding-bottom: 10px; } /* ---------------------------------------------------------------- chips */ /* Skills as tags. The markup is unchanged — a parser still reads a comma separated list, because the comma is still there, just not shown. */ .paper[data-template="chips"] { --size-name: calc(25px * var(--scale)); } .paper[data-template="chips"] .sec-skills .skill { margin: 6px 0; } .paper[data-template="chips"] .sec-skills .skill-list { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: top; } .paper[data-template="chips"] .sec-skills .kw { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px; padding: 1px 8px; color: var(--accent); } .paper[data-template="chips"] .sec-skills .kwsep { /* Kept for the text layer, hidden from the eye. The PDF still contains "Go, Python, SQL" when a parser extracts it. */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .paper[data-template="chips"] .sec-head { color: var(--accent); letter-spacing: 1.8px; } /* -------------------------------------------------------------- fresher */ /* Education first, skills next, and set large. A first CV is short, and a short document in a dense layout looks like one that ran out of things to say. The order is carried by the template, not by this stylesheet. */ .paper[data-template="fresher"] { --size-name: calc(30px * var(--scale)); --size-head: calc(11.5px * var(--scale)); --size-body: calc(11px * var(--scale)); --gap-item: calc(var(--gap-section) * 0.7); } .paper[data-template="fresher"] .doc-head { background: color-mix(in srgb, var(--accent) 9%, #fff); margin: calc(var(--margin-top) * -1) calc(var(--margin-side) * -1) var(--gap-section); padding: var(--margin-top) var(--margin-side) calc(var(--margin-top) * 0.7); } .paper[data-template="fresher"] .sec-head { color: var(--accent); border-bottom-width: 2px; letter-spacing: 1.2px; } /* ------------------------------------------------------------- academic */ /* Education, then what was built and published. Serif, tight, and no colour — a document that looks like it belongs in a department. */ .paper[data-template="academic"] { --size-name: calc(24px * var(--scale)); --size-head: calc(10px * var(--scale)); --gap-section: 13px; } .paper[data-template="academic"] .doc-head { display: block; text-align: center; border-bottom: 3px double color-mix(in srgb, var(--ink) 55%, transparent); padding-bottom: 9px; } .paper[data-template="academic"] .name { font-weight: 500; letter-spacing: 0.5px; } .paper[data-template="academic"] .headline { font-style: italic; } .paper[data-template="academic"] .sec-head { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: calc(var(--size-head) * 1.25); font-style: italic; font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); padding-bottom: 2px; } .paper[data-template="academic"] .item-a { font-weight: 600; } /* ------------------------------------------------------------ executive */ /* Very wide margins and very large type, on the assumption that someone at this level has less to prove and more to say. */ .paper[data-template="executive"] { --size-name: calc(34px * var(--scale)); --size-head: calc(10px * var(--scale)); --size-body: calc(11px * var(--scale)); --margin-side: 88px; --gap-section: 24px; } /* A hairline frame just inside the sheet edge — personal stationery, not a form. Outside every margin, so it costs a parser nothing. */ .paper[data-template="executive"]::before { content: ''; position: absolute; inset: 20px; border: 1px solid color-mix(in srgb, var(--ink) 48%, transparent); pointer-events: none; } .paper[data-template="executive"] .name { font-weight: 400; letter-spacing: -0.8px; } .paper[data-template="executive"] .headline { margin-top: 7px; letter-spacing: 1.4px; text-transform: uppercase; font-size: var(--size-small); } .paper[data-template="executive"] .sec-head { color: var(--ink-dim); letter-spacing: 3.4px; font-weight: 500; } .paper[data-template="executive"] .item-a { font-weight: 600; } /* ----------------------------------------------------------------- tint */ /* The sheet is coloured and the resume sits on a white card on top of it. The colour is the page, not an accent on it. */ .paper[data-template="tint"] { background: color-mix(in srgb, var(--accent) 10%, #fff); padding: 26px; --size-name: calc(25px * var(--scale)); } .paper[data-template="tint"] .doc-head, .paper[data-template="tint"] .sheet { background: #fff; padding-left: calc(var(--margin-side) * 0.8); padding-right: calc(var(--margin-side) * 0.8); } .paper[data-template="tint"] .doc-head { padding-top: calc(var(--margin-top) * 0.8); margin-bottom: 0; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); } .paper[data-template="tint"] .sheet { padding-bottom: 400px; padding-top: 4px; } .paper[data-template="tint"] .sec-head { color: var(--accent); } /* ----------------------------------------------------------------- rail */ /* A full-height coloured rail carrying the section names in white. The narrow column is the furniture; the wide one is the document. */ .paper[data-template="rail"] { --side-w: 190px; --side-bg: var(--accent); --size-name: calc(26px * var(--scale)); } .paper[data-template="rail"] .col-side { color: rgba(255,255,255,0.88); padding-top: 12px; } .paper[data-template="rail"] .col-side .sec-head { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.3); letter-spacing: 2px; } .paper[data-template="rail"] .col-side .skill-group, .paper[data-template="rail"] .col-side .item-a { color: #fff; } .paper[data-template="rail"] .col-side .item-b, .paper[data-template="rail"] .col-side .item-when { color: rgba(255,255,255,0.7); } .paper[data-template="rail"] .doc-head { border-bottom: 3px solid var(--accent); padding-bottom: 10px; } .paper[data-template="rail"] .col-main .sec-head { color: var(--accent); letter-spacing: 1.6px; } /* ========================================================================== The third set. Every template above reaches for the same handful of devices to make a page look unlike another page — a coloured rule, a tinted column, a bolder header. These four each add a device none of the others use: a mark beside the heading instead of colour on it, a rounded chip instead of a hard edge, a ring of colour behind the photo instead of around it, and a banner sitting directly above a filled column, which nothing above tries at once. ========================================================================== */ /* --------------------------------------------------------------- badge */ /* Colour beside the heading, not on it — a plain square, the way a mark in the margin of a printed page reads before the word next to it does. */ .paper[data-template="badge"] .sec-head { display: flex; align-items: center; gap: 8px; } .paper[data-template="badge"] .sec-head::before { content: ''; flex: 0 0 auto; width: 11px; height: 11px; border-radius: 2px; background: var(--accent); } /* ---------------------------------------------------------------- pill */ /* `rule: bar` bleeds full width, which is the point of a bar — a chip is the opposite move, so it has to give that back up: a rounded shape only reads as a pill where it hugs the text, not on the barely-visible corner of a strip that already reaches both margins. */ .paper[data-template="pill"] .sec-head { display: inline-block; margin-left: 0; margin-right: 0; border-radius: 999px; padding: 3px 14px; } /* ---------------------------------------------------------------- halo */ /* Colour touches exactly one thing on the page: a soft ring bled out behind the photo. Nothing else here is tinted, ruled, or coloured. */ .paper[data-template="halo"] .photo { position: relative; z-index: 1; } .paper[data-template="halo"] .photo::before { content: ''; position: absolute; inset: -10px; z-index: -1; border-radius: 50%; background: var(--accent); opacity: 0.22; } /* -------------------------------------------------------------- beacon */ /* The banner and the column are the same colour, so the fill reads as one shape wrapping the top and left of the page rather than two decisions. */ .paper[data-template="beacon"] { --side-bg: var(--accent); } .paper[data-template="beacon"] .col-side { color: rgba(255,255,255,0.88); padding-top: 14px; } .paper[data-template="beacon"] .col-side .sec-head { color: #fff; border-bottom-color: rgba(255,255,255,0.3); } .paper[data-template="beacon"] .col-side .skill-group, .paper[data-template="beacon"] .col-side .item-a { color: #fff; } .paper[data-template="beacon"] .col-side .item-b, .paper[data-template="beacon"] .col-side .item-when { color: rgba(255,255,255,0.72); } .paper[data-template="beacon"] .head-banner .photo { border: 3px solid rgba(255,255,255,0.5); } /* ========================================================================== Entry structure. Everything above this line decorates the *frame* of the page — the header, the heading rules, a band of colour. The body never changed: every one of the thirty-two rendered the same row, [Role — Company] ...................... [dates · location] • bullet and that row is four-fifths of the page. Thirty-two templates that differ only in their headers are thirty-two skins of one document, which is exactly what they looked like. So the body varies here. Four entry layouts and five bullet markers, each stated once and shared by the templates that use it. None of it changes what a parser reads: the markup is untouched, the heading is still a heading, the dates are still the dates, and the bullets are still a