/* ==========================================================================
Careers screen
Contents: apply block · benefits band · team gallery
========================================================================== */
/*
* Column proportions only. .split-section's skeleton is in main.css, shared with
* About; these are this screen's two different splits — the apply block is close
* to even because the photograph carries as much as the copy, while the gallery
* below needs the wider half.
*/
@media (min-width: 992px) {
/*
* The photograph is the wider half, 1.3 : 1, measured off the mockup — where
* the image spans 415px against the copy's 320. It was the other way round
* here, which is why the paragraph ran three lines instead of four: a column
* of that width simply fits more. The line count follows the measure; it is
* not worth chasing with breaks in the copy or a max-width on the paragraph.
*/
/*
* The photograph is the NARROWER half. Measured off the design: the image
* spans 418px and the column beside it 479, so 0.87 : 1, and the image takes
* 45% of the block rather than the 58% it had here.
*
* It was inverted because the first measurement took the width of the
* paragraph's ink — one line of it, 320px — for the width of its column. The
* paragraph does not fill that column; the buttons under it do.
*/
.careers-apply .split-section__inner {
grid-template-columns: minmax(0, 0.87fr) minmax(0, 1fr);
gap: var(--space-10);
/*
* The copy sets the height and the photograph matches it, rather than a
* ratio deciding how tall the whole block is. At 0.7 the image stood 95px
* taller than the text beside it and pushed the section out on its own.
*
* Same arrangement as the gallery below: the tile owns the shape,
* object-fit fills it. Nothing to re-tune when the copy changes.
*/
align-items: stretch;
}
/*
* Taken out of flow so it contributes no height of its own — stretching
* alone was not enough, because the reserved 0.7 ratio still made the image
* the tallest thing in the row and the section stayed exactly as tall.
*
* Only from 992px. Stacked below that there is no copy beside it to inherit
* a height from, and an absolutely positioned image in an auto-height row
* collapses to nothing.
*/
/*
* The column crops; the photograph keeps its own proportion and is centred in
* the opening. No percentage height anywhere, which is what kept failing:
* height: 100% on a stretched grid item does not resolve, and an is a
* replaced element, so height: auto between top: 0 and bottom: 0 falls back
* to its intrinsic 391px instead of filling them. Half-and-half positioning
* needs neither, and the crop lands evenly top and bottom rather than
* chopping the bottom third off.
*/
.careers-apply__media {
position: relative;
overflow: hidden;
border-radius: var(--radius);
}
.careers-apply__image {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: auto;
transform: translateY(-50%);
}
/*
* A narrow column of copy against a wide gallery, measured off the mockup:
* 222px of text to 654px of photographs, or 1 : 2.95. Not copied exactly —
* at that ratio the paragraph runs about 42 characters a line, under the ~45
* a comfortable measure wants. 1 : 2.2 keeps the editorial proportion and
* lands near 50, which is inside it.
*/
.careers-life .split-section__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
gap: var(--space-8);
/*
* The copy sets the height and the gallery fills it, so the eyebrow lines
* up with the top of the first row and the Instagram button with the
* bottom of the second. Left to itself the gallery was the taller of the
* two and stood well past the button.
*/
align-items: stretch;
}
/*
* Absolute images are what let this work: they contribute no height, so the
* gallery's own content height is nothing and the row is free to take the
* copy's. The two rows then split whatever that is. Same reason as the apply
* block above — an otherwise insists on its intrinsic size.
*
* Only from 992px. Stacked below that there is no copy beside it to take a
* height from, and the whole gallery would collapse.
*/
.careers-gallery {
height: 100%;
}
.careers-gallery__item {
position: relative;
min-height: 0;
}
.careers-gallery__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/*
* And from 992px, where the image is absolute, the trigger is too: it is
* then the image's containing block, so the image fills the button and the
* button fills the tile. Left in flow it would be zero pixels tall — the
* click would still land, through the image, but the focus ring would be a
* line.
*/
.careers-gallery .lightbox-open {
position: absolute;
inset: 0;
}
/*
* Both bands with no photographs chosen — which is a real state, because
* Settings → Quantum lets an editor clear them and there is no stand-in.
*
* The column proportions above are still on the grid, so the copy left on
* its own would sit in a 45% column with an empty 55% beside it: the shape
* of a picture that failed to load rather than of a band that has none.
* Spanning both columns is what makes it look chosen. The measure is capped
* because a paragraph across the full 1280px container runs past 150
* characters a line, and this is the one arrangement where nothing else is
* there to stop it.
*
* :only-child and not :has() on the parent: the media block simply is not
* printed, so the body is the only child, and this needs no support for a
* selector the older half of the browsers still meets.
*/
.careers-apply__body:only-child,
.careers-life__body:only-child {
grid-column: 1 / -1;
max-width: 62ch;
}
}
/* Apply block
========================================================================== */
/*
* --radius, not --radius-lg: this is the same pattern as About's team groups —
* one large photograph beside its copy in a .split-section — and they should
* not round differently for no reason.
*/
.careers-apply__image {
width: 100%;
height: auto;
border-radius: var(--radius);
}
.careers-apply__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-6);
}
/*
* Both grow to share the row and wrap to full width together, so the pair never
* lands as one wide button beside a narrow one — the arrangement that reads as
* though the second were an afterthought.
*
* white-space: normal is what lets them sit side by side at all. The base .btn
* refuses to wrap, which is a promise that every label is short enough for the
* narrowest screen; "View Open Positions on LinkedIn" is not, and held on one
* line it forced a column so wide the paragraph above dropped to three lines.
* Wrapped, each button is about 220px and both fit — which is how the mockup
* draws them, two lines apiece.
*/
.careers-apply__actions .btn {
/*
* The basis is the width at which the address still fits on one line, so it
* is what decides whether the pair shares a row: below it there is not room
* for two, and flex-wrap stacks them to full width on its own.
*
* This replaced a max-width: 575.98px rule that stacked them on phones. The
* breakpoint was the wrong question — at 1200px the column is 451px, the
* buttons came out at 225 each and the address broke in half on a desktop.
* Tying it to the button's own requirement covers every width at once.
*
* Measured, not guessed: the address renders at 192.9px, plus the 30px mark,
* the 9.6px gap, 32px of padding and 3px of border = 268px. 272 leaves a
* couple of pixels for the font loading at a slightly different metric.
*
* It was 240px while the mark was 18px wide. Anything that changes the icon
* size, the padding or the address has to move this number with it — at 240
* the pair still shared a row at 575px and broke the address across two
* lines, which is the one thing here that has to stay read-at-a-glance.
*/
flex: 1 1 272px;
white-space: normal;
text-align: left;
/*
* Tighter than .btn--lg's default so the address fits on one line. At the
* standard padding the orange button needed 268px of a 250px slot and broke
* "contact@quantumptandchiro.com" in half, which is the one thing on this
* screen that must stay readable at a glance.
*/
padding-inline: var(--space-4);
/*
* The base .btn centres its contents, which is right for a pill that hugs its
* label. These two are stretched by flex-grow, so centring left the orange
* button's mark floating in the middle of a box far wider than its content
* while the LinkedIn one — whose label nearly fills its box — read as though
* it were aligned. Two buttons side by side starting their marks at different
* x looks like a mistake even when it is symmetrical.
*
* The design aligns to the start too: its envelope sits 16px in from the
* button's left edge, not centred.
*/
justify-content: flex-start;
}
/*
* With the row aligned to the start, the trailing arrow would otherwise sit
* tight against the label. Pushing it to the far edge gives the pair the shape
* a rectangular CTA wants — mark, label, arrow — and lets the arrow point out
* of the button, which is what it is there to say.
*
* :last-child, so this never reaches the orange button, whose last child is the
* label span.
*/
.careers-apply__actions .btn__icon:last-child {
margin-inline-start: auto;
}
/*
* overflow-wrap is the safety net: if the address ever grows, it breaks rather
* than forcing the pair of buttons onto separate rows.
*/
.careers-apply__actions .btn__sublabel {
overflow-wrap: anywhere;
font-size: 0.75rem;
}
/*
* The leading mark at the size the design gives it: its envelope measures 26x19
* there, which for Lucide's mail — 20x16 on a 24 grid — works back to about a
* 30px icon, against the theme's default 18.
*
* :first-child, so only the brand mark grows. The arrow that closes the LinkedIn
* button stays at 18 like every other arrow on the site; it is an affordance,
* not the subject of the button.
*/
.careers-apply__actions .btn__icon:first-child {
width: 30px;
height: 30px;
}
/*
* No measure of its own: the lead paragraph above runs the full column at about
* 70ch, so a narrower cap here would read as a stray indent rather than a
* choice. Left uncapped it takes the same line as the design, two.
*/
.careers-apply__note {
margin-top: var(--space-5);
font-size: var(--fs-sm);
line-height: 1.6;
color: var(--color-muted);
}
/* Benefits band
========================================================================== */
.careers-why__inner {
display: grid;
gap: var(--space-8);
align-items: center;
}
@media (min-width: 992px) {
.careers-why__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
gap: var(--space-10);
}
}
.benefit-list {
display: grid;
gap: var(--space-6);
padding: 0;
margin: 0;
list-style: none;
}
@media (min-width: 576px) {
.benefit-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.benefit-list {
/*
* Five across, as the mockup has them. auto-fit would be tidier to write
* but would reflow to four the moment a sixth benefit is added, which is
* a layout decision that should be made on purpose, not by the grid.
*/
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-5);
}
}
/*
* Flex, not text-align alone. quantum_icon() renders an