@charset "UTF-8"; /* ===================================================================== ESSENCE OF IMAGE — COMP CARD (module M9) The printable sheet at /comp-card/{slug}/. Loaded INSTEAD of style.css, so this file carries its own reset and its own tokens. ONE scaling unit runs the whole sheet: --u. It is 1in at print time and shrinks on small screens, so the preview is the printed page at a smaller size — never a different layout. Every dimension below is a fraction of --u, which is why the sheet cannot drift out of register. Paper: Letter by default. The A4 variant is the two-rule override the template injects into #eoiCcPaper: @page{size:A4;margin:10mm} @media print{.cc-sheet{height:275mm}} ===================================================================== */ /* ------------------------------------------------------------------ */ /* Paper box */ /* ------------------------------------------------------------------ */ @page { size: Letter; margin: 0.4in; } /* ------------------------------------------------------------------ */ /* Tokens + reset */ /* ------------------------------------------------------------------ */ .eoi-cc-page { /* page geometry, in inches */ --pw: 8.5; --ph: 11; --pm: .4; /* the one scaling unit — 1in on a roomy screen, less on a phone */ --u: min(1in, calc((100vw - 40px) / 8.5)); /* brand colour — functions.php re-injects --ink/--bone/--chalk on :root, so a colour the client edits in the Design tab reaches the sheet too. */ --cc-ink: var(--ink, #0C0C0C); --cc-bone: var(--bone, #E9E4DB); --cc-sheet: var(--chalk, #FFFFFF); --cc-ink-rgb: var(--ink-rgb, 12, 12, 12); --cc-bone-rgb: var(--bone-rgb, 233, 228, 219); --cc-ash: #5b564d; /* 6.4:1 on white */ --cc-rule: rgba(var(--cc-ink-rgb), .22); --cc-rule-hard: rgba(var(--cc-ink-rgb), .62); --cc-desk: #D7D2C8; /* the surface the sheet lies on */ /* type */ --cc-display: "Bebas Neue", Impact, sans-serif; --cc-serif: "Bodoni Moda", Georgia, serif; --cc-mono: "Space Mono", ui-monospace, monospace; --cc-body: "Archivo", system-ui, sans-serif; /* photo treatment — mirrors the site's --gs switch */ --gs: 0; /* This IS . Its own UA margin is not covered by the `*` reset below, and 8px of it is enough to push the sheet onto a second printed page. */ margin: 0; background: var(--cc-desk); color: var(--cc-ink); font-family: var(--cc-body); -webkit-font-smoothing: antialiased; /* the ink panels are the design — print them */ -webkit-print-color-adjust: exact; print-color-adjust: exact; } .eoi-cc-page.eoi-bw { --gs: 1; } .eoi-cc-page.is-a4 { --pw: 8.268; --ph: 11.693; --pm: .3937; /* 10mm */ --u: min(1in, calc((100vw - 40px) / 8.268)); } .eoi-cc-page *, .eoi-cc-page *::before, .eoi-cc-page *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .eoi-cc-page img { display: block; max-width: 100%; } .eoi-cc-page a { color: inherit; text-decoration: none; } /* NOTE: the `*` rule above already zeroes every margin. Do not add a `.eoi-cc-page dl {margin:0}` style rule here — a type selector outranks the component classes below and silently eats their margins. */ /* ------------------------------------------------------------------ */ /* Screen-only action bar */ /* ------------------------------------------------------------------ */ .cc-bar { position: sticky; top: 0; z-index: 5; background: var(--cc-ink); color: var(--cc-bone); padding: 14px clamp(16px, 3vw, 30px) 12px; } .cc-bar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .cc-bar__right { display: flex; align-items: center; gap: 10px; } .cc-back { font-family: var(--cc-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--cc-bone-rgb), .72); padding: 8px 0; transition: color .25s; } .cc-back:hover, .cc-back:focus-visible { color: var(--cc-bone); } .cc-paper { display: inline-flex; border: 1px solid rgba(var(--cc-bone-rgb), .34); } .cc-paper__btn { appearance: none; background: none; border: 0; cursor: pointer; font-family: var(--cc-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--cc-bone-rgb), .68); padding: 9px 13px; transition: background .25s, color .25s; } .cc-paper__btn + .cc-paper__btn { border-left: 1px solid rgba(var(--cc-bone-rgb), .28); } .cc-paper__btn:hover { color: var(--cc-bone); } .cc-paper__btn.is-on { background: var(--cc-bone); color: var(--cc-ink); } .cc-print { appearance: none; cursor: pointer; border: 1px solid var(--cc-bone); background: var(--cc-bone); color: var(--cc-ink); font-family: var(--cc-mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 10px 20px; transition: background .25s, color .25s; } .cc-print:hover { background: transparent; color: var(--cc-bone); } .cc-hint { margin-top: 8px; max-width: 78ch; font-family: var(--cc-body); font-size: 12.5px; line-height: 1.45; color: rgba(var(--cc-bone-rgb), .66); } .cc-hint strong { color: var(--cc-bone); font-weight: 600; } .eoi-cc-page :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ------------------------------------------------------------------ */ /* The sheet */ /* ------------------------------------------------------------------ */ .cc-stage { padding: clamp(18px, 3.5vw, 40px) 20px clamp(34px, 6vw, 64px); display: flex; justify-content: center; } .cc-sheet { width: calc(var(--pw) * var(--u)); height: calc(var(--ph) * var(--u)); padding: calc(var(--pm) * var(--u)); background: var(--cc-sheet); box-shadow: 0 10px 40px rgba(var(--cc-ink-rgb), .22); display: flex; flex-direction: column; gap: calc(.2 * var(--u)); overflow: hidden; break-inside: avoid; page-break-inside: avoid; } /* --- header: mark + wordmark, then city · status ------------------- */ .cc-head { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: calc(.2 * var(--u)); padding-bottom: calc(.13 * var(--u)); border-bottom: 1px solid var(--cc-rule-hard); } .cc-brand { display: flex; align-items: center; gap: calc(.14 * var(--u)); min-width: 0; } .cc-brand__mark { display: block; flex: 0 0 auto; } .cc-logo { height: calc(.4 * var(--u)); width: auto; } .cc-brand__word { font-family: var(--cc-display); font-size: calc(.22 * var(--u)); line-height: 1; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; } .cc-brand__word sup { font-family: var(--cc-mono); font-size: .34em; letter-spacing: .06em; vertical-align: super; opacity: .75; } .cc-head__meta { font-family: var(--cc-mono); font-size: calc(.1 * var(--u)); line-height: 1.3; letter-spacing: .17em; text-transform: uppercase; color: var(--cc-ash); text-align: right; white-space: nowrap; } /* --- main row: hero portrait + identity column --------------------- */ .cc-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr calc(2.8 * var(--u)); gap: calc(.22 * var(--u)); } /* One photograph: the portrait runs the full height, so the stats column can afford a little more width. */ .eoi-cc-solo .cc-main { grid-template-columns: 1fr calc(3 * var(--u)); } .cc-hero { position: relative; overflow: hidden; background: var(--cc-bone); } .cc-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: grayscale(var(--gs)) contrast(1.04); } .cc-hero__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--cc-display); font-size: calc(.34 * var(--u)); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-ash); } .cc-hero__tag { position: absolute; left: 0; bottom: 0; background: var(--cc-ink); color: var(--cc-bone); font-family: var(--cc-mono); font-size: calc(.093 * var(--u)); line-height: 1; letter-spacing: .2em; text-transform: uppercase; padding: calc(.085 * var(--u)) calc(.14 * var(--u)); } /* Name at the top, stats anchored to the foot of the column: the air between them is the composition, not a gap — which is what keeps a one-photo sheet looking as deliberate as a four-photo one. */ .cc-id { display: flex; flex-direction: column; min-width: 0; } .cc-id__head { flex: 0 0 auto; padding-bottom: calc(.2 * var(--u)); border-bottom: 1px solid var(--cc-rule); } .cc-id__eyebrow { font-family: var(--cc-mono); font-size: calc(.088 * var(--u)); letter-spacing: .26em; text-transform: uppercase; color: var(--cc-ash); padding-bottom: calc(.1 * var(--u)); } .cc-name { font-family: var(--cc-display); font-weight: 400; font-size: calc(.62 * var(--u)); line-height: .84; letter-spacing: .03em; text-transform: uppercase; overflow-wrap: break-word; } .cc-tagline { font-family: var(--cc-serif); font-style: italic; font-weight: 500; font-size: calc(.17 * var(--u)); line-height: 1.24; color: var(--cc-ash); margin-top: calc(.13 * var(--u)); } .cc-specs { margin-top: auto; background: var(--cc-bone); padding: calc(.04 * var(--u)) calc(.15 * var(--u)) calc(.06 * var(--u)); } .cc-spec { display: flex; align-items: baseline; justify-content: space-between; gap: calc(.1 * var(--u)); padding: calc(.088 * var(--u)) 0; border-bottom: 1px solid rgba(var(--cc-ink-rgb), .18); } .cc-spec:last-child { border-bottom: 0; } .cc-spec--wide { justify-content: flex-start; } .cc-spec dt { font-family: var(--cc-mono); font-size: calc(.093 * var(--u)); line-height: 1.2; letter-spacing: .15em; text-transform: uppercase; color: var(--cc-ash); } .cc-spec dd { font-family: var(--cc-mono); font-weight: 700; font-size: calc(.122 * var(--u)); line-height: 1.2; letter-spacing: .02em; text-align: right; } .cc-spec--wide dd { text-align: left; } .cc-id__rep { flex: 0 0 auto; margin-top: calc(.22 * var(--u)); padding-top: calc(.2 * var(--u)); border-top: 1px solid var(--cc-rule-hard); } /* No spec pairs on the row: the credit block takes over the anchoring so the column still reads top-weighted / bottom-weighted rather than top-heavy. */ .cc-id__head + .cc-id__rep { margin-top: auto; } .cc-id__reph { display: block; font-family: var(--cc-mono); font-size: calc(.085 * var(--u)); letter-spacing: .22em; text-transform: uppercase; color: var(--cc-ash); } .cc-id__repv { display: block; margin-top: calc(.07 * var(--u)); font-family: var(--cc-display); font-size: calc(.2 * var(--u)); line-height: 1; letter-spacing: .1em; text-transform: uppercase; } .cc-id__repw { display: block; margin-top: calc(.05 * var(--u)); font-family: var(--cc-mono); font-size: calc(.09 * var(--u)); letter-spacing: .12em; color: var(--cc-ash); } /* --- the additional shots ----------------------------------------- */ .cc-strip { flex: 0 0 auto; height: calc(2.45 * var(--u)); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(.14 * var(--u)); break-inside: avoid; page-break-inside: avoid; } .cc-shot { overflow: hidden; background: var(--cc-bone); } .cc-shot__img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: grayscale(var(--gs)) contrast(1.04); } /* Two shots share a wider plate each, so the band gets more height back. */ .cc-strip[data-shots="2"] { height: calc(2.9 * var(--u)); } /* A lone extra shot lives in the identity column and takes the air. */ .cc-shot--inline { flex: 1 1 auto; min-height: calc(1.5 * var(--u)); margin-top: calc(.22 * var(--u)); } .cc-shot--inline + .cc-specs, .cc-shot--inline + .cc-id__rep { margin-top: calc(.18 * var(--u)); } /* --- the ink footer: who to call ---------------------------------- */ .cc-foot { flex: 0 0 auto; background: var(--cc-ink); color: var(--cc-bone); display: grid; grid-template-columns: 1.3fr 1.25fr .9fr; gap: calc(.2 * var(--u)); padding: calc(.2 * var(--u)) calc(.24 * var(--u)); break-inside: avoid; page-break-inside: avoid; } .cc-foot__col { display: flex; flex-direction: column; gap: calc(.05 * var(--u)); min-width: 0; } .cc-foot__word { font-family: var(--cc-display); font-size: calc(.26 * var(--u)); line-height: .92; letter-spacing: .1em; text-transform: uppercase; } .cc-foot__sub { font-family: var(--cc-serif); font-style: italic; font-size: calc(.1 * var(--u)); line-height: 1.35; color: rgba(var(--cc-bone-rgb), .8); } .cc-foot__label { font-family: var(--cc-mono); font-size: calc(.082 * var(--u)); line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; color: rgba(var(--cc-bone-rgb), .62); padding-bottom: calc(.04 * var(--u)); } .cc-foot__line { font-family: var(--cc-mono); font-size: calc(.105 * var(--u)); line-height: 1.45; letter-spacing: .02em; overflow-wrap: break-word; } /* ------------------------------------------------------------------ */ /* Print — nothing but the sheet */ /* ------------------------------------------------------------------ */ @media print { .cc-bar, #wpadminbar, .skip, .eoi-cc-page > header, .eoi-cc-page > nav, .eoi-cc-page > footer, .eoi-cc-page button { display: none !important; } html, .eoi-cc-page { background: #fff !important; } .eoi-cc-page { --u: 1in; } .eoi-cc-page.is-a4 { --u: 1in; } .cc-stage { display: block; padding: 0; } .cc-sheet { width: auto; height: 10.1in; /* Letter, less the 0.4in margins, less a hair for rounding */ padding: 0; box-shadow: none; background: #fff; } /* Hairlines gain weight so a laser print keeps the structure. */ .eoi-cc-page { --cc-rule: rgba(var(--cc-ink-rgb), .38); --cc-rule-hard: rgba(var(--cc-ink-rgb), .8); } .cc-spec { border-bottom-color: rgba(var(--cc-ink-rgb), .3); } .cc-hero__img, .cc-shot__img { filter: grayscale(var(--gs)) contrast(1.06); } a[href]::after { content: none !important; } /* no "(https://…)" tails */ } /* ------------------------------------------------------------------ */ /* Small screens — the sheet stays a sheet, just smaller */ /* ------------------------------------------------------------------ */ @media (max-width: 640px) { .cc-bar__in { align-items: flex-start; } .cc-bar__right { width: 100%; justify-content: space-between; } .cc-stage { padding-inline: 12px; } .eoi-cc-page { --u: min(1in, calc((100vw - 24px) / 8.5)); } .eoi-cc-page.is-a4 { --u: min(1in, calc((100vw - 24px) / 8.268)); } } @media (prefers-reduced-motion: reduce) { .eoi-cc-page * { transition: none !important; } }