/* ========================================================================== MedStaffed — shared stylesheet Single source of visual truth for every page. Pages add markup, never global CSS. The palette and the Poppins/Open Sans pairing are INHERITED from the six live forms in ../Public Forms/ so the site and the forms read as one product. Values are not re-picked here. Deliberately LIGHT-ONLY, with every colour painted explicitly. The forms commit to one visual world and a marketing site that flipped to a dark palette while the form it links to stayed navy-on-grey would look broken at the exact moment a visitor converts. This is a choice, not an omission — hence no prefers-color-scheme block anywhere in this file. ========================================================================== */ /* LIGHT-ONLY, DECLARED. The stylesheet was committed to light-only deliberately -- a marketing site that flipped dark while the form it converts into stayed navy-on-grey would look broken at the exact moment a visitor commits -- and then never told the browser. Two things follow from the omission, both on mobile, where most of these readers are: - Chrome's Auto Dark Theme on Android will invert a page that has not opted out. Every text/background pair on this site was measured to clear 4.5:1; an automatic inversion throws all of that away and nobody would ever see the result to know. - Scrollbars and any UA-painted surface render dark against a light page. `color-scheme: light` is the opt-out and the declaration in one line. It is not a preference for light, it is a statement that light is the only thing this site has been built and measured in. */ :root{color-scheme:light} :root{ /* inherited palette — see Website/CLAUDE.md */ --navy:#1D1D35; --navy-soft:#2A2A48; --teal:#09BC8A; /* teal-d and muted were MEASURED failing WCAG AA as small text: #079B72 gave 3.27:1 on the page background and #64748B gave 4.40:1, just under the 4.5 threshold. Both are darkened along their own hue -- lightness only, so the brand colour is unchanged to the eye. Solved for the LIGHTEST value that clears the threshold on ALL THREE grounds these tokens sit on: the page background #F4F6F9, a card #FFFFFF, and the mint callout #E6F6F3. Mint was missed on the first solve and both tokens failed on it (4.37 and 4.40) -- the callouts and the comparison table's highlighted cells use it. Targeting 4.6 rather than 4.5, because a value that rounds to the threshold is not a pass. teal-d: 4.80 / 5.20 / 4.66. muted: 4.78 / 5.17 / 4.64. Re-measure if any ground changes. */ --teal-d:#067C5B; --focus:#079C73; /* focus ring only — see :focus-visible below */ --mint:#E6F6F3; --bg:#F4F6F9; --border:#E2E8F0; --text:#1E293B; --muted:#5F6E84; --white:#FFFFFF; --on-navy:#C7C9D6; /* body copy on the navy ground, from the forms' hero */ --on-navy-dim:#AEB1C4; /* type */ --display:'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; --body:'Open Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; --fs-xs:12.5px; --fs-sm:15px; --fs-base:16px; --fs-md:17px; --fs-lg:20px; --fs-xl:24px; --fs-2xl:30px; --fs-3xl:38px; /* rhythm */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:88px; --r:10px; --r-lg:16px; --r-pill:999px; --shadow:0 10px 30px rgba(15,23,42,.06); --shadow-hover:0 14px 36px rgba(15,23,42,.10); --measure:66ch; /* Capa editorial, 2026-09-07. Chris aprobó la dirección tras ver _prototype-editorial.html. NINGUNO DE ESTOS REEMPLAZA A OTRO TOKEN. --paper NO sustituye a --bg: --bg sigue siendo el fondo de las tres páginas que todavía no se han llevado a esta dirección, y cambiarlo las movería a todas sin haberlo decidido. Se aplica por sección, no al body. */ --paper:#F7F5F1; /* papel cálido, no gris de interfaz */ --navy-2:#141426; /* el navy del cierre, un punto más profundo que el hero */ --ink:#14141F; /* titulares editoriales; --text sigue siendo el cuerpo */ --cold:#8A93A6; /* el lado BPO: 5.32 sobre navy. Restado de énfasis, no de legibilidad. */ } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--body);font-size:var(--fs-base);line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} /* ONE BOLD, AND IT IS A BOLD WE ACTUALLY LOAD. Measured across all eight pages: nine elements -- every in a .note, plus two in body paragraphs -- computed to **Open Sans 700**, which is the UA default for those tags and a weight this site never requests. The browser has to synthesise it, so those nine were faux-bold sitting beside the real 600 used everywhere else. Declared once here rather than patched per component: the site has one emphasis weight. */ b, strong{font-weight:600} h1, h2, h3, h4{font-family:var(--display);color:var(--navy);line-height:1.25;margin:0; text-wrap:balance;font-weight:600} h1{font-size:var(--fs-3xl);letter-spacing:-.02em} h2{font-size:var(--fs-2xl);letter-spacing:-.015em} h3{font-size:var(--fs-lg)} h4{font-size:var(--fs-md)} p{margin:0} a{color:var(--teal-d);text-decoration-thickness:1px;text-underline-offset:2px} a:hover{color:var(--navy)} ul, ol{margin:0;padding:0} /* Keyboard focus must be visible on both the light ground and the navy hero. MEASURED: the brand teal #09BC8A scores only 2.26 / 2.45 / 2.20 against the page background, a card and the mint callout — under the 3:1 WCAG 2.2 asks of a focus indicator, so the ring was genuinely too faint to find on a light page. --focus is a slightly darker teal chosen as the lightest value clearing 3:1 on all three (3.23 / 3.49 / 3.13). It is used ONLY for the focus ring; --teal is untouched, so buttons and bullets keep the exact brand colour. White on navy measures 16.41 and needs no change. */ :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px} /* The white ring on navy. This previously read `.on-navy :focus-visible` — but .on-navy is a CSS VARIABLE (--on-navy), never a class on any element, so it matched nothing and the navy footer, hero and band all fell back to the teal ring. Teal on navy measures 4.70:1, which does clear the 3:1 a focus indicator needs, so this was never a failure — but white measures 16.41:1 and a keyboard user should not have to hunt for the ring. Aimed at the real navy grounds. */ .site-footer :focus-visible, .hero-photo :focus-visible, .band :focus-visible{outline-color:#fff} /* The skip link's TARGET has to be focusable or the skip does not skip.
was id-only, so activating "Skip to content" scrolled the page while the next Tab went straight back into the header nav — the one accessibility affordance on the site, not doing its job. tabindex="-1" makes main programmatically focusable; the outline is suppressed because this focus is a consequence of the jump, not a keyboard position the user chose, and a ring around the entire page reads as a rendering fault. Every other focus ring is untouched. */ main[tabindex="-1"]:focus{outline:none} .skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff; padding:var(--sp-3) var(--sp-4);z-index:100;border-radius:0 0 var(--r) 0} .skip:focus{left:0} /* ── layout ───────────────────────────────────────────────────────────── */ .container{max-width:1080px;margin:0 auto;padding-inline:var(--sp-5)} .section{padding-block:var(--sp-8)} .measure{max-width:var(--measure)} /* Wide content never makes the page scroll sideways — it scrolls inside its own box. */ .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ── type helpers ─────────────────────────────────────────────────────── */ .eyebrow{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--teal-d)} .eyebrow-dim{color:var(--muted)} .lede{font-size:var(--fs-md);color:var(--muted);line-height:1.65;max-width:var(--measure)} .muted{color:var(--muted)} .small{font-size:var(--fs-sm)} /* ── header ───────────────────────────────────────────────────────────── */ .site-header{background:var(--white);border-bottom:1px solid var(--border); position:sticky;top:0;z-index:50} .site-header .container{display:flex;align-items:center;gap:var(--sp-5); min-height:64px;padding-block:var(--sp-3)} .brand{font-family:var(--display);font-weight:700;font-size:var(--fs-lg);color:var(--navy); text-decoration:none;letter-spacing:.2px;display:inline-flex;align-items:center} /* No flex gap here: the wordmark is ONE word split across two elements, and a gap renders it as "Med Staffed". The logo image carries its own margin instead. */ .brand span{color:var(--teal)} .brand img{height:30px;width:auto;display:block} /* The `Med`+teal`Staffed` text rules above are now the FALLBACK path only — they render if the image is ever removed, and alt="MedStaffed" covers the case where it fails to load. The logo is a superset of that wordmark (same navy/teal, plus the caduceus), so the site still reads as the same brand as the forms, which use the text version. */ .nav{display:flex;align-items:center;gap:var(--sp-5);margin-left:auto} /* The nav now ships with the `hidden` attribute so that a page whose JavaScript never arrives does not render the mobile panel stuck open over the hero. At desktop the attribute is simply ignored: the navigation is always present here, JS or no JS, and site.js clears the attribute anyway on any browser that runs it. */ @media (min-width:861px){ .nav[hidden]{display:flex} } /* `:not(.btn)` — the CTA in the header is an INSIDE .nav, so this rule was landing on it: `.nav a` is (0,1,1) and `.btn` is (0,1,0), so the nav-link styling won. The button was rendering with `padding:8px 0` — no horizontal padding at all, where every other button has 24px — and a 2px bottom border against 1px on its other three sides, which pushed the label 1px above optical centre. Measured: gapTop 11, gapBottom 13 on a 44px button. It is the only button on the site that lives inside a nav, so nothing else was affected and nothing else was hiding it. */ .nav a:not(.btn){color:var(--text);text-decoration:none;font-size:var(--fs-sm);font-weight:600; padding:var(--sp-2) 0;border-bottom:2px solid transparent} .nav a:not(.btn):hover{color:var(--teal-d)} /* --teal-d, not --teal. This underline is the ONLY visual "you are here" signal in the header — the current link's navy measures 16.41:1 against white and the others' text colour 14.63:1, a difference nobody can see — and at --teal the underline is 2.45:1, under the 3:1 WCAG 2.2 asks of a non-text indicator. --teal-d is 5.20:1. Third place this token was used where it had to carry meaning rather than decorate; see the index arrows. */ .nav a:not(.btn)[aria-current="page"]{color:var(--navy);border-bottom-color:var(--teal-d)} .nav-toggle{display:none;margin-left:auto;background:var(--white);border:1px solid var(--border); border-radius:var(--r);color:var(--navy);font:600 var(--fs-sm)/1 var(--display); padding:var(--sp-3) var(--sp-4);min-height:44px;cursor:pointer} @media (max-width:860px){ .nav-toggle{display:inline-flex;align-items:center;gap:var(--sp-2)} .nav{position:absolute;top:100%;left:0;right:0;background:var(--white); border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch; gap:0;margin:0;padding:var(--sp-3) var(--sp-5) var(--sp-5);box-shadow:var(--shadow)} .nav[hidden]{display:none} /* At mobile the bottom border becomes the row separator, so the desktop underline cannot also be the current-page marker — it was simply switched off here, which left the phone with NO visible "you are here" at all while the desktop had one. aria-current was in the markup the whole time, so assistive tech knew and the eye did not. A left bar instead: every row reserves 3px of transparent border so nothing shifts, and only the current one fills it. */ .nav a:not(.btn){padding:var(--sp-4) 0 var(--sp-4) var(--sp-4);border-bottom:1px solid var(--border); border-left:3px solid transparent} .nav a:not(.btn)[aria-current="page"]{border-bottom-color:var(--border);border-left-color:var(--teal-d)} .nav .btn{margin-top:var(--sp-4);justify-content:center} } /* ── buttons — 44px minimum target everywhere ─────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); min-height:44px;padding:var(--sp-3) var(--sp-5);border-radius:var(--r); font-family:var(--display);font-size:var(--fs-sm);font-weight:600; text-decoration:none;cursor:pointer;border:1px solid transparent; transition:background-color .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s} /* D3, chosen by Chris 2026-09-05: NAVY SWEEPS ACROSS on hover, teal to navy, the whole palette in one gesture. The fill is a pseudo-element scaled from the left rather than a background-position trick, because a transform animates on the compositor and a background does not. `isolation:isolate` gives the button its own stacking context so the `z-index:-1` fill sits behind the label instead of behind the button. White on navy is 16.41:1; the resting state stays navy-on-teal at 6.70:1, which is fixed — white on this teal is 2.45:1 and cannot be used. Primary only: .btn-ghost sits ON navy, where a navy sweep would be invisible. */ .btn-primary{background:var(--teal);color:var(--navy);position:relative;overflow:hidden; isolation:isolate} .btn-primary::before{content:"";position:absolute;inset:0;background:var(--navy);z-index:-1; transform:scaleX(0);transform-origin:left; transition:transform .28s cubic-bezier(.2,.7,.3,1)} .btn-primary:hover{color:var(--white)} .btn-primary:hover::before{transform:scaleX(1)} .btn-outline{background:var(--white);color:var(--navy);border-color:var(--border)} .btn-outline:hover{border-color:var(--navy);color:var(--navy)} .btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35)} .btn-ghost:hover{background:rgba(255,255,255,.10);color:var(--white)} .btn-lg{min-height:52px;padding:var(--sp-4) var(--sp-6);font-size:var(--fs-base)} .btn:active{transform:translateY(1px)} /* ── hero actions ───────────────────────────────────────────────────────── The flat navy .hero component and its .hero-points list were REMOVED on 2026-09-04. Every page now opens with .hero-photo, an editorial header or a quiet typographic block; the flat navy slab is the exact thing the redesign replaced, and a stylesheet that still offers it invites a ninth page to reach for it. Only .hero-actions survives, because .hero-photo uses it. */ .hero-actions{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-6)} /* NOTE: a .pull-up helper (negative margin + z-index, for a card row overlapping the hero, as the public forms do) was removed on 2026-09-04. No page ever used it, it was never tested at any viewport here, and documenting an unproven positioning hack in the styleguide would invite a later page to reach for it. The forms still carry the pattern if it is ever wanted back. */ /* ── photographic hero (R2026-09-04) ─────────────────────────────────────── Replaces the flat navy block every page opened with. The photograph carries the page; the navy survives as a gradient scrim over it, dark enough on the left for white text to clear AA and fading right so the image is actually visible rather than merely tinted. */ .hero-photo{position:relative;background:var(--navy);overflow:hidden;isolation:isolate} .hero-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:60% 40%;z-index:-2} .hero-photo::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(29,29,53,.96) 0%,rgba(29,29,53,.88) 38%,rgba(29,29,53,.55) 68%,rgba(29,29,53,.35) 100%)} .hero-photo .container{padding-block:var(--sp-9) var(--sp-9);max-width:1080px} .hero-photo .hero-actions{margin-top:var(--sp-7)} .hero-photo h1{color:#fff;max-width:15ch;font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.08; letter-spacing:-.03em} .hero-photo .lede{color:#E3E6F2;max-width:46ch;font-size:var(--fs-lg);margin-top:var(--sp-6);line-height:1.6} .hero-kicker{display:inline-flex;align-items:center;gap:var(--sp-3);color:var(--teal); font-family:var(--display);font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em; text-transform:uppercase;margin-bottom:var(--sp-5)} .hero-kicker::before{content:"";width:26px;height:2px;background:var(--teal)} /* THE SECONDARY HERO BUTTON WAS FAILING AS A BUTTON, and no check on this site could have found it. `.btn-ghost` is transparent: the only thing saying "this is a button and not a sentence" is a `rgba(255,255,255,.35)` hairline, and WCAG 2.2 asks 3:1 of a non-text indicator like that. The accessibility pass measured 647 text/background PAIRS -- but over a photograph there is no pair to look up. The background is the image composited under the scrim, so it has to be sampled. Drawn to a canvas and measured at 77 points along the border: **2.76 to 3.21**, under the bar across most of its own edge. The white label was never at risk (10.72 at its worst); it is the affordance that was failing, which is the harder kind to notice because the words stay readable. On the two FLAT navy bands the identical border measures 3.18 and passes, so this is scoped to the hero rather than fixed globally -- changing `.btn-ghost` everywhere would over-correct two places that are already right. A FILL, not just a stronger border, and that is the durable half of the fix: without it the button's legibility depends on which photograph happens to be behind it, and more photography is the top open item on this project. The fill sets a floor, so any future hero image inherits a button that still reads as one. Measured after the change rather than assumed. */ .hero-photo .btn-ghost{background:rgba(29,29,53,.45);border-color:rgba(255,255,255,.55)} .hero-photo .btn-ghost:hover{background:rgba(29,29,53,.62);border-color:rgba(255,255,255,.75)} @media (max-width:700px){ .hero-photo>img{object-position:70% 35%} /* Lighter than it first was: at .90+ the photograph was invisible and the hero read as the flat navy block this redesign exists to replace. This still clears AA for white text over the darkest region of the image. */ .hero-photo::after{background:linear-gradient(180deg,rgba(29,29,53,.78) 0%,rgba(29,29,53,.86) 55%,rgba(29,29,53,.94) 100%)} } /* Question index. Ten questions is too many to scroll blind hoping yours is in there — the whole point of an FAQ is that a reader arrives with ONE question. Two columns of jump links put every question on the first screen. */ .qindex{columns:2;column-gap:var(--sp-8);margin-top:var(--sp-6); border-top:1px solid var(--border);padding-top:var(--sp-5)} .qindex li{list-style:none;break-inside:avoid} .qindex a{display:block;padding:var(--sp-3) 0;color:var(--text);font-size:var(--fs-sm); text-decoration:none;border-bottom:1px solid var(--rule-none,transparent)} .qindex a:hover{color:var(--teal-d)} /* --teal-d, not --teal. This arrow is the affordance that says "these are links" — the row is otherwise plain type — so WCAG 2.2 wants 3:1 for it. Measured: --teal is 2.45:1 on white, --teal-d is 5.20:1. The link text itself is 16.41:1 and was never at risk; the thing that announced it was a link was the part that was too faint. Same fix on .namewall below. */ .qindex a::before{content:"→";color:var(--teal-d);margin-right:var(--sp-3); display:inline-block;transition:transform .15s} .qindex a:hover::before{transform:translateX(3px)} @media (max-width:640px){ .qindex{columns:1} } /* One centred column, for the 404. A person who hits a dead end wants one move back onto the road, not the site's information architecture re-presented in four boxes of prose at the worst possible moment. Left-aligned inside a centred block, because a centred list of links has no edge for the eye to run down. */ .qindex-quiet{columns:1;max-width:34ch;margin-inline:auto;text-align:left; border-top:1px solid var(--border);margin-top:var(--sp-7)} section[id]{scroll-margin-top:88px} /* ── fact list ───────────────────────────────────────────────────────────── Related statements that are NOT a sequence, so no numbers, and not products, so no cards. A rule above each holds the row together without drawing four rectangles on the page. Sized so four fit exactly in a 1080px container: the previous four-card version wrapped 3 + 1, the same orphan the tiers had, and an orphaned fourth item reads as an afterthought. */ /* EXPLICIT counts, not auto-fit. A 56-check sweep (8 pages x 7 widths) caught this at 900px: 852px of container divided by a 228px minimum gives THREE columns, and four items wrap 3 + 1. 4 / 2 / 1 all divide four cleanly, so there is no width where the last item can strand. */ .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6) var(--sp-6)} @media (max-width:559px){ .facts{grid-template-columns:1fr} } @media (min-width:1000px){ .facts{grid-template-columns:repeat(4,minmax(0,1fr))} } /* .facts is tuned for FOUR items (228px min -> four columns at 1080). Six items in it wrap 4 + 2. .facts-3, the three-column variant, was DELETED on 2026-09-05 with Chris's approval: its only user was the six-item list on for-candidates, which became an accordion when he chose E2. THE RULE IT ENCODED OUTLIVES IT, and applies to any grid you build here: THREE COLUMNS OR ONE, NEVER TWO. Two columns strand the third item of a group of three on a row by itself. If a group of three, six or nine ever needs a grid again, that is the constraint to rebuild against. */ /* O2, chosen by Chris 2026-09-06. .facts is tuned for FOUR and resolves to four tracks at 1000px+. The candidate page's "What we do not promise" holds TWO, so both were squeezed into 234px on the left with HALF THE ROW EMPTY -- inside the site's one navy band, where empty space is loudest. THIS IS NOT THE MISTAKE .facts-3 WAS. That variant was deleted because nothing used it, not because two-column grids are wrong; the rule it carried is about groups of THREE stranding an orphan in a two-track grid. Here two IS the number of things being said, and writing two tracks is the fix rather than the bug. A third item is not available: it would mean inventing a promise MedStaffed does not make. */ .facts-2{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:559px){ .facts-2{grid-template-columns:1fr} } .facts>div{border-top:2px solid var(--navy);padding-top:var(--sp-4)} .facts h3{font-size:var(--fs-md);margin-bottom:var(--sp-2)} .facts p{color:var(--muted);font-size:var(--fs-sm)} /* ── numbered list: replaces a row of near-identical cards ─────────────── */ .ticks{display:flex;flex-direction:column;gap:var(--sp-5);counter-reset:tick} .ticks li{list-style:none;display:grid;grid-template-columns:34px 1fr;gap:var(--sp-4); align-items:start} .ticks li::before{counter-increment:tick;content:counter(tick,decimal-leading-zero); font-family:var(--display);font-size:var(--fs-sm);font-weight:600;color:var(--teal-d); border:2px solid var(--mint);border-radius:50%;width:34px;height:34px; display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums} .ticks h3{font-size:var(--fs-md);margin-bottom:2px} .ticks p{color:var(--muted);font-size:var(--fs-sm);max-width:52ch} /* B3, chosen by Chris 2026-09-05: THE TEN ROLES AS CHIPS. They were a ten-row accordion carrying 333 words of per-role detail. Chips are names only, so that detail has left the site — a deliberate trade for a section that reads as a capability list in one glance instead of a menu to work through. THE IDS ARE KEPT. for-candidates.html deep-links all ten (`index.html#virtual-scribe` and the rest) and those anchors were already published, so each chip is still a scroll target even though it is no longer a control. `scroll-margin-top` keeps a jumped-to chip clear of the sticky header, the same 88px every other target on this page uses. */ .rolechips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-6);padding:0} .rolechips li{list-style:none;border:1px solid #CBD5E1;border-radius:99px; padding:9px 15px;font-family:var(--display);font-weight:600;font-size:var(--fs-sm); color:var(--navy);background:var(--white);scroll-margin-top:88px} /* #CBD5E1, not --border: the outline is the only thing separating one chip from the next, so it is a boundary rather than decoration. --border is 1.28:1 on white, which is no boundary at all. */ /* ── role list: 10 names as type, not 10 boxes ─────────────────────────── */ /* A GRID, not CSS multi-column. As `columns:3` the browser balanced ten items 4 / 4 / 2 — the third column half the height of the other two, which reads as an unfinished block rather than three even ones. Multi-column balancing is approximate and cannot be told to divide evenly. Two explicit columns give exactly five rows of two at every width above 560. */ .rolelist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--sp-7);margin-top:var(--sp-6)} /* THE PADDING BELONGS TO THE LINK, NOT THE ROW. It used to sit on the
  • : the row measured 60px tall and looked like a generous target, but the inside it was only the text line — **27px** at 320, measured. The padding was outside the anchor, so two thirds of every row was not tappable. Twenty of these across index and for-candidates, and the site holds every button to 44px. `.qindex` had it right all along — its padding is on the anchor. */ .rolelist li{list-style:none;break-inside:avoid; border-top:1px solid var(--border);font-family:var(--display);font-weight:600; font-size:var(--fs-md);color:var(--navy)} /* Optional links. On the home page these ten names are a display list for a clinic that is browsing; on for-candidates each one points at its definition, because a candidate is asking which of them they are and that should be one click. Same arrow, same --teal-d, as .namewall and .qindex -- a third link style would be a third thing to learn. */ .rolelist a{color:inherit;text-decoration:none;display:flex;align-items:center; justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) 0;min-height:44px} .rolelist a::after{content:"→"; /* the LITERAL arrow, matching .namewall and .qindex. A CSS escape for this character was mangled into a stray "92" on every FAQ link once already; there is no reason to reintroduce one when the siblings use the character. */ color:var(--teal-d);font-size:var(--fs-sm);flex:none; transition:transform .15s} .rolelist a:hover{color:var(--teal-d)} .rolelist a:hover::after{transform:translateX(3px)} @media (max-width:520px){ .rolelist{grid-template-columns:1fr} } /* ── a dark band, so the page rhythm is not grey all the way down ──────── */ .band{background:var(--navy);color:#fff} .band h2{color:#fff} .band .lede{color:#C7C9D6} .band .eyebrow{color:var(--teal)} /* THE STEP OWNER LINE, ON NAVY. `.step-who` is `--muted` and `.step-who b` is `--teal-d`, both solved against the LIGHT grounds during the accessibility pass. The navy band was added to the home page afterwards, during the redesign, and nothing re-measured the pairs it created: measured now, `--muted` on navy is **3.17:1** and the teal-d separator **3.16:1**, against the 4.5 that 12.5px text needs. Four of these on the home page, in the section that explains what the client does and what we do. `--on-navy` is the token that exists for exactly this ground, and the separator takes plain `--teal`, which is 6.70:1 here — the mirror of the rule everywhere else, where teal is too light and teal-d carries. On navy it is the other way round. */ .band .step-who{color:var(--on-navy)} .band .step-who b{color:var(--teal)} /* .facts ON THE BAND. Its rule is `2px solid var(--navy)` and its heading is navy — both invisible against a navy ground — and its body copy is `--muted`, which is the pair that measured 3.17:1 on this same ground two firings ago. Every value here is the token that exists for navy, and all three were measured after the change rather than assumed: heading 16.41, body 9.97, and the rule in teal, which is a non-text indicator at 6.70 where 3.0 is the bar. */ .band .facts>div{border-top-color:var(--teal)} .band .facts h3{color:#fff} .band .facts p{color:var(--on-navy)} /* ── routes: a page of doors is an index, not a grid of boxes ────────────── contact.html carried SIX cards — four route cards plus two "read this first" boxes — on a page whose whole job is sending the reader to the right form. A grid makes four unlike choices look like four comparable products, and the reader ping-pongs across boxes instead of scanning down. Three fixed columns — what you want, what happens, the action — read as an index, which is what the page is. Rules rather than borders: nothing here is a container. */ .routes{margin-top:var(--sp-7);border-top:1px solid var(--border);padding:0} /* When the list opens its own section there is no heading above it to be spaced from, and the section padding plus this margin stacked into ~130px of blank grey before the first rule — visible as an accidental void at 375, where the page is narrow enough to notice. */ .routes:first-child{margin-top:0} .routes>li{list-style:none;display:grid; /* ALL-fr, never `auto` on the action column: each
  • is its own grid, so an auto track sizes to THAT row's button and every row landed on different column boundaries — the four actions started at x=951, 987, 913 and 984 and the description edges were ragged with them. Fractions resolve identically in every row, so the three columns line up down the page. */ grid-template-columns:minmax(0,7fr) minmax(0,10fr) minmax(272px,7fr); /* 7fr, and this column has now been wrong TWICE for the same reason. At 5fr the longest label ("Apply to the talent network", nowrap) ran 22px past the rule that ends every row. 6fr fixed it with about 9px to spare -- and raising --fs-sm from 13.5px to 15px grew that label by roughly 21px, which ate the margin and put it 12px past the rule again. Neither time did the page scroll sideways, so nothing but measuring the row's own right edge would report it. 7fr leaves real headroom; swept 880-1400 after the change. The lesson for the next person: a nowrap label in an all-fr track is a size dependency on the TYPE SCALE, and it has to be re-checked whenever a font-size token moves. 7fr ALONE was still not enough, and that exposed the real structural fault rather than a tuning error: proportional tracks shrink with the viewport and a nowrap label does not, so NO ratio is correct at every width -- 7fr passed at 1100 and above and still ran 34px past the rule at 920. The floor below fixes it properly, and it keeps the property the all-fr rule was protecting: 272px resolves to the same track in every row. It is `auto` and `max-content` that vary row by row, which is what raggedied the column originally. Swept eight widths from 880 to 1600 after the change. */ gap:var(--sp-4) var(--sp-7);align-items:start; padding-block:var(--sp-6);border-bottom:1px solid var(--border)} .routes h2{font-size:var(--fs-lg);line-height:1.3} .routes p{color:var(--muted);font-size:var(--fs-sm)} .routes .btn{white-space:nowrap;justify-self:start} /* left edges aligned down the column; .btn is inline-flex so it will not stretch, and four different-length labels ending flush right left a ragged left edge exactly where the eye scans for the action */ @media (max-width:880px){ .routes>li{grid-template-columns:1fr;gap:var(--sp-3)} .routes .btn{justify-self:start;margin-top:var(--sp-2)} } /* ── cards ────────────────────────────────────────────────────────────── */ .card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg); padding:var(--sp-5);box-shadow:var(--shadow)} .card h3{margin-bottom:var(--sp-2)} /* Same reasoning as .card-flat h3 below: a card heading is often semantically an h2 (a top-level section of its page) but must not render at the page-heading size. Set the size, keep the level. */ .card h2{font-size:var(--fs-lg)} /* Flat cards carry a heading that is semantically h3 (it sits under the section's h2) but should read at h4 size. Fixing this in CSS keeps the heading ORDER correct without shrinking the type scale — using an h4 here to get the size skipped a level for screen readers. */ .card p{color:var(--muted);font-size:var(--fs-sm)} /* .ours was DELETED on 2026-09-05 with the rest of the orphan prune. It highlighted "our" column in mint, which was the ARGUMENT in the old BPO-versus-us table. .versus makes that argument now. What .compare is still for is a LOOKUP table -- the page-openings matrix in the styleguide -- and a lookup table has no side to favour, so nothing should set .ours again without a reason. */ /* ── comparison table ─────────────────────────────────────────────────── */ .compare{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--fs-sm); background:var(--white)} .compare th, .compare td{text-align:left;padding:var(--sp-4);vertical-align:top; border-bottom:1px solid var(--border)} .compare thead th{font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.08em; text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap} .compare tbody tr:last-child td{border-bottom:0} .compare td:first-child{color:var(--muted);width:28%} /* THE COMPARISON TABLE ON A PHONE. Measured at 375: the box shows 327px of a 560px table — 58% — and the "Direct placement" column starts 22px PAST the right edge. So the column carrying the entire argument was invisible until the reader discovered they could scroll sideways inside a box that gives no hint it scrolls. Same shape on pricing's billing table. Below 640px each row becomes its own block: the row header is its title, and each value is prefixed by the column it belongs to, taken from data-label. Nothing is off-screen and nothing has to be scrolled to. Setting display:block on table elements strips their implicit semantics, which is why the markup now carries explicit role="table"/"row"/"cell"/"rowheader" — the visual change must not cost a screen-reader user the structure. */ @media (max-width:640px){ .scroll-x:has(.compare){overflow-x:visible} .compare{min-width:0;display:block} .compare thead{position:absolute;left:-9999px} /* the labels move into the cells */ .compare tbody, .compare tr, .compare th, .compare td{display:block;width:auto} /* display:block on the table leaves the caption as a shrink-to-fit box, which wrapped "Managed seat versus direct placement" to ONE WORD PER LINE. It needs to be a block of its own with a real width. */ .compare caption{display:block;width:auto;padding:var(--sp-4) var(--sp-4) var(--sp-2)} .compare tr{border-bottom:1px solid var(--border);padding:var(--sp-4) var(--sp-4) var(--sp-5)} .compare tbody tr:last-child{border-bottom:0} .compare th[scope="row"]{font-family:var(--display);font-weight:600!important;color:var(--navy); font-size:var(--fs-md);padding:0 0 var(--sp-3);border-bottom:0} .compare td{padding:var(--sp-2) 0 0;border-bottom:0;width:auto} .compare td::before{content:attr(data-label);display:block;font-family:var(--display); font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin-bottom:2px} } /* ── numbered process steps ───────────────────────────────────────────── */ .steps{position:relative;padding-left:56px;display:flex;flex-direction:column;gap:var(--sp-6)} .steps::before{content:"";position:absolute;left:17px;top:10px;bottom:10px;width:2px; background:linear-gradient(to bottom,var(--teal),var(--mint))} .step{position:relative} .step-n{position:absolute;left:-56px;top:0;width:36px;height:36px;border-radius:50%; /* --teal-d, not --teal. This ring stopped being decoration when ownership coding landed: the difference between the "together" ring and the "ours" ring is now the signal separating two states. Measured on the page grey it was 2.26:1 against 1.14:1 — both under the 3:1 a non-text indicator needs, and the numerals inside them measured 4.80 and 4.79, which is no difference at all. So the whole distinction rested on two colours nobody could reliably see. */ background:var(--white);border:2px solid var(--teal-d);color:var(--teal-d); font-family:var(--display);font-weight:600;font-size:var(--fs-sm); display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums} /* A step title is semantically an h2 — it is a top-level section of the process page — but at the h2 size it competes with the page heading and each step reads as its own article. Size it here rather than demoting the tag, which is what breaks heading order. */ .step h2{font-size:var(--fs-lg)} .step-who{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);margin-top:var(--sp-1)} .step-who b{color:var(--teal-d)} .step p{margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-sm);max-width:var(--measure)} @media (max-width:520px){ .steps{padding-left:44px} .steps::before{left:13px} .step-n{left:-44px;width:28px;height:28px;font-size:var(--fs-xs)} } /* THE GUTTER COSTS TOO MUCH ON A PHONE. Measured at 375: the marker gutter takes 44px of a 327px container, so step body copy ran 283px wide — about **41 characters per line**, against the 45-75 that reads comfortably. These are the longest prose blocks on the site (ten process steps, seven application stages), and they were the hardest to read on the device most people use. Below 430px the number comes out of the gutter and sits on the same row as the title; the description then gets the full container width, 283px -> 327px, 41 -> 47 characters. The vertical spine goes with it: it exists to connect markers down a left rail, and there is no rail any more. Sequence is still carried by the numbers themselves, and on how-it-works the marker keeps its ownership fill — it just travels with its own heading now. 430px, not 520: at 520 the container is wide enough that the gutter costs nothing, and every common phone width (375, 390, 393, 412, 414, 428) sits under this line. */ @media (max-width:430px){ .steps{padding-left:0} .steps::before{display:none} .step{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-3)} .step-n{position:static;flex:none} .step h2, .step h3{flex:1;min-width:0} .step .step-who, .step p{flex-basis:100%;width:100%;max-width:none} /* The ticks list has the same 34px + 16px gutter for the same reason. One column below 430, number above the pair it belongs to. */ .ticks li{grid-template-columns:1fr;gap:var(--sp-3)} .ticks p{max-width:none} } /* ── accordion: progressive disclosure, now only on the home page's role list ────────────── Chris, 2026-09-04: the FAQ questions and the role descriptions should expand. Both pages were a wall of prose the reader had to scroll past to find the one entry they came for -- ten answers on the FAQ, ten definitions on roles. Built on
    / rather than JS-driven divs, because the native element is already a keyboard-operable disclosure widget with the right ARIA semantics, works with JS off, and can be forced open for printing. The JS in site.js only adds two things the element cannot do itself: open on a deep link, and open everything before the page is printed. The heading stays INSIDE the summary so the page's outline is unchanged -- h1, group label h2, question h3 on the FAQ; h1 then role h2 on roles. */ /* G2, chosen by Chris 2026-09-05: THE COMPARISON ARGUES INSTEAD OF TABULATING. Two columns, not an auto-fit grid — two is the meaning here, so it is written as two and the orphan rule does not apply. On the ours side the mint fill IS the argument, the same way the mint cell was in the table it replaces. Row dividers on mint are navy at 12%, not --border: --border is 1.28:1 on white and vanishes entirely on a tinted ground. Copy stays navy on mint, which measures 13.9:1. */ .versus{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:start} .versus-col{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--white); padding:var(--sp-6)} .versus-col>h3{margin:0;font-family:var(--display);font-weight:600;font-size:var(--fs-xs); letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .versus-col>ul{margin:var(--sp-4) 0 0;padding:0;list-style:none} .versus-col>ul>li{font-size:var(--fs-sm);color:var(--muted);padding-block:var(--sp-3); border-top:1px solid var(--border)} .versus-col>ul>li:first-child{border-top:0;padding-top:0} .versus-ours{background:var(--mint);border-color:var(--teal)} .versus-ours>h3{color:var(--teal-d)} .versus-ours>ul>li{color:var(--navy);font-weight:600;border-top-color:rgba(29,29,53,.12)} @media (max-width:820px){ .versus{grid-template-columns:1fr;gap:var(--sp-4)} } /* H3, chosen by Chris 2026-09-05: THE RESERVED SPACE IS A LINE, NOT A BOX. A dashed border around nothing announces the absence; a rule down the left edge holds the place without pointing at it. #CBD5E1 rather than --border for the same reason the chips use it — it is the only thing marking the line as set apart, so it has to be visible. */ .quiet-line{border-left:3px solid #CBD5E1;padding-left:var(--sp-4);margin-top:var(--sp-6); color:var(--muted);font-size:var(--fs-sm);max-width:var(--measure)} .acc-list{display:flex;flex-direction:column} .acc{border-top:1px solid var(--border);scroll-margin-top:88px} .acc-list>.acc:last-child{border-bottom:1px solid var(--border)} .acc>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline; gap:var(--sp-4);padding:var(--sp-4) 0;min-height:44px} .acc>summary::-webkit-details-marker{display:none} /* The +/- is the only thing announcing that a row opens, so it is --teal-d (5.20:1) like every other affordance on this site, not --teal (2.45:1). DRAWN AS TWO BARS rather than the "+" and "−" characters. A glyph swap cannot animate -- content is not an animatable property -- so the vertical bar rotates a quarter turn and fades as the row opens, and the plus becomes a minus in front of you. Both bars share a centre so they cross exactly: the horizontal is 14x2 at right:0, the vertical 2x14 at right:6. */ .acc>summary{position:relative;padding-right:30px} .acc>summary::after, .acc>summary::before{content:"";position:absolute;background:var(--teal-d); top:50%;border-radius:1px} .acc>summary::after{right:0;width:14px;height:2px;transform:translateY(-50%)} .acc>summary::before{right:6px;width:2px;height:14px;transform:translateY(-50%); transition:transform .25s ease,opacity .25s ease} .acc[open]>summary::before{transform:translateY(-50%) rotate(90deg);opacity:0} .acc>summary h2, .acc>summary h3{font-family:var(--display);font-weight:600;font-size:var(--fs-md); color:var(--navy);margin:0;text-wrap:balance} .acc>summary:hover h2, .acc>summary:hover h3, .acc[open]>summary h2, .acc[open]>summary h3{color:var(--teal-d)} .acc>*:not(summary){padding-bottom:var(--sp-5)} /* Opening a
    normally snaps. `interpolate-size: allow-keywords` lets height:auto take part in a transition, and ::details-content is the box the browser puts the panel in, so the panel can slide open with no JS and no measuring. Feature-queried: where it is unsupported the row still opens, just instantly, which is exactly what it did before. */ @supports (interpolate-size: allow-keywords) and selector(details::details-content){ :root{interpolate-size:allow-keywords} .acc::details-content{block-size:0;overflow:hidden; transition:block-size .3s ease,content-visibility .3s allow-discrete} .acc[open]::details-content{block-size:auto} } .acc p{color:var(--muted);font-size:var(--fs-sm);max-width:var(--measure)} .acc p+p{margin-top:var(--sp-3)} .acc strong{color:var(--text)} /* ── callout ──────────────────────────────────────────────────────────── */ .note{background:var(--mint);border-left:3px solid var(--teal);border-radius:0 var(--r) var(--r) 0; padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);color:var(--text);max-width:var(--measure)} .note b{color:var(--navy)} /* .testimonial-slot, .mark and .why were DELETED on 2026-09-05 with Chris's approval. He chose H3, which reserves the same space with .quiet-line instead of a dashed box. THE POLICY THEY EXISTED FOR IS UNCHANGED and is not stored in CSS: nothing is invented, and the space stays visibly reserved until a client offers a testimonial and asks to be named. See Website/CLAUDE.md. Deleting the box did not delete the rule. */ /* ── footer ───────────────────────────────────────────────────────────── */ .site-footer{background:var(--navy);color:var(--on-navy);margin-top:var(--sp-9)} .site-footer .container{padding-block:var(--sp-7)} .site-footer .brand{color:var(--white)} /* EXPLICIT column counts, not auto-fit. Four items in an auto-fit 200px grid gives THREE columns at tablet width and orphans the last one — the sixth time this codebase has shipped that shape, and the first time in the component that is on every single page. 4 / 2 / 1 divides cleanly at every width. The brand column takes 1.4fr because it carries a 34ch line, not a link list. */ .footer-grid{display:grid;gap:var(--sp-6);grid-template-columns:1fr} @media (min-width:560px){ .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:900px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr} } .site-footer h2{color:var(--white);font-size:var(--fs-sm);letter-spacing:.06em; text-transform:uppercase;margin-bottom:var(--sp-3);font-weight:600} .site-footer a{color:var(--on-navy);text-decoration:none;font-size:var(--fs-sm)} .site-footer a:hover{color:var(--teal)} /* Footer links were 22px tall with 8px between them — under the 24px minimum target WCAG 2.2 asks for, on nine links, on all eight pages. They are a navigation list, not prose, so the inline-text exception does not apply. 28px at desktop where a mouse is precise; 44px at touch widths, which is the minimum this site already holds every button to. */ .footer-links{display:flex;flex-direction:column;gap:var(--sp-2)} .footer-links a{display:flex;align-items:center;min-height:28px} @media (max-width:860px){ .footer-links{gap:0} .footer-links a{min-height:44px} } .footer-bottom{margin-top:var(--sp-6);padding-top:var(--sp-5); border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between; gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--on-navy-dim)} /* ── reveal on scroll ────────────────────────────────────────────────────── Chris, 2026-09-04: "seems way too plain, although there is beauty in simplicity." So: felt, not performed. 12px of travel and a fade over 500ms, once, on the way in — no parallax, no scaling, no re-animating when you scroll back up. THE INITIAL HIDDEN STATE IS GATED BEHIND html.js-reveal, which only site.js can add. If the script fails, never runs, or the browser has no IntersectionObserver, none of this applies and every section is simply visible. Hiding content in CSS and relying on JS to reveal it is how a site ends up blank for the people least able to afford it. The FIRST section of every page is deliberately excluded — the hero and the page headers are what a visitor came for, and fading in the thing they are already looking at is a delay dressed as design. Only what is below the fold moves. */ /* A2, chosen by Chris 2026-09-05: FADE ONLY. Sections used to rise 12px as they faded in; the movement is gone and only the opacity remains. The stagger stays, because it is what makes a section arrive in sequence rather than as a slab, and it costs no motion at all. Nothing here transforms any more, which is why the reduced-motion block below no longer needs to name .reveal: there is no displacement left to neutralise, only a duration to zero. */ .js-reveal .reveal{opacity:0; transition:opacity .55s ease; transition-delay:calc(var(--i,0) * 70ms)} .js-reveal .reveal.is-in{opacity:1} /* ── motion & print ───────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════════════════════ CAPA EDITORIAL — index, 2026-09-07 Chris: "me gustaría ver que el sitio fuera algo nuevo e inusual... siento que es una página sin mucha vida." Eligió, sobre cuatro opciones: editorial y guiada por la tipografía, con las cuatro fuentes de energía (tipo, movimiento, SVG propio, color), y "esto no es una BPO" como la sensación de los cinco segundos. ESA ÚLTIMA DECISIÓN ES LA QUE MANDA AQUÍ: la comparación es la PORTADA, no la sección dos. Todo lo de abajo es nuevo. No se modificó ninguna regla anterior: las otras tres páginas siguen sobre la misma hoja y no se han rediseñado. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ── hero: la comparación ───────────────────────────────────────────── */ .ed-hero{background:var(--navy);color:#fff;overflow:hidden; padding-block:clamp(56px,10vw,120px) clamp(44px,7vw,88px)} .ed-kick{font-family:var(--display);font-weight:600;font-size:var(--fs-xs);letter-spacing:.22em; text-transform:uppercase;color:var(--teal);margin:0 0 clamp(22px,4vw,40px)} .duo{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,32px);position:relative} @media (min-width:900px){ .duo{grid-template-columns:1fr 1px 1fr;gap:clamp(26px,4vw,56px); align-items:start} } /* .disp y h1 comparten tamaño porque son dos mitades de una frase. Sólo uno es un encabezado: el de la izquierda es lo que dice una BPO, y una página no se encabeza con la promesa de otro. */ .side h1,.side .disp{font-family:var(--display);font-weight:700;line-height:.94; letter-spacing:-.03em;font-size:clamp(2.2rem,6vw,4.6rem);margin:0} .side.them,.side.them .disp{color:var(--cold)} .side.us h1{color:#fff} .side.us h1 em{font-style:normal;color:var(--teal)} .side .who{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.2em; text-transform:uppercase;margin:0 0 14px} .side.them .who{color:#949CAE} /* 5.96 sobre navy; 11px en mayúsculas necesita margen */ .side.us .who{color:var(--teal)} .side p.sub{font-size:var(--fs-base);line-height:1.65;margin:clamp(18px,3vw,26px) 0 0;max-width:34ch} .side.them p.sub{color:var(--cold)} .side.us p.sub{color:#D6D9E6} .ed-cta{margin-top:clamp(38px,6vw,68px);display:flex;gap:var(--sp-3);flex-wrap:wrap} /* ── la costura, y por qué está donde está ────────────────────────────────── Chris, sobre la primera versión: "no todas las secciones necesitan de esta línea, o podría ser mucho más sutil y solo hacer un glow cuando el mouse esté cerca." Tenía razón, y la advertencia estaba escrita en el propio selector: obliga a que cada sección tenga lado, y no todas lo tienen. APARECE EN CUATRO SITIOS Y EN LOS CUATRO DIVIDE ALGO: el hero (ellos/nosotros), las cinco filas (la misma comparación), screening (pregunta/respuesta) y privacidad, donde el lado derecho vacío ES el argumento. **La línea de sección es estática**: lo que se mueve es el tramo teal de la fila que estás leyendo, más abajo. El resplandor que seguía al cursor se retiró el 2026-09-07 — y nunca llegó a encenderse en producción, porque su JavaScript se quedó en el prototipo. */ .rows,.know,.priv{position:relative} .rows::before,.know::before,.priv::before{content:"";position:absolute;top:0;bottom:0;left:50%; transform:translateX(-1px);width:2px;pointer-events:none;background:var(--seam-rest)} .rows,.know{--seam-rest:rgba(148,161,180,.30)} .priv{--seam-rest:rgba(148,161,180,.22)} .seam{display:none;align-self:stretch;background:rgba(255,255,255,.20)} @media (min-width:900px){ .seam{display:block} } @media (max-width:899px){ .rows::before,.know::before,.priv::before{display:none} } .rows>.container,.know>.container,.priv>.container{position:relative;z-index:1} /* LA COSTURA SE ENCIENDE DONDE ESTÁS LEYENDO, NO DONDE ESTÁ EL CURSOR. Chris, sobre la versión anterior: "no me gusta el glow de la costura, me gusta más la animación que hay cuando se selecciona la diferencia entre BPO y MedStaffed." El resplandor seguía al puntero, que no significa nada: iluminaba una altura arbitraria de una línea. Esto ilumina el TRAMO de la fila que estás comparando, que es lo único que el lector está haciendo en esa sección. Y de paso gana tres cosas que el otro no tenía: · `:focus-within` lo hace funcionar con teclado — un usuario de teclado no tiene puntero, así que el glow simplemente no existía para él; · no necesita JavaScript. Y aquí hay algo que conviene dejar escrito: el glow SE ENVIÓ A ESTA HOJA SIN SU MITAD DE JAVASCRIPT. El listener de `pointermove` sólo existía en el prototipo, así que en index `--gi` valía 0 siempre y el resplandor no se encendió nunca: la página real tenía una línea estática y un gradiente muerto. No se veía roto, que es lo peor de todo; · el segmento crece desde el centro, que es la misma gramática de movimiento que el barrido navy de los botones (D3) — el sitio tiene UN gesto, no dos parecidos. El hero y privacidad no lo llevan: no hay nada que seleccionar ahí, y encender por encender es justo lo que se acaba de quitar. */ .row,.kn{position:relative} .row::before,.kn::before{content:"";position:absolute;transform:translateX(-1px) scaleY(.12); width:2px;top:0;bottom:0;background:var(--teal);opacity:0;transform-origin:center; pointer-events:none;transition:opacity .26s ease,transform .3s cubic-bezier(.2,.7,.3,1)} .row:hover::before,.row:focus-within::before, .kn:hover::before,.kn:focus-within::before{opacity:1;transform:translateX(-1px) scaleY(1)} /* EL TRAMO NO SE CENTRA EN SÍ MISMO, SE CENTRA EN EL EJE DE LA PÁGINA, y los dos casos no son el mismo cálculo. Chris, 2026-09-07: "la animación de la barra que se expande no está alineada con la costura en what we know about someone before you do." Tenía razón, y el comentario que había aquí afirmaba lo contrario sin haberlo medido. `.row` ocupa el contenedor entero, así que su 50% ES el eje. `.kn` vive DENTRO de la columna derecha de la retícula, así que su 50% es el centro de esa columna — a media columna de distancia del eje. Desde el borde izquierdo de `.kn`, el eje está a media separación hacia atrás, que es exactamente el gap de `.know .grid`. Si ese gap cambia, este número tiene que cambiar con él: van juntos a propósito, con el mismo clamp escrito igual. */ .row::before{left:50%} .kn::before{left:calc(clamp(26px,4vw,56px) / -2)} @media (max-width:899px){ .row::before,.kn::before{display:none} } /* ── las cinco comparaciones ─────────────────────────────────────── */ .rows{background:var(--paper)} .rows h2{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:.98; font-size:clamp(1.5rem,3.4vw,2.4rem);max-width:16ch;margin:0 0 clamp(26px,4vw,46px); color:var(--ink)} .row{display:grid;grid-template-columns:1fr;gap:var(--sp-1);border-top:1px solid #CBD5E1; padding-block:clamp(16px,2.4vw,24px)} @media (min-width:900px){ .row{grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px); align-items:baseline} } .row:last-of-type{border-bottom:1px solid #CBD5E1} .row .a{color:var(--muted);font-size:var(--fs-base)} .row .b{color:var(--ink);font-family:var(--display);font-weight:600;letter-spacing:-.01em; font-size:clamp(var(--fs-md),2vw,20px)} /* ── screening: la pregunta a un lado, la respuesta al otro ───────────────────── */ .know{background:var(--white)} .know .grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,56px)} @media (min-width:900px){ .know .grid{grid-template-columns:1fr 1fr} } .know h2{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:.98; font-size:clamp(1.5rem,3.4vw,2.4rem);max-width:14ch;margin:0;color:var(--ink)} .kn{border-top:1px solid var(--border);padding-block:clamp(14px,2vw,20px)} .kn:last-child{border-bottom:1px solid var(--border)} .kn h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;margin:0; font-size:clamp(var(--fs-base),1.9vw,var(--fs-md));color:var(--ink)} .kn p{margin:var(--sp-1) 0 0;font-size:var(--fs-sm);color:var(--muted);max-width:44ch} /* ── tarifas: la frase más inusual del sitio, en grande ──────────────────────── Sin costura: aquí sólo partiría una retícula, y una retícula no es un argumento con dos lados. */ .fees{background:var(--paper)} .fees .big{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.03em; font-size:clamp(1.7rem,4.2vw,3.1rem);max-width:19ch;margin:0;color:var(--navy)} .fees .big em{font-style:normal;color:var(--teal-d)} /* SIN CAJAS. Eran cuatro fichas blancas con 2px de lechada entre ellas sobre papel, que es el aspecto de una hoja de cálculo, y la única cosa recuadrada de toda la página: .row, .kn y .priv se dividen con un filete y nada más. Chris, 2026-09-07: "se ve un poco monótono o fuera de lugar el diseño de la tabla." El filete es el mismo #CBD5E1 de las filas, sobre el mismo papel. */ .ff{display:grid;grid-template-columns:1fr;gap:0 clamp(26px,4vw,56px); margin-top:clamp(30px,5vw,50px)} @media (min-width:900px){ .ff{grid-template-columns:1fr 1fr} } .ff>div{border-top:1px solid #CBD5E1;padding:clamp(14px,2vw,20px) 0} .ff h3{font-family:var(--display);font-weight:600;font-size:var(--fs-base);margin:0; color:var(--navy)} .ff p{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:var(--muted)} /* ── los diez puestos ──────────────────────────────────────────── LA ÚNICA SECCIÓN SIN COSTURA A PROPÓSITO: las demás son un argumento con dos lados; ésta es una lista, y una lista no tiene bando. Nombres como tipografía, sin cajas. Los ids se conservan: for-candidates enlaza a los diez y los anclajes ya estaban publicados. */ .roles{background:var(--navy);color:#fff} .roles h2{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:.98; font-size:clamp(1.5rem,3.4vw,2.4rem);max-width:14ch;margin:0;color:#fff} .roles .lede{color:var(--on-navy);max-width:46ch} .wall{display:flex;flex-wrap:wrap;gap:0 clamp(16px,2.6vw,30px);margin:clamp(30px,5vw,50px) 0 0; padding:0;list-style:none} .wall li{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.5; font-size:clamp(1.05rem,2.2vw,1.7rem);color:var(--cold);scroll-margin-top:88px; transition:color .2s ease} /* SÓLO COLOR. Estos diez no son enlaces, así que un subrayado o un desplazamiento prometería un clic que no existe; el color no promete nada, sólo responde. Chris, 2026-09-07: "en los roles veo que se perdió la animación de hover" — se perdió al cambiar las fichas por el muro tipográfico. `:target` va con el mismo aspecto porque los diez ids llevan publicados desde antes del rediseño y alguien puede seguir llegando a uno; llegar a un ancla y no ver a cuál llegaste es peor que no tener ancla. */ .wall li:hover,.wall li:target{color:#fff} .wall li:not(:last-child)::after{content:"\00b7";color:#3E4460;display:inline-block; margin-left:calc(clamp(16px,2.6vw,30px) / 2)} /* Con ::before del siguiente, cada salto de línea empezaba con un punto suelto — a 375 la lista salta cinco veces. Debajo de 760 desaparece y cada puesto ocupa su renglón. */ @media (max-width:759px){ .wall{display:block} .wall li:not(:last-child)::after{display:none} } /* ── privacidad: el vacío es el argumento ───────────────────────────────── La sección dice que no publicamos clientes, así que el lado derecho de la costura — donde en toda la página va lo nuestro — se queda literalmente vacío. Es lo único que se dice sin escribirlo. */ .priv{background:var(--paper)} @media (min-width:900px){ .priv .half{width:calc(50% - clamp(26px,4vw,56px))} } .priv h2{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:.98; font-size:clamp(1.4rem,3vw,2.1rem);max-width:15ch;margin:0;color:var(--ink)} .priv p.quiet{border-left:3px solid #CBD5E1;padding-left:var(--sp-4); margin-top:clamp(24px,3.4vw,34px);color:var(--muted);font-size:var(--fs-sm);max-width:44ch} /* ── cierre ────────────────────────────────────────────────── */ .ed-end{background:var(--navy-2);color:#fff} .ed-end h2{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:.98; font-size:clamp(1.6rem,4vw,3rem);max-width:15ch;margin:0;color:#fff} .ed-end h2 em{font-style:normal;color:var(--teal)} /* ── el dibujo ─────────────────────────────────────────────── Nueve puestos idénticos e intercambiables — tres apagándose, porque el banco rota — contra una persona que no encaja en la retícula porque no es un puesto. Es lo que sustituye a la fotografía: el dibujo es nuestro, no depende de licencia, y no es la cara de alguien que no colocamos. */ .viz{margin-top:clamp(30px,5vw,50px)} .viz svg{width:100%;height:auto;max-width:180px;display:block} .sq{fill:none;stroke:#4A5170;stroke-width:2} .sq.gone{stroke-dasharray:3 5;stroke:#343A50} .per circle,.per path{stroke:var(--teal);stroke-width:2.4;fill:none;stroke-linecap:round} .per .halo{fill:rgba(9,188,138,.10);stroke:none} .js-reveal .viz .sq rect{opacity:0;transform:scale(.86);transform-box:fill-box; transform-origin:center} .js-reveal .viz.drawn .sq rect{animation:sqIn .42s cubic-bezier(.2,.7,.3,1) forwards; animation-delay:calc(var(--k,0) * 85ms)} .js-reveal .viz.drawn .sq.gone rect{animation-name:sqGhost;animation-duration:.6s} @keyframes sqIn{to{opacity:1;transform:none}} @keyframes sqGhost{to{opacity:.55;transform:none}} .js-reveal .viz .per circle,.js-reveal .viz .per path{stroke-dasharray:1;stroke-dashoffset:1} .js-reveal .viz .per .halo{opacity:0} .js-reveal .viz.drawn .per circle,.js-reveal .viz.drawn .per path{ animation:draw 1.05s cubic-bezier(.35,.1,.25,1) forwards;animation-delay:.34s} .js-reveal .viz.drawn .per path{animation-delay:.72s} .js-reveal .viz.drawn .per .halo{animation:halo .9s ease forwards;animation-delay:1.1s} @keyframes draw{to{stroke-dashoffset:0}} @keyframes halo{to{opacity:1}} @media (prefers-reduced-motion:reduce){ *, *::before, *::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} html{scroll-behavior:auto} /* Zeroing the DURATION is not enough on its own, and that is the whole point of this addition. .card-link:hover lifts 2px and .btn:active drops 1px; with a 0.01ms transition the element still moves, it just moves instantly — which is exactly the displacement someone with a vestibular disorder turned the preference on to avoid. Remove the displacement itself and let the border and shadow carry the feedback, since neither of those is motion. */ /* Reveal and the accordion morph are motion too. Under this preference the reveal never runs at all — site.js checks the same query and does not add js-reveal — and these rules are the belt to that braces, in case the class is already on the element when the preference changes. */ .reveal{opacity:1!important;transition:none!important} /* CAPA EDITORIAL. Cancelar una animación deja el elemento en su estado INICIAL, y aquí el inicial es INVISIBLE: los cuadrados a opacity 0 y la persona con el trazo sin dibujar. `animation:none` a secas le borraría el único dibujo del sitio justo a quien pidió menos movimiento. Por eso se devuelve el estado final a mano, y por eso los cuadrados "idos" conservan su 0.55 — el dibujo tiene que significar lo mismo para todo el mundo; lo que cambia es si llega animado o ya puesto. El resplandor de la costura sigue al cursor, así que es movimiento aunque no desplace nada: se apaga poniendo la intensidad a cero y queda la línea en reposo, que es lo que lleva el sentido. */ .js-reveal .viz .sq rect, .js-reveal .viz.drawn .sq rect{animation:none!important;opacity:1!important;transform:none!important} .js-reveal .viz .sq.gone rect, .js-reveal .viz.drawn .sq.gone rect{opacity:.55!important} .js-reveal .viz .per circle, .js-reveal .viz .per path, .js-reveal .viz.drawn .per circle, .js-reveal .viz.drawn .per path{animation:none!important;stroke-dasharray:none!important; stroke-dashoffset:0!important} .js-reveal .viz .per .halo, .js-reveal .viz.drawn .per .halo{animation:none!important;opacity:1!important} /* El tramo teal de la fila es un transform sobre un estado (:hover / :focus-within), así que zerar la duración no basta: seguiría creciendo, sólo que de golpe. Se queda a tamaño completo y lo que cambia es la opacidad, que no es movimiento. */ /* Sólo color, sin desplazamiento: el reset universal de duración basta, pero se nombra porque la puerta exige que ninguna regla que anima quede fuera del bloque. */ .wall li{transition:none!important} .row::before, .kn::before, .row:hover::before, .row:focus-within::before, .kn:hover::before, .kn:focus-within::before{transition:none!important;transform:translateX(-1px)!important} .acc>summary::before{transition:none!important} .acc::details-content{transition:none!important} .btn:active, .btn:hover, .qindex a:hover::before, .rolelist a:hover::after, .close-alt:hover::after, .btn-primary:hover::before{transform:none!important} } /* ── print ───────────────────────────────────────────────────────────────── Clients print the pricing and process pages and put them in a folder, so a printout has to survive on its own. The previous block hid .site-header outright, which meant a printed page carried NO IDENTIFICATION AT ALL -- a sheet of tier names with nothing saying whose they are. The nav goes; the wordmark stays. */ @page{margin:16mm} @media print{ body{background:#fff} /* keep the masthead, drop the navigation and anything that cannot be clicked on paper */ .site-header{position:static;border-bottom:1px solid #ccc;background:#fff} .site-header .container{min-height:0;padding-block:0 10px} .nav, .nav-toggle, .hero-actions, .site-footer, .skip{display:none!important} .btn{display:none!important} /* THE HOME PAGE PRINTED ITS HEADLINE WHITE ON WHITE. These rules used to target .hero, the flat navy component -- which was replaced by .hero-photo and the .band section and then deleted, without print ever being revisited. Browsers drop backgrounds when printing, so both blocks were putting white text onto blank paper. The band's colours are INLINE on the elements, so overriding them needs !important. */ .hero-photo{background:#fff!important} .hero-photo>img, .hero-photo::after{display:none!important} .hero-photo .container{padding-block:14px 8px} .hero-photo h1, .hero-photo .lede{color:#000!important} .hero-kicker{color:#333!important} .band{background:#fff!important} .band h2, .band h3, .band p, .band .step-n{color:#000!important} .band .eyebrow, .band .step-who{color:#333!important} .card, .compare{box-shadow:none;border-color:#ccc} .section{padding-block:var(--sp-5)} /* A tier card or a process step split across a page break is unreadable, and an orphaned heading at the foot of a page is worse than a slightly short page. */ /* A REVEAL THAT HAS NOT FIRED MUST NOT PRINT AS A BLANK. Printing happens at whatever scroll position the reader is at, so anything further down the page is still at opacity 0. */ .reveal{opacity:1!important;transform:none!important} /* An answer must not be split from the question that introduces it. */ .acc{page-break-inside:avoid;break-inside:avoid} /* INTERACTION AFFORDANCES ARE DEAD INK. A button that cannot be pressed, an arrow pointing at a link that cannot be followed, a +/- that will never open again: each is a mark promising the reader something paper cannot do. `.btn` was hidden for exactly this reason. These were all added afterwards and the rule did not travel with them. The accordion marker is the specific regression, and it is mine: this rule hid `::after` when the marker was a single "+" glyph, and the morph rewrite two firings ago made it TWO drawn bars — so `::before`, the vertical stroke, survived as a stray teal tick beside every printed row. (Written when the FAQ and the role list were both accordions. Both have since become something else; as of 2026-09-05 the only accordion on the site is the six-row "Everything happens in one form" list on for-candidates, and this rule still has to cover it.) (site.js opens every accordion before printing and restores the reader's state afterwards, so the answers themselves are on the page.) */ .acc>summary::after, .acc>summary::before, .qindex a::before, .rolelist a::after{display:none!important} .step, .card, .note, .routes>li, .facts>div{page-break-inside:avoid;break-inside:avoid} h1, h2, h3{page-break-after:avoid;break-after:avoid} /* Printed hrefs would read "(../Public Forms/hire.html)", which helps nobody. Deliberately not expanded; revisit once the site has a real domain and the links resolve to something typeable. */ } /* ── close-fork: the home page ends by forking, not funnelling ───────────── Every page on this site closed with the SAME component — `container center measure`, an h2, a lede and one teal pill — six times over, with the inline styles copy-pasted between them. The redesign gave all eight pages their own opening and never once looked at how they end, so the sameness Chris called "kinda redundant" simply moved to the bottom of the page, which is the last thing a visitor sees. The home page's version was also the site's only exit for TWO audiences. `for-candidates.html` was linked from exactly one place in the whole site — a single footer link — and no page body mentioned it, so a person who wants one of these jobs read a page addressed entirely to the clinic that would hire them and was then told to "tell us what you need". Asymmetric on purpose: 7fr against 5fr, with the practice route carrying the heading weight and the button. This is not two equal choices — the practice is the buyer — and two equal cards would have said it was. Left-aligned, which no other closing section is, so the home page ends in a shape that belongs to it. */ /* STRETCH, not start. The divider is a border on the second column, so with `align-items:start` it stopped wherever that column's text happened to end -- a rule floating in the middle of the section rather than one dividing it. Stretched, it runs the full height of the taller column, which is the only reason it is there. */ /* 7fr CONTRA 5fr, HASTA EL 2026-09-07. La asimetría era deliberada y el argumento sigue siendo cierto — la clínica es quien paga y las dos salidas no son iguales — pero se escribió cuando esta sección era un cierre suelto sobre fondo claro. En la página editorial el eje central es un SISTEMA: el hero, las filas, screening y privacidad se parten todos por la misma línea. Un solo filete que cae a un 58% no lee como jerarquía, lee como un error de alineación, y eso es lo que Chris vio. La jerarquía nunca dependió de la proporción de las columnas: la llevan el tamaño del h2 y un botón contra un enlace de texto, que siguen intactos. */ /* EL FILETE NO PUEDE SER UN BORDE DE COLUMNA. Chris, 2026-09-07: "el separador de la seccion de what we ask of candidates no coincide con la costura." Cuadrar las columnas a 1fr 1fr el mismo dia no bastaba, y el porque es geometria, no gusto: en un grid de dos columnas iguales con separacion G, la segunda columna EMPIEZA a G/2 del eje. Un `border-left` sobre ella cae siempre medio hueco a la derecha del centro — 32px con --sp-8. Estaba mal por construccion, y seguiria estandolo con cualquier proporcion de columnas. Asi que deja de ser un borde y pasa a ser lo que son las otras cuatro costuras de la pagina: un pseudo-elemento al 50% del bloque, que si es el eje porque el bloque ocupa el contenedor entero. Y la separacion baja al mismo clamp que usan .row y .know .grid, para que el texto quede a la misma distancia de la linea aqui que en el resto de la pagina. */ .close-fork{display:grid;grid-template-columns:1fr; gap:var(--sp-8);align-items:stretch;position:relative} @media (min-width:821px){ .close-fork{grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px)} .close-fork::before{content:"";position:absolute;top:0;bottom:0;left:50%; transform:translateX(-1px);width:2px;background:var(--border);pointer-events:none} } .close-fork h3{font-size:var(--fs-md);margin-bottom:var(--sp-3)} .close-fork p{color:var(--muted);font-size:var(--fs-sm)} .close-fork .lede{color:var(--text);font-size:var(--fs-lg)} /* The secondary route is a text link, not a second button: a candidate arriving at a page written for clinics needs a door, not an equal-weight call to action competing with the one that earns the money. Same arrow and same --teal-d as .qindex and .rolelist, so it is the third instance of one link idiom rather than a third idiom. */ .close-alt{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px; font-family:var(--display);font-weight:600;font-size:var(--fs-sm); color:var(--navy);text-decoration:none} .close-alt::after{content:"→";color:var(--teal-d);transition:transform .15s} .close-alt:hover{color:var(--teal-d)} .close-alt:hover::after{transform:translateX(3px)} /* The vertical rule becomes a horizontal one when the columns stack, or the secondary route runs straight on from the primary button with nothing separating two different audiences. */ @media (max-width:820px){ .close-fork{gap:var(--sp-7)} .close-fork>:last-child{border-top:1px solid var(--border);padding-top:var(--sp-7)} } /* EL CIERRE ESTÁ SOBRE NAVY Y ESTE COMPONENTE SE ESCRIBIÓ PARA FONDO CLARO. Se reutilizó tal cual al montar la página editorial y no se revisó una sola declaración de color, así que el enlace de candidatos quedó en `color:var(--navy)` SOBRE navy: 1.06:1, invisible, y al hover pasaba a --teal-d, que sobre navy tampoco llega a 4.5. Chris, 2026-09-07: "no se ve bien hasta que le haces hover." No es que se viera mal: es que no se veía. Blanco en reposo y teal al hover — el mismo par que usa la navegación sobre navy en el pie. */ .ed-end .close-alt{color:#fff} .ed-end .close-alt::after,.ed-end .close-alt:hover{color:var(--teal)} .ed-end .close-fork p{color:var(--on-navy)} /* Y sobre navy la linea se pinta con el mismo tinte que las otras cuatro, no con --border, que es un gris de interfaz pensado para fondo claro. "Coincidir con la costura" es tambien el color. */ .ed-end .close-fork::before{background:rgba(148,161,180,.30)} @media (max-width:820px){ .ed-end .close-fork>:last-child{border-top-color:rgba(148,161,180,.30)} } /* ══ for-candidates, CAPA EDITORIAL — 2026-09-07 ═══════════════════════════════════ La segunda de las cuatro páginas. **Se reusa todo lo que ya existe** — `.ed-hero`, `.duo`, `.seam`, `.side`, `.ed-cta`, `.know`, `.rows`, `.row`, `.ff`, `.band`, `.acc` y `.ed-end` — porque el objetivo era un idioma compún, no un segundo idioma. Lo único nuevo es lo que esta página tiene y la portada no. **EL TEXTO NO SE TOCA.** Lo que cambia es cómo está puesto. Reescribir la copia mientras se cambia el diseño hace imposible saber cuál de las dos cosas fue la que gustó o la que falló. **LA FOTOGRAFÍA SE QUEDA, y es la única de todo el sitio.** La dirección editorial sustituyó a PHOTOGRAPHY-LED en la portada, donde la foto era decoración genérica; aquí no lo es. Esta es la única página dirigida a la persona que se coloca en vez de a la clínica que paga, y una cara humana en ella no afirma nada falso: no es un testimonio, no es un cliente, no es una métrica. Chris eligió esa toma expresamente (batas teal, portátil y auriculares). Si quiere que se vaya, se va en una línea — pero borrarla por coherencia con una decisión tomada sobre OTRA página habría sido decidir por él. */ /* El hero es el mismo aparato que el de la portada, con dos diferencias: aquí **no hay dos bandos** — no se está comparando con nadie — así que la izquierda es nuestra y la derecha es la persona, y el titular tiene doce palabras en vez de cinco, de modo que baja de escala. Centrado en vez de arriba: una foto y un bloque de texto de alturas distintas alineados por arriba dejan un hueco que no significa nada. */ .cand .duo{align-items:center} .cand .side.us h1{font-size:clamp(1.75rem,4.2vw,3.1rem);line-height:1.02;letter-spacing:-.03em} .cand .side p.sub{max-width:46ch} .cand-photo{margin:0} .cand-photo img{width:100%;display:block;border-radius:var(--r-lg)} /* `.paper` como utilidad. `--paper` se aplicaba sección a sección dentro de `.rows`, `.fees` y `.priv`, que es el mismo declarativo escrito tres veces; esta página lo necesitaba una cuarta. No se tocan las tres anteriores: cambiarlas no arregla nada y mueve la portada. */ .paper{background:var(--paper)} /* `.rows.seq` — SIETE ETAPAS, NO CINCO COMPARACIONES. Misma retícula, mismo filete, misma costura y el mismo tramo teal al pasar por encima, porque un lector no debería tener que aprender dos comportamientos para dos listas que se leen igual. **Lo que se invierte es qué mitad lleva el peso.** En la portada la izquierda es lo que dice una BPO (apagado) y la derecha es lo nuestro (display). Aquí las dos mitades son nuestras: la izquierda es la ETAPA, que es lo que el candidato busca con la vista, y la derecha lo que pasa en ella. Así que el display se va a la izquierda y el cuerpo a la derecha. */ .seq .row .a{color:var(--ink);font-family:var(--display);font-weight:600;letter-spacing:-.01em; font-size:var(--fs-md);line-height:1.25} .seq .row .b{color:var(--muted);font-size:var(--fs-sm);line-height:1.6;font-family:inherit; font-weight:400;letter-spacing:0} .seq .n{display:block;font-family:var(--display);font-weight:600;font-size:var(--fs-xs); letter-spacing:.18em;color:var(--teal-d);margin-bottom:var(--sp-2)} /* `.rows h2` deja debajo el hueco que separa el titular de la primera fila. Aqui hay una entradilla en medio, asi que el hueco pasa de estar bajo el h2 a estar bajo ella. */ .seq h2{margin-bottom:var(--sp-4)} .seq .lede{max-width:48ch;margin:0 0 clamp(26px,4vw,46px)} /* `.ed-h2` — EL TITULAR EDITORIAL, POR FIN CON NOMBRE. Esta declaracion exacta esta escrita cuatro veces en la portada (`.rows h2`, `.know h2`, `.roles h2`, `.priv h2`), cada una con su max-width y su color. Esta pagina habria sido la quinta y la sexta. Se le da nombre AQUI y se deja constancia: plegar las cuatro de la portada dentro de esta clase es una iteracion aparte, porque tocarlas hoy mueve una pagina ya aprobada para arreglar algo que no se ve. */ .ed-h2{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:.98; font-size:clamp(1.5rem,3.4vw,2.4rem);margin:0;color:var(--ink)} .ed-h2 em{font-style:normal;color:var(--teal-d)} /* La banda oscura, con los dos hechos sobre filetes en vez de sobre bordes navy que sobre navy no se ven. `.ff` ya hace exactamente esta forma en la portada; sólo cambia de quién es el fondo. */ .band .ff>div{border-top-color:rgba(148,161,180,.30)} .band .ff h3{color:#fff} .band .ff p{color:var(--on-navy)} /* La seccion mas honesta de la pagina, en escala de titular. Es lo unico que este sitio dice que un competidor no diria, asi que se pone al tamano que eso merece. */ .straight h2{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.03em; font-size:clamp(1.6rem,4vw,2.9rem);max-width:16ch;color:#fff} .straight h2 em{font-style:normal;color:var(--teal)} /* El aviso era el ultimo recuadro del sitio: relleno mint, esquinas redondeadas y borde teal, sobre navy. La pagina entera se divide con filetes y el equivalente editorial de un inciso ya existe — es `.priv p.quiet` en la portada: una linea a la izquierda y nada mas. Se acota a `.straight` para no mover `.note` en el styleguide, que la documenta como lo que era. */ .straight .note{background:none;border-radius:0;border-left:3px solid var(--teal); padding:var(--sp-1) 0 var(--sp-1) var(--sp-4);color:var(--on-navy);max-width:60ch} .straight .note b{color:#fff} /* El cierre reusa `.ed-end`, que hasta hoy sólo existía en la portada. `.lede` es `--muted`, un gris pensado para papel: sobre navy hay que decirlo. */ .ed-end .lede{color:var(--on-navy)} .ed-end .lede a{color:var(--teal)} /* ══ contact y 404, CAPA EDITORIAL — 2026-09-07 ══════════════════════════════════════ Las dos últimas, y las dos más pequeñas. **Ninguna tiene dos lados que comparar**, así que el hero pierde el reparto y se queda sólo con el tipo. Ese es el único añadido estructural: todo lo demás de estas dos páginas ya existía. */ .ed-hero.solo{padding-block:clamp(46px,7vw,96px) clamp(38px,6vw,80px)} .solo h1{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.03em; font-size:clamp(1.85rem,4.4vw,3.2rem);margin:0;color:#fff;max-width:20ch} .solo h1 em{font-style:normal;color:var(--teal)} .solo p.sub{margin:clamp(18px,3vw,26px) 0 0;color:#D6D9E6;font-size:var(--fs-md); line-height:1.65;max-width:54ch} /* `.mid`, sólo para el 404. **El resto del sitio está alineado a la izquierda y esta página no**, a propósito y desde antes de esta capa: quien choca con un callejón sin salida quiere UN movimiento de vuelta a la carretera, no la arquitectura del sitio otra vez. Un bloque centrado con la lista alineada a la izquierda dentro, porque una lista de enlaces centrada no tiene canto por donde el ojo pueda bajar. */ .solo.mid .container{max-width:680px;text-align:center} .solo.mid h1{margin-inline:auto} .solo.mid p.sub{margin-inline:auto} /* El índice de salidas del 404, sobre navy. `--teal-d` era la flecha porque sobre blanco `--teal` da 2.45:1 y no llega al 3:1 que WCAG pide a un elemento no textual; **sobre navy se invierte**, y el que no llega es `--teal-d`. */ .solo .qindex{border-top-color:rgba(148,161,180,.30)} .solo .qindex a{color:#fff} .solo .qindex a::before{color:var(--teal)} .solo .qindex a:hover{color:var(--teal)} /* `.seq` recibe las cuatro puertas de contact. Eran una retícula de TRES columnas propia (`.routes`), con su propio filete y su propio tamaño de titular, para una lista que se lee igual que las siete etapas y que las cinco comparaciones. Aquí el eje significa lo mismo que en screening: **a la izquierda quién eres, a la derecha la puerta.** Lo que se pierde al mover el botón dentro de la mitad derecha es la columna de acciones alineada, y se pierde a sabiendas: las cuatro siguen empezando en la misma x, sólo que a distinta altura. */ /* El h2 hereda la cara de `.a` pero NO su tamano. En for-candidates la etapa va a --fs-md porque debajo de un numero y encima de una descripcion larga ese es su sitio; aqui el titular de la ruta es el objeto principal de la fila y a --fs-md se perdia. */ .seq .row .a h2{font:inherit;letter-spacing:inherit;color:inherit;margin:0;max-width:none; font-size:clamp(var(--fs-lg),1.9vw,22px);line-height:1.2} /* `max-width:none` NO es decorativo. La seccion es `.rows`, y `.rows h2` limita a 16ch porque ahi dentro el h2 es el titular de la seccion. Aqui el h2 es el titulo de una FILA, y a 16ch "I am looking for work" partia en dos lineas mientras "I need to fill a role", que tiene los mismos 21 caracteres, cabia en una. Cuatro puertas rompiendo por sitios distintos leen como cuatro cosas distintas, que es justo lo contrario de lo que la pagina dice. */ .seq .row .b p{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:1.6} .seq .row .b .btn{margin-top:var(--sp-4)} /* Una puerta con dos manillas: el formulario corto y la direccion, uno al lado del otro. La direccion NO es un segundo boton — quien elige escribir no quiere que se lo presenten como una accion equivalente, quiere el texto que va a copiar. Mismo idioma que `.close-alt`. */ .seq .row .b .pair{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap; margin-top:var(--sp-4)} .seq .row .b .pair .btn{margin-top:0} .mailto{font-family:var(--display);font-weight:600;font-size:var(--fs-sm);color:var(--teal-d); text-decoration:none;min-height:44px;display:inline-flex;align-items:center} .mailto:hover{text-decoration:underline;text-underline-offset:3px} /* UNA FRANJA CLARA ENTRE DOS BLOQUES NAVY, y llevaba ahi desde la portada editorial sin que yo la nombrara. `.site-footer` tiene `margin-top:var(--sp-9)` incondicional, que era correcto cuando TODAS las paginas terminaban en una seccion clara. Ahora tres de cuatro cierran sobre navy y la cuarta es un 404 entero sobre navy, asi que ese hueco es una tira de papel de 88px metida entre dos bloques oscuros. **No se ve como un respiro, se ve como un error de maquetacion** — que es exactamente lo que Chris dijo del filete del cierre hace dos commits. No se modifica la regla del pie: se anula en el caso concreto. El filete que queda al juntarlos es el mismo tinte de las costuras, para que el encuentro parezca decidido y no un choque. */ main:has(> section:last-child.ed-end) + .site-footer, main:has(> section:last-child.ed-hero) + .site-footer{margin-top:0; border-top:1px solid rgba(148,161,180,.22)} /* Plain prose and its emphasis ON the band. Everything the band knew how to recolour until now was a named component — .lede, .eyebrow, .facts, .step-who — because the two bands that existed only ever held those. how-it-works puts an ordinary paragraph on navy, which inherited --text and would have rendered near-black on near-black. --on-navy measures 9.97:1 here and #fff 16.41:1; both were established when the step owner line was fixed on this same ground. Specificity note: `.band p` (0,1,1) sits UNDER `.band .lede` and `.band .facts p`, so the components that already solved this keep their own values. */ .band p{color:var(--on-navy)} .band strong{color:#fff}