/* ========================================================================== Wage Summaries — templates/template-wage-summaries.php Figma frame 13140:2652, logged-in frame 13140:3549 (Batch 7, desktop only). Spec: roadmap/phase-08-content-pages/artifacts/page-wage-summaries-spec.md Page-scoped: the intro (.wage-intro). The banner, member badge, access band and colour CTA are global layers (banners.css, badges.css, section-access.css, colour-cta.css). Desktop-first: every max-width query sits after the desktop rules. ========================================================================== */ /* -------------------------------------------------------------------------- Block 4 — Section_Intro — Figma 13140:2745 Photo left, copy right — the .edocs-intro recipe (edocs.css), page-scoped there, so transcribed rather than reused. The checklist is the .fae-help__list recipe (find-an-employer.css), same Card Checkmark component 10546:13251. -------------------------------------------------------------------------- */ .wage-intro { padding: var(--space-28) var(--space-20); /* Figma 13140:2745 pad T112 R80 B112 L80 */ background-color: var(--color-navy-lightest-50); /* Figma 13140:2745 fill #e6e7e9 @ 0.5 */ } .wage-intro__row { max-width: 1280px; /* Figma 13140:2746 w=1280 */ margin: 0 auto; display: flex; align-items: stretch; gap: var(--space-16); /* Figma 13140:2747 HORIZONTAL gap 64 */ } /* The photo is absolute, so the row height comes from the copy (585 in Figma) and the photo fills it — Figma 13140:2748 sizingV FILL. */ .wage-intro__image { position: relative; flex: 0 1 617px; /* Figma 13140:2748 w=617 FIXED — shrinks before the copy */ align-self: stretch; /* Figma 13140:2748 layoutAlign STRETCH sizingV FILL — QA 2026-10-02 */ min-width: 0; margin: 0; overflow: hidden; border-radius: var(--radius-sm); /* Figma 13140:2748 cornerRadius 4 */ clip-path: var(--corner-cut-clip); /* Figma 13140:2749 82x82 white wedge top-right = the sitewide corner cut */ } .wage-intro__image img { align-self: stretch; /* Figma 13140:2748 layoutAlign STRETCH — declared on the img too, the selector QA inspects (about-our-training.css:157) */ position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; /* Figma 13140:2748 scaleMode STRETCH — crop band x 6.87%-77.18% pre-applied to intro.jpg (617:585) */ } .wage-intro__box { flex: 0 0 599px; /* Figma 13140:2750 w=599 */ min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-9); /* Figma 13140:2751 gap 36 */ } .wage-intro__top { display: flex; flex-direction: column; gap: var(--space-6); /* Figma 13140:2753 gap 24 */ } .wage-intro__heading { margin: 0; max-width: 486px; /* Figma 13140:2755 w=486 FIXED */ font-family: var(--font-family); font-size: 44px; /* Figma 13140:2756 size 44 */ font-weight: var(--font-weight-normal); /* Figma 13140:2756 FrutigerLTStd-Roman 400 */ line-height: 1.1; /* Figma 13140:2756 LH 48.4 */ letter-spacing: -0.44px; /* Figma 13140:2756 LS -0.44 */ color: var(--color-navy-darkest); /* Figma 13140:2756 fill #03060c */ } .wage-intro__copy { margin: 0; font-family: var(--font-family); font-size: 16px; /* Figma 13140:2758 size 16 */ font-weight: var(--font-weight-normal); /* Figma 13140:2758 FrutigerLTStd-Roman 400 */ line-height: 1.4; /* Figma 13140:2758 LH 22.4 */ color: var(--color-navy-darkest); /* Figma 13140:2758 fill #03060c */ } .wage-intro__included { width: 100%; display: flex; flex-direction: column; gap: var(--space-4); /* Figma 13140:3517 gap 16 */ } .wage-intro__included-heading { margin: 0; font-family: var(--font-family); font-size: 30px; /* Figma 13140:3518 size 30 */ font-weight: var(--font-weight-normal); /* Figma 13140:3518 FrutigerLTStd-Roman 400 */ line-height: 1.3; /* Figma 13140:3518 LH 39 */ letter-spacing: -0.3px; /* Figma 13140:3518 LS -0.3 */ color: #000; /* Figma 13140:3518 fill #000000 — untokenized */ } .wage-intro__list { display: flex; flex-direction: column; gap: var(--space-1); /* Figma 13140:3521 gap 4 */ max-width: 560px; /* Figma 13140:3521 w=560 FIXED */ margin: 0; padding: 0; list-style: none; } .wage-intro__item { display: flex; align-items: flex-start; gap: var(--space-2); /* Figma 13140:3522 gap 8 */ padding: var(--space-2) 0; /* Figma 13140:3522 pad T8 R0 B8 L0 */ box-shadow: inset 0 -1px 0 var(--color-tangerine-lighter); /* Figma 13140:3522 bottom stroke 1px #ffe0cc INSIDE, every row incl. the last — inside the 40px row, not added to it */ } .wage-intro__icon { flex: 0 0 24px; /* Figma 13140:3523 24x24 */ font-size: 24px; /* Figma 13140:3523 24x24 */ line-height: 1; /* the glyph box is the 24x24 instance, not a text line */ color: var(--color-tangerine); /* Figma I13140:3523;7044:3399 fill #ff6600 */ } .wage-intro__text { min-width: 0; font-family: var(--font-family); font-size: 16px; /* Figma 13140:3524 size 16 */ font-weight: var(--font-weight-bold); /* Figma 13140:3524 FrutigerLTStd-Bold 700 */ line-height: 1.4; /* Figma 13140:3524 LH 22.4 */ color: var(--color-navy-darkest); /* Figma 13140:3524 fill #03060c */ } /* -------------------------------------------------------------------------- Block 5 — Section_Access — Figma 13140:2564, page-scoped override of section-access.css The shared band caps the heading at its 648 Container (12795:24611), which "Access eDocs today" (384) never reaches. This heading is 684 and Figma lets it run past the Container on one line (13140:2570 textAutoResize WIDTH_AND_HEIGHT), so the cap lifts here and the 768 intro column bounds it instead. QA 2026-10-02. -------------------------------------------------------------------------- */ .section-access__heading { max-width: none; /* Figma 13140:2570 w=684 HUG; bounded by 13140:2567 w=768 */ } /* -------------------------------------------------------------------------- Responsive — derived per roadmap/mobile-derivation-catalog.md (no mobile frame), on the edocs.css ladder so the two member-resource intros collapse alike. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .wage-intro__row { flex-direction: column; /* the photo already comes first in the DOM */ } .wage-intro__image { flex: 0 0 420px; /* mobile-derivation-catalog.md image height ladder — edocs.css */ width: 100%; } .wage-intro__box { flex: 1 1 auto; width: 100%; } .wage-intro__heading { max-width: none; /* the 486 cap is column-relative */ } .wage-intro__list { max-width: none; /* the 560 cap is column-relative */ } } @media (max-width: 768px) { .wage-intro { padding: 50px 20px; /* Section Padding large 112->50, gutter 80->20 — mobile-derivation-catalog.md#container-caps */ } .wage-intro__row { gap: var(--space-8); /* stacked 2-col row gap 32 — edocs.css */ } .wage-intro__box { gap: var(--space-6); /* Padding medium 36->24 */ } .wage-intro__heading { font-size: 32px; /* H2 44->32 */ } .wage-intro__included-heading { font-size: 24px; /* H4 30->24 */ } } @media (max-width: 402px) { .wage-intro__image { flex-basis: 310px; /* mobile-derivation-catalog.md image height ladder — edocs.css */ --corner-cut: 60px; /* sitewide mobile cut */ } }