/* ============================================================================= Get a Builder's Licence — page-scoped styles Figma frame 12130:938 "GET A BUILDERS LICENCE // DESKTOP". Spec: roadmap/phase-05-training-and-calendar/artifacts/page-get-a-builders-licence-spec.md Loaded only for templates/template-get-a-builders-licence.php (functions.php). Shared components (.page-banner, .about-feature-intro, .content-block, .card, .section-tagline, .btn) live in their global layers; this file carries page deltas and the three new blocks only. Desktop rules first, then every @media block — source order is cascade order (.claude/rules/css-architecture.md). ============================================================================= */ /* -------------------------------------------------------------------------- Block 4 — Feature Intro [R] — Figma 12130:1730 Page-scoped deltas only. The component base (section, overlay, inner, tagline, underline hook, lead type) lives in about.css:29-132 and reaches this template through the mba-about dependency; anything not restated here is the base value. -------------------------------------------------------------------------- */ /* The image fill is scaleMode STRETCH, i.e. the Figma Crop tool: the visible band is the bottom 45.2%-100% of the source, so the photo is scaled to the full width and pinned to the bottom edge. The base uses cover/center (about.css:36-37), which would ship the wrong region — figma-spec.md "STRETCH is a crop". */ /* background-repeat is NOT set by the base (about.css:34-37 sets only background-color/-image/-size/-position), so it stays at the initial `repeat`. That is inert under the base `cover` but not under `100% auto`: the painted photo is only viewport-width/1.5 tall, so on any viewport where the section grows past that the photo tiles vertically instead of ceding to --color-navy-dark. */ /* Figma 12130:1730 fills scaleMode=STRETCH, which is the UI's Crop: imageTransform [[1,0,~0],[0,0.5480537,0.4520714]] means the frame shows the source's bottom 54.805% at full width, stretched (NOT uniformly scaled) to fill the frame. Height 182.464% is 1/0.5480537, so anchoring the bottom leaves exactly that band visible, at any element height. `100% auto` preserved the source aspect and showed the bottom ~51.3% instead — the wrong region, plus no vertical squash. Measured by NCC of the live element against the official node render over the photo-only top 112px band: 0.9987 here vs 0.7507 for `100% auto`, and a parameter sweep peaks exactly at this value. */ .about-feature-intro--gbl { background-size: 100% 182.464%; /* Figma 12130:1730 imageTransform y-scale 0.5480537 */ background-position: center bottom; /* Figma 12130:1730 imageTransform y-offset 0.4520714 — band 45.2%-100% */ background-repeat: no-repeat; /* required by the crop above — not a Figma value */ } /* The shared lead caps at 900px (about.css:124); this page's text box is 1024 wide and 124 high = 4 lines at LH 31.2. Same override as women-in-construction.css:17. */ .about-feature-intro--gbl .about-feature-intro__lead { max-width: 1024px; /* Figma 12130:1735 box w=1024 */ } /* ========================================================================== Block 5 — Section_Info (Figma 12130:1844) New component. Tagline + two-tone 48px heading + copy + tangerine check-list in a 598px column, 618px corner-cut photo beside it. ========================================================================== */ .gbl-info { background-color: var(--color-white); /* Figma 12130:1844 fills SOLID #ffffff */ } .gbl-info__inner { padding: 112px 80px; /* Figma 12130:1845 pad T=112 R=80 B=112 L=80 */ } .gbl-info__content { max-width: 1280px; /* Figma 12130:1846 w=1280 */ margin: 0 auto; display: flex; align-items: stretch; /* Figma 12130:1862 sizingV=FILL — the image column takes the row height */ gap: var(--space-16); /* Figma 12130:1846 HORIZONTAL gap=64 */ } .gbl-info__content-wrap { flex: 1 1 598px; /* Figma 12130:1847 w=598 sizingH=FILL */ min-width: 0; display: flex; flex-direction: column; gap: var(--space-9); /* Figma 12130:1847 VERTICAL gap=36 */ } .gbl-info__heading-wrap { display: flex; flex-direction: column; gap: 22px; /* Figma 12130:1848 VERTICAL gap=22 — untokenized, no --space-* is 22 */ } /* Tagline line + hook come from .section-tagline (typography.css:316); Figma 12130:1850 "Vector 4" is that same 1px tangerine rule, drawn as an absolute vector. */ .gbl-info__heading { margin: 0; font-family: var(--font-family); font-size: 48px; /* Figma 12130:1852 size=48 */ font-weight: var(--font-weight-normal); /* Figma 12130:1852 FrutigerLTStd-Roman weight=400 */ line-height: 1.2; /* Figma 12130:1852 LH=57.6 */ letter-spacing: -0.48px; /* Figma 12130:1852 LS=-0.48 */ color: var(--color-navy-darkest); /* Figma 12130:1852 run 1 base SOLID #03060c */ } /* Figma 12130:1852 is ONE text node with two character runs; run 2 is repainted via characterStyleOverrides, so the node's base fill is not the whole heading's colour. */ .gbl-info__heading-accent { color: var(--color-tangerine); /* Figma 12130:1852 run 2 fill SOLID #ff6600 */ } .gbl-info__text { display: flex; flex-direction: column; gap: var(--space-9); /* Figma 12130:1853 VERTICAL gap=36 */ } .gbl-info__item { display: flex; flex-direction: column; gap: var(--space-6); /* Figma 12130:1854 VERTICAL gap=24 */ } .gbl-info__top { display: flex; flex-direction: column; gap: var(--space-2); /* Figma 12132:7301 VERTICAL gap=8 */ } .gbl-info__item p { margin: 0; font-family: var(--font-family); font-size: 16px; /* Figma 12130:1856 size=16 */ font-weight: var(--font-weight-normal); /* Figma 12130:1856 FrutigerLTStd-Roman weight=400 */ line-height: 1.4; /* Figma 12130:1856 LH=22.4 */ color: #000000; /* Figma 12130:1856 fills SOLID #000000 — untokenized, no --color-* is #000000 */ } /* Intro and outro are each ONE Figma text node whose "\n\n" draws one empty line at the node's own line-height (style.paragraphSpacing is absent = 0, and both node heights agree: 12130:1856 h=154 = 7 lines x 22.4 for 4+blank+2, 12132:7300 h=110 = 5 lines for 2+blank+2); transcribed as two paragraphs separated by that blank line. Each node therefore needs its OWN box. Emitting the two

directly made them flex children of the surrounding column, so the parent's gap ADDED to this margin and the blank line rendered at 8+22.4=30.4 in the intro and 24+22.4=46.4 in the outro — the outro's break came out more than double Figma's. .gbl-info__prose restores the one box per text node that Figma actually has; the parent gaps then apply only where Figma draws them (8 to the list, 24 between Top and the outro). */ .gbl-info__prose { display: flow-root; /* a plain block box — NOT a flex child whose gap would re-add */ } .gbl-info__item p + p { margin-top: 22.4px; /* Figma 12130:1856 blank line at LH=22.4 */ } .gbl-info__item strong { font-weight: var(--font-weight-bold); /* Figma 12132:7300 run 2 weight=700 FrutigerLTStd-Bold */ } /* Figma nests "List" 12130:7262 (w=560 FIXED) inside "List Wrapper" 12130:7247 (w=598), so the rows and their rules stop 38px short of the body text's right edge. Without the cap the ul filled the whole 598 column and every rule overran the paragraphs above it. */ .gbl-info__list { margin: 0; padding: 0; list-style: none; max-width: 560px; /* Figma 12130:7262 w=560 sizingH=FIXED, inside 12130:7247 w=598 */ display: flex; flex-direction: column; gap: var(--space-1); /* Figma 12130:7262 VERTICAL gap=4 */ } .gbl-info__list-item { display: flex; align-items: center; /* Figma 12130:7263 counter=CENTER */ gap: var(--space-2); /* Figma 12130:7263 HORIZONTAL gap=8 */ padding: var(--space-1) 0; /* Figma 12130:7263 pad T=4 R=0 B=4 L=0 */ /* Figma 12130:7263 strokes SOLID #ffe0cc sides(bottom=1.0) align=INSIDE. INSIDE means the rule is drawn within the frame's own 32px, not added to it — a border-bottom would make each row 33 and the three-row list 107 against Figma's 104. An inset shadow paints the same 1px line without entering the box model. */ box-shadow: inset 0 -1px 0 var(--color-tangerine-lighter); font-family: var(--font-family); font-size: 16px; /* Figma 12130:7265 size=16 */ font-weight: var(--font-weight-bold); /* Figma 12130:7265 FrutigerLTStd-Bold weight=700 */ line-height: 1.4; /* Figma 12130:7265 LH=22.4 */ color: var(--color-tangerine); /* Figma 12130:7265 fills SOLID #ff6600 */ } /* The 24px glyph box is the .material-symbols-outlined base (icons.css:11) and already matches Figma 12130:7264 box 24x24 — only the fill and the no-shrink are page-scoped. */ .gbl-info__list-icon { flex: 0 0 auto; color: var(--color-tangerine); /* Figma I12130:7264;7044:3399 fills SOLID #ff6600 */ } .gbl-info__image-wrap { flex: 0 1 618px; /* Figma 12130:1862 w=618 sizingH=FIXED — shrinkable so the row never overflows, precedent about-our-training.css:149 */ align-self: stretch; /* Figma 12130:1862 sizingV=FILL */ min-width: 0; display: flex; } .gbl-info__image { flex: 1 1 auto; /* Figma 12130:1863 sizingH=FILL sizingV=FILL */ min-width: 0; display: flex; overflow: hidden; clip-path: var(--corner-cut-clip); /* Figma 12130:1864 82x82 white wedge over the top-right corner — sitewide that notch is a clip-path, not an overlay element (tokens.css:107) */ } .gbl-info__image img { align-self: stretch; display: block; width: 100%; height: 100%; object-fit: cover; /* Figma 12130:1863 fills IMAGE scaleMode=FILL */ } /* -------------------------------------------------------------------------- Block 6 — Section_Types [R] — Figma 12132:7302 Page-scoped deltas only. The card chrome (border, shadow, radius, white fill, 24px content padding, 14px excerpt, 6px strip) comes from .card--icon-strip in cards.css:315-362 via the mba-cards dependency; anything not restated here is the base value. Figma frames "Section Inner" 12132:7303 / "Content Box" 12132:7304 carry no padding, gap or fill, and "Content Top" 12132:7306 has a single rendered child (its "Tagline wrapper" 12132:7307 and "Rectangle 1" 12132:7311 are HIDDEN), so they collapse into .gbl-types__inner rather than becoming DOM. -------------------------------------------------------------------------- */ .gbl-types { padding: var(--space-28) var(--space-20); /* Figma 12132:7302 pad T112 R80 B112 L80 */ background-color: var(--color-navy-lightest-50); /* Figma 12132:7302 fills SOLID #e6e7e9 opacity=0.5 */ } .gbl-types__inner { max-width: 1280px; /* Figma 12132:7303 w=1280 */ margin: 0 auto; display: flex; flex-direction: column; min-width: 0; gap: var(--space-9); /* Figma 12132:7305 VERTICAL gap=36 */ } .gbl-types__title { margin: 0; font-family: var(--font-family); font-size: 44px; /* Figma 12132:7313 size=44 */ font-weight: var(--font-weight-normal); /* Figma 12132:7313 FrutigerLTStd-Roman weight=400 */ line-height: 1.1; /* Figma 12132:7313 LH=48.4 */ letter-spacing: -0.01em; /* Figma 12132:7313 LS=-0.44 at 44px */ text-align: center; /* Figma 12132:7313 align=CENTER */ color: var(--color-navy); /* Figma 12132:7313 text run 1 fill SOLID #0b1628 */ } /* Run 2 of the same TEXT node. The node's base fill #03060c never renders — both runs cover the whole string (figma-spec.md "a TEXT node's fills is not its colour"). .text-tangerine's only definition lives in partnerships.css:914, a page stylesheet this template does not enqueue, so it is declared here. */ .gbl-types__title .text-tangerine { color: var(--color-tangerine); /* Figma 12132:7313 text run 2 fill SOLID #ff6600 */ } /* Intro and row are the two children of "Content Bottom" 12132:7314 (counter=CENTER): a 1024px column centred inside the 1280px container. Explicit width + auto side margins rather than align-self, so the box is sized by the container and not by its own content. */ .gbl-types__intro { width: 100%; max-width: 1024px; /* Figma 12132:7315 box w=1024 */ margin: 0 auto; /* Figma 12132:7314 counter=CENTER */ font-family: var(--font-family); font-size: 18px; /* Figma 12132:7315 size=18 */ font-weight: var(--font-weight-bold); /* Figma 12132:7315 FrutigerLTStd-Bold weight=700 */ line-height: 1.3; /* Figma 12132:7315 LH=23.4 */ text-align: center; /* Figma 12132:7315 align=CENTER */ color: var(--color-navy); /* Figma 12132:7315 fills SOLID #0b1628 */ } .gbl-types__row { width: 100%; max-width: 1024px; /* Figma 12132:7316 box w=1024 */ margin: 0 auto; /* Figma 12132:7314 counter=CENTER */ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* Figma 12133:7370 / 7362 / 7354 three 325px columns */ gap: var(--space-6); /* Figma 12132:7316 HORIZONTAL gap=24 */ } /* The Figma card "Content" 12133:7371 (gap=18) wraps a single child, so its gap never renders; the two gaps the canvas actually draws are the 16px inside "Content Top" 12133:7372 (icon -> heading) and inside "Content" 12133:7374 (heading -> text). The flat .card--icon-strip DOM puts both on .card__content, whose base is 12px (cards.css:329). Padding 24px already matches the base. */ .gbl-types .card--icon-strip .card__content { gap: var(--space-4); /* Figma 12133:7372 gap=16 */ align-items: center; /* Figma 12133:7371 counter=CENTER */ justify-content: center; /* Figma 12133:7371 primary=CENTER */ text-align: center; /* Figma 12133:7375 align=CENTER */ } /* Base is H6 20px / LS -0.01em (cards.css:342). This block's card heading is Text Medium Bold. Scoped to three classes so the 768 override below can match the same specificity and still beat cards.css:371. */ .gbl-types .card--icon-strip .card__title { font-size: 18px; /* Figma 12133:7375 size=18 */ letter-spacing: 0; /* Figma 12133:7375 LS=0 */ } /* Letter tile: a solid tangerine box with a white glyph, not an icon font. The base .card--icon-strip .card__icon (cards.css:333) paints the glyph tangerine at line-height 1, so colour and line-height are restated. Figma pads the 40x40 box by 10 while the 30px glyph measures 29x33 — the padding cannot bind on a fixed-size flex-centred box, so it is dropped rather than shipped inert. */ .gbl-types .card--icon-strip .card__icon--letter { display: flex; flex: 0 0 auto; align-items: center; /* Figma 12133:7381 counter=CENTER */ justify-content: center; /* Figma 12133:7381 primary=CENTER */ width: 40px; /* Figma 12133:7381 w=40 sizingH=FIXED */ height: 40px; /* Figma 12133:7381 h=40 sizingV=FIXED */ border-radius: var(--radius-sm); /* Figma 12133:7381 cornerRadius=4 */ background-color: var(--color-tangerine); /* Figma 12133:7381 fills SOLID #ff6600 */ font-family: var(--font-family); font-size: 30px; /* Figma 12133:7385 size=30 — glyph size, exempt from the mobile scale */ font-weight: var(--font-weight-normal); /* Figma 12133:7385 FrutigerLTStd-Roman weight=400 */ line-height: 1.3; /* Figma 12133:7385 LH=39 */ letter-spacing: -0.01em; /* Figma 12133:7385 LS=-0.3 at 30px */ color: var(--color-white); /* Figma 12133:7385 fills SOLID #ffffff */ } /* ========================================================================== Block 7 — Section_Who can get a licence Figma 12135:7392 Reuses the shared .content-block__* scaffold (about.css:143-300, :412-424): inner row, image-left ordering, 82px corner cut, tagline, two-tone H2. Only page-scoped deltas live here. ========================================================================== */ /* Section band. Same geometry as .content-block--history (about.css:282) but the page owns its own modifier so the mobile counterparts stay scoped. */ .content-block--licence-eligibility { padding: 112px 80px; /* Figma 12135:7393 pad T112 R80 B112 L80 */ background-color: var(--color-white); /* Figma 12135:7392 fills SOLID #ffffff */ } /* Text column. The base box is 496px (about.css:249), which would leave the image 720px; Figma splits 1280 as 618 image + 64 gap + 598 text, and the base .content-block__image--left flex:1 resolves the 618 once the box is 598. The 36px gap replaces the base 24px box gap + 12px heading-wrap margin pair. */ .content-block--licence-eligibility .content-block__box { width: 598px; /* Figma 12135:7395 w 598 FILL */ gap: 36px; /* Figma 12135:7395 gap 36 */ } /* Image column. Figma 12135:7417/7418 is 618x509 sizingV=FILL — the image FOLLOWS the text column's height. The base rule already sets align-self:stretch + min-height:0 (about.css:418-421), but that is not enough: the is still in normal flow with height:100% against an auto-height parent, so the percentage resolves to auto and the image lays out at its intrinsic ratio, DRIVING the flex line instead of filling it. who-can-get-a-licence.jpg is portrait (1236x1854), so at 618 wide it rendered 927 tall and pushed the section to 1151px against Figma's 733. Taking the out of flow leaves the wrapper's height to come from the flex line — which is what FILL means. Blocks 5 and 9 escape this only because their sources happen to be landscape (1.5). */ .content-block--licence-eligibility .content-block__image { position: relative; } .content-block--licence-eligibility .content-block__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Figma 12135:7418 fills IMAGE scaleMode=FILL */ } /* Tagline and H2 are grouped in one wrapper here, so the wrapper carries the gap instead of the base margin-only rule (about.css:203). Precedent: become-a-member.css:36-42. */ .content-block--licence-eligibility .content-block__heading-wrap { display: flex; flex-direction: column; gap: 22px; /* Figma 12135:7396 gap 22 — untokenized, no 22px space token */ margin: 0; /* supersedes the base margin-bottom 12; the box gap 36 now carries it */ } /* H2 is the Figma value verbatim — build contract §3.1, precedent our-member-sectors.css:78-79. Scoped so it out-specifies the shared 44px/1.1 base at about.css:185. */ .content-block--licence-eligibility .content-block__heading { font-size: 48px; /* Figma 12135:7400 size 48 */ line-height: 1.2; /* Figma 12135:7400 LH 57.6 / 48 */ letter-spacing: -0.48px; /* Figma 12135:7400 LS -0.48 */ } /* Lead paragraph. Beats the (0,1,1) .content-block__copy p rule at about.css:217. */ .content-block--licence-eligibility .content-block__copy { gap: 16px; /* Figma 12135:7403 gap 16 — lead to list; the 7401/7402 wrappers are single-child no-ops */ } .content-block--licence-eligibility .content-block__lead { line-height: 1.4; /* Figma 12135:7404 LH 22.4 / 16 */ color: #000; /* Figma 12135:7404 SOLID #000000 — untokenized one-off, --color-navy-darkest #03060c is NOT identical */ } /* -------------------------------------------------------------------------- Eligibility checklist — new, page-scoped. The Figma row (24px tick, 8px tick-to-text gap, 8/0 row padding, 1px #ced0d4 rule under EVERY row including the last, 4px between rows) matches neither .content-block__list-row (about.css:470 — 48px tangerine icon, 24px padding) nor .course-checklist (course-single.css:268 — page-local stylesheet, and its __lead/__detail split forces a line break at 14px). Authored here instead. -------------------------------------------------------------------------- */ .licence-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; /* Figma 12135:7406 gap 4 */ max-width: 560px; /* Figma 12135:7406 w 560 FIXED inside the 598 wrapper 12135:7405 */ } .licence-checklist__item { display: flex; flex-direction: row; align-items: flex-start; /* Figma 12135:7407 icon rel y=8 == text rel y=8, both at the row content top */ gap: 8px; /* Figma 12135:7407 gap 8 */ padding: 8px 0; /* Figma 12135:7407 pad T8 R0 B8 L0 */ border-bottom: 1px solid var(--color-navy-lighter); /* Figma 12135:7407/7410/7413/7424 stroke SOLID #ced0d4 sides(bottom=1) — present on the last row too, so no :last-child reset */ font-family: var(--font-family); font-weight: 400; /* Figma 12135:7412 run 2 PS=FrutigerLTStd-Roman weight 400 */ font-size: 16px; /* Figma 12135:7412 size 16 */ line-height: 1.4; /* Figma 12135:7412 LH 22.4 / 16 */ color: var(--color-navy-darkest); /* Figma 12135:7412 SOLID #03060c */ } /* Tick. .material-symbols-outlined (icons.css:6) already ships font-size 24px and line-height 1, which is exactly Figma 12135:7408 24x24 — only the flex behaviour and the fill are page deltas. The fill is navy-DARKEST here, not the var(--color-navy) that course-single.css:301 uses. */ .licence-checklist__icon { flex: 0 0 auto; color: var(--color-navy-darkest); /* Figma I12135:7408;7044:3399 SOLID #03060c */ } .licence-checklist__text { min-width: 0; /* css-architecture.md: flex item must be able to shrink below its content width */ } .licence-checklist__text strong { font-weight: 700; /* Figma 12135:7412/7415/7426 base run FrutigerLTStd-Bold weight 700 */ } /* ========================================================================== Block 8 — Section_Requirements (Figma 12135:7806) Grey card holding a 5-step keep-one accordion. ========================================================================== */ /* Section: no fill of its own — the visible grey is the inner card below. Vertical padding is asymmetric (Section Padding: medium top, large bottom). */ .gbl-requirements { padding: var(--space-16) var(--space-20) var(--space-28); /* Figma 12135:7806 pad T=64 R=80 B=112 L=80 */ } /* Inner card: the grey band. Figma centres it in the 1440 frame. */ .gbl-requirements__inner { max-width: 1280px; /* Figma 12135:7638 w 1280 */ margin: 0 auto; /* Figma 12135:7806 primary=CENTER counter=CENTER */ padding: var(--space-12); /* Figma 12135:7638 pad 48 */ background-color: var(--color-navy-lightest-50); /* Figma 12135:7638 fills #e6e7e9 opacity 0.5 */ border-radius: var(--radius-sm); /* Figma 12135:7638 cornerRadius 4 */ } .gbl-requirements__content { display: flex; flex-direction: column; gap: var(--space-9); /* Figma 12135:7642 gap 36 */ min-width: 0; /* css-architecture.md — flex chain */ } /* Single-child wrapper in Figma; the gap has no visual effect, kept for parity. */ .gbl-requirements__heading-wrap { display: flex; flex-direction: column; gap: 22px; /* Figma 12135:7643 gap 22 — untokenized */ min-width: 0; } .gbl-requirements__heading { font-family: var(--font-family); font-weight: var(--font-weight-normal); /* Figma 12135:7645 FrutigerLTStd-Roman 400 */ font-size: 48px; /* Figma 12135:7645 size 48 */ line-height: 1.2; /* Figma 12135:7645 LH 57.6 */ letter-spacing: -0.01em; /* Figma 12135:7645 LS -0.48 */ color: var(--color-navy); /* Figma 12135:7645 fills #0b1628 */ } .gbl-requirements__text { display: flex; flex-direction: column; gap: var(--space-9); /* Figma 12135:7646 gap 36 */ min-width: 0; } /* 12135:7647 is textAutoResize=HEIGHT at w=1024 — an authored fixed measure, not a hug. Without the cap the intro filled the panel's full 1184 inner width and broke two words later than Figma. The closing paragraph 12135:7662 (w=1134) is a separate, wider node and is already correct at 1132, so the cap must stay scoped to the intro. */ .gbl-requirements__intro { max-width: 1024px; /* Figma 12135:7647 w=1024 textAutoResize=HEIGHT */ font-family: var(--font-family); font-weight: var(--font-weight-normal); /* Figma 12135:7647 FrutigerLTStd-Roman 400 */ font-size: 18px; /* Figma 12135:7647 size 18 */ line-height: 1.5; /* Figma 12135:7647 LH 27 */ color: var(--color-navy-darkest); /* Figma 12135:7647 fills #03060c */ } /* Card list. The cache reports GRID gap=0 on 12135:7648, but the rendered row gap is 24 in every pair (3700-3676, 3816-3792, 3932-3908, 4048-4024) — the 0 is a REST GRID artifact. The 3/1 padding is the hairline stroke/shadow bleed. */ .gbl-requirements__list { display: flex; flex-direction: column; gap: var(--space-6); /* Figma 12135:7648 rendered row gap 24 */ padding: 3px 1px; /* Figma 12135:7648 pad T=3 R=1 B=3 L=1 — untokenized */ min-width: 0; } /* Step card. Figma's "Card" (fill/stroke/radius/shadow, no padding) and its only child "Step item" (padding 24, no fill) collapse into this one

: 24 + 44 + 24 = the 92 closed height the cache reports. */ .gbl-requirements__step { padding: var(--space-6); /* Figma 12135:7650 pad 24 */ background-color: var(--color-white); /* Figma 12135:7649 fills #ffffff */ border: 1px solid var(--color-navy-lightest); /* Figma 12135:7663 strokes #e6e7e9 — closed */ border-radius: var(--radius-sm); /* Figma 12135:7649 cornerRadius 4 */ box-shadow: var(--shadow-md); /* Figma 12135:7649 DROP_SHADOW 0 3 16 -4 rgba(0,0,0,0.09) */ transition: border-color 0.15s ease; } .gbl-requirements__step[open] { border-color: var(--color-tangerine); /* Figma 12135:7649 strokes #ff6600 — open */ } .gbl-requirements__step-summary { display: flex; flex-direction: row; align-items: center; /* Figma 12135:7651 counter=CENTER */ gap: 18px; /* Figma 12135:7651 gap 18 — untokenized */ cursor: pointer; list-style: none; min-width: 0; } .gbl-requirements__step-summary::-webkit-details-marker { display: none; } /* New accessibility rule — no ring is inherited here. Pattern: our-member-sectors.css:135. */ .gbl-requirements__step-summary:focus-visible { outline: 2px solid var(--color-tangerine); outline-offset: 2px; border-radius: var(--radius-xs); } .gbl-requirements__step-number { display: flex; align-items: center; justify-content: center; /* Figma 12135:7652 primary=CENTER counter=CENTER */ flex-shrink: 0; width: 44px; /* Figma 12135:7652 box 44x44 */ height: 44px; border-radius: 50%; /* Figma 12135:7652 cornerRadius 27 on a 44 box draws a full circle */ background-color: var(--color-tangerine-lighter); /* Figma 12135:7652 fills #ffe0cc */ font-family: var(--font-family); font-weight: var(--font-weight-bold); /* Figma 12135:7653 FrutigerLTStd-Bold 700 */ font-size: 20px; /* Figma 12135:7653 size 20 */ line-height: 1.3; /* Figma 12135:7653 LH 26 */ color: var(--color-tangerine-dark); /* Figma 12135:7653 fills #cc5100 */ } .gbl-requirements__step-heading { flex: 1 1 auto; /* Figma 12135:7654 sizingH=FILL */ min-width: 0; /* css-architecture.md — heading wraps instead of overflowing the row */ /* QA 2026-09-14 #3 — min-width:0 lets the box shrink below its longest word, and a word that no longer fits paints straight over the flex-shrink:0 arrow beside it. The 480 block below buys the room back for real phones; this is the hard floor, so no width can ever put text under the glyph. */ overflow-wrap: anywhere; font-family: var(--font-family); font-weight: var(--font-weight-bold); /* Figma 12135:7654 FrutigerLTStd-Bold 700 */ font-size: 20px; /* Figma 12135:7654 size 20 */ line-height: 1.3; /* Figma 12135:7654 LH 26 */ letter-spacing: -0.01em; /* Figma 12135:7654 LS -0.2 */ color: var(--color-navy); /* Figma 12135:7654 fills #0b1628 */ } /* Material glyph stands in for Figma's bespoke 17x10 vector (componentId 4179:9356) — the convention both existing accordions already use. See notes, designer flag 1. */ .gbl-requirements__step-icon { flex-shrink: 0; font-size: 36px; /* Figma 12135:7655 box 36x36 — icon glyph */ line-height: 1; color: var(--color-tangerine); /* Figma I12135:7656;7044:24627 fills #ff6600 */ transition: transform 0.2s ease; } /* Rotation is the sitewide open-state convention (our-member-sectors.css:196); Figma draws the same 17x10 vector at rel (9,13) in both states, so it carries no value. */ .gbl-requirements__step[open] .gbl-requirements__step-icon { transform: rotate(180deg); } /* Panel: display:none when closed so the native
really collapses — an unconditional flex leaves it full-height and accordion.js animates to 0 then snaps back (community.css:972 documents that exact regression). */ .gbl-requirements__step-panel { display: none; flex-direction: column; gap: 18px; /* Figma 12135:7650 gap 18 between content groups — untokenized */ padding-top: 18px; /* Figma 12135:7650 gap 18 between Step title and first content group */ min-width: 0; } .gbl-requirements__step[open] .gbl-requirements__step-panel { display: flex; } /* WYSIWYG body — element selectors, since the markup comes from the editor. Block margins need no reset here: base.css:16 zeroes every element's margin. */ .gbl-requirements__step-panel p, .gbl-requirements__step-panel li { font-family: var(--font-family); font-weight: var(--font-weight-normal); /* Figma 12135:7662 FrutigerLTStd-Roman 400 */ font-size: 16px; /* Figma 12135:7662 size 16 */ line-height: 1.4; /* Figma 12135:7662 LH 22.4 */ color: var(--color-navy); /* Figma 12135:7662 fills #0b1628 */ } /* Bullets: every one of these lists is a single Figma TEXT node with lineTypes UNORDERED — markers, never
. The px indent has no Figma value; 24px is the in-repo bullet indent (women-in-construction.css:148). */ .gbl-requirements__step-panel ul, .gbl-requirements__step-panel ol { margin: 0; padding-left: 24px; /* Figma 12135:7659 lineIndentations 1 — px per in-repo precedent */ } .gbl-requirements__step-panel ul { list-style: disc; /* Figma 12135:7659 lineTypes UNORDERED */ } .gbl-requirements__step-panel li + li { margin-top: var(--space-2); /* Figma 12135:7659 listSpacing 8 */ } .gbl-requirements__step-panel strong { font-weight: var(--font-weight-bold); /* Figma 12135:7659 runs weight=700 FrutigerLTStd-Bold */ } /* The underlined run carries no colour override, so it keeps the node's own ink — base.css:73 would otherwise paint every tangerine. */ .gbl-requirements__step-panel a { color: var(--color-navy); /* Figma 12135:7659 run 3 inherits fills #0b1628 */ text-decoration: underline; /* Figma 12135:7659 run 3 decoration=UNDERLINE */ } /* No hover state in Figma — sitewide link hover (base.css:79). */ .gbl-requirements__step-panel a:hover, .gbl-requirements__step-panel a:focus-visible { color: var(--color-tangerine-dark); } /* ========================================================================== Block 9 — Sections_How we help (Figma 12130:1827) Structurally the same text+image split as .training-info (about-our-training.css:29-171), but page-scoped: that class is a different band colour, a single CTA instead of a link list, and its own stylesheet is enqueued only for About our Training. ========================================================================== */ .builders-help { padding: var(--space-28) var(--space-20); /* Figma 12130:1828 pad T112 R80 B112 L80 */ background-color: var(--color-accent-light-blue); /* Figma 12130:1827 fills SOLID #cbdae6 */ } .builders-help__inner { max-width: 1280px; /* Figma 12130:1829 w=1280 */ margin: 0 auto; } .builders-help__row { display: flex; align-items: flex-start; /* Figma 12135:7839 counter=MIN */ gap: var(--space-16); /* Figma 12135:7839 HORIZONTAL gap=64 */ } /* Figma 12135:7840 w=608 sizingH=FILL and Figma 12135:7853 w=608 sizingH=FILL inside a 1280 row with a 64 gap — an equal split, so both columns take flex: 1 1 0. */ .builders-help__content { flex: 1 1 0; /* Figma 12135:7840 sizingH=FILL w=608 */ min-width: 0; display: flex; flex-direction: column; gap: 46px; /* Figma 12135:7840 VERTICAL gap=46 — untokenized */ } /* Figma 12135:7841 "Intro" is HORIZONTAL gap=96 around a single child, so the gap never resolves and the frame needs no rule — kept in the DOM only for traceability. */ .builders-help__text { display: flex; flex-direction: column; gap: 22px; /* Figma 12135:7842 VERTICAL gap=22 — untokenized */ } /* The rule + hook decoration comes from .section-tagline (typography.css:316); Figma 12135:7844 draws that rule as an absolute 170×6 vector in #0b1628, the same colour as the text, and the base pseudo paints in currentColor — so only colour and tracking differ. */ .builders-help__tagline { color: var(--color-navy); /* Figma 12135:7843 SOLID #0b1628 — base is tangerine */ letter-spacing: 0; /* Figma 12135:7843 LS=0 — base is 0.05em */ } /* h2 base is 44px/1.1/700 (typography.css:269); this frame is the 48px Roman section heading. letter-spacing is left to the base -0.01em, which is exactly -0.48px at 48px. */ .builders-help__heading { margin: 0; font-size: 48px; /* Figma 12135:7848 size=48 */ font-weight: var(--font-weight-normal); /* Figma 12135:7848 FrutigerLTStd-Roman weight=400 */ line-height: 1.2; /* Figma 12135:7848 LH=57.6 */ color: var(--color-navy); /* Figma 12135:7848 SOLID #0b1628 */ } .builders-help__copy { display: flex; flex-direction: column; gap: 18px; /* Figma 12135:7849 VERTICAL gap=18 — untokenized */ } .builders-help__body { margin: 0; font-size: 18px; /* Figma 12135:7850 size=18 */ line-height: 1.5; /* Figma 12135:7850 LH=27 */ color: var(--color-navy-darkest); /* Figma 12135:7850 SOLID #03060c */ } /* Pastel R9 4glz82ro #8: the copy became rich text — two paragraphs, a link, a bold lead-in. The paragraph break reuses 12135:7849's 18px gap. */ .builders-help__body p { margin: 0; } .builders-help__body p + p { margin-top: 18px; /* Figma 12135:7849 VERTICAL gap=18 */ } .builders-help__body strong { font-weight: var(--font-weight-bold); } /* The base link colour is tangerine, which fails contrast on this #cbdae6 band; the underline alone marks the link, as in the body copy around it. */ .builders-help__body a { color: inherit; } .builders-help__body a:hover { text-decoration-thickness: 2px; } .builders-help__actions { display: flex; align-items: center; /* Figma 12135:7851 counter=CENTER */ gap: var(--space-6); /* Figma 12135:7851 HORIZONTAL gap=24 */ } /* .btn renders its label at 16px/1.2 (buttons.css:19-20) and this instance is 14px/19.6 at Default padding (pad T10 R24 B10 L24 = buttons.css:56-60), which no size variant produces. Page-scoped size override only, same precedent as about-our-training.css:365-366. */ .builders-help__cta { font-size: 14px; /* Figma I12135:7852;4179:8878 size=14 */ line-height: 1.4; /* Figma I12135:7852;4179:8878 LH=19.6 */ } .builders-help__image { flex: 1 1 0; /* Figma 12135:7853 sizingH=FILL w=608 */ min-width: 0; /* QA 2026-09-14 #2 — the frame fills the row height instead of hugging its own ratio. At 1440 nothing moves: the image's 385 already exceeds the 369 text column, so it still sets the line height, exactly as Figma 12135:7839 (row 385, text 366). Below 1440 the text column grows as the heading re-wraps while a ratio-sized image shrinks — at 1280 the image ended 92px short of the button. Stretch makes the height definite, so the ratio above only supplies the hypothetical size that keeps the 1440 line at 385. Same fix, same cause, as Pastel 2026-06-30 #1 on Why Join (why-join.css:63-67). */ align-self: stretch; aspect-ratio: 608 / 385; /* Figma 12135:7853 w=608 h=385 sizingV=HUG */ display: flex; /* so the can stretch inside the frame (about-our-training.css:152) */ overflow: hidden; /* Figma 12135:7860 is an 82×82 #cbdae6 wedge over the top-right corner — the band's own colour, so it is cut out rather than painted as an overlay (about-our-training.css:154-156). The same polygon supplies Figma 12135:7853 cornerRadius 4 on the other three corners. */ clip-path: var(--corner-cut-clip); } .builders-help__image img { display: block; width: 100%; height: 100%; object-fit: cover; /* Figma 12135:7853 fills IMAGE scaleMode=FILL */ } /* ========================================================================== Block 10 — Section_Resources (Figma 12130:981) Heading + two external-resource cards in a 768px column that is LEFT-aligned inside the 1280 content box (build contract §4 — no margin-inline: auto on the column itself). ========================================================================== */ .gbl-resources { padding: 112px 80px; /* Figma 12130:981 pad T112 R80 B112 L80 */ background-color: var(--color-white); /* Figma 12130:981 fills SOLID #ffffff */ } /* The 1280 content box. Only this level centres; it keeps the column's left edge on the same line as every other section above a 1440 viewport. */ .gbl-resources__inner { max-width: 1280px; /* Figma 12130:982 w=1280 */ margin: 0 auto; } .gbl-resources__wrap { max-width: 768px; /* Figma 12130:984 w=768 rel=(0,0) — left-aligned, build contract §4 */ display: flex; flex-direction: column; gap: var(--space-12); /* Figma 12130:982 VERTICAL gap=48 */ min-width: 0; } .gbl-resources__heading { margin: 0; font-family: var(--font-family); font-size: 44px; /* Figma 12130:990 size=44 */ font-weight: var(--font-weight-normal); /* Figma 12130:990 FrutigerLTStd-Roman weight=400 — the h2 base is 700 */ line-height: 1.1; /* Figma 12130:990 LH=48.4 */ letter-spacing: -0.01em; /* Figma 12130:990 LS=-0.44 — -0.01em is exactly -0.44px at 44px and stays proportional at the 32px mobile size */ color: var(--color-navy-darkest); /* Figma 12130:990 SOLID #03060c */ } .gbl-resources__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* Figma 12130:994 HORIZONTAL row, 2 cards w=366 across 768 */ column-gap: var(--space-9); /* Figma 12130:994 HORIZONTAL gap=36 */ row-gap: var(--space-6); /* Figma 12130:993 VERTICAL gap=24 — the gap between card rows */ align-items: stretch; /* Figma 12135:7824 sizingV=FILL — card 2 stretches to the row height */ min-width: 0; } /* Deltas vs the .card base in cards.css:11. Background, radius 4 and the flex column come from the base; the stroke and the heavier shadow do not. */ .gbl-resources-card { border: 1px solid var(--color-navy-lightest); /* Figma 12130:995 strokes SOLID #e6e7e9 weight=1 */ box-shadow: var(--shadow-md); /* Figma 12130:995 DROP_SHADOW 0 3 16 -4 rgba(0,0,0,0.09) — base .card is --shadow-xs */ min-width: 0; } /* Base .card__content already pads 24 (--space-6), which is the Figma padding; only the gap differs. Left top-aligned on purpose: Figma's Content frame hugs at h=172 inside the 192 stretched card, so the slack sits below the CTA. */ .gbl-resources-card__content { gap: 18px; /* Figma I12130:995;10303:38820 VERTICAL gap=18 — untokenized, not on the --space-* scale */ } /* Size 20 / line-height 1.3 / weight 700 come from the .h6 base (typography.css:294). */ .gbl-resources-card__title { margin: 0; letter-spacing: -0.01em; /* Figma I12130:995;10303:38823 LS=-0.2 — -0.01em is exactly -0.2px at 20px */ color: var(--color-navy); /* Figma I12130:995;10303:38823 SOLID #0b1628 */ } .gbl-resources-card__text { margin: 0; font-size: var(--text-sm); /* Figma I12130:995;10303:38824 size=14 */ line-height: var(--text-sm-lh); /* Figma I12130:995;10303:38824 LH=19.6 */ color: var(--color-navy); /* Figma I12130:995;10303:38824 SOLID #0b1628 */ } .gbl-resources-card__actions { display: flex; align-items: center; /* Figma I12130:995;10303:38825 counter=CENTER */ gap: var(--space-6); /* Figma I12130:995;10303:38825 HORIZONTAL gap=24 */ min-width: 0; } /* Figma I12130:995;10303:38826 is a bare 24px-tall text link (pad 0, h=24); .btn contributes 10px block padding and a 2px transparent border, so both are zeroed — same delta as .quals-teaser-card__cta (about-our-training.css:359). The 8px text-to-icon gap, the navy colour, the 2px radius and the underline all come from .btn/.btn--link and match the node, so none of them is restated. */ .gbl-resources-card__cta { padding-block: 0; /* Figma I12130:995;10303:38826 pad T0 B0, h=24 */ border-block-width: 0; font-size: var(--text-sm); /* Figma I12130:995;10303:38826;4179:8938 size=14 */ line-height: var(--text-sm-lh); /* Figma I12130:995;10303:38826;4179:8938 LH=19.6 */ text-align: left; white-space: normal; /* the .btn base is nowrap; the 275px label would overflow a 314px card content box below 402 */ } /* 24px glyph size comes from .btn .material-symbols-outlined (buttons.css:42); only the shrink guard is page-scoped, so a wrapped label cannot squash the arrow. */ .gbl-resources-card__cta .material-symbols-outlined { flex: 0 0 auto; /* Figma I12130:995;10303:38826;4179:8939 w=24 h=24 */ } /* ============================================================================= Mobile — every @media block for this page, after all desktop rules. Scale: H1 54>38, H2 44>32, H6 20>18, Text Large 20>18, Text Medium 18>16. Section Padding: large 112>50, medium 64>20, small 48>12. ============================================================================= */ /* -------------------------------------------------------------------------- Block 4 — Feature Intro [R] — Figma 12130:1730 — mobile Section padding, inner padding and lead size are already shipped by the shared base at max-width 768: 50px 20px (about.css:932-934, Section Padding large 112 -> 50), inner 24px (about.css:936-938, inner Padding ladder 36 -> 24), lead 20px (about.css:942-944, H5 24 -> 20). The 1024px lead cap is inert below a 1024px viewport. The crop, however, is NOT breakpoint-independent. `background-size: 100% 182.464%` reproduces Figma's STRETCH by tying the band's height to the ELEMENT's height, so the non-uniform squash Figma applies at its own 1440x477 frame turns into a growing vertical smear as the block gets taller and narrower. Measured smear (source band aspect 2.738 / element aspect), 1.00 = undistorted: 1440 -> 0.93 1280 -> 1.05 1100 -> 1.30 1024 -> 1.40 900 -> 1.68 768 -> 1.24* 600 -> 1.83 480 -> 2.58 402 -> 3.61 360 -> 4.23 (* 768 drops the section padding) At 402 the photo is smeared 3.6x — unrecognisable, and not something Figma ever draws. There is no mobile frame for this page, so per mobile-derivation-catalog.md the mobile value is derived, and a 3.6x smear is not a defensible derivation of a 0.93x squash. Below 1280 — the point where the measured smear leaves ~5% of Figma's own value — fall back to an undistorted `cover` still anchored to the photo's bottom edge, which keeps the region Figma's imageTransform selects (the bottom band) and drops only the non-uniform scaling that no longer has a frame to justify it. -------------------------------------------------------------------------- */ @media (max-width: 1279px) { .about-feature-intro--gbl { background-size: cover; /* derived: preserve the source aspect — see table above */ background-position: center bottom; /* keep Figma 12130:1730 imageTransform's bottom anchor */ } } /* ========================================================================== Block 5 — Section_Info (Figma 12130:1844) — mobile No mobile Figma frame for this block; every row below is derived per roadmap/mobile-derivation-catalog.md (section padding, column collapse, corner cut) and the client's Figma Variables type scale (H2 44->32). Text Regular 16 and Tagline 16 do not change, so the copy, the check-list labels and the tagline keep their desktop sizes. ========================================================================== */ /* The row collapses at 1024, not 768. It is a full-width text+image row (598 + 64 + 618, Figma 12130:1846), which is the shape the catalog sends down the 1024 arm: "Multi-column rows collapse at 1024 (large grids) or 768 (2-col content rows)" — mobile-derivation-catalog.md:51. The in-repo precedent for this exact row is about-our-training.css:557, and Block 7 on this page already stacks at 1024 through the shared about.css:887-926 scaffold, so 768 here was the odd one out. Between 769 and ~1100 it left the text column at 270-400px under a 48px heading. */ @media (max-width: 1024px) { .gbl-info__content { flex-direction: column; /* 2-col content row collapses — mobile-derivation-catalog.md#column-collapse */ align-items: stretch; gap: var(--space-8); /* stacked 2-col row gap 32 — about.css:957 */ } /* The row is a column at this width, so the flex-basis is read as a HEIGHT and would hold each block at its desktop width value (about-our-training.css:569). */ .gbl-info__content-wrap, .gbl-info__image-wrap { flex: 0 0 auto; } .gbl-info__image-wrap { aspect-ratio: 618 / 609; /* Figma 12130:1862 w=618 h=609 — the stretch source is gone once stacked */ /* QA 2026-09-14 #5 — the Figma frame is near-square, which is fine beside a 598px text column and oversized once it spans the viewport: 717px tall at 768, 851px at 1024, i.e. most of a tablet screen. Catalog mobile images are height-capped, not ratio-preserved (find-an-apprentice.css:597/632/734 ladder 420/420/310 — mobile-derivation-catalog.md:105). The cap is inert at <=430, where the ratio already lands under it. */ max-height: 420px; } /* Second rung of the .card-grid--3 ladder (cards.css:376), which the desktop rule at :282 and the stack at :1000 skipped: without it the row holds 3-across all the way down to 769 and the cards reach 197px, far under the ~260px readability floor. */ .gbl-types__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .gbl-info__inner { padding: 50px 20px; /* Section Padding large 112->50, gutter 80->20 — mobile-derivation-catalog.md#container-caps */ } /* 82px is over a fifth of a 362px content width; 60 is the sitewide mobile cut (careers.css:671, about-our-training.css:600). */ .gbl-info__image { --corner-cut: 60px; clip-path: var(--corner-cut-clip); } .gbl-info__heading { font-size: 32px; /* H2 44->32, the nearest scale row for this page's 48px section headings */ } /* Client Pastel R6 #1 (2026-09-16) — the heading-wrap/body gap reads as 24 on mobile, not the desktop 36. Same rung the inner Padding ladder takes (medium 36 -> 24, mobile-derivation-catalog.md:41); the client pinned this gap on five sections of this page, so all five carry the identical value. */ .gbl-info__content-wrap { gap: var(--space-6); } } /* -------------------------------------------------------------------------- Block 6 — Section_Types [R] — Figma 12132:7302 — mobile No mobile Figma frame exists for this node (cache is the 1440 board only), so every value below is derived per roadmap/mobile-derivation-catalog.md and the client's Figma Variables scale, not transcribed. Unchanged on purpose: .card__excerpt 14px (Text Small does not scale), the 40x40 letter tile and its 30px glyph (icon glyph sizes are exempt), the 24px row gap and the 36px column gap (no catalog rule moves them). Layout (402) in the spec reads "inherits" on every row — no 402 block. -------------------------------------------------------------------------- */ @media (max-width: 768px) { .gbl-types { padding: 50px 20px; /* Section Padding scale large 112 -> 50 */ } .gbl-types__title { font-size: 32px; /* Figma Variables mobile: H2 44 -> 32 */ } .gbl-types__intro { font-size: 16px; /* Figma Variables mobile: Text Medium 18 -> 16 */ } /* 3-across at 768 gives (768 - 40 - 48) / 3 = 227px per card, under the ~260px readability floor, and the project bans drag-carousels above touch widths — so the row goes straight to a stack. Same ladder as cards.css:364. */ .gbl-types__row { grid-template-columns: minmax(0, 1fr); } /* Same three-class specificity as the desktop rule above, and later in source, so it beats both that rule and cards.css:371 (which sets 18px here). */ .gbl-types .card--icon-strip .card__title { font-size: 16px; /* Figma Variables mobile: Text Medium 18 -> 16 */ } /* Client Pastel R6 #2 (2026-09-16) — title/intro gap 36 -> 24 on mobile. */ .gbl-types__inner { gap: var(--space-6); } } /* ========================================================================== Block 7 — Section_Who can get a licence — mobile Figma 12135:7392 The reused scaffold already stacks the row at <=1024 (about.css:887-926), so no stacking rule is repeated here. Only the scoped rules this block adds need scoped counterparts — an unscoped about.css rule cannot beat them. No Figma mobile frame exists for this block; values are derived per roadmap/mobile-derivation-catalog.md and the client's Figma Variables scale. ========================================================================== */ @media (max-width: 1024px) { /* The scoped 598px desktop width out-specifies the shared stacking reset at about.css:891, so the reset has to carry the same prefix, else the text column stays 598px wide inside a stacked column. */ .content-block--licence-eligibility .content-block__box { width: 100%; } /* Stacked: the text column is no longer a flex sibling, so there is no line height for the out-of-flow to fill and the wrapper would collapse. Restore a definite box from the Figma frame's own ratio — same technique as .gbl-info__image-wrap below. min-height also has to be reset: the shared 300px floor (about.css:924) would stretch the box past that ratio at 402 (362 wide => 298 tall). */ .content-block--licence-eligibility .content-block__image { aspect-ratio: 618 / 509; /* Figma 12135:7417 w=618 h=509 */ min-height: 0; max-height: 420px; /* QA 2026-09-14 #5 — same cap as .gbl-info__image-wrap above: 600px tall at 768, 712px at 1024 once full-width */ } } @media (max-width: 768px) { .content-block--licence-eligibility { padding: 50px 20px; /* Section Padding scale: large 112 -> 50 (Figma Variables, client 2026-07-01) */ } /* Mobile counterpart for the scoped 48px desktop heading — an unscoped rule (about.css:966) loses to it. */ .content-block--licence-eligibility .content-block__heading { font-size: 32px; /* Figma Variables mobile: H2 -> 32 */ } /* QA 2026-09-14 #4 — this image is the shared .content-block__image--left, whose clip-path lives in about.css:295 and had no mobile counterpart here, so it kept the 82px desktop diagonal: 23% of a 362px photo. 60 is the sitewide mobile cut (mobile-derivation-catalog.md:83), same as the page's other two images. The clip-path itself needs no re-declaration — tokens.css now resolves --corner-cut-clip against this element's own --corner-cut. */ .content-block--licence-eligibility .content-block__image { --corner-cut: 60px; } /* Client Pastel R6 #3 (2026-09-16) — heading-wrap/copy gap 36 -> 24 on mobile. Carries the same two-class prefix as the desktop rule at :346, which it has to beat. */ .content-block--licence-eligibility .content-block__box { gap: var(--space-6); } } /* No 402 block: the checklist, tagline and lead are Text Regular 16 / Tagline 16, which the scale leaves unchanged, and no 402 Figma frame exists. All values inherit 768. */ /* ========================================================================== Block 8 — Section_Requirements — mobile (Figma 12135:7806) No mobile frame was supplied; every value below is derived per roadmap/mobile-derivation-catalog.md + the Figma Variables responsive scale. ========================================================================== */ @media (max-width: 768px) { /* Section Padding scale (outer): T 64 medium -> 20, B 112 large -> 50, L/R 20. Asymmetric T/B preserved from Figma 12135:7806. */ .gbl-requirements { padding: var(--space-5) var(--space-5) 50px; } /* Inner Padding ladder: large 48 -> 36. Figma 12135:7638 pad 48. */ .gbl-requirements__inner { padding: var(--space-9); } /* H2 48 -> 32 (scale H2 44->32). line-height 1.2 and LS -0.01em are relative, so they follow the new size and need no counterpart. */ .gbl-requirements__heading { font-size: 32px; } /* Text Medium 18 -> 16. Figma 12135:7647 size 18. */ .gbl-requirements__intro { font-size: 16px; } /* Text Large 20 -> 18. Figma 12135:7654 size 20. */ .gbl-requirements__step-heading { font-size: 18px; } /* Text Large 20 -> 18. Figma 12135:7653 size 20 — the 44x44 circle keeps its size (icon-box exemption); only the numeral scales. */ .gbl-requirements__step-number { font-size: 18px; } /* Client Pastel R6 #4 (2026-09-16) — heading-wrap/text gap 36 -> 24 on mobile. */ .gbl-requirements__content { gap: var(--space-6); } /* Client Pastel R6 #6 (2026-09-16) — accordion body copy 16 -> 14 on mobile. A client instruction, not the Variables scale (Text Regular 16 does not scale); it lands on the scale's Text Small row. Same two-part selector as the desktop rule at :625. */ .gbl-requirements__step-panel p, .gbl-requirements__step-panel li { font-size: 14px; } } /* QA 2026-09-14 #3 — small-phone rung (mobile-derivation-catalog.md:16 lists 480 as the small-phone threshold). The summary row carries 276px of fixed chrome at 768 values — 20+20 section, 36+36 card, 24+24 step, 44 numeral, 18+18 gaps, 36 glyph — so on a 375px phone the heading got 95px for a word that measures 114px and spilled over the arrow. Trimming the two page-scoped values, not the Figma padding tokens, returns 133px at 375 and 118px at 360. */ @media (max-width: 480px) { /* Inner Padding ladder, medium rung 36 -> 24 (mobile-derivation-catalog.md:41). */ .gbl-requirements__inner { padding: var(--space-6); } /* Figma 12135:7651 gap 18 is untokenized and page-scoped — not a padding token. */ .gbl-requirements__step-summary { gap: var(--space-3); } } /* ========================================================================== Block 9 — ≤1024: the text+image row stacks. No Figma frame exists below 1440 for this block, so the breakpoint is derived: roadmap/mobile-derivation-catalog.md:14 puts the primary tablet collapse at 1024, and the closest in-repo twin — the same 50/50 text+image band — stacks there too (about-our-training.css:559-577). Stacking at 768 would leave a ~330px text column holding a 48px heading. ========================================================================== */ @media (max-width: 1024px) { .builders-help__row { flex-direction: column; align-items: stretch; gap: var(--space-9); /* derived: the 64px row gap reads as vertical space once stacked (about-our-training.css:563) */ } /* Stacked, flex-basis is read as a HEIGHT — 0 would collapse both columns. */ .builders-help__content, .builders-help__image { flex: 0 0 auto; } /* QA 2026-09-14 #5 — same cap as the two images above; 547px tall at 1024, 461px at 768 once the row stacks. Inert at <=768, where 608/385 already lands under it. */ .builders-help__image { max-height: 420px; } } /* ========================================================================== Block 9 — ≤768: mobile. Section Padding large 112→50 and gutter 80→20; type per the client's Figma Variables scale (H2 44→32 is the nearest row to a 48px section heading; Text Medium 18→16; Text Small 14 and Tagline 16 do not change, so .builders-help__cta and .builders-help__tagline need no rule). ========================================================================== */ @media (max-width: 768px) { .builders-help { padding: 50px 20px; /* Section Padding large 112→50, gutter 80→20 — roadmap/mobile-derivation-catalog.md:36 */ } .builders-help__heading { font-size: 32px; /* Figma Variables H2 44→32 */ } .builders-help__body { font-size: 16px; /* Figma Variables Text Medium 18→16 */ } /* 82px is over a fifth of a 362px content width; 60 is the sitewide mobile value (about-our-training.css:602-606, careers.css:671). */ .builders-help__image { --corner-cut: 60px; clip-path: var(--corner-cut-clip); } } /* ========================================================================== Block 10 — Section_Resources — mobile (≤768) Desktop-only Figma batch; every row below is derived per roadmap/mobile-derivation-catalog.md + the client's Figma Variables scale. ========================================================================== */ @media (max-width: 768px) { .gbl-resources { padding: 50px 20px; /* Section Padding large 112→50, horizontal 80→20 — catalog #container-caps */ } .gbl-resources__wrap { max-width: none; /* the 768 column becomes the full stacking width */ gap: var(--space-6); /* Client Pastel R6 #5 (2026-09-16) — heading/cards gap 48 -> 24 on mobile */ } /* Scoped counterpart to the scoped 44px desktop rule above — an unscoped h2 mobile rule would lose to it (css-architecture.md). */ .gbl-resources__heading { font-size: 32px; /* Figma Variables H2 44→32 */ } /* 2 cards → stack, not carousel (catalog #drag-carousel-vs-stack: ≤2 items). The 24px row-gap declared on the desktop rule is what separates them. */ .gbl-resources__cards { grid-template-columns: minmax(0, 1fr); } }