/** * Section: Call to action (dark band) * * ALMOST NOTHING IS IN HERE, AND THAT IS THE POINT. The band itself is * `.pasia-cta-band` in components.css, because `archive-vacancy.php` paints the * same band and renders no section stack at all, so a section stylesheet would * never be enqueued for it and vacancies.html's closing band would ship bare. * Two owners for one rule is the other half of that defect. Inventory §0 and * §F8. * * So components.css already owns, and this file must not re-declare: * * .pasia-cta-band the forest to deep-forest gradient, --r-lg, * the clamp padding, centring, --shadow-lift. * .pasia-cta-band h2 --paper at --text-2xl, 24ch. * .pasia-cta-band h2 em the gold italic clause, --gold-bright. * .pasia-cta-band p --on-dark-strong at --text-lg, 48ch, and the * `margin: var(--s-3) auto var(--s-5)` that is * index.html's paragraph convention. * .pasia-cta-band .row the wrapping, centred button row. * .pasia-cta-band h2 + .row the top margin that appears only when there is * no body copy. That is the whole of the derived * layout rule: the render function omits the `

` * and the adjacent-sibling combinator does the rest. * .pasia-cta-band .fine the small note line, --on-dark at --text-xs. * .ph-badge, .chip the placeholder badge and the cross-link chips, * both with their on-dark and warm-band grounds * already resolved. * :focus-visible base.css re-colours it --gold-bright inside * `.pasia-cta-band`, without which the light * ground's --gold-deep would sit at 2.03:1 here. * * ONE DELTA THE INVENTORY DOES NOT RECORD, AND IT IS A TYPE SIZE. §C.2 * enumerates four axes of drift across the nine copies and settles the body at * 48ch. There is a fifth it never names: of the seven bands with body copy, * FIVE set `font-size: var(--text-lg)` and two, `.ac-cta p` and `.tm-cta p`, * set no font-size at all and therefore render at --text-base. Tokenising on * index.html is right by §C.2's own logic, and it takes those two closing * paragraphs from 18px to 21.7px, a 20% type-size change on two signed-off * pages. Two deltas, in addition to the cross-link one in the section file. * * AND THE SAME QUESTION IS ANSWERED THE OTHER WAY ONE COMPONENT OVER. * `.fh-cta p`, `.hc-cta p` and `.srp-cta p` also set no font-size, and * `.pasia-cta-panel p` in components.css correctly follows them by setting * none. So the panel family kept --text-base by copying and the band family * moved to --text-lg by standardising. Both are defensible on their own * canonical page; together they are one axis resolved twice. Worth a decision * rather than an accident, and it is above this file's pay grade because the * panel's rule is in a shared stylesheet. * * What is left is the cross-link row that sits UNDER the panel on the light * page ground, which nothing else in the build renders: `next-steps` and the * two vacancy templates use the standalone `.pasia-crosslinks` band instead, * and `cta-panel` puts its chips INSIDE the dark panel. One consumer, so it * lives here. Ported from about.html `.ab-xlinks`, which accreditations, * directors-message, our-team and testimonials repeat to the character; * our-team is the only drift, calling the label `.tm-xlbl` rather than `.lbl`. * * --------------------------------------------------------------------------- * CONTRAST, MEASURED, NOT ESTIMATED * * The band is a 150deg gradient from --forest #0e4038 to --deep-forest #082f2a, * so every on-dark value is taken at the --forest end, which is the lighter of * the two and therefore the worst case: * * --paper #ffffff heading 11.61:1 * --gold-bright #d8b25e h2 em, eyebrow 5.78:1 * --on-dark-strong rgba(255,255,255,.82) body 8.36:1 * --on-dark rgba(255,255,255,.66) the note line 6.01:1 * .ph-badge.on-dark --gold-bright on its own --gold-tint-20 * stripe over a pinned --deep-forest base 5.05:1 * .btn-gold --deep-forest on --gold 5.65:1 * .btn-ghost.on-dark #ffffff on --forest 11.61:1 * * The cross-link row below is on the page ground, --mist #f7f4ee: * * --ink-faint #5f6b66 the label 5.06:1 * --ink-soft #45524d the chip text, on its --paper fill 8.18:1 * * All clear WCAG AA for normal text, which is the bar --text-xs has to meet. * NEVER a tint token for text here: --brand-tint aliases to * rgba(14,64,56,.20), which composites to 1.00:1 on forest and is exactly the * invisible text Phase 0A found in this file's previous life. AGENTS.md §1.7. * * THE FOCUS RING, MEASURED AGAINST WHAT IS ACTUALLY BEHIND IT. tokens.css * draws `outline: 3px solid` at `outline-offset: 2px` plus a 6px * --gold-tint-20 halo from the border box outward, and base.css re-colours the * outline --gold-bright inside this band. The halo FILLS the 2px gap, so the * ring is never seen against the bare band and quoting the bare band's 5.78:1 * overstates it: * * --gold-bright outline vs the halo over --forest 4.20:1 * --gold-bright outline vs the halo over --deep-forest 5.05:1 * --gold-deep outline vs the halo over --mist, for the * cross-link chips below the panel 4.39:1 * * All clear SC 1.4.11's 3:1 on the stricter reading, so the conclusion holds. * Said out loud rather than left to be rederived: THE HALO CANNOT COUNT TOWARD * THE INDICATOR. It measures 1.38:1 against --forest and 1.19:1 against --mist, * which is decoration. The 3px outline carries the criterion alone. * ------------------------------------------------------------------------- */ /* The eyebrow is the one part of this section no mock-up band exercises: all nine open on the heading. It is a real field all the same, so it needs the gap the heading would otherwise sit flush against. Scoped to this section rather than to `.pasia-cta-band`, because archive-vacancy's band has no eyebrow and a rule with one consumer does not belong in a global file. */ .cta-dark .pasia-cta-band .eyebrow { margin-bottom: var(--s-3); } /* The outstanding-detail line, which is a badge and its explanation and should break as one thing rather than leaving the badge stranded on its own line. `.cta-split-note` gets the identical treatment. NOT declared on `.pasia-cta-band .fine` in components.css, even though that is where the rest of the line's styling lives: archive-vacancy.php renders the same `.fine` as "Recipient:" followed by a badge in ordinary inline flow, and flex would put a gap where a word space belongs. directors-message.html's `.dm-cta .note`, which is this shape, uses the flex form; vacancies.html's `.vc-cta .fine`, which is that one, does not. Two shapes, so the rule follows the markup that needs it rather than the class both share. */ .cta-dark-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5em; } /* The cross-link row, under the panel and on the light ground. `.chip` styles itself from components.css; only the row and its label are here. */ .cta-dark-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55em; margin-top: var(--s-5); } /* `.55em` and the label's `.14em` and `.4em` below are the mock-up's own relative distances and have no token: `.chipset` in components.css keeps the same `.55em` so the two cross-link treatments space identically. */ .cta-dark-links .lbl { margin-right: .4em; font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }