/* Solutions hero — VARIANT: contained chamfered square media. Replaces the * base pattern's edge-to-edge photographic wash with a contained, 1:1, * top-right-chamfered square inside the container's own gutters, and narrows * the copy column to 607px. * * Base pattern: patterns/solutions-hero.php * Base styles: assets/css/sections/solutions-hero.css * * OPT-IN LIST, not a modifier class on the markup. Every consumer names itself * in the selector lists below, compounded with the base section class — the * pattern file stays page-agnostic, and two classes on one selector outweigh * the base pattern's single-class rules regardless of source order, which is * what a variant needs to win. A new consumer adds one selector per list here * and nothing else. * * infinitus_section_stylesheets() glob()s alphabetically, so this file * enqueues AFTER solutions-hero.css — but nothing depends on that, because * every selector here is compound. * * Consumers: * .infinitus-section--evidence-hero Clinical Evidence * .infinitus-section--careers-hero Careers * .infinitus-section--platform-hero Platform */ .infinitus-section--evidence-hero.infinitus-section--solutions-hero, .infinitus-section--careers-hero.infinitus-section--solutions-hero, .infinitus-section--platform-hero.infinitus-section--solutions-hero { /* The base pattern's defaults are Pharma's 810 and 698, so both are repointed at one value. */ --sh-square-copy-measure: 607px; --sh-square-size: 529px; /* The 45deg cut on the top-right corner (chamfered-image idiom). Worth knowing if you go back to the comp: the mask is AUTHORED as a bottom-right cut and flipped (-scale-y-100 on its parent), so reading the raw path suggests the wrong corner. */ --sh-square-chamfer: 18.47%; --sh-square-radius: var(--wp--custom--radius--sm); /* Between-breakpoint behaviour is derived, not measured. The split is proportional: the square keeps the comp's own width ratio (529 / 1440 is about 37vw), capped so it still lands on exactly 529px at >= 1430, and the copy yields by wrapping via the cap below. */ --sh-square-min-gap: var(--wp--preset--spacing--sp-6); --sh-square-width: min(var(--sh-square-size), 37vw); --solutions-hero-title-measure: var(--sh-square-copy-measure); --solutions-hero-lede-measure: var(--sh-square-copy-measure); /* The base pattern's copy cap exists to keep the headline clear of ITS wash, and Pharma's 62vw formula is tied to that wash's geometry, so it cannot be inherited. The real cap for this square is set in the split block below. This unscoped 100% is the mobile value, where the square is in flow under the copy and no cap is needed. */ --solutions-hero-copy-cap: 100%; } /* Platform is the first consumer whose copy column is not 607px: node * 2640:4348 draws it at 661, and its headline needs the extra width to break * into the comp's three lines rather than four. Overriding the custom property * rather than the two measures it feeds keeps the one-value-per-consumer shape * the block above set up. Same specificity as that block and later in the * file, which is what carries it — and nothing between here and the media * queries re-declares it. */ .infinitus-section--platform-hero.infinitus-section--solutions-hero { --sh-square-copy-measure: 661px; /* 24px read as a collision next to a 661px, three-line 72px headline (BugHerd 534629 #210). Platform only: the two 607px consumers keep the shared value above. */ --sh-square-min-gap: var(--wp--preset--spacing--sp-12); } /* Every consumer's ground is flat, with no gradient. The base pattern paints Pharma's radial glow in a ::before centred on ITS own coordinates, which has no correspondence on any of these pages. Suppressed rather than left quietly doing nothing, so it is not mistaken for an intentional shape later. */ .infinitus-section--evidence-hero.infinitus-section--solutions-hero::before, .infinitus-section--careers-hero.infinitus-section--solutions-hero::before, .infinitus-section--platform-hero.infinitus-section--solutions-hero::before { content: none; } /* Tablet gutter. --solutions-hero-copy-gutter defaults to a bare 80px wherever the base has not set it, and that is the desktop value: .container is md:px-[30px] lg:px-20 (assets/scss/tailwind.css), so 30px applies from 768 to 1024.98 and 80px only from 1025. */ @media (min-width: 768px) and (max-width: 1024.98px) { .infinitus-section--evidence-hero.infinitus-section--solutions-hero, .infinitus-section--careers-hero.infinitus-section--solutions-hero, .infinitus-section--platform-hero.infinitus-section--solutions-hero { --solutions-hero-copy-gutter: 30px; } } /* Tablet + desktop: the contained square. * * Every property the square's geometry depends on is RESTATED here rather than * inherited. That is deliberate: this geometry used to lean on the base for * aspect-ratio and for leaving the inline-start edge alone, the base was * rebuilt as one full-bleed layer with `inset: 0`, and both assumptions went * with it. position:absolute, z-index and margin are still inherited on * purpose — those are the copy-first-media-absolute idiom itself, not this * variant's geometry. */ @media (min-width: 768px) { .infinitus-section--evidence-hero.infinitus-section--solutions-hero, .infinitus-section--careers-hero.infinitus-section--solutions-hero, .infinitus-section--platform-hero.infinitus-section--solutions-hero { /* What is left for the copy once the square and the breathing gap are spoken for. The percentage resolves where the cap is consumed — a max-width on the copy, whose containing block is .container's content box — so both gutters are already off it, and at >= 1480 it stops at the same 1280 the square's inset-inline-end pins to. It used to be 100vw minus the gutters, which counted the scrollbar's ~15px as copy width and let the gap absorb the difference (BugHerd 534629 #210). */ --solutions-hero-copy-cap: calc(100% - var(--sh-square-width) - var(--sh-square-min-gap)); } /* The base stopped clamping the headline to the copy cap (its own comment: Pharma's 810 measure never fit under a 62vw cap), so the cap above only ever moved the lede and the headline ran to its full measure regardless of where the square started. Restated here so the gap holds against the headline too. Platform only: Evidence and Careers set 607px headlines, were not in the ticket, and keep the base behaviour until re-checked. */ .infinitus-section--platform-hero.infinitus-section--solutions-hero .solutions-hero__title { max-width: min(var(--solutions-hero-title-measure), var(--solutions-hero-copy-cap)); } .infinitus-section--evidence-hero.infinitus-section--solutions-hero .solutions-hero__media, .infinitus-section--careers-hero.infinitus-section--solutions-hero .solutions-hero__media, .infinitus-section--platform-hero.infinitus-section--solutions-hero .solutions-hero__media { /* Cancels the base pattern's mobile-band feather mask, still in effect below 1024px, which would otherwise dissolve a square that has no band to dissolve into. */ -webkit-mask-image: none; mask-image: none; aspect-ratio: 1 / 1; inset-inline-start: auto; /* The base's inset-block:0 + height:100% is what stretched the wash to the section's full height regardless of content. */ inset-block: auto; height: auto; max-width: none; min-width: 0; /* Right-aligned to the CONTAINER's content edge, not the viewport's. Reusing --solutions-hero-copy-gutter alone glues the square to the same edge the copy measures from — but that gutter is measured from the SECTION's edge, and .container stops tracking the viewport at 1480 (max-w-[1480px], mx-auto), so on wide screens the square drifted outside the content area (BugHerd #94). 640px is half the container's 1280px content cap, so calc(50% - 640px) is the section-right-edge to content-right-edge distance once the container is centred; below 1480 it resolves under the gutter and max() keeps the simpler behaviour. Percentages resolve against the section here, so there is no 100vw scrollbar slack to absorb. */ inset-inline-end: max(var(--solutions-hero-copy-gutter, 80px), calc(50% - 640px)); /* Centred on the section's box plus a nudge down, so it tracks the real height instead of freezing the 1440 number. Careers inherits this nudge; its own comp centres the square WITHOUT one — if the two ever need to differ, this is the property to split. */ top: calc(50% + 42.5px); transform: translateY(-50%); width: var(--sh-square-width); } } /* Platform, desktop: the square yields before the headline does (BugHerd * 534629 #210). Capping the copy alone rewraps the 661px, three-line 72px * headline into five lines at 1280 and 1370, which is a bigger change than the * ticket asked for. Instead the square gives up width, down to a floor, so the * headline keeps its three lines and the gap holds at exactly the minimum * until the floor binds; below that the cap above takes over and wraps. * * The yield term is the section width less both gutters, the copy measure and * the gap: the media is absolute, so its 100% is the section. The cap is a * max-width inside .container, where 100% is already gutter-free, so it only * needs the floor: while the square is yielding, room for the full measure is * what it is yielding TO, and the cap resolves above 661 by construction. * * 1025 up only: below it the headline is 48px and never needs the measure. * Above 1480 the section keeps widening while the container does not, so the * yield term only ever grows and min() keeps the 529 ceiling. */ @media (min-width: 1025px) { .infinitus-section--platform-hero.infinitus-section--solutions-hero { /* About the square's own 37vw at the bottom of the band (379px), so it is never narrower than it already renders at 1025. Binds below ~1240; at 1280 the yield resolves to 371. */ --sh-square-floor: 370px; --solutions-hero-copy-cap: calc(100% - var(--sh-square-floor) - var(--sh-square-min-gap)); } .infinitus-section--platform-hero.infinitus-section--solutions-hero .solutions-hero__media { width: max( var(--sh-square-floor), min( var(--sh-square-width), calc( 100% - (var(--solutions-hero-copy-gutter, 80px) * 2) - var(--sh-square-copy-measure) - var(--sh-square-min-gap) ) ) ); } } /* Chamfer + radius, every breakpoint — the square stays a square at every * width, so the cut shape never changes, only its size. * * The clip-path is load-bearing, not a guard: both committed photographs are * plain opaque rectangles with no alpha cut baked in. */ .infinitus-section--evidence-hero.infinitus-section--solutions-hero .solutions-hero__image img, .infinitus-section--careers-hero.infinitus-section--solutions-hero .solutions-hero__image img, .infinitus-section--platform-hero.infinitus-section--solutions-hero .solutions-hero__image img { border-radius: var(--sh-square-radius); /* Back to the initial value. The base points object-position at a focal point chosen for Pharma's wide photograph; in a square box that is a no-op today, and it stops being one the moment a client swaps in a photo that is not 1:1. */ object-position: center; clip-path: polygon( 0 0, calc(100% - var(--sh-square-chamfer)) 0, 100% var(--sh-square-chamfer), 100% 100%, 0 100% ); } /* Overrides whatever the base pattern does with its own bottom padding at * these widths, matching its !important — a plain override loses silently * against it. The base uses that room for Pharma's bottom-pinned photograph, * which does not apply to a contained square. Consumers set their own value; * section-lg is Clinical Evidence's, Careers overrides it in careers-hero.css. */ @media (max-width: 1024.98px) { .infinitus-section--evidence-hero.infinitus-section--solutions-hero, .infinitus-section--careers-hero.infinitus-section--solutions-hero, .infinitus-section--platform-hero.infinitus-section--solutions-hero { padding-bottom: var(--wp--preset--spacing--section-lg) !important; } } /* Mobile stack: still contained, still square. 767.98px, not 1024.98px * (BugHerd #84): tablet falls into the split block above instead. * * Width resolved by design on BugHerd #90: extend the image to the width of * the CONTENT AREA. The media group is a SIBLING of .container in the pattern * markup so it never gets the container's gutter on its own; the 40px below * restates .container's 20px mobile padding per side. */ @media (max-width: 767.98px) { .infinitus-section--evidence-hero.infinitus-section--solutions-hero .solutions-hero__media, .infinitus-section--careers-hero.infinitus-section--solutions-hero .solutions-hero__media, .infinitus-section--platform-hero.infinitus-section--solutions-hero .solutions-hero__media { aspect-ratio: 1 / 1; /* Back into flow. The base keeps the media layer absolute at every width and pins it to the section's bottom edge under a fade mask; all of that has to be undone to stack. */ height: auto; inset: auto; -webkit-mask-image: none; mask-image: none; position: static; margin-block-start: var(--wp--preset--spacing--section-sm); /* auto margins resolve to exactly the 20px gutter wherever the width is not capped, and centre the square where it is. */ margin-inline: auto; /* The comps' 529px ceiling still applies, so a landscape phone never renders the square larger than either comp draws it. */ max-width: var(--sh-square-size); width: calc(100% - 40px); } }