/* GlobalXGears — mobile layer.
Measured off the Figma mobile frames, not guessed from the desktop:
HOME 160:2 · INTRO 160:290 · NAV 160:317 / 160:352 · ABOUT 197:2
Everything in those frames sits on a 24px gutter with a 342px content
column, so that is the one number the whole layer is built around.
Loaded last; it only ever narrows, never re-specifies desktop. */
@media (max-width: 768px) {
:root {
--gx-gutter: 24px; /* Figma mobile: content x=24, w=342 */
--gx-gutter-wide: 24px;
}
/* ---------- buttons: full width ----------------------------------- */
/* The longest label on the site — "View Custom Engineered Products" plus
its arrow — needs 337px of the 302px a full-width button has inside its
padding at 390, so it used to wrap onto a second line with the arrow
stranded beside the middle of the block. The three reductions below buy
back the difference without touching the 14px CTA size, which the client
raised from Figma's 13px on purpose. The inline padding can go this low
for free: the button is full width and its content is centred, so the
padding only sets a floor nothing reaches. Measured at 390 and 375 it now
sits on one line with room to spare; below about 368px it wraps again,
which is the honest limit of a 31-character label at 14px. */
.gx-btn {
width: 100%;
height: auto;
min-height: 52px;
padding: 15px var(--gx-space-2);
gap: var(--gx-space-2);
letter-spacing: .2px;
white-space: normal;
text-align: center;
line-height: 1.3;
}
/* ---------- hero (160:24) ---------------------------------------- */
/* Frame order: eyebrow 28 · heading 65 · body 238 · collage 345
· primary CTA 680 · secondary 744 · stats 822. */
.gx-hero { min-height: 0; display: block; overflow: hidden; }
.gx-hero__scrim { display: none; }
.gx-hero__inner {
display: flex;
flex-direction: column;
padding-block: 28px 40px;
}
.gx-hero__title { margin-top: 17px; max-width: none; }
.gx-hero__lead { margin-top: 25px; max-width: none; }
.gx-hero__media {
position: static;
order: 0; /* DOM order already puts it after the lead */
width: calc(100% + var(--gx-gutter) * 2);
max-width: none;
margin: 27px calc(var(--gx-gutter) * -1) 0;
opacity: 1;
}
.gx-hero__actions {
margin-top: 30px;
flex-direction: column;
align-items: stretch;
gap: 12px; /* 680+52 -> 744 */
}
.gx-hero__meta {
margin-top: 26px;
flex-direction: column;
gap: 4px;
}
/* ---------- trust strip (160:54) --------------------------------- */
/* icon 28 at x24, text at x68 (=24+28+16), rows 88px apart */
.gx-trust__grid { grid-template-columns: 1fr; gap: 0; }
.gx-trust__item {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 0 16px;
padding: 14px 0 !important;
border-left: 0 !important;
}
.gx-trust__icon { width: 28px; height: 28px; }
/* …and with the icon collapsed, the column it sat in goes too, so the text
starts at the gutter like every other section. */
.gx-trust__item:has(.gx-trust__icon:empty) { grid-template-columns: minmax(0, 1fr); }
/* ---------- 01 positioning: process cards (160:94) ---------------- */
.gx-process__card {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 0 18px;
padding: 20px;
}
.gx-process__icon { width: 32px; height: 32px; }
.gx-process__title,
.gx-process__body { grid-column: 2; }
/* ---------- product showcase (160:172) --------------------------- */
/* Figma turns the ring into a plain horizontal swipe: 280x400 cards,
16px apart, first card on the gutter. Native scroll-snap does it,
so the JS ring stands down at this width. */
.gx-carousel {
display: flex;
gap: 16px;
height: auto;
padding: 0 var(--gx-gutter) 4px; /* .gx-carousel is not inside a wrap */
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.gx-carousel::-webkit-scrollbar { display: none; }
/* The desktop ring sets touch-action: pan-y so a horizontal drag reaches its
JS handler instead of scrolling the page. Here the carousel IS a native
horizontal scroller, and pan-y forbids exactly the gesture it needs — the
strip could not be swiped at all on a touch device. Handed back to the
browser, which scrolls the strip sideways and the page down. */
.gx-carousel { touch-action: auto; }
.gx-carousel__track { display: contents; }
.gx-carousel__btn { display: none; }
.gx-carousel .gx-pcard {
position: static !important;
flex: 0 0 280px;
width: 280px !important;
height: 400px !important;
margin: 0 !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
z-index: auto !important;
border-radius: 16px;
scroll-snap-align: center;
}
/* Figma mobile sets this section left-aligned on the 24px gutter. */
.gx-showcase__head { text-align: left; margin-inline: 0; }
/* the note is a direct child of the section, not of a wrap */
.gx-showcase__note {
display: block;
margin-top: 25px;
padding-inline: var(--gx-gutter);
text-align: left;
}
/* ---------- 03 process timeline (160:177) ------------------------ */
.gx-step { grid-template-columns: 36px minmax(0, 1fr); }
/* ---------- 04 quality (160:198) / 05 engineering data (160:240) --
Both frames interleave the photo with the copy: label, heading, body,
PHOTO, then the markers / resource cards. The photo is a sibling of the
copy block, so the copy block dissolves into the grid (display:contents)
and everything is ordered in one flow. */
.gx-quality__inner,
.gx-engdata__inner { grid-template-columns: 1fr; gap: 0; }
.gx-quality__inner > div:first-child,
.gx-engdata__inner > div:last-child { display: contents; }
.gx-quality__eyebrow, .gx-engdata__eyebrow { order: 1; }
.gx-quality__title, .gx-engdata__title { order: 2; }
.gx-quality__body, .gx-engdata__body { order: 3; }
.gx-quality__media, .gx-engdata__media { order: 4; margin-top: 30px; }
.gx-qgrid, .gx-resources { order: 5; }
.gx-quality__link { order: 6; }
/* markers sit two-up: x24 and x203 */
.gx-qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
.gx-quality__badge { left: 18px; bottom: 20px; font-size: 20px; }
/* Glow and grid are drawn at 766-782px for the desktop column. The mobile
frames put both at viewport width (390 x 350 / 390 x 334). */
.gx-quality__media::before,
.gx-quality__media::after,
.gx-engdata__media::before,
.gx-engdata__media::after {
left: 50%;
transform: translate(-50%, -50%);
width: 100vw;
}
.gx-quality__media::before,
.gx-engdata__media::before { height: 350px; }
.gx-quality__media::after,
.gx-engdata__media::after { height: 334px; }
.gx-resources { grid-template-columns: 1fr; gap: 16px; }
.gx-resource { min-height: 84px; padding: 16px 18px; } /* Figma: 342x84 */
/* Gallery: auto-fill/300px collapses to one column on a phone, which
turns six photos into six screens. Two up, with a smaller label. */
.gx-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gx-gallery__label { padding: 30px 12px 10px; letter-spacing: 0.2px; }
/* ---------- category hero (gear-type) ----------------------------
No Figma mobile frame exists for the CPT single, so this is derived:
.gx-phero__media already goes static at this width, but .gx-phero was
still a flex ROW, so the photo and the copy sat side by side in 170px
columns. Stacking it puts the product photo on top, where a product
page wants it, then the copy and the CTAs. */
.gx-phero { display: block; min-height: 0; }
/* --gx-space-14 does not exist: the scale runs 12, 16, 18 with no 14. An
undefined var() makes the WHOLE declaration invalid at computed-value
time, and padding-block then falls to its initial 0 — it does not fall
back to the desktop rule. So this hero had no padding at all below 768px
and its last button sat flush on the section boundary. Desktop never
showed it because the hero is 760px tall and centres its content. */
.gx-phero__inner { padding-block: var(--gx-space-10) var(--gx-space-12); }
.gx-phero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
.gx-phero .gx-btn { height: auto; min-height: 54px; }
/* ---------- page hero over a photo (About 197:10) -----------------
620px tall, and the scrim is a flat heavy overlay rather than the
desktop left-to-right gradient — on a phone the copy sits over the
middle of the photo, not off to one side. Trust line pinned low. */
.gx-phero-page { min-height: 620px; align-items: stretch; }
.gx-phero-page__bg::after {
background: linear-gradient(180deg, rgb(from var(--gx-bg-header) r g b / 0.84) 0%,
rgb(from var(--gx-bg-header) r g b / 0.78) 52%, rgb(from var(--gx-bg-header) r g b / 0.9) 100%);
}
.gx-phero-page__inner {
display: flex;
flex-direction: column;
padding-block: 32px 28px;
}
.gx-phero-page__title { margin-top: 30px; }
/* Figma splits the two halves of the heading: "WE MAKE GEARS." ends at
y126, the cyan half starts at y155. The
becomes that gap.
Only on the page hero — the Quality band's title has a
and no
, and hiding it there would run the two lines together. */
.gx-phero-page:not(.gx-phero-page--band) .gx-phero-page__title br { display: none; }
.gx-phero-page__title em { display: block; margin-top: 24px; }
/* the short photo band does not need the full 620px hero height */
.gx-phero-page--band { min-height: 470px; }
.gx-phero-page__lead { margin-top: 28px; }
.gx-phero-page__meta { margin-top: auto; padding-top: 40px; font-size: var(--gx-fs-micro); }
/* ---------- media + text sections (About 197:2) -------------------
The mobile frames place each photo at a specific point in the copy,
and it is not the same point every time:
Gear Specialists 197:18 photo last (desktop has it left/flipped)
Every Project 197:47 photo last (already the DOM order)
One Point 197:53 photo after the heading — the eyebrow and
title already sit in their own wrap above
.gx-mt__inner, so DOM order is right
Engineering 197:60 photo *between* the two copy blocks */
.gx-mt--flip .gx-mt__media { order: 2; }
/* Photo between the intro copy and the quality block: the copy column
dissolves into the grid so one order run covers both. */
.gx-mt--m-split .gx-mt__inner { gap: 0; }
.gx-mt--m-split .gx-mt__inner > div:first-child { display: contents; }
.gx-mt--m-split .gx-mt__inner > div:first-child > * { order: 1; }
.gx-mt--m-split .gx-mt__media { order: 2; margin-block: 34px; }
/* the > * rule above also hits the kicker, so these must out-specify it */
.gx-mt--m-split .gx-mt__inner > div:first-child > .gx-mt__kicker,
.gx-mt--m-split .gx-mt__inner > div:first-child > .gx-mt__kicker ~ * { order: 3; }
/* ---------- footer (160:281) -------------------------------------
Frame order: brand + tagline full width (y40) · Capabilities and
Company side by side (y150, x24 / x205) · Gear Types full width
(y296) · contact (y408) · map (y578) · ISO centred (y720) · rule ·
credit. The DOM has Gear Types second, so order fixes the sequence. */
.gx-footer__inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px 16px;
align-items: start;
}
.gx-footer__inner > * { order: 4; }
.gx-footer__inner > *:first-child{ order: 1; grid-column: 1 / -1; } /* brand */
.gx-footer__inner > nav:nth-of-type(1) { order: 2; } /* capabilities */
.gx-footer__inner > nav:nth-of-type(3) { order: 3; } /* company */
.gx-footer__inner > nav:nth-of-type(2) { order: 4; grid-column: 1 / -1; } /* gear types */
.gx-footer__inner > nav:nth-of-type(2) ul {
columns: 2; /* Figma fits all ten in a 100px band */
column-gap: 16px;
}
.gx-footer__inner > div:nth-of-type(2) { order: 5; grid-column: 1 / -1; } /* contact */
.gx-map { order: 6; grid-column: 1 / -1; width: 100%; height: 96px; }
/* Figma centres the ISO mark low in the footer (y720). It lives inside the
brand block in the markup, so on mobile it stays there — moving it would
mean restructuring the footer for one badge. Flagged, not fixed. */
.gx-footer__iso { display: block; margin-top: 18px; }
/* 342px content column, so both plates fit at their drawn width. */
.gx-footer__badges { margin-top: 18px; gap: 16px; }
.gx-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
/* ---------- generic section rhythm ------------------------------- */
.gx-cta__inner { text-align: left; }
.gx-cta__meta { justify-content: flex-start; }
}
/* Very narrow phones: the 280px card and the 24px gutter no longer both
fit, so the card gives way rather than the gutter. */
@media (max-width: 360px) {
.gx-carousel .gx-pcard { flex-basis: 260px; width: 260px !important; }
}