/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 * (Execution held at 4, not 5: the build was verified programmatically - * contrast on all 164 text elements, geometry, overflow, blend isolation, * animation timing - but never seen rendered, because the preview pane in * this session stopped compositing frames. A human still has to look at it.) * * Hallmark · genre: editorial · macrostructure: Marquee Hero * H1 Marquee knobs: size=xxl (two single-word lines), alignment=left-bias, underlay=rule below * nav: N6 Newspaper masthead (knobs: issue-line=above nameplate, nameplate=fused with the * marquee, rule=double) - deliberately LEFT-ALIGNED rather than N6's centred default: * the editorial genre bans centred heroes, and Broadsheet's own direction is flush-left. * footer: Ft4 Dense colophon (knobs: family=mono, layout=single block, includes=inks + date) * sections: S2 Hanging heads · F3 Tabular spec sheet (principles) · F4 Step sequence (career, * connector=ink rule) · T4 Numbered stat strip · C2 Inline form as CTA * enrichment: none - typography only. The CMYK plates are the visual. * theme: Broadsheet (pre-existing design system, preserved) · paper=light · display=roman-serif * · accent=cool→warm rotation. tone: editorial. anchor hue: cyan 220°. * * This file is the PAGE layer. styles.css stays the design system and is not restyled here; * press.css layers the scroll journey on top. Load order: styles.css → page.css → press.css. */ /* JetBrains Mono is linked from index.html rather than @import-ed here: an @import serialises the font request behind this stylesheet, a parallelises it. */ /* ─── tokens this layer adds ─────────────────────────────────────────────── */ :root { /* The outlier face. One role only: press furniture - the marks a press leaves, not the content it prints. Sheet counter + colophon. Nothing else. */ --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Display weight raised from the DS's 600: body 400 against heading 600 is a 200-unit contrast, which reads as a default setting. 700 reads as chosen - and the heavier stems carry the plate fringes better at display sizes. */ --font-display-weight: 700; --page-gutter: clamp(1.25rem, 5vw, 4.5rem); --measure: 64ch; --text-hero: clamp(3.25rem, 15vw, 7rem); --text-lede: clamp(1.375rem, 3.2vw, 2.125rem); --text-title: clamp(1.75rem, 4vw, 2.75rem); --text-work: clamp(1.5rem, 3.4vw, 2.5rem); --rule-hair: 1px; --rule-thick: 2px; /* The browser's built-in easings are too weak to read as deliberate. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --dur-press: 120ms; --dur-hover: 140ms; } /* ─── page-specific base (moved out of styles.css, which is the DS) ──────── */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Root only - NOT body. An element with `overflow: clip` also clips its position:fixed descendants, and it computes that clip against its box at scroll origin, so putting it on made every fixed child vanish the moment the reader scrolled: the registration marks, the sheet counter, and (before it moved to the root background) the paper itself. On the clip is the viewport anyway, so it costs nothing and still stops horizontal overflow. Clip, never hidden - `hidden` on the root breaks position:sticky in some engines. */ html { overflow-x: clip; } body { margin: 0; text-wrap: pretty; -webkit-font-smoothing: antialiased; padding-bottom: clamp(2rem, 5vw, 4rem); } h1, h2, h3 { font-weight: var(--font-display-weight); font-style: normal; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--color-accent-700); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--color-accent-2-700); } .skip-link { position: absolute; left: -9999px; background: var(--color-text); color: var(--color-bg); padding: var(--space-2) var(--space-3); z-index: 10; } .skip-link:focus-visible { left: var(--page-gutter); top: var(--space-2); } /* ─── shared shells ──────────────────────────────────────────────────────── */ .sheet, .mast, .colophon { max-width: 78rem; margin-inline: auto; padding-inline: var(--page-gutter); } .rule { border: 0; margin: 0; } .rule--hair { border-top: var(--rule-hair) solid var(--color-text); } .rule--thick { height: 5px; border-top: var(--rule-thick) solid var(--color-text); border-bottom: var(--rule-hair) solid var(--color-text); max-width: 78rem; margin-inline: auto; margin-block: clamp(1.5rem, 4vw, 3rem); } .rule--double { height: 4px; border-top: var(--rule-hair) solid var(--color-text); border-bottom: var(--rule-hair) solid var(--color-text); margin-top: var(--space-3); } .link { color: var(--color-accent-700); } .link--icon { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .link--icon:hover { text-decoration: underline; } .icon { width: 18px; height: 18px; fill: currentColor; flex: none; } /* ─── N6 masthead ────────────────────────────────────────────────────────── */ .mast { padding-top: clamp(1rem, 2.5vw, 1.75rem); } .mast__line { font-size: 0.8125rem; letter-spacing: 0.02em; font-variant-caps: all-small-caps; color: var(--ink-3); margin: 0 0 var(--space-2); } .mast__nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); } .mast__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-right: auto; } .mast__links a { font-size: 0.9375rem; color: inherit; text-decoration: none; white-space: nowrap; /* clickable text never wraps to two lines */ padding-block: 4px; } .mast__links a:hover { color: var(--color-accent-700); text-decoration: underline; } .langswitch { display: inline-flex; align-items: center; gap: 6px; } .langswitch__btn { font: inherit; font-size: 0.8125rem; letter-spacing: 0.06em; background: none; border: 0; cursor: pointer; padding: 4px 2px; color: var(--ink-3); } .langswitch__btn[aria-pressed="true"] { color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; } .langswitch__btn:hover { color: var(--color-accent-700); } .langswitch__sep { color: color-mix(in srgb, var(--color-text) 35%, transparent); } /* ─── 01 · the marquee ───────────────────────────────────────────────────── */ /* 68svh left ~400px of dead air between the masthead rule and the name at 1440x900: bottom-aligned display type needs the fold to be roughly the height of the type plus its breathing room, not a screen minus the type. */ .hero { min-height: 46svh; display: grid; align-content: end; padding-block: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 3vw, 2.25rem); } .hero__name { margin: 0; } .hero__line { display: block; font-family: var(--font-heading); font-weight: var(--font-display-weight); font-size: var(--text-hero); line-height: 0.94; letter-spacing: -0.03em; overflow-wrap: anywhere; /* a display word must break rather than push the page wide */ min-width: 0; text-box: trim-both cap alphabetic; } .hero__line + .hero__line { margin-top: 0.06em; } /* ─── 02 · prose ─────────────────────────────────────────────────────────── */ .prose { padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 8vw, 6rem); } .prose__lede { font-size: var(--text-lede); line-height: 1.32; letter-spacing: -0.015em; max-width: 32ch; margin: 0 0 clamp(2.5rem, 7vw, 5.5rem); } .prose__block + .prose__block { margin-top: clamp(2rem, 5vw, 3.5rem); } .prose__head { font-size: clamp(1.1875rem, 2.2vw, 1.5rem); line-height: 1.24; letter-spacing: -0.01em; margin: 0 0 var(--space-3); } .prose__body { max-width: var(--measure); } .prose__body--wide { max-width: 68ch; } .prose__body p, .track__what p, .work__body p, .specs__text p { font-size: 1.0625rem; line-height: 1.7; margin: 0 0 var(--space-4); color: var(--ink-2); } .prose__body p:last-child, .track__what p:last-child, .work__body p:last-child, .specs__text p:last-child { margin-bottom: 0; } /* S2 · hanging section head - no eyebrow, no rule, no left-margin label */ .section__title { font-size: var(--text-title); line-height: 1.14; letter-spacing: -0.022em; max-width: 20ch; margin: 0 0 clamp(2rem, 5vw, 3.5rem); overflow-wrap: anywhere; } /* ─── 03 · F3 tabular spec sheet - the three principles ──────────────────── */ .sheet[data-sheet="03"] { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3.5rem, 9vw, 7rem); } .specs { border-top: var(--rule-hair) solid var(--color-divider); } .specs__row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--space-3) clamp(1.25rem, 4vw, 3rem); align-items: start; padding-block: clamp(1.75rem, 4vw, 2.75rem); border-bottom: var(--rule-hair) solid var(--color-divider); } .specs__num { font-family: var(--font-heading); font-weight: var(--font-display-weight); font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -0.03em; } .specs__text { min-width: 0; max-width: 60ch; } .specs__text h3 { font-size: 1.1875rem; line-height: 1.34; letter-spacing: -0.005em; margin: 0 0 var(--space-2); } /* ─── 04 · F4 step sequence - the career, threaded by an ink rule ─────────── */ .sheet[data-sheet="04"] { padding-block: clamp(2rem, 5vw, 4rem) clamp(3.5rem, 9vw, 7rem); } /* T4 · stat strip. Real numbers only - every one comes from the CV. */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); padding-block: clamp(1.5rem, 4vw, 2.5rem); border-block: var(--rule-hair) solid var(--color-divider); margin-bottom: clamp(2.5rem, 6vw, 4.5rem); } .stats__item { display: grid; gap: 4px; min-width: 0; } .stats__num { font-family: var(--font-heading); font-weight: var(--font-display-weight); font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; /* counters must not reflow while counting */ color: var(--color-accent-700); } .stats__cap { font-size: 0.875rem; line-height: 1.35; color: var(--ink-3); } /* the left inset is the gutter the ink thread runs in (drawn in press.css) */ .track { position: relative; padding-left: clamp(0.875rem, 2vw, 1.5rem); } .track__item { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-2) clamp(1.25rem, 4vw, 3rem); padding-block: clamp(1.5rem, 3.5vw, 2.5rem); border-top: var(--rule-hair) solid var(--color-divider); } .track__item:last-child { border-bottom: var(--rule-hair) solid var(--color-divider); } .track__when { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; letter-spacing: -0.02em; color: var(--ink-3); margin: 0; font-variant-numeric: tabular-nums; } .track__what { min-width: 0; max-width: 62ch; } .track__what h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.008em; margin: 0 0 4px; } .track__where { font-size: 0.9375rem; color: var(--ink-3); margin: 0 0 var(--space-3); } /* ─── 05 · the work ──────────────────────────────────────────────────────── */ .sheet[data-sheet="05"] { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 5.5rem); } .work { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: var(--rule-hair) solid var(--color-divider); } .work:last-child { border-bottom: var(--rule-hair) solid var(--color-divider); } /* numeral sits inline with the title on a shared baseline - never a stacked eyebrow, never a left-margin label column */ .work__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); } .work__num { font-family: var(--font-heading); font-weight: var(--font-display-weight); font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; } .work__title { font-size: var(--text-work); line-height: 1.12; letter-spacing: -0.025em; margin: 0; flex: 1 1 18ch; min-width: 0; overflow-wrap: anywhere; } .work__lede { font-size: clamp(1.0625rem, 1.9vw, 1.3125rem); line-height: 1.46; letter-spacing: -0.01em; max-width: 42ch; margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); color: var(--ink-2); } .work__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; } .work__body { min-width: 0; max-width: 62ch; } .work__meta { margin: 0; min-width: 0; display: grid; gap: 8px; align-content: start; } .work__meta dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .work__meta dt + dt { margin-top: 0; } .work__meta dd { margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.9375rem; } .work__meta dd:last-child { margin-bottom: 0; } /* ─── 06 · certifications & languages ────────────────────────────────────── */ .sheet[data-sheet="06"] { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: clamp(2rem, 5vw, 4rem); } .cols__col { min-width: 0; } .cols__head { font-size: 1.0625rem; letter-spacing: -0.005em; margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: var(--rule-hair) solid var(--color-text); } .listing { display: grid; } .listing li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--space-3); padding-block: 10px; border-bottom: var(--rule-hair) solid var(--color-divider); font-size: 0.9375rem; line-height: 1.4; } .listing__what { min-width: 0; } .listing__who { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: -0.01em; color: var(--ink-3); text-align: right; } .listing--links li { padding-block: 12px; } /* ─── 07 · off the keyboard ──────────────────────────────────────────────── */ .sheet[data-sheet="07"] { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); } /* ─── 08 · contact - C2, the CTA is the form ─────────────────────────────── */ .contact { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); } .contact__title { font-size: clamp(1.625rem, 4.2vw, 3rem); line-height: 1.16; letter-spacing: -0.025em; max-width: 22ch; margin: 0 0 clamp(2rem, 5vw, 3.5rem); overflow-wrap: anywhere; } .contact__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .form { display: grid; gap: var(--space-3); min-width: 0; max-width: 34rem; } .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* styles.css tints field labels to 70% ink, which measures 3.77:1 here - under AA for 13px text. A form label is not decoration; you cannot fill in a field whose name you are guessing at. */ .field > label { font-size: 0.8125rem; color: var(--ink-3); } /* The design system's .btn-primary fills with var(--color-accent) and sets paper-coloured text on it. That is safe while the accent is cyan - but the accent ROTATES on this page, and on the yellow sheets paper-on-#edbb00 measures about 1.6:1. A short viewport can show the submit button while yellow is the live spot, so the button would become unreadable purely as a function of scroll position. The send action is therefore a solid ink slab: stable, ~15:1, and closer to a printed block than a coloured pill anyway. */ .form__submit.btn-primary { background: var(--color-text); color: var(--color-bg); } .form__submit.btn-primary:hover { background: var(--color-accent-800); } .form__submit.btn-primary:active { background: var(--color-accent-900); } .select { position: relative; display: block; } .select select { appearance: none; padding-right: 2.25rem; width: 100%; cursor: pointer; } .select__caret { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1.5; color: var(--ink-3); } .form__submit { min-height: 44px; padding-inline: var(--space-4); font-size: 0.9375rem; justify-self: start; } .form__submit[aria-busy="true"] { opacity: 0.72; cursor: progress; } .form__status { margin: 0; font-size: 0.9375rem; line-height: 1.5; min-height: 1.5em; } .form__status:empty { min-height: 0; } .form__status[data-state="error"] { color: var(--color-accent-2-700); } .form__status[data-state="ok"] { color: var(--color-accent-700); } .form__legal { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--ink-3); max-width: 46ch; } .input[aria-invalid="true"] { border-color: var(--color-accent-2-600); } .contact__aside { min-width: 0; } /* ─── press furniture ────────────────────────────────────────────────────── */ .furniture { position: fixed; inset: 0; pointer-events: none; z-index: 1; } .furniture__target { position: absolute; width: 15px; height: 15px; fill: none; stroke: var(--color-text); stroke-width: 0.75; opacity: 0.28; } .furniture__target--tl { top: 14px; left: 14px; } .furniture__target--br { bottom: 14px; right: 14px; } .furniture__counter { position: absolute; bottom: 12px; left: 14px; margin: 0; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--ink-3); } /* ─── Ft4 · colophon ─────────────────────────────────────────────────────── */ .colophon { padding-top: clamp(2rem, 5vw, 3.5rem); } .colophon p { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.75; letter-spacing: -0.01em; color: var(--ink-3); max-width: 84ch; margin: var(--space-3) 0 0; } .colophon__ink { color: color-mix(in srgb, var(--color-text) 78%, transparent); } /* ─── microinteractions ──────────────────────────────────────────────────── */ /* Hover sits in the "tens of times a day" tier, so it gets fast and subtle or nothing. Every transition names its properties - never `all`, which would sweep in the focus ring and delay the one indicator a keyboard user needs immediately. Nothing here transitions `outline`. */ .link, .mast__links a, .langswitch__btn { transition: color var(--dur-hover) ease, text-decoration-thickness var(--dur-hover) ease; } .input, .select select { transition: border-color 150ms ease; } .btn, .form__submit { transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, translate var(--dur-press) var(--ease-out); } /* Touch fires a false hover on tap and leaves the state stuck, so every hover affordance is gated on a real pointer. */ @media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-thickness: 2px; } .furniture__counter { transition: opacity var(--dur-hover) ease; } } /* Press feedback: one pixel, the depth of a key. Not a scale, not a shadow. */ .btn:active, .form__submit:active { translate: 0 1px; } @media (prefers-reduced-motion: reduce) { .link, .mast__links a, .langswitch__btn, .input, .select select, .btn, .form__submit { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; } .btn:active, .form__submit:active { translate: none; } } /* ─── bilingual toggle ───────────────────────────────────────────────────── */ /* display:none, not visibility/opacity - the inactive copy must leave the accessibility tree and the tab order, or a screen reader reads the page twice */ html[data-lang="fr"] [lang="en"], html[data-lang="en"] [lang="fr"] { display: none; } /* ─── responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 60rem) { .work__grid { grid-template-columns: minmax(0, 1fr); } .contact__grid { grid-template-columns: minmax(0, 1fr); } .track__item { grid-template-columns: minmax(0, 1fr); } .track__when { font-size: 0.75rem; } } @media (max-width: 40rem) { .hero { min-height: 60svh; } .specs__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .specs__num { font-size: 2.25rem; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mast__nav { gap: var(--space-2); } .mast__links { gap: var(--space-2) var(--space-3); } .furniture__target { display: none; } /* the sheet edges are the phone edges */ .listing li { justify-content: flex-start; } .listing__who { text-align: left; } .form__submit { width: 100%; justify-self: stretch; } } /* every interactive target clears 44px on coarse pointers. styles.css sizes .input at 36px, which is fine for a mouse and too small for a thumb - a contact form nobody can tap accurately is a contact form nobody sends. */ @media (pointer: coarse) { .mast__links a, .langswitch__btn, .listing--links a { min-height: 44px; display: inline-flex; align-items: center; } .input, .select select { min-height: 44px; } textarea.input { min-height: 120px; } }