/* ========================================================================== Become a Partner hero (Figma: QF - BilAraby - WebsiteDesign-Concept-2, node 40001286:71001 "BECOME A PARTNER"). Reuses the --hr-* tokens declared globally in layout-revamp.css. Same shape as the Privacy Policy hero - title and standfirst on the paint, breadcrumb under them - assembled from the shared Innerpage-hero parts the Blogs and About Us heroes use: corner wedges, a grained wash that dies above the next section, the site breadcrumb and its diamond trail. The wash is painted by .partnership-hero-decor, a box pinned to the hero and stretched --pts-wash-tail past its bottom edge, so the paint is always the band's own height plus that tail no matter how the title wraps or which step of the type ramp it is on. It replaces a flat `background-size: 100% 950px` on the page wrapper: the band renders ~437px tall, so the amber was still at ~60% behind the "Three ways to be part of it" heading and not spent until halfway down the cards below it. ========================================================================== */ .partnership-revamp { /* BIL-821: every section on this page shares the HEADER's container, so content starts on the BilAraby logo's edge and ends on the language pill's. .header-revamp .container-xl (layout-revamp.css) is a flat 160px inline padding with max-width:none from 992px up, and Bootstrap's own 12px half-gutter below that - so this token is those two values, and the inners below carry max-width:none to match. The page's own 160/40/16 ladder put it 120px inside the header between 992 and 1200, and its 1600px caps pulled it back in again past 1920. Same change .summit-listing-revamp made, for the same reason. */ --pts-gutter: 12px; /* The pill shadow from Figma's Button component in its filled state - three drop layers plus a white inset highlight along the top edge. Same value as --blg-pill-shadow / --vid-pill-shadow / --evt-pill-shadow, whose filter pills the Partnership Type row now answers the cursor like; Figma's ramp opens with two layers at alpha 0 (7px 63px 18px and 4px 40px 16px) which paint nothing, so they are documented, not emitted. */ --pts-pill-shadow: 2px 23px 14px rgba(0, 0, 0, .02), 1px 10px 10px rgba(0, 0, 0, .03), 0 3px 6px rgba(0, 0, 0, .03), inset 0 4px 6.1px rgba(255, 255, 255, .23); /* How far the paint outlives the band, i.e. how much ramp is left below the breadcrumb hairline. 70px: the amber is spent ~50px above the "Three ways" heading (the band is ~459px and that section's lead-in is 120px), so the heading sits on clean cream. This was 140px, taken from Privacy Policy's ratio - its teal is still ~27% under the breadcrumb with ~125px of ramp left below it. That reads as depth in teal; in amber the same tail just spreads a pale orange haze over the whole gap and down onto the next heading, which is the "more here than in Figma" the design does not have. The alpha under the crumb is held by the ramp's own shape instead - see the stops below. */ --pts-wash-tail: 120px; position: relative; background: var(--hr-cream-500, #f9f7e9); } /* Matching the header's own breakpoint, so the two switch together. */ @media (min-width: 992px) { .partnership-revamp { --pts-gutter: 160px; } } /* ---------- Hero ---------- */ .partnership-hero { position: relative; /* 0, not 1: the wash box below hangs --pts-wash-tail past this section, and a positive index here would float that tail over .partnership-ways instead of letting the next section paint over it. */ z-index: 0; /* 200px lead-in, matching .pp-hero - the other hero that carries its title inside the paint. It was 216, which is not a step any other page takes and put this h1 16px below every other page's. No min-height: the band is exactly its own copy, and the wash follows it. */ padding: 200px var(--pts-gutter) 24px; /* app.css carries a blanket `section { overflow: hidden }`. It clips the paint box below to this element's bottom edge, so the ramp was cut off mid-fade at whatever alpha it had reached on the hairline (~29%) and hit cream in one step - the hard line across the band. This is the same trap the note at the top of blogs-revamp.css describes, which is why those pages paint their wash on the page-level wrapper div instead of on the hero section. Overriding it here is what lets the paint keep its tail while still being sized by the hero. */ overflow: visible; } .partnership-hero-inner { position: relative; z-index: 1; max-width: none; width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 64px; } /* ---------- Wash + corner wedges ---------- */ /* One box for both: it carries the gradient and the grain, and it is also what crops the wedges to the band. Stretched past the hero's bottom edge by the tail, with the wedges pinned to that same offset so they stay on the band's real bottom edge rather than the wash's. */ .partnership-hero-decor { position: absolute; inset: 0 0 calc(-1 * var(--pts-wash-tail)); overflow: hidden; pointer-events: none; z-index: 0; /* Figma paints this band with the shared "Innerpage-hero" fill, checked in as about-revamp/hero-banner.svg and used as an asset by About Us, Contact Us, Terms and Privacy Policy. That file is teal, so this page cannot link it - but its linear layer can be read off it rather than eyeballed, which is what the amber pages (.nominate-revamp, .translate-revamp) do instead: 89% opacity, with stop 0.64 of the gradient's axis landing at y=5.58 of the 424px box, 0.86193 at y=215.9 (half alpha) and 1.0 at y=346.7. Two departures from it, both because the box here is the band plus only --pts-wash-tail rather than Privacy Policy's 116.271% of a hero that keeps going for 152px past the crumb: - the asset's ramp is straight, so scaling it into this shorter box either washes the breadcrumb out or drags the tail onto the next heading. It is bent instead: the first two stops keep the asset's own slope through the band, then it holds ~30% on the hairline and spends the rest inside the tail. The hairline stop is calc(100% - the tail) rather than a percentage. This hero is sized by its own copy, so any fixed percentage only lands on the hairline at one particular band height and drifts off it at every other width - it was 86.8%, read off a 459px band. The tail itself is ~27% of the band, which is the proportion the Nominate hero uses (48 under a 160px band on a phone, 55 under 200 on a desktop). It was 70px under a 437px band - a sixth of it - and a fade that short under a band that tall is what read as a hard edge against the cream below, even though its per-pixel slope was gentler than Nominate's. - the asset's second layer, a black 17% radial vignette on the top edge, is dropped. Over #006D62 it reads as depth; over this page's amber it turns the top of the band brown-olive and pulls it away from both the design and the Nominate hero beside it. The grain (::after) is kept - that is the layer that stops a flat ramp reading as plastic. */ background: linear-gradient(to bottom, rgba(217, 133, 0, .89) 0%, rgba(217, 133, 0, .89) 1.6%, rgba(217, 133, 0, .55) 55%, rgba(217, 133, 0, .30) calc(100% - var(--pts-wash-tail)), rgba(217, 133, 0, 0) 100%); } /* Layer 3 of the fill: hero-banner.svg's grain, which is what keeps the band from reading as flat plastic. Same recipe as the asset's own filter - a fractalNoise turbulence at baseFrequency .714/.909 over 3 octaves, seed 6890, put through luminanceToAlpha and a discrete alpha transfer, then flooded with white. The asset's table is 100 values with the first 51 set (a 0.51 threshold); "1 0" is the same shape at 0.50, which is under half a percent of coverage apart. Its white is rgba(255,255,255,.17), carried here as opacity so the tile itself can stay pure white. This replaces a mid-grey noise tile blended through mix-blend-mode: overlay, which speckles dark as well as light and tints the whole band - the asset only ever adds white. The mask is the ramp's own alphas normalised against its .89 start, matching the asset's `feComposite operator="in" in2="shape"`: the grain is clipped to the paint's alpha, so it cannot outlive the amber under it. */ .partnership-hero-decor::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSdnJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC43MTQyODU3MyAwLjkwOTA5MDg4JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJyBzZWVkPSc2ODkwJyByZXN1bHQ9J24nLz48ZmVDb2xvck1hdHJpeCBpbj0nbicgdHlwZT0nbHVtaW5hbmNlVG9BbHBoYScgcmVzdWx0PSdhJy8+PGZlQ29tcG9uZW50VHJhbnNmZXIgaW49J2EnIHJlc3VsdD0nZCc+PGZlRnVuY0EgdHlwZT0nZGlzY3JldGUnIHRhYmxlVmFsdWVzPScxIDAnLz48L2ZlQ29tcG9uZW50VHJhbnNmZXI+PGZlRmxvb2QgZmxvb2QtY29sb3I9JyNmZmZmZmYnIHJlc3VsdD0ndycvPjxmZUNvbXBvc2l0ZSBvcGVyYXRvcj0naW4nIGluPSd3JyBpbjI9J2QnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjZyknLz48L3N2Zz4="); background-repeat: repeat; background-size: 200px 200px; opacity: .17; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 1.6%, rgba(0,0,0,.618) 55%, rgba(0,0,0,.337) calc(100% - var(--pts-wash-tail)), rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 1.6%, rgba(0,0,0,.618) 55%, rgba(0,0,0,.337) calc(100% - var(--pts-wash-tail)), rgba(0,0,0,0) 100%); } /* Pattern-01 / Pattern-02 from Figma's "Innerpage-hero" instance: angular cream wedges at 10% fill in the two bottom corners - two DISTINCT vectors, not one shape mirrored. This hero had neither. Geometry copied from .blg-hero-pattern, the most recently corrected of the set; .nom-hero-decor on the sibling Nominate page still renders the older press-releases shape flipped onto both sides at left:-3% / left:63%, so neither wedge there reaches its corner. */ .partnership-hero-pattern { position: absolute; /* The band's bottom edge, not the paint's - the tail hangs below it. Same relationship .pp-hero-decor gets from `bottom: 152px` (its own padding-bottom): the wedges land on the breadcrumb hairline. */ bottom: var(--pts-wash-tail); z-index: 1; background-repeat: no-repeat; background-size: 100% 100%; /* .pp-hero-decor img's blur: it softens the vector edges to match how the wedges read in Figma's own render, where the 10% gradient dissolves into the band instead of showing a hard diagonal. */ filter: blur(1.5px); } .partnership-hero-pattern-start { inset-inline-start: 0; width: 305.329px; height: 160.658px; background-image: url("../images/innerpage-hero/hero-pattern-nobanner-left.svg"); } /* Figma puts mix-blend-mode:overlay on this one's container, not inside the SVG - as a background-image the blend has to be applied here, or it would composite against the SVG's own transparency and do nothing. */ .partnership-hero-pattern-end { inset-inline-end: 0; width: 305.29px; height: 204.731px; background-image: url("../images/innerpage-hero/hero-pattern-nobanner-right.svg"); mix-blend-mode: overlay; } /* Flip the pair under RTL so each wedge keeps its own visual side. */ [dir="rtl"] .partnership-hero-pattern { transform: scaleX(-1); } /* ---------- Title + standfirst ---------- */ /* .abt-title-row's grid: two equal columns with a 210px channel, centred against each other. This was a wrapping flex row of `flex: 1 1 480px; max-width: 640px` against `flex: 1 1 320px; max-width: 560px` - 1320px of content in a 1600px box, packed from the leading edge, so the standfirst sat wherever the slack left it (~280px shy of the trailing edge on a wide screen) rather than on a column. */ .partnership-hero-top { display: grid; grid-template-columns: minmax(0, 695fr) minmax(0, 695fr); /* 160px, down from Figma's 210. The standfirst is meant to run out to "...vibrant year-round" and leave only "community." under it, and at 210 it could not: that run measures 706px at the 24px top of the type clamp, against a column of (1600 - 210) / 2 = 695px. Eleven pixels short, at every viewport from 1920 up - which is why the line always broke a word early. 140 puts the column at 730px against that 706px run - 24px, ~3.5%, of headroom. Not 160/720px, which also lands the break but leaves only 12px: text measures a percent or two wider on another platform's font stack or smoothing, and the line would silently break a word early again on someone else's machine. The columns stay 695fr/695fr, i.e. an even split of whatever is left. */ gap: 140px; /* baseline, not center and not start. The two columns are a heading and its standfirst and they are asked to read as one line. center floated the standfirst 35px down into the middle of the taller heading (128px against 58px at 1600), so the two plainly did not start together. start fixed that but only lines up the two BOXES: at 57px against 22px the type sizes differ, so the heading's own first line sits lower inside its taller line box and the standfirst still read as a little high. baseline aligns the first baselines themselves, which is what puts the two texts on the same optical line. Only relevant above 1200px; below that the grid is a single column and these stack, where baseline behaves as start for a lone item. */ align-items: baseline; } /* Figma Headings/H1/Bold: Almarai 700, 64/72 on the 1922 frame, and fluid from there on About Us's own clamp so the two pages ramp identically (64px at 1922, 44px by ~995px). Leading as the 72/64 ratio rather than a flat 72px line box, which double-spaces the heading the moment the type shrinks. */ .partnership-hero-top h1 { font-size: clamp(44px, 2.16vw + 22.5px, 64px); line-height: 1.125; font-weight: 700; color: var(--hr-cream-500); margin: 0; } /* Figma Body/Body Medium 24/32, ramping to the phone board's 16/24 rather than snapping there, with leading as the 32/24 ratio so the line box tracks the size - it was a flat 32px box at every width, so the lines opened up as the type came down. */ .partnership-hero-desc { font-size: clamp(16px, 0.6933vw + 10.67px, 24px); line-height: 1.3333; color: var(--hr-cream-600, #e3e1d4); margin: 0; /* Deliberately NOT text-wrap: balance. Balancing was tried and rejected: it evens the two lines (~288/262 at 375px) but that pulls "join our vibrant year-round" down onto the second line. The sentence is meant to run the first line out in full and leave only the overflow under it - the default greedy wrap - so that the line ends on "year-round" and just "community." follows. The non-breaking hyphen in the string (see index.blade.php) is what lets "year-round" land there whole instead of splitting across the break. */ } /* ---------- Breadcrumb ---------- */ .partnership-breadcrumb-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; /* So the diamond cluster drops below the trail rather than squeezing it. */ flex-wrap: wrap; } /* The hairline is the BAND's bottom edge, so it belongs to the hero. It used to hang off .partnership-breadcrumb-row as a 100vw bar pulled back with a translate, which is also the one rule on the page that could produce a horizontal scrollbar - 100vw counts the scrollbar's own width. */ .partnership-hero::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: rgba(249, 247, 234, .35); } /* 22px between crumbs and a 28px line box, from .blg-breadcrumb / .abt-breadcrumb. The gap was 12px and there was no line-height, so the crumbs sat in Bootstrap's 1.5 (a 30px box) - tighter horizontally and 2px taller than every sibling hero. Type and gap scale with the viewport instead of holding 20px/22px, which keeps a three-crumb trail on one line down to ~440px; both clamps top out at the desktop values, so nothing changes above that. */ .partnership-breadcrumb { display: flex; align-items: center; gap: clamp(8px, 2.2vw, 22px); row-gap: 4px; flex-wrap: wrap; min-width: 0; font-size: clamp(13px, calc(5vw - 3px), 20px); line-height: 28px; color: var(--hr-cream-500); text-transform: uppercase; } /* Full strength per Figma's Breadcrumb component - only font weight marks the current crumb, there is no resting opacity on the others. Full note in press-releases-revamp.css. */ .partnership-breadcrumb a, .partnership-breadcrumb span:not(.partnership-breadcrumb-sep) { opacity: 1; } .partnership-breadcrumb a { flex-shrink: 0; color: inherit; text-decoration: none; transition: opacity .2s ease; } .partnership-breadcrumb a:hover { opacity: 1; color: inherit; text-decoration: underline; } .partnership-breadcrumb-current { font-weight: 700; opacity: 1 !important; } .partnership-breadcrumb-sep { width: 1px; height: 16px; background: rgba(249, 247, 234, .5); } .partnership-hero-divider { display: none; } @media (min-width: 1200px) { .partnership-hero-divider { display: flex; align-items: center; flex-shrink: 0; width: 280px; /* Bleeds the rule out to the viewport edge. Just the gutter now: the inner is no longer capped at 1600px, so there is no extra centring offset to cancel - the old `- max(0px, (100vw - 1920px) / 2)` term would overshoot the edge on a wide monitor and, since 100vw counts the scrollbar, take a horizontal scrollbar with it. */ margin-inline-end: calc(-1 * var(--pts-gutter)); } .partnership-hero-divider .partnership-diamond { /* 20 * (sqrt(2) - 1) / 2. A rotated 20px square is 28.28px wide visually but still occupies a 20px layout box, so the 4.142px overhang per side would make neighbours merge into one continuous zigzag. This margin separates the boxes by exactly that overhang, so adjacent tips just touch - corner to corner, 0px visible gap, no merge. Carried on the diamond rather than as a `gap` on the row so the last one also spaces itself off the line. Matches .abt-diamond / .blg-diamond / .sml-*. */ width: 20px; height: 20px; margin-inline: 4.142px; transform: rotate(45deg); background: var(--hr-cream-500); flex-shrink: 0; } .partnership-hero-divider-line { flex: 1 1 auto; height: 1px; background: rgba(249, 247, 234, .5); /* The last diamond's own 4.142px slot margin supplies the gap now, so a negative offset here would eat into it. */ margin-inline-start: 0; } } /* No [dir="rtl"] override for the divider's bleed: margin-inline-end already mirrors, so the flipped copy this page used to carry (end:0 plus the negative on inline-start) pushed it back INSIDE the container under RTL and the rule stopped short at the content edge instead of reaching the viewport's. None of the sibling heroes carry one. */ /* ---------- Hero responsive ---------- */ @media (max-width: 1199.98px) { .partnership-hero { padding-top: 160px; } .partnership-hero-inner { gap: 48px; } .partnership-hero-top { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 991.98px) { /* 120px, not the 160 the tablet band above sets. The overlay header is not a fixed height: it is ~111px at 1024 with the full nav, but collapses to ~72px at 768 once the nav becomes a hamburger. A flat 160px lead-in therefore leaves 49px of clear band at 1024 and 88px at 768 - the same over-large gap the phone had. 120 puts 768 back on ~48px, matching what 1024 already gets. */ .partnership-hero { padding-top: 120px; } /* Picks the heading up 8px below the desktop clamp's 44px floor (reached at ~995px), the same deliberate tablet step About Us takes. */ .partnership-hero-top h1 { font-size: 36px; line-height: 1.125; } } @media (max-width: 767.98px) { .partnership-revamp { /* The band is ~328px here against ~459 on desktop, so the tail comes down with it to keep the hairline on the ramp's 86.8% stop. */ --pts-wash-tail: 100px; } /* 100px, not 140. The header is a 64px overlay on a phone, so 140 left 76px of empty amber above the title - more clear space than the title, the standfirst and the breadcrumb take between them. 100 puts a 36px lead-in under the header, which is the air the band needs and no more. */ .partnership-hero { padding-top: 100px; } .partnership-hero-inner { gap: 24px; } /* Kept on phones rather than dropped - see .evt-hero-pattern. Scaled, the pair is 100px and 128px tall; each sits `bottom: var(--pts-wash-tail)` up from the paint's edge, so it still lands on the breadcrumb hairline and stays inside the decor box the way it does at full size. */ .partnership-hero-pattern-start { width: min(190px, 44%); height: auto; aspect-ratio: 305.329 / 160.658; } .partnership-hero-pattern-end { width: min(190px, 44%); height: auto; aspect-ratio: 305.29 / 204.731; } /* One breadcrumb size site-wide on the phone, taken from the Events listing (.evt-breadcrumb): 12px type, 8px gaps, a 12px separator - the clamp above floors at 13px, and About Us restates the same three. */ .partnership-breadcrumb { font-size: 12px; gap: 8px; } .partnership-breadcrumb-sep { height: 12px; } /* Figma's phone frame centres the pair and drops each a step down the type ramp, where the desktop two-column row is leading-edge aligned. */ .partnership-hero-top { text-align: center; } .partnership-hero-top h1 { font-size: 32px; line-height: 40px; } .partnership-hero-desc { font-size: 16px; line-height: 24px; } } /* ========================================================================== "Three ways to be part of it" (Figma node 40001286:71004..71036) — a static 3-card row, matching Figma content and gradients exactly. No CTA button here (Figma has none); the page's only call to action is the inquiry form below. ========================================================================== */ html:has(.partnership-hero) { scroll-behavior: smooth; } .partnership-ways { position: relative; overflow: hidden; padding: 120px var(--pts-gutter); } /* Areas rather than a header row plus a grid: the button is a sibling of the copy and the cards, so it can sit beside the heading here and drop under the cards on a phone without the markup carrying it twice. */ .partnership-ways-inner { position: relative; z-index: 1; max-width: none; margin-inline: auto; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "copy cta" "grid grid"; align-items: center; gap: 80px 40px; } .partnership-ways-copy { grid-area: copy; display: flex; flex-direction: column; gap: 16px; } .partnership-ways-cta { grid-area: cta; } .partnership-ways-grid { grid-area: grid; } /* 723px in the artboard: what keeps "Partnership Benefits" on one line and wraps the standfirst under it rather than running the full 1600. */ .partnership-ways-copy > * { max-width: 723px; } /* 48/56 in the artboard. The 50/72 this carried was from the old trio's heading, which had no standfirst under it to sit against. */ .partnership-ways-title { font-size: 48px; line-height: 56px; font-weight: 700; color: var(--hr-brown-900, #0b0b05); margin: 0; } .partnership-ways-title .hr-accent { color: var(--hr-yellow-500); } .partnership-ways-desc { margin: 0; font-size: 24px; line-height: 32px; color: var(--hr-brown-300, #66655c); } .partnership-ways-cta { justify-self: end; text-decoration: none; } /* The row overflows its 1600 container in the artboard (1602 of cards in a 1600 box), so it scrolls rather than squeezing. Cards keep the artboard's 383px whatever the count, and the gutter is bled back so the first and last card can sit flush with the page's own margin while the row scrolls past it. */ /* Swiper owns the row: it sets the slide widths from the breakpoints and clips the overflow itself, so there is no scroll container here. It was an overflow-x track with its scrollbar hidden, which left the cards past the fold unreachable on a desktop - a wheel scrolls the page, not the row. */ .partnership-ways-grid { grid-area: grid; width: 100%; min-width: 0; } .partnership-ways-grid .swiper-slide { height: auto; } /* From 992 up the row is not laid out to fit the container: the cards keep the artboard's 383px and the track is bled past BOTH gutters to the viewport's edges, so the row runs off each side of the page with a card cut by it - the cue that there is more to drag to, and the full width for the row to drift across. The end gutter alone used to be bled, which left the first card starting on the page's own margin, lined up under the heading. Bleeding the start as well is a deliberate trade: the row no longer aligns with the heading above it at rest, in exchange for cards that reach both page edges. The heading, the standfirst and the button keep their gutter - they are siblings in the grid and this rule only touches the row. */ @media (min-width: 992px) { .partnership-ways-grid { /* The content column plus BOTH gutters, NOT auto: auto sizes the container to its own slides, and Swiper then measures a 2442px viewport, decides all six fit and refuses to drag. This is the widest the row may be - out to the page edges - with the overflow Swiper's to clip. margin-inline, not two physical margins, so Arabic bleeds the same pair without a [dir="rtl"] override. */ width: calc(100% + (2 * var(--pts-gutter))); margin-inline: calc(-1 * var(--pts-gutter)); } .partnership-ways-grid .swiper-slide { width: 383px; } } .partnership-way-card { position: relative; overflow: hidden; /* Width comes from Swiper's breakpoints. min-height, not height: a benefit whose copy runs longer than the artboard's grows instead of clipping - the card sets overflow: hidden for the flourish. */ min-height: 400px; display: flex; flex-direction: column; gap: 32px; padding: 42px 39px; border-radius: 30px; color: var(--hr-cream-500, #f9f7e9); background: linear-gradient(135deg, #548aaf 0%, #2a6d9b 45%, #155f91 75%, #005087 100%); } /* The artboard's palette, in its own order. Each is the radial fill on that card read stop for stop; they are laid down as a 135deg linear here because that is the ramp the three original cards already shipped with and the two read the same at this size. */ .partnership-way-card--blue { background: linear-gradient(135deg, #548aaf 0%, #2a6d9b 45%, #155f91 75%, #005087 100%); } .partnership-way-card--purple { background: linear-gradient(135deg, #b37ca5 0%, #a15c8f 50%, #8e3b78 100%); } .partnership-way-card--teal { background: linear-gradient(135deg, #549d96 0%, #2a857c 45%, #15796f 75%, #006d62 100%); } .partnership-way-card--stone { background: linear-gradient(135deg, #96958f 0%, #706e66 50%, #5c5b52 75%, #49473d 100%); } .partnership-way-card--amber { background: linear-gradient(135deg, #e6ad54 0%, #e0992a 45%, #dc8f15 75%, #d98500 100%); } /* The red card carries a flat 20% grey over its ramp in the artboard, which is what stops it shouting next to the amber one beside it. */ .partnership-way-card--red { background: linear-gradient(0deg, rgba(111, 111, 111, .2), rgba(111, 111, 111, .2)), linear-gradient(135deg, #f1625c 0%, #e54c45 50%, #d9362e 100%); } /* Kept: the old trio's modifiers, in case anything still references them. */ .partnership-way-card--institutional { background: linear-gradient(135deg, #e6ad54 0%, #e0992a 45%, #dc8f15 75%, #d98500 100%); } .partnership-way-card--exhibition { background: linear-gradient(135deg, #b37ca5 0%, #a15c8f 50%, #8e3b78 100%); } /* The brand-mark wash across the card's bottom edge (Figma node 40005724:56466 > "Frame 2147239147"). The artboard nests it three deep - a 1803x779 vector rotated -179.43deg and flipped inside a frame turned 180deg, then clipped to the card - which composes to nothing more than the mark sitting flush against the card's bottom-left corner, so it is placed here as that composite's own clipped export rather than as three CSS transforms. Bottom-anchored, not top: the artboard's card is a fixed 400px, ours grows with the copy (see min-height above), and the wash belongs to the foot of the card rather than to a point 211.5px down from its head. THREE layers because the artboard's blur is PROGRESSIVE - Figma's own panel gives it as start (60.95%, 30.65%) blur 0 to end (9.7%, 24.2%) blur 100, and those are read in the blurred frame's own space, which the 180deg turn puts back as blur 0 at card x 12.7 climbing to 100 out past the right edge. So the mark is crisp where it enters and dissolved by the time it leaves, which no single blur() can be. Each layer is the same artwork at a fixed blur, cross- faded on masks that are exact complements - the ink stays at a constant 9% the whole way across rather than dipping where they meet. 0 / 13 / 26px are sigma(x) sampled at the three mask centres, calibrated against Figma's own raster: rendering the true ramp as 24 blurred slices and scoring it over the card put the best fit at sigma = 40 * t, i.e. 26px by the card's right edge. Three layers land closer to that raster than the 24-slice simulation does (mean error .042 vs .049 over the transition, both measured with the text masked off); four and five layers only reach .041, which is not worth the boxes. Two layers - the only shape that fits in the card's own ::before and ::after - sat at .050, and read visibly harder than the artboard through the middle of the card, where the crisp copy is still at half weight. The mask stops are 17.07/51.17/85.27% rather than 0/50/100 because the asset is the artboard's export widened by an 80px bleed on every side: the blurred copies need ink beyond the card to blur inwards from, or they would fade along the very edges they are meant to fill. Those percentages are where card x 12.7 (the ramp's own origin), the midpoint and the right edge fall inside the widened box, so the cross-fade still tracks the artboard's axis. The bleed is also why the offsets are negative - the card's overflow: hidden does the clipping. opacity .3 over the .3 the exported path already carries: the artboard stacks the two, landing the #E6EEF3 ink at 9% over the gradient, which is the +9 blue Figma's raster measures against the same gradient unwashed. */ .partnership-way-card .partnership-way-wash, .partnership-way-card .partnership-way-wash::before, .partnership-way-card .partnership-way-wash::after { position: absolute; z-index: 0; left: -80px; bottom: -80.5px; width: 543px; height: 349px; background: url("../images/partnership-revamp/benefit-card-glow.svg") no-repeat; pointer-events: none; } /* The .3 sits on the span alone: its two pseudo-elements render INSIDE the group that opacity creates, so repeating it on them would stack a third .3 and leave the two blurred layers at a third of the weight of the crisp one. */ .partnership-way-card .partnership-way-wash { opacity: .3; -webkit-mask-image: linear-gradient(to right, #000 17.07%, transparent 51.17%); mask-image: linear-gradient(to right, #000 17.07%, transparent 51.17%); } .partnership-way-card .partnership-way-wash::before, .partnership-way-card .partnership-way-wash::after { content: ""; left: 0; bottom: 0; } .partnership-way-card .partnership-way-wash::before { filter: blur(13px); -webkit-mask-image: linear-gradient(to right, transparent 17.07%, #000 51.17%, transparent 85.27%); mask-image: linear-gradient(to right, transparent 17.07%, #000 51.17%, transparent 85.27%); } .partnership-way-card .partnership-way-wash::after { filter: blur(26px); -webkit-mask-image: linear-gradient(to right, transparent 51.17%, #000 85.27%); mask-image: linear-gradient(to right, transparent 51.17%, #000 85.27%); } /* Mirrored with the rest of the page's decor. The masks turn over with the artwork, so the crisp end still meets the edge the mark enters from. */ [dir="rtl"] .partnership-way-card .partnership-way-wash { left: auto; right: -80px; transform: scaleX(-1); } /* An editor-uploaded icon takes the diamond's place at the artboard's 60px. */ .partnership-way-figure { position: relative; z-index: 1; width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; } .partnership-way-card > * { position: relative; z-index: 1; } .partnership-way-icon { position: relative; display: block; width: 42px; height: 42px; margin: 9px; border: 1px solid var(--hr-cream-500, #f9f7e9); transform: rotate(45deg); flex-shrink: 0; } .partnership-way-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 21px; height: 21px; background: var(--hr-cream-500, #f9f7e9); transform: translate(-50%, -50%); } .partnership-way-card h3 { font-size: 32px; line-height: 40px; font-weight: 700; margin: 0; } /* The copy is rich text, so the styling has to reach both the wrapper and whatever paragraphs TinyMCE put inside it. Trailing margins are trimmed so a stored

does not add space the card never allowed for. */ .partnership-way-card-desc, .partnership-way-card-desc p { font-size: 24px; line-height: 32px; opacity: .7; margin: 0; } .partnership-way-card-desc p + p { margin-top: .75em; } .partnership-way-card-desc > :last-child { margin-bottom: 0; } @media (max-width: 1199.98px) { .partnership-ways { padding-block: 80px; } } @media (max-width: 767.98px) { /* One column, and the button leaves the heading row for the foot of the section where it reads as the section's own action rather than a caption on the heading. */ .partnership-ways-inner { grid-template-columns: 1fr; grid-template-areas: "copy" "grid" "cta"; } .partnership-ways-cta { justify-self: center; } /* The button lands ~48px above the section's hairline divider here, and its shared 7px/63px drop shadow reaches well past that - clipped by the section, it paints as a smudge across the rule. Only the inset highlight is kept; nothing on a phone sits far enough below the button to need the cast. */ .partnership-ways-cta { box-shadow: inset 0 4px 6.1px rgba(255, 255, 255, .23); } /* Heading and standfirst centre over the cards. */ .partnership-ways-copy { gap: 12px; text-align: center; align-items: center; } .partnership-ways-desc { font-size: 16px; line-height: 24px; } /* One card and a sliver of the next, matching the Categories row below - the width is Swiper's (slidesPerView 1.08), so only the card's own padding and rhythm are set here. No min-height. At 300px the copy ended 158px short of the card's foot - over half of it empty - because that figure was set for a 170px card when the row was two across. Swiper stretches the slides to the tallest of them, so the row still sits level while each card is only as tall as the longest description needs. */ .partnership-way-card { min-height: 0; padding: 24px 22px; /* 16, not the desktop 32: three stacked items rather than a mark beside a title, and 32 between each of them is more air than a phone card has to give. */ gap: 16px; } /* No grid override here any more: the card keeps the desktop column, so the mark sits on its own row at the START above the title, as the artboard draws it. It spent a while in the trailing corner - that was for the two-across layout, where a full-width mark row cost height the 170px card could not spare. At one-per-view the row is what gives the card its height, so the mark goes back where the design has it, at its full size. Only the type comes down. */ /* 20/28 over 16/24, the same pair the Partnership Categories card carries at this width, so the two rows read as one component. The description was 14/22 - a size nothing else on the page uses, left over from the two-across card where it had ~130px of width to fit into. */ .partnership-way-card h3 { font-size: 20px; line-height: 28px; } .partnership-way-card-desc, .partnership-way-card-desc p { font-size: 16px; line-height: 24px; } } @media (max-width: 767.98px) { /* 56 above the heading. It has to clear the wash, which outlives the breadcrumb hairline by --pts-wash-tail (48px here), so 56 leaves 8px of clean cream before the heading starts - the same relationship the old 70 had against a 55px tail, at the tighter spacing. 48 below, padding the last card off the divider. */ .partnership-ways { padding-block: 56px 48px; } /* The gap belongs on -inner, the flex column that actually holds the title and the grid. It was written as `gap: 40px` on .partnership-ways, which is neither a flex nor a grid container - so it set nothing and the base 80px had been in force here all along. 40 on a phone: 70 put more air between the heading and its own cards than between whole sections. */ .partnership-ways-inner { gap: 40px; } .partnership-ways-title { font-size: 32px; line-height: 40px; } } /* ---------- Divider between "Three ways" and the inquiry form (Figma node 40001286:71040) ---------- */ /* ========================================================================== Your Contribution (Figma node 40005724:57191) Three columns of 512 with a 32px gutter, each an artwork block over a copy block with 48px between them, and the middle column inverted so the row zigzags - the About page's pillar rhythm. The artwork keeps its own width (456 / 521 / 332 in the artboard, and the exports are those at 2x), which is what stops the three photos reading as a uniform strip. ========================================================================== */ .partnership-contrib { position: relative; padding: 120px var(--pts-gutter); } .partnership-contrib-inner { display: flex; flex-direction: column; gap: 80px; } .partnership-contrib-title { margin: 0; font-size: 48px; line-height: 56px; font-weight: 700; color: var(--hr-brown-900, #0b0b05); } .partnership-contrib-title .hr-accent { color: var(--hr-yellow-500); } .partnership-contrib-grid { display: flex; align-items: stretch; gap: 32px; width: 100%; min-width: 0; } /* Swiper is disabled at this width, so the wrapper goes back to being the three-up row. The transform reset needs !important to beat the inline transform Swiper leaves behind when the viewport is resized up past the breakpoint - and it is scoped to this width so it cannot freeze the slider on slide 1 below it. Same call the About pillars make. */ @media (min-width: 1200px) { .partnership-contrib-grid .swiper-wrapper { display: flex; align-items: stretch; gap: 32px; width: 100%; transform: none !important; } .partnership-contrib-grid .swiper-slide { height: auto; } } /* Below the track, centred. Hidden on desktop, where all three are in view. */ .partnership-contrib-actions { display: none; } .partnership-contrib-arrow { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; border: 0; border-radius: 61px; cursor: pointer; background: rgba(255, 255, 255, .2); box-shadow: inset 0 4px 6.1px rgba(255, 255, 255, .23), 2px 23px 14px rgba(0, 0, 0, .02), 1px 10px 10px rgba(0, 0, 0, .03), 0 3px 6px rgba(0, 0, 0, .03); } /* The gradient hairline that gives the disc its glass edge over cream - the same rim the About page's circles carry. */ .partnership-contrib-arrow::before { content: ""; position: absolute; inset: 0; box-sizing: border-box; padding: 1.5px; border-radius: inherit; background: linear-gradient(to top, rgba(255, 255, 255, .2) 0%, rgba(101, 104, 111, .39) 74.04%, rgba(255, 255, 255, .75) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .partnership-contrib-arrow img { width: 24px; height: 24px; } .partnership-contrib-arrow.swiper-button-disabled { opacity: .4; cursor: default; } /* Swiper locks the arrows when the track has nothing to page to - a single contribution, say. Hidden rather than dimmed: a permanently dead pair of buttons under a lone card is worse than no buttons. */ .partnership-contrib-actions:has(.swiper-button-lock) { display: none; } .partnership-contrib-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 48px; } /* The artboard hangs the middle column's copy above its artwork and drops the third column 14px - the zigzag that keeps the row from reading as a grid. */ .partnership-contrib-item--2 { flex-direction: column-reverse; justify-content: flex-end; } .partnership-contrib-item--3 { padding-top: 14px; } /* Fixed height, not auto. The artboard draws all three artworks 398px tall at three different widths (456 / 521 / 332), which is what lets the two image-over-copy columns share a copy baseline. Left to auto, each artwork takes whatever height its own aspect gives at the column's width, and the copy blocks start at three different heights - obvious the moment the three descriptions are not the same length. */ .partnership-contrib-figure { width: 100%; height: 398px; display: flex; align-items: center; justify-content: center; } .partnership-contrib-figure img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; } /* The artboard's own widths, per position. */ .partnership-contrib-item--1 .partnership-contrib-figure { max-width: 456px; } .partnership-contrib-item--2 .partnership-contrib-figure { max-width: 521px; } .partnership-contrib-item--3 .partnership-contrib-figure { max-width: 332px; } /* Logical, not border-left: the bar has to move to the right-hand edge in Arabic, which is where the copy starts there. */ .partnership-contrib-copy { width: 100%; display: flex; flex-direction: column; gap: 16px; padding-inline: 32px; border-inline-start: 5px solid var(--hr-yellow-500, #d98500); } /* One accent per position, as the artboard colours them. */ .partnership-contrib-item--2 .partnership-contrib-copy { border-inline-start-color: #006d62; } .partnership-contrib-item--3 .partnership-contrib-copy { border-inline-start-color: #005087; } .partnership-contrib-copy h3 { margin: 0; font-size: 32px; line-height: 40px; font-weight: 700; color: var(--hr-brown-900, #0b0b05); } .partnership-contrib-desc, .partnership-contrib-desc p { margin: 0; font-size: 20px; line-height: 28px; color: var(--hr-brown-300, #66655c); } .partnership-contrib-desc p + p { margin-top: .75em; } .partnership-contrib-desc > :last-child { margin-bottom: 0; } @media (max-width: 1199.98px) { .partnership-contrib { padding-block: 80px; } .partnership-contrib-inner { gap: 56px; } /* Swiper owns the row here, so the flex fallback comes off and the slides take their width from it. The zigzag and the 14px drop go with it: they are a relationship between three columns side by side, and one card at a time has nothing to zigzag against. */ .partnership-contrib-grid { display: block; } /* The slide and the column are the same element, so the desktop `flex: 1 1 0` would have the three slides share the track between them - Swiper's own per-slide width has to win here instead. */ .partnership-contrib-item { flex: 0 0 auto; } .partnership-contrib-item--2 { flex-direction: column; } .partnership-contrib-item--3 { padding-top: 0; } /* The three artwork widths stop being a rhythm once they are one per screen and start being three differently-sized photos, so they even out. */ .partnership-contrib-item .partnership-contrib-figure { max-width: 456px; height: auto; } .partnership-contrib-actions { display: flex; justify-content: center; gap: 8px; } } @media (max-width: 767.98px) { .partnership-contrib { padding-block: 56px; } .partnership-contrib-inner { gap: 40px; } .partnership-contrib-title { font-size: 32px; line-height: 40px; text-align: center; } .partnership-contrib-grid { gap: 40px; } .partnership-contrib-item { gap: 32px; } .partnership-contrib-copy { padding-inline: 20px; gap: 12px; } .partnership-contrib-copy h3 { font-size: 24px; line-height: 32px; } .partnership-contrib-desc, .partnership-contrib-desc p { font-size: 16px; line-height: 26px; } } /* ========================================================================== Partnership Categories (Figma node 40005729:30911) The artboard duplicated the Annual Gathering details page's "Why attend" band to draw this, so this is a port of .smt-attend rather than a second take on it: same deco pair, same glass arrows, same card. Kept under this page's own prefix the way every other revamp stylesheet keeps its copy of a shared pattern; if a third page ever wants it, that is the point to lift the block into layout-revamp.css. ========================================================================== */ .partnership-types { position: relative; /* The deco pair hangs past the top and bottom edges (-67.94 / -75.06). */ overflow: hidden; padding: 120px var(--pts-gutter); background: var(--hr-brown-500, #1b190c); } /* The artboard's hanging motifs, and the same export the Gathering band uses - 74x307 at 10%, one at each opposite corner, the start one turned 180deg. Mirrored again under RTL so the pair keeps its diagonal. */ .partnership-types-deco { position: absolute; z-index: 0; width: 74px; height: 307px; opacity: .1; pointer-events: none; background: url("../images/summit-revamp/attend-deco.svg") no-repeat center / 100% 100%; } .partnership-types-deco-start { inset-inline-start: 43px; bottom: -75.06px; transform: rotate(180deg); } .partnership-types-deco-end { inset-inline-end: 53px; top: -67.94px; } [dir="rtl"] .partnership-types-deco-start { transform: rotate(180deg) scaleX(-1); } [dir="rtl"] .partnership-types-deco-end { transform: scaleX(-1); } /* Same areas as the Benefits band: heading and arrows share a row here, and the arrows drop under the track on a phone without the markup repeating them. */ .partnership-types-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "copy nav" "track track"; align-items: center; gap: 80px 24px; } .partnership-types-copy { grid-area: copy; } .partnership-types-nav { grid-area: nav; } .partnership-types-swiper { grid-area: track; } .partnership-types-copy { display: flex; flex-direction: column; gap: 16px; max-width: 1059px; grid-area: copy; } .partnership-types-copy h2 { margin: 0; font-size: 48px; line-height: 56px; font-weight: 700; color: var(--hr-cream-100, #fdfdf8); } .partnership-types-copy h2 .hr-accent { color: var(--hr-yellow-500); } .partnership-types-nav { grid-area: nav; display: flex; align-items: center; gap: 8px; flex-shrink: 0; justify-self: end; } /* The glass disc: a 20% white fill with the artboard's inset top highlight and a plus-lighter bloom rising off its foot. Its own rules, not the shared Button/primary lists - those are built for the amber pill. */ .partnership-types-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 16px; box-sizing: border-box; border: 0; border-radius: 61px; overflow: hidden; cursor: pointer; background: rgba(255, 255, 255, .2); box-shadow: inset 0 4px 6.1px rgba(255, 255, 255, .23), 0 3px 6px rgba(0, 0, 0, .03), 1px 10px 10px rgba(0, 0, 0, .03), 2px 23px 14px rgba(0, 0, 0, .02); transition: background-color .2s ease, transform .2s ease; } .partnership-types-btn:hover { background: rgba(255, 255, 255, .3); } /* Swiper puts .swiper-button-disabled on at each end. */ .partnership-types-btn:disabled, .partnership-types-btn.swiper-button-disabled { opacity: .4; cursor: default; } /* Same for the categories row: with fewer cards than fit, there is nothing to page to and Swiper locks the pair. */ .partnership-types-nav:has(.swiper-button-lock) { display: none; } .partnership-types-btn img { position: relative; z-index: 1; display: block; width: 24px; height: 24px; } .partnership-types-btn::after { content: ""; position: absolute; left: calc(50% + .5px); bottom: -139.65px; width: 174.2px; height: 174.2px; transform: translateX(-50%); background: radial-gradient(circle 87.1px at 50% 50%, rgba(255, 255, 255, .39) 0%, rgba(255, 255, 255, .33) 31%, rgba(255, 255, 255, .20) 54%, rgba(255, 255, 255, .11) 66%, rgba(255, 255, 255, .06) 77%, rgba(255, 255, 255, .02) 88%, rgba(255, 255, 255, 0) 100%); mix-blend-mode: plus-lighter; opacity: .1; pointer-events: none; } /* The glyphs are directional, and the nav pair already reverses with the flex row on the Arabic page - so prev lands on the right and has to point that way too. Same flip .smt-attend-btn img carries on the band this copies. */ [dir="rtl"] .partnership-types-btn img { transform: scaleX(-1); } .partnership-types-swiper { grid-area: track; overflow: hidden; width: 100%; min-width: 0; } .partnership-types-swiper .swiper-slide { height: auto; } .partnership-type-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 444px; padding: 24px; box-sizing: border-box; border: 2px solid var(--hr-brown-400, #49473e); border-radius: 40px; overflow: hidden; isolation: isolate; /* Shows through where a category has no image yet, so the card reads as unillustrated rather than as a hole in the row. */ background: var(--hr-brown-700, #131209); } .partnership-type-card-media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } .partnership-type-card-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(215.13deg, rgba(0, 0, 0, 0) 37.5%, var(--hr-brown-500, #1b190c) 81.25%); pointer-events: none; } /* Wider than the card and hung below it, so its own edges never show. The blur is on ::before under a mask, which is what stops the blur's top edge cutting a visible line across the photo. */ .partnership-type-card-fade { position: absolute; left: 50%; bottom: -16.08px; z-index: 2; width: 205.6%; height: 270.902px; transform: translateX(-50%); background: linear-gradient(to bottom, rgba(27, 25, 12, 0) 0%, var(--hr-brown-900, #0b0b05) 100%); pointer-events: none; } .partnership-type-card-fade::before { content: ""; position: absolute; inset: -90px 0 0 0; -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .3) 26%, rgba(0, 0, 0, .75) 42%, #000 55%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .3) 26%, rgba(0, 0, 0, .75) 42%, #000 55%); pointer-events: none; } .partnership-type-card-body { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 12px; } .partnership-type-card-body h3 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--hr-cream-200, #fcfbf5); } /* The clamp sits on the wrapper, not the paragraphs: clamping each stored

would let a two-paragraph description run to twice the line count. */ .partnership-type-card-desc { font-size: 16px; line-height: 24px; color: var(--hr-cream-100, #fdfdf8); opacity: .7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .partnership-type-card-desc p { margin: 0; font-size: inherit; line-height: inherit; } @media (max-width: 1199.98px) { .partnership-types { padding-block: 80px; } .partnership-types-inner { gap: 48px; } } @media (max-width: 767.98px) { .partnership-types { padding-block: 56px; } .partnership-types-inner { gap: 32px; } /* The hanging line-and-diamond pair goes on a phone: at this width it has no clear corner to hang off, so it lands over the heading and the first card instead of framing them. */ .partnership-types-deco { display: none; } /* Arrows leave the heading row for the foot of the band, centred - the same move the Contribution slider's make, so the two carousels are driven the same way on a phone. */ .partnership-types-inner { grid-template-columns: 1fr; grid-template-areas: "copy" "track" "nav"; gap: 32px; } .partnership-types-nav { justify-self: center; } .partnership-types-copy { align-items: center; text-align: center; max-width: none; } /* 24px, not the 32 the other two headings take: with the arrows gone from its row the heading has the full width, and this is what keeps "Partnership Categories" on one line at 375px rather than breaking the accent word onto its own. */ .partnership-types-copy h2 { font-size: 24px; line-height: 32px; white-space: nowrap; } .partnership-type-card { height: 380px; padding: 20px; border-radius: 32px; } .partnership-type-card-body h3 { font-size: 20px; line-height: 28px; } } .partnership-divider { position: relative; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--pts-gutter); height: 28px; } .partnership-divider::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: rgba(217, 133, 0, .3); } .partnership-divider-diamonds { position: relative; z-index: 1; display: flex; align-items: center; background: var(--hr-cream-500, #f9f7e9); } .partnership-divider-diamond { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .partnership-divider-diamond::before { content: ""; width: 20px; height: 20px; background: #f3d9b0; transform: rotate(45deg); } @media (max-width: 1199.98px) { } @media (max-width: 767.98px) { .partnership-divider-diamond { width: 20px; height: 20px; } .partnership-divider-diamond::before { width: 14px; height: 14px; } } /* ---------- Inline inquiry form ("Tell us about your Organization") ---------- */ .partnership-form { position: relative; overflow: hidden; padding: 120px var(--pts-gutter); } .partnership-form-inner { position: relative; z-index: 1; max-width: none; margin-inline: auto; } .partnership-form .hr-accent { color: var(--hr-yellow-500); } .partnership-card { position: relative; overflow: hidden; background: rgba(255, 255, 255, .7); border-radius: 8px; padding: 56px 0; } /* Figma node 40004073:54739. Replaces the earlier 362x171 PNG, which drew the angular wedge with the notch cut into its top edge - the design has since become the curved band with the two diamonds hanging below it. SVG at the node's own 273.302x160, so it stays crisp where the raster did not. */ /* Trailing corner, with the artwork MIRRORED in it. The asset's band tapers to nothing at its own right edge (the path runs to y=160, the flipped top, at x=273.302) and its two diamonds hang under the left half. The design wants the opposite: the band full-depth against the card's right edge, tapering away to the left, with the diamonds under the right half - so the element keeps the corner it always had and only the image turns over. The element is exactly the artwork's 273.302px wide, so the background's own anchor is moot once scaleX(-1) is on. RTL mirrors the whole arrangement: leading corner, and the asset back in its native orientation. */ .partnership-card-flourish { position: absolute; top: 0; right: 0; width: 273.302px; height: 160px; /* Paint lives in the file: #338A81 at 10%, the same teal the Become a Translator card's corner motif carries, so the three form cards read as one set. It went opaque grey for a while because a translucent teal over the warm card tints pink rather than neutral - that is inherent to the 10% fill, and it is the translator card's look too. */ background: url("../images/partnership-revamp/form-corner-flourish.svg?v=2") no-repeat top right; background-size: 273.302px 160px; transform: scaleX(-1); pointer-events: none; } [dir="rtl"] .partnership-card-flourish { right: auto; left: 0; transform: none; } /* No border-bottom: the 1px solid #fff that used to sit here ran the full width of the card and cut straight through the corner flourish's diamonds. */ .partnership-card-header { position: relative; z-index: 1; padding: 0 80px 24px; } .partnership-card-title { font-size: 40px; font-weight: 700; color: var(--hr-brown-500); margin: 0; } .partnership-card-body { position: relative; z-index: 1; padding: 40px 80px 0; display: flex; flex-direction: column; gap: 40px; } /* A titled block: heading + its fields, 24px apart (Figma frame 40001286:71074 puts the field row at y=52 under a 28px-tall heading). The form itself is a flex column with a 40px gap, which is the section-to-section figure - so the inner 24px has to come from a wrapper, not from a margin on the heading. */ .ptn-section { display: flex; flex-direction: column; gap: 24px; } /* margin:0, deliberately. This carried `0 0 24px`, which ADDED to whatever gapped flex column it sat in: 24 + 40 = 64px under "Organization Details" against Figma's 24, and the --tight variant's 16 + .ptn-field's own 8 = 24px under "Partnership Type" against Figma's 8 (frame 40001286:71083 puts the pill row at y=32 under a 24px label). Spacing belongs to the container's gap here; a margin on the child is always double-counted. */ .ptn-section-lead { font-size: 20px; line-height: 28px; color: var(--hr-brown-400, #49473d); margin: 0; } .ptn-field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .ptn-field { display: flex; flex-direction: column; gap: 8px; } .ptn-field label { display: flex; align-items: center; gap: 4px; font-size: 16px; color: var(--hr-brown-400, #49473d); } .ptn-req-mark { color: #ee3b33; } /* Field error text. Was unstyled - the server's own messages rendered at the inherited body size in the body colour, so they did not read as errors at all. Same 14/20 in the same red as .cta-error on the Contact Us form. */ .error-message:empty { display: none; } .error-message { font-size: 14px; line-height: 20px; color: #ee3b33; } /* Invalid state, applied by the validator in the blade. Declared after the :focus rules below would be, and repeated for :focus, so a flagged field keeps its red edge while the visitor is fixing it instead of the yellow focus ring painting over it. These controls already carry a 1px border, so recolouring it costs no layout shift - unlike the contact form, whose controls are border:0 and need a box-shadow ring instead. */ .ptn-input.ptn-invalid, .ptn-select.ptn-invalid, .ptn-textarea.ptn-invalid, .ptn-input.ptn-invalid:focus, .ptn-select.ptn-invalid:focus, .ptn-textarea.ptn-invalid:focus { border-color: #ee3b33; } /* The radio group and the file input are visually hidden behind styled labels, so the flag goes on what is actually painted. Only the unchosen pills are recoloured - a checked pill is filled yellow and can never be the error. */ .ptn-pill-row.ptn-invalid .ptn-pill { border-color: #ee3b33; } .ptn-file.ptn-invalid .ptn-file-btn { border-color: #ee3b33; color: #ee3b33; } .ptn-input, .ptn-select, .ptn-textarea { width: 100%; background: rgba(236, 230, 211, .4); border: 1px solid transparent; border-radius: 8px; padding: 16px; font-size: 16px; color: var(--hr-brown-500); transition: border-color .2s ease; } .ptn-input:focus, .ptn-select:focus, .ptn-textarea:focus { outline: none; border-color: var(--hr-yellow-500); } .ptn-input::placeholder, .ptn-textarea::placeholder { color: var(--hr-brown-300); opacity: .7; } /* Autofill. app.css:7724 carries an UNSCOPED `input:-webkit-autofill { box-shadow: 0 0 0 1000px #17665D inset !important; -webkit-text-fill-color: #fff !important }` - written for the dark auth modals, but it matches every input on the site, so picking a browser suggestion turned these fields solid teal. Chrome ignores `background-color` on an autofilled field, so the resting fill has to be repainted as a 1000px inset shadow and the text colour set through -webkit-text-fill-color; the 5000s transition stops Chrome animating its own fill back in. Same override Nominate, Translators and Contact Us each carry. */ .ptn-input:-webkit-autofill, .ptn-input:-webkit-autofill:hover, .ptn-input:-webkit-autofill:focus, .ptn-input:-webkit-autofill:active { -webkit-text-fill-color: var(--hr-brown-500) !important; box-shadow: 0 0 0 1000px rgba(236, 230, 211, .4) inset !important; -webkit-box-shadow: 0 0 0 1000px rgba(236, 230, 211, .4) inset !important; transition: background-color 5000s ease-in-out 0s !important; } /* Select placeholder. Both selects are `required` and open on their empty option, so until something is picked they match :invalid - which is the hook for making that first option read like an input placeholder rather than like a chosen value. */ .ptn-select:invalid { color: var(--hr-brown-300); opacity: .7; } .ptn-textarea { min-height: 96px; resize: vertical; } /* ---------- Selects: the shared select2 panel, this form's control ---------- Category and Your Role render through , so the option list is the site's own DOM panel (js/select2-revamp.js + css/select2-revamp.css) rather than the browser's native popup - which the OS draws wherever it likes and which cannot be styled at all; it was appearing as a grey system menu across the middle of the form. What is deliberately NOT inherited is the CLOSED control. The shared skin dresses it as the 48px, 61px-radius filter pill with a hairline rim and a bold label once set; these two sit in a grid of 58px/8px form fields, so every one of the pill's geometry and state rules is put back to the field the rest of the form draws. Only the panel is shared. Same split .nominate-revamp makes for its four selects, and the two pages now match. */ .partnership-revamp .ptn-field .ba-select2-field { width: 100%; } .partnership-revamp .ptn-field .ba-select2-container.select2-container { width: 100% !important; } .partnership-revamp .ptn-field .ba-select2-container.select2-container .select2-selection { height: 58px; padding: 16px; border: 1px solid transparent; border-radius: 8px; background: rgba(236, 230, 211, .4); box-shadow: none; } /* Placeholder and chosen value are both 16px regular. The shared skin bolds a set value, which would make these read differently from the text inputs beside them. */ .partnership-revamp .ptn-field .ba-select2-container.select2-container .select2-selection .select2-selection__rendered { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--hr-brown-500); } .partnership-revamp .ptn-field .ba-select2-container.ba-select2--has-value .select2-selection .select2-selection__rendered { font-weight: 400; } .partnership-revamp .ptn-field .ba-select2-container.select2-container .select2-selection .select2-selection__placeholder { color: var(--hr-brown-300); opacity: .7; } /* Set, open and focused all keep the field's own fill - the pill swaps to cream-50 and then white - with the amber rim the inputs use for focus. */ .partnership-revamp .ptn-field .ba-select2-container.ba-select2--has-value .select2-selection { background: rgba(236, 230, 211, .4); border-color: transparent; box-shadow: none; } .partnership-revamp .ptn-field .ba-select2-container.select2-container--open .select2-selection, .partnership-revamp .ptn-field .ba-select2-container.select2-container--focus .select2-selection { background: rgba(236, 230, 211, .4); border-color: var(--hr-yellow-500); box-shadow: none; } /* The chevron the rest of this form uses, at the size the native control had - not the pill's own mark, which also thickens once a value is set. */ .partnership-revamp .ptn-field .ba-select2-container.select2-container .select2-selection .select2-selection__arrow, .partnership-revamp .ptn-field .ba-select2-container.ba-select2--has-value .select2-selection .select2-selection__arrow { flex: 0 0 11px; width: 11px; height: 11px; margin-inline-start: 8px; background: url("../images/press-releases-revamp/icon-chevron-down.svg") no-repeat center / 11px auto; } /* The invalid ring the validator applies has to reach the rendered control, not the hidden