/* ========================================================================= McMURRY & HUGHES — main.css Foundations: fonts, tokens, base type, layout, rail, navigation, footer. THE THREE RULES THIS FILE IS BUILT TO PROTECT 1 GREY IS SEMANTIC. --field / --grey mean "the market a company is already searching". They are never a panel, a card, a section ground or a stripe. There is no rule in this stylesheet that fills a container with grey. 2 VERMILION IS ONE PERSON outside that search. It is a marker, a hairline and a flag on an unmeasured field. It is never a button fill, never body copy, never on a photograph. 3 TWO FAMILIES, NO THIRD. Archivo + IBM Plex Mono, self-hosted, latin and latin-ext. The ext subsets are not optional: Kraków and Wrocław are set correctly and a missing subset substitutes a serif silently. Target ratio across the site: ~90% paper, ~7% ink, ~2% grey, ~1% vermilion. ========================================================================= */ /* ── 01 · TYPE ─────────────────────────────────────────────────────────── */ @font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'PlexMono';src:url('../assets/fonts/IBM_Plex_Mono_400_normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'PlexMono';src:url('../assets/fonts/IBM_Plex_Mono_500_normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} /* latin-ext — required for Kraków, Wrocław, São, façade */ @font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-Regular-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-Medium-ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-SemiBold-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-Bold-ext.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'PlexMono';src:url('../assets/fonts/IBM_Plex_Mono_400_ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'PlexMono';src:url('../assets/fonts/IBM_Plex_Mono_500_ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ── 02 · TOKENS ───────────────────────────────────────────────────────── */ :root{ /* palette — MH_colour-specification.txt, edition 1.0 */ --paper:#FCFCFA; /* ground, no meaning of its own */ --bone:#F1F1EE; /* second ground, structural only */ --field:#E4E4E0; /* THE SEARCHED MARKET — semantic */ --grey:#9A9A96; /* the same, at small scale — semantic */ --ink:#0E0F12; /* fact: type, rules, boundaries */ --verm:#D33A1A; /* one person outside the search */ --slate:#41444A; /* body copy */ --mid:#7B7F85; /* labels */ /* interface only, never marketing */ --confirmed:#33523A; /* the availability dot */ --error:#9C2410; --pending:#7E6416; --hair:rgba(14,15,18,.20); --hairsoft:rgba(14,15,18,.08); --hair-rev:rgba(252,252,250,.26); --hairsoft-rev:rgba(252,252,250,.12); --A:'Archivo'; --M:'PlexMono'; /* spatial system — the page rail is 26mm in print; 72px on screen */ --rail:72px; /* the content column's outer edge on wide screens — the rail and full-bleed captions sit on it, so nothing floats away from what it labels */ --wrapmax:1560px; --railgap:clamp(56px,6vw,96px); /* air between the rail and the column */ --edge:max(0px, calc((100vw - var(--sbw, 0px) - var(--wrapmax)) / 2)); /* --sbw: scrollbar, set by main.js */ --gutter:24px; --measure:64ch; --band:clamp(64px,7.5vw,120px); /* vertical rhythm between sections */ /* motion — slow, controlled, no bounce anywhere in the system */ --ease:cubic-bezier(.22,.61,.36,1); --ease-depth:cubic-bezier(.33,.9,.28,1); --t-fast:.12s; /* hover: colour only, 120 ms, linear (brand book part eight) */ --t:.52s; --t-slow:.9s; } /* ── 03 · RESET & BASE ─────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0} ul,ol{padding:0;list-style:none} img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} html{scroll-behavior:smooth;scroll-padding-top:88px} /* anchors land below the fixed nav */ body{ background:var(--paper); color:var(--ink); font-family:var(--A); font-weight:400; font-size:17px; line-height:1.56; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } ::selection{background:var(--ink);color:var(--paper)} /* Focus: a visible ink offset rule. Never removed, never a glow. */ :focus-visible{ outline:2px solid var(--ink); outline-offset:3px; } .ink :focus-visible,.section--ink :focus-visible{outline-color:var(--paper)} .skip{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--ink);color:var(--paper);padding:14px 20px; font-family:var(--M);font-size:12px;letter-spacing:.18em;text-transform:uppercase; } .skip:focus{left:0} /* visually hidden, but present for screen readers and for heading order */ .vh{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } /* ── 04 · TYPE SCALE ───────────────────────────────────────────────────── */ .say{font-weight:700;letter-spacing:-.042em;line-height:.93;text-wrap:balance} .say--xl{font-size:clamp(38px,6.6vw,88px)} .say--l {font-size:clamp(32px,4.6vw,64px)} .say--m {font-size:clamp(27px,3.2vw,44px)} .say--s {font-size:clamp(23px,2.3vw,32px)} .hd{font-weight:600;letter-spacing:-.03em;line-height:1.06;font-size:clamp(23px,2.2vw,34px);text-wrap:balance} .hd--s{font-size:clamp(19px,1.5vw,23px);letter-spacing:-.026em;line-height:1.14} .standfirst{ font-weight:500;font-size:clamp(18px,1.5vw,21px); letter-spacing:-.02em;line-height:1.34;color:var(--ink); max-width:42ch; } p{color:var(--slate);max-width:var(--measure)} p + p{margin-top:1.1em} p b,strong{font-weight:600;color:var(--ink)} .lede{font-size:19px;line-height:1.5;color:var(--slate);max-width:56ch} .small{font-size:15px;line-height:1.55} a{color:inherit;text-decoration:none} .link{ border-bottom:1px solid var(--hair); transition:border-color var(--t-fast) linear; } .link:hover{border-color:var(--ink)} .section--ink .link{border-bottom-color:var(--hair-rev)} .section--ink .link:hover{border-bottom-color:var(--paper)} /* label / figure / caption — always Plex Mono */ .label{ font-family:var(--M);font-weight:400;font-size:11px; letter-spacing:.2em;text-transform:uppercase;color:var(--slate); display:block; } /* VERMILION IN TYPE. Used sparingly, and only for words about the people outside the search or the reach beyond it — one phrase per statement at most, and only at statement size, where it passes contrast comfortably. Section and step indexes carry it too, as the book's page rail does. */ .hl{color:var(--verm);white-space:nowrap} /* a highlighted phrase never breaks */ /* Small type is never vermilion (colour specification: 18px regular or 14px semibold and above). A label or caption about the people outside the search carries a vermilion square instead — the person marker itself — and one about the searched market carries a grey one. */ .label--v,.caption--v{color:var(--slate)} .label--v::before,.caption--v::before,.caption--g::before{ content:"";display:inline-block;width:7px;height:7px;margin-right:9px;vertical-align:1px; background:var(--verm); } .caption--g::before{background:var(--grey)} .label--ink{color:var(--ink)} .figure{font-family:var(--M);font-weight:500;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em} .caption{font-family:var(--M);font-size:11px;line-height:1.7;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)} .mono{font-family:var(--M);font-variant-numeric:tabular-nums lining-nums} .v{color:var(--verm)} .rule{height:1px;background:var(--ink);border:0} .hairline{height:1px;background:var(--hair);border:0} .hairline--soft{height:1px;background:var(--hairsoft);border:0} /* ── 05 · LAYOUT ───────────────────────────────────────────────────────── */ .page{position:relative} .wrap{ width:100%; max-width:1560px; margin-inline:auto; padding-inline:var(--gutter); } @media (min-width:1024px){ .wrap{padding-left:calc(var(--rail) + var(--railgap));padding-right:56px} } .section{padding-block:var(--band);position:relative} .section--tight{padding-block:calc(var(--band) * .58)} .section--flush{padding-block:0} .section--bone{background:var(--bone)} .section--ink{background:var(--ink);color:var(--paper)} .section--ink p,.section--ink .lede{color:rgba(252,252,250,.74)} .section--ink .label{color:rgba(252,252,250,.55)} .section--ink .label--v{color:rgba(252,252,250,.72)} .section--ink .rule{background:rgba(252,252,250,.55)} .section--ink .hairline{background:var(--hair-rev)} .section--ink .hairline--soft{background:var(--hairsoft-rev)} /* section head: mono index + rule, the book's running head translated */ .shead{ position:relative;display:flex;align-items:baseline;gap:20px; padding-bottom:14px;margin-bottom:44px; border-bottom:1px solid var(--ink); } .section--ink .shead{border-bottom-color:rgba(252,252,250,.55)} .shead__n{font-family:var(--M);font-weight:500;font-size:12px;letter-spacing:.2em;color:var(--verm);flex:none} .shead__t{font-family:var(--M);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--slate)} .shead__r{margin-left:auto;font-family:var(--M);font-size:11px;letter-spacing:.2em;color:var(--slate);text-align:right} .cols{display:grid;gap:clamp(28px,4vw,72px)} .cols--2{grid-template-columns:repeat(2,1fr)} .cols--3{grid-template-columns:repeat(3,1fr)} .cols--4{grid-template-columns:repeat(4,1fr)} .cols--5{grid-template-columns:repeat(5,1fr)} .cols--aside{grid-template-columns:minmax(0,1fr) minmax(260px,320px)} .cols--lead{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} /* THE SPLIT. The statement and its qualifications hold still on the left while the evidence scrolls past on the right, so neither column is ever half empty. The left side is sticky only where there is room for it. */ .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);align-items:start} .split__side{position:sticky;top:112px;display:flex;flex-direction:column;gap:24px;align-items:flex-start} .split__side .say{max-width:14ch} .split__note{max-width:40ch} .split__aside{padding-top:22px;border-top:1px solid var(--hair);width:100%} .stack-s > * + *{margin-top:12px} .stack > * + *{margin-top:24px} .stack-l > * + *{margin-top:44px} /* ── 06 · THE RAIL (search trace) ──────────────────────────────────────── */ /* The book's page rail, made functional: it records where in the argument the reader is. One vermilion tick — the section in view. Nothing else about it moves. */ .rail{ /* on wide screens the rail steps out beyond the column, so it frames the page rather than crowding the text */ position:fixed;left:max(0px, calc(var(--edge) - 40px));top:0;bottom:0;width:var(--rail); z-index:40;pointer-events:none;display:none; } @media (min-width:1024px){.rail{display:block}} .rail__line{ position:absolute;right:0;top:140px;bottom:120px;width:1px;background:var(--hair); } .rail__ticks{position:absolute;right:0;top:140px;bottom:120px;width:100%} .rail__tick{ position:absolute;right:0;height:1px;background:var(--hair);width:14px; transition:width var(--t) var(--ease),background-color var(--t) var(--ease); pointer-events:auto; } /* the one vermilion mark on the rail: the approved search-trace device carries exactly one, at the section in view */ .rail__tick.is-on{width:28px;height:2px;background:var(--verm)} .rail__label{ position:absolute;left:18px;bottom:120px; font-family:var(--M);font-size:10px;letter-spacing:.24em;text-transform:uppercase; color:var(--mid);writing-mode:vertical-rl;transform:rotate(180deg); white-space:nowrap; } .rail__n{ position:absolute;left:18px;top:140px; font-family:var(--M);font-size:10px;letter-spacing:.16em;color:var(--mid); } .rail--rev .rail__line,.rail--rev .rail__tick{background:var(--hair-rev)} .rail--rev .rail__tick.is-on{background:var(--verm)} /* the rail belongs to the argument, not the footer */ .rail{transition:opacity var(--t) var(--ease)} .rail--off{opacity:0} .rail--rev .rail__label,.rail--rev .rail__n{color:rgba(252,252,250,.5)} /* ── 07 · NAVIGATION ───────────────────────────────────────────────────── */ .nav{ position:fixed;inset:0 0 auto 0;z-index:60; background:rgba(252,252,250,0); border-bottom:1px solid transparent; transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease), padding var(--t) var(--ease),transform .38s cubic-bezier(.23,1,.32,1); } /* out of the way while the reader goes down the page; back the moment they turn round, reach the top, open the menu or tab into it */ .nav[data-hidden="true"]{transform:translateY(-100%)} .nav__in{ display:flex;align-items:center;justify-content:space-between;gap:24px; padding-block:26px; transition:padding var(--t) var(--ease); } /* solid paper, never frosted glass — and a blur here would also become the containing block for the fixed mobile panel and trap it inside the bar */ .nav[data-scrolled="true"]{ background:var(--paper); border-bottom-color:var(--hair); } .nav[data-scrolled="true"] .nav__in{padding-block:14px} /* The mark is the approved horizontal lockup, placed as a file: the wordmark is outlined in it and is never retyped (logo specification). Aligned by its outer frame edge; nothing in it moves. */ .mark{display:flex;align-items:center;flex:none;padding-block:11px} /* 44px hit area */ .mark__lockup{display:block;height:22px;width:auto} .nav__links{display:flex;align-items:center;gap:26px} .nav__link{ font-family:var(--M);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--slate);padding:14px 0 12px; border-bottom:1px solid transparent; transition:color var(--t-fast) linear,border-color var(--t-fast) linear; } .nav__link:hover{color:var(--ink);border-bottom-color:var(--hair)} .nav__link[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)} /* the panel's two audience headings, shown only when the panel is a panel */ .nav__group{display:none} /* the job seeker's route sits apart from the employer links, after a rule, and before the employer's one action */ .nav__seek{padding-left:26px;border-left:1px solid var(--hair)} .nav__cta{margin-left:4px} /* the primary action is always the last, rightmost item */ .nav__toggle{ display:none;background:none;border:0;padding:12px 0 12px 12px;cursor:pointer; font-family:var(--M);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink); min-height:44px; } .nav__panel{display:contents} /* ── 08 · BUTTONS ──────────────────────────────────────────────────────── */ /* Hairline rule, no fill, radius 0, 44px minimum target (brand book, mobile page). There is one bordered button per block and it is always the primary action; everything secondary is a text action (.act). Vermilion is never a button colour: hover inverts ink and paper, colour only, 120 ms. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:12px; min-height:48px;padding:13px 24px; border:1px solid var(--ink);border-radius:0;background:none; font-family:var(--A);font-weight:600;font-size:16px;letter-spacing:-.012em; color:var(--ink);cursor:pointer;text-align:center; transition:background-color var(--t-fast) linear,color var(--t-fast) linear, border-color var(--t-fast) linear; } .btn:hover{background:var(--ink);color:var(--paper)} .btn--s{min-height:44px;padding:9px 18px;font-size:15px} .btn--rev{border-color:var(--paper);color:var(--paper)} .btn--rev:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} .btn[disabled]{opacity:.45;cursor:not-allowed;background:none;color:var(--ink);border-color:var(--ink)} .btnrow{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center} /* a text action, used where a button would be too loud */ .act{ display:inline-flex;align-items:center;gap:10px;min-height:44px; background:none;border:0;padding:0;cursor:pointer; font-family:var(--M);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink);align-self:flex-start; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px; text-decoration-color:var(--hair); transition:text-decoration-color var(--t-fast) linear; } .act:hover{text-decoration-color:var(--ink)} .act--rev,.section--ink .act{color:var(--paper);text-decoration-color:var(--hair-rev)} .act--rev:hover,.section--ink .act:hover{text-decoration-color:var(--paper)} /* ── 09 · FOOTER ───────────────────────────────────────────────────────── */ .foot{border-top:1px solid var(--ink);padding-block:56px 40px;background:var(--paper)} .foot__grid{ display:grid;gap:40px; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); align-items:start; } .foot__list{display:flex;flex-direction:column;gap:10px;margin-top:16px} .foot__list a,.foot__list span{ font-size:15px;color:var(--slate); transition:color var(--t-fast) linear; } .foot__mark{display:block;height:24px;width:auto} .foot__line{margin-top:18px;max-width:32ch} .foot__list a:hover{color:var(--ink)} .foot__note{ margin-top:48px;padding-top:18px;border-top:1px solid var(--hairsoft); display:flex;flex-wrap:wrap;gap:12px 32px; } .foot__note span{font-family:var(--M);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)} /* ── 11 · MOTION PRIMITIVES ────────────────────────────────────────────── */ /* Opacity + a short translation. Nothing scales, nothing bounces, nothing rotates on entry. Staggering is done with a per-element delay set in JS. */ /* Gated on .js, which the inline script in every sets. If that script never runs — JavaScript off, blocked, or failed — nothing is hidden and the whole page is readable exactly as written. An entrance animation must never be the reason a sentence cannot be read. */ .js [data-reveal]{ opacity:0;transform:translateY(10px); transition:opacity .6s var(--ease),transform .6s var(--ease); } .js [data-reveal].is-in{opacity:1;transform:none} /* A masked reveal, left to right — the same gesture as the search widening. Mask, not clip-path: a clipped element has no intersection area, so the observer that is meant to reveal it never sees it arrive. */ .js [data-reveal="wipe"]{ opacity:1;transform:none; -webkit-mask-image:linear-gradient(90deg,#000 0 100%); mask-image:linear-gradient(90deg,#000 0 100%); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:left center;mask-position:left center; -webkit-mask-size:0% 100%;mask-size:0% 100%; transition:-webkit-mask-size .9s cubic-bezier(.16,.84,.30,1),mask-size .9s cubic-bezier(.16,.84,.30,1); } .js [data-reveal="wipe"].is-in{-webkit-mask-size:100% 100%;mask-size:100% 100%} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important; } [data-reveal]{opacity:1 !important;transform:none !important} [data-reveal="wipe"]{-webkit-mask-image:none !important;mask-image:none !important} /* the people are present and still */ .person,.marker,.compare__dot{opacity:1 !important} .marker[data-state="out"]{opacity:.14 !important} } /* ── 12 · SMALL SHARED PIECES ──────────────────────────────────────────── */ .phead__more{margin-top:18px;max-width:58ch} .opt{text-transform:none;letter-spacing:0} .list{display:grid;gap:8px;color:var(--slate)} .list li{padding-left:16px;position:relative} .list li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--ink)} .numlist{display:grid;gap:10px;color:var(--slate)} .numlist li{display:grid;grid-template-columns:34px 1fr} .numlist b{font-family:var(--M);font-weight:400;font-size:12px;color:var(--ink);padding-top:2px}