/* ============================================================ HOLT Crane - Product page (Link-Belt 120|RT) Momentum design language ยท SEO/AEO template ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-text); background: var(--color-bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* ---- Twenty Twenty-Five integration: neutralize root padding + block gap (TT25 injects --wp--style--block-gap: 1.2rem between every top-level element, which shows up as extra space between sections). ---- */ body { padding: 0 !important; /* TT25 / Genesis Blocks add body padding (30px) on the server; remove it so sections run full-bleed. .wrap handles content insets. */ --wp--style--root--padding-top: 0px; --wp--style--root--padding-right: 0px; --wp--style--root--padding-bottom: 0px; --wp--style--root--padding-left: 0px; } .wp-site-blocks { padding: 0 !important; margin: 0 !important; } .wp-site-blocks > * { margin-block: 0 !important; } .has-global-padding { padding-left: 0 !important; padding-right: 0 !important; } h1, h2, h3 { font-family: var(--font-heading); font-weight: 800; line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 var(--space-xs); } .wrap { max-width: 78rem; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); } /* ---- Eyebrow ---- */ /* Size/weight matched to momentum.css's .holt-eyebrow so the label reads the same on product pages as on the home page (SA review, 8/3/26). */ .eyebrow { font-family: var(--font-mono); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--hce-yellow); margin: 0 0 var(--space-sm); } .phero .eyebrow { text-shadow: 0 1px 3px rgba(20,18,17,0.85), 0 2px 14px rgba(20,18,17,0.6); } .eyebrow.ink { color: var(--color-primary); } /* ---- Buttons ---- */ .btn { display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.02em; text-decoration: none; text-align: center; padding: 0.85em 1.9em; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover { background: var(--color-primary-hover); } .btn-glass { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.4); backdrop-filter: blur(8px); } .btn-glass:hover { background: rgba(255,255,255,0.26); } /* Secondary button for LIGHT backgrounds. .btn-glass is translucent white with white text, so it is invisible on .section / .section-alt. Every hub page's new lineup CTA sits on light, so they use .btn-dark instead. Mirrors momentum.css's .holt-btn-dark, which is not enqueued on these pages (SA "button consistency", raised on 8 pages). */ .btn-dark { background: rgba(45, 41, 38, 0.9); color: #fff; border-color: transparent; } .btn-dark:hover { background: var(--hce-black); } /* ---- Nav + footer live in the shared assets/css/chrome.css ---- */ /* ---- Breadcrumb ---- */ .crumbs { background: var(--hce-black); padding-top: var(--header-height); } .crumbs .wrap { display: flex; gap: 8px; align-items: center; padding-block: 10px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); flex-wrap: wrap; } .crumbs a { color: rgba(255,255,255,0.7); text-decoration: none; } .crumbs a:hover { color: #fff; } .crumbs [aria-current] { color: var(--hce-yellow); } /* ---- Product hero ---- */ .phero { position: relative; min-height: 68vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; padding-block: clamp(2.5rem, 6vh, 5rem); } .phero-media { position: absolute; inset: 0; z-index: 0; } .phero-media img { width: 100%; height: 100%; object-fit: cover; } /* 85|RT hero: the source photo is sky-heavy, so zoom in and re-center on the crane. Scoped to this page only. */ .phero-85rt .phero-media img { object-position: 47% 56%; transform: scale(1.28); } /* The scrim used to bottom out at 15% at 40% height - precisely where the eyebrow, H1 and lede sit - so over a pale hazy sky the lede measured 2.86:1 and the yellow eyebrow about 1.8:1. Floor raised and the thinnest point pushed below the text block. Shared by every hub and crane page. */ .phero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(45,41,38,0.6), rgba(45,41,38,0.58) 30%, rgba(45,41,38,0.72) 66%, rgba(45,41,38,0.92)); } .phero .eyebrow, .phero-sub { text-shadow: 0 1px 3px rgba(20,18,17,0.8), 0 2px 14px rgba(20,18,17,0.55); } .phero-inner { position: relative; z-index: 2; } .phero h1 { font-size: clamp(2.6rem, 1.8rem + 4.5vw, 5.5rem); font-weight: 900; margin: 0 0 12px; text-shadow: 0 2px 24px rgba(0,0,0,0.4); } .phero h1 .model { color: #fff; } .phero h1 .bar { color: var(--color-primary); margin: 0 0.02em; } .phero-sub { font-size: var(--text-lg); color: rgba(255,255,255,0.9); max-width: 40rem; margin: 0 0 var(--space-md); } .phero-cta { display: flex; flex-wrap: wrap; gap: 12px; } /* ---- Key spec plate ---- */ .keyspecs { background: var(--hce-black); color: #fff; } .keyspec-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding-block: var(--space-lg); } /* The 5-up plate used to wrap to 2 columns at tablet, orphaning the fifth cell and leaving a divider hanging off the end of row two with nothing beside it. Explicit break points, and the divider is drawn per-row instead. */ @media (max-width: 1000px) { .keyspec-grid { grid-template-columns: repeat(3, 1fr); row-gap: 20px; } .keyspec:nth-child(3n) { border-right: 0; } } @media (max-width: 620px) { .keyspec-grid { grid-template-columns: repeat(2, 1fr); } .keyspec { border-right: 1px solid rgba(255,255,255,0.12); } .keyspec:nth-child(2n) { border-right: 0; } } .keyspec { text-align: center; padding: 8px 12px; border-right: 1px solid rgba(255,255,255,0.12); } .keyspec:last-child { border-right: 0; } .kn { font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1; color: #fff; } .ku { font-size: 0.42em; font-weight: 500; color: var(--hce-yellow); margin-left: 4px; letter-spacing: 0.04em; } .kl { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 10px; } /* ---- Sections ---- */ .section { padding-block: clamp(3.5rem, 8vh, 6.5rem); } .section-alt { background: var(--color-bg-alt); } .section-head { max-width: 44rem; margin-bottom: var(--space-lg); } .h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); } .section-sub { color: var(--color-text-muted); font-size: 0.98rem; } .lead { font-size: var(--text-lg); color: var(--color-text); } .section p { color: var(--color-text-muted); } .section .lead { color: var(--color-text); } /* ---- Overview split ---- */ .split-2 { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 4vw, 56px); align-items: center; } /* The Phase-3 block conversion nested the overview figure INSIDE the text group instead of leaving it a sibling, so .split-2 ends up with a single grid child and column two is permanently empty. That is why every hub page pins its overview copy into a ~640px left column and leaves the right 40% of a 1200px container blank, top to bottom, in the tallest section on the page. Collapse to one column whenever there is only one child, and lay the figure out beside the copy inside that child instead. */ /* The Phase-3 block conversion nested the overview figure INSIDE the text group rather than leaving it a sibling, so .split-2 has a single grid child and column two is empty. Two attempts to rebuild a two-column layout from that structure both failed, and the record is worth keeping: 1. Nested grid, figure auto-placed - the eyebrow, heading, paragraphs and button auto-flowed across BOTH tracks and scattered. 2. Nested grid, copy pinned to column 1 and the figure spanning `grid-row: 1 / -1` - a spanning item distributes its height across every row it spans, so the tall figure pushed the copy rows apart and left ~700px voids between the eyebrow and the heading. align-content and grid-auto-rows do not help, because the span is what sizes them. 3. float:right - the figure is LAST in source, so it simply dropped below the copy with nothing left to wrap beside it. A real two-column overview needs the figure to be a SIBLING of the text group, which is a block-markup change to each hub page, not a CSS one. Until that is done this stays single-column: copy full width, figure centred beneath it and height-capped so it supports the copy instead of dominating the section. */ .split-2:not(:has(> * + *)) { grid-template-columns: 1fr; } .split-2:not(:has(> * + *)) > * > .overview-fig { max-width: 40rem; margin: var(--space-lg) auto 0; } .split-2:not(:has(> * + *)) > * > .overview-fig img { max-height: 360px; } .pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-md); } .pill { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid rgba(196,22,28,0.45); color: var(--color-primary); } /* ---- Features ---- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .feature { background: #fff; border: 1px solid rgba(45,41,38,0.09); border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(45,41,38,0.04); padding: 26px 24px; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .fi { font-size: 1.8rem; margin-bottom: 12px; } .feature h3 { font-size: 1.15rem; margin-bottom: 8px; } .feature p { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; } /* ---- Spec tables ---- */ .spec-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .spec-block { background: #fff; border: 1px solid rgba(45,41,38,0.07); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 26px 28px; } .spec-title { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 2px solid var(--color-primary); } .spec-list { margin: 0; } .spec-list > div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--hairline, rgba(45,41,38,0.1)); } .spec-list > div:last-child { border-bottom: 0; } .spec-list dt { color: var(--color-text-muted); font-size: 0.86rem; margin: 0; } .spec-list dd { margin: 0; font-weight: 600; font-size: 0.9rem; text-align: right; font-family: var(--font-mono); } /* ---- Downloads ---- */ .downloads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: var(--space-lg); } .download { display: flex; align-items: center; gap: 16px; background: var(--hce-black); color: #fff; text-decoration: none; border-radius: var(--radius-md); padding: 20px 24px; transition: transform 0.2s var(--ease); } .download:hover { transform: translateY(-3px); } .download strong { font-family: var(--font-heading); } .dl-ic { font-size: 1.4rem; width: 2.6rem; height: 2.6rem; flex: none; display: grid; place-items: center; background: var(--color-primary); border-radius: 50%; } /* ---- Gallery ---- */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .gallery figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4/3; cursor: zoom-in; } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); } .gallery figure:hover img { transform: scale(1.05); } /* ---- Lightbox ---- */ .lightbox { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: clamp(20px, 6vw, 64px); background: rgba(20,18,17,0.92); opacity: 0; transition: opacity 0.3s var(--ease); } .lightbox.open { display: flex; } .lightbox.in { opacity: 1; } .lightbox-img { max-width: 100%; max-height: 100%; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0,0,0,0.5); opacity: 0; transform: scale(0.97); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .lightbox.in .lightbox-img { opacity: 1; transform: scale(1); } .lightbox-close { position: absolute; top: clamp(14px,3vw,28px); right: clamp(14px,3vw,28px); width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background 0.2s var(--ease); } .lightbox-close:hover, .lightbox-close:focus-visible { background: rgba(255,255,255,0.22); } /* ---- FAQ ---- */ /* Each Q&A is a card. Previously it was a bare bottom hairline with zero left padding, so the text ran to the edge, and Chrome paints its own focus ring on the instant you click one - which read as a hard black box around full-bleed text. The ring is now suppressed for mouse users and redrawn brand-red and inset for keyboard users, and the open state is signalled by a tint plus a red spine rather than an outline. */ /* Was capped at 52rem and centred, so the FAQ was the only section not using the page's full grid width - roughly 490px of empty band beside every row. */ /* The FAQ was the only section not centred: .faq-wrap dropped its cap but the accordion kept a 60rem measure with no auto margins, so it sat hard against the left gutter with ~430px of dead band to its right. Centre the heading block and the accordion on the same axis. */ .faq-wrap { max-width: none; } .faq-wrap .section-head { margin-inline: auto; text-align: center; } .faq { max-width: 60rem; margin-inline: auto; } .faq details { background: #fff; border: 1px solid rgba(45,41,38,0.09); border-left: 3px solid transparent; border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(45,41,38,0.04); overflow: hidden; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .faq details + details { margin-top: 10px; } .faq details:hover { border-color: rgba(45,41,38,0.2); } .faq details[open] { background: linear-gradient(180deg, #fff 0%, var(--grey-50) 100%); border-color: rgba(45,41,38,0.12); border-left-color: var(--color-primary); box-shadow: var(--shadow-card); } .faq summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 22px; position: relative; font-family: var(--font-heading); font-weight: 700; font-size: 1.08rem; line-height: 1.35; color: var(--color-text); outline: none; transition: color 0.2s var(--ease); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--color-primary); } .faq details[open] summary { color: var(--color-primary); } /* Keyboard users keep a visible ring; it traces the card rather than boxing the text, and it is brand-red instead of the UA's black. */ .faq summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; border-radius: var(--radius-md); } .faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; line-height: 1; color: var(--color-primary); transition: transform 0.25s var(--ease); } .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq details p { color: var(--color-text-muted); padding: 0 54px 20px 22px; margin: 0; line-height: 1.6; } .faq details p a { color: var(--color-primary); } /* ---- CTA band ---- */ .cta-band { background: var(--hce-black); color: var(--color-text-on-dark); text-align: center; padding-block: clamp(3.5rem, 8vh, 6rem); } .cta-band .accent-rule { width: 4rem; height: 4px; background: var(--color-primary); margin: 0 auto var(--space-md); } .cta-band h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); color: #fff; } .cta-band p { color: var(--grey-400); max-width: 36rem; margin: 0 auto var(--space-md); } .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ---- Model grid (index page: full model catalog cards) ---- */ /* Was a hard 2-up, so any odd family count (5 RT, 3 AT) ended the section on a half-empty row. auto-fit closes the row whatever the count, and the family sizes across the site run 3 to 8. */ .model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: 20px; } @media (max-width: 640px) { .model-grid { grid-template-columns: 1fr; } } .model-card { display: flex; gap: 22px; align-items: center; background: #fff; border: 1px solid rgba(45,41,38,0.09); border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(45,41,38,0.04); padding: 24px; text-decoration: none; color: var(--color-text); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .model-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .model-card-img { flex: none; width: 9rem; height: 7rem; position: relative; } .model-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .model-card-body { flex: 1; min-width: 0; } .model-card-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.4rem; margin: 0 0 2px; } .model-card-cap { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-primary); font-weight: 700; margin-bottom: 8px; } .model-card-desc { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 10px; } .model-card-specs { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.7rem; color: var(--grey-600, var(--color-text-muted)); margin-bottom: 10px; } .model-card-specs strong { color: var(--color-text); font-weight: 700; } .model-card-go { font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; color: var(--hce-black); } .model-card:hover .model-card-go { color: var(--color-primary); } /* ---- Used inventory cards ---- Photo-first, unlike .model-card: used units come with real jobsite photos, not transparent renders, so the photo fills a fixed 4:3 frame (cover) instead of floating letterboxed in a side column. */ :root { --price-green: #1b7a3c; } /* 5.4:1 on white */ .uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .uc-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1024px) { .uc-grid, .uc-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .uc-grid, .uc-grid--compact { grid-template-columns: 1fr; } } .uc-card { display: flex; flex-direction: column; box-sizing: border-box; background: #fff; border: 1px solid rgba(45,41,38,0.09); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: var(--color-text); box-shadow: var(--shadow-card); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } .uc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .uc-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } .uc-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey-50); } .uc-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .uc-card:hover .uc-card-media img { transform: scale(1.04); } .uc-card-photos { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-pill); background: rgba(20,18,17,0.66); color: #fff; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; } .uc-card-photos svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; } .uc-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 18px; } /* .uc-card scope needed: .section p (0,1,1) otherwise wins and paints it grey. */ .uc-card .uc-card-make { margin: 0 0 4px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary); } .uc-card-model { margin: 0 0 16px; font-family: var(--font-heading); font-weight: 800; font-size: 1.55rem; line-height: 1.08; color: var(--color-text); } /* Full-bleed red band: negative margins cancel .uc-card-body's side padding. */ .uc-card-specs { display: flex; margin: 0 -22px 18px; padding: 12px 22px; background: var(--color-primary); } .uc-card-specs > div { flex: none; padding: 2px 16px; border-left: 1px solid rgba(255,255,255,0.28); } .uc-card-specs > div:last-child { flex: 1 1 auto; min-width: 0; } .uc-card-specs > div:first-child { padding-left: 0; border-left: 0; } .uc-card-specs dt { margin: 0 0 3px; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.88); } .uc-card-specs dd { margin: 0; font-size: 0.9rem; font-weight: 600; color: #fff; } .uc-card-foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .uc-card-price { font-family: var(--font-heading); font-weight: 800; font-size: 1.35rem; color: var(--price-green); } .uc-card-price.is-call { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; } .uc-card-go { white-space: nowrap; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--color-primary); transition: color 0.2s var(--ease); } .uc-card-go span { display: inline-block; transition: transform 0.2s var(--ease); } .uc-card:hover .uc-card-go { color: var(--color-primary-hover); } .uc-card:hover .uc-card-go span { transform: translateX(3px); } .uc-card--compact .uc-card-body { padding: 16px 18px 16px; } .uc-card--compact .uc-card-specs { margin-inline: -18px; padding-inline: 18px; } .uc-card--compact .uc-card-model { font-size: 1.25rem; margin-bottom: 14px; } .uc-card--compact .uc-card-price { font-size: 1.1rem; } /* ---- Used unit detail: "About this crane" ---- Copy + highlights on the left, the Unit Details card on the right (sticky on desktop, so price and the quote buttons stay in view beside long feature lists). Stacks to one column under 900px. */ .uc-about { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 0.7fr); gap: clamp(28px, 4vw, 64px); align-items: start; } .uc-about-side { position: sticky; top: calc(var(--header-height) + 24px); } .uc-about-copy > p { font-size: var(--text-lg); color: var(--color-text); margin: 0 0 0.35rem; } .uc-about-copy > p:empty { display: none; } .uc-highlights { margin-top: 1.75rem; } .uc-highlights h3 { margin: 0 0 14px; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; } .uc-highlights ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; } .uc-highlights li { position: relative; margin: 0; padding: 12px 14px 12px 40px; background: var(--grey-50); border-radius: 10px; font-size: 0.95rem; font-weight: 500; line-height: 1.4; color: var(--color-text); } .uc-highlights li p { margin: 0; } .uc-highlights li::before { content: ""; position: absolute; left: 17px; top: 50%; width: 6px; height: 11px; border-right: 2.5px solid var(--color-primary); border-bottom: 2.5px solid var(--color-primary); transform: translateY(-65%) rotate(45deg); } .uc-highlights p:empty { display: none; } .uc-unit-card .spec-list .uc-unit-price { padding-top: 14px; } .uc-unit-card .spec-list .uc-unit-price dt { color: var(--color-text); font-weight: 600; } .uc-unit-card .spec-list .uc-unit-price dd { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; color: var(--price-green); } .uc-unit-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } .uc-unit-cta .btn { padding-inline: 0.8em; } @media (max-width: 900px) { .uc-about { grid-template-columns: 1fr; } .uc-about-side { position: static; } } @media (max-width: 640px) { .uc-highlights ul { grid-template-columns: 1fr; } .uc-unit-cta { grid-template-columns: 1fr; } } .uc-card--compact .uc-card-price.is-call { font-size: 0.88rem; } /* ============================================================ About page (SA review, 8/10/26) ============================================================ */ /* Icon size. The emoji live in

since the block conversion, and `.feature p` (0,2,0) was silently beating `.fi` (0,1,0), rendering them at 0.9rem instead of the intended 1.8rem. This restores and enlarges them. */ .feature p.fi { font-size: 2rem; line-height: 1; margin: 0 0 12px; } /* Logo panel in "Who we are". Scoped to .logo-fig so the crane-render figures on product/hub pages keep their radial-gradient treatment. Matches the .feature card so it stops reading as a one-off, and the logo now scales instead of being pinned to a hard 260px. */ .overview-fig.logo-fig { background: #fff; border: 1px solid rgba(45, 41, 38, 0.07); box-shadow: var(--shadow-card); padding: clamp(26px, 4vw, 44px); text-align: center; } /* Deliberately NOT grid + place-items:center here: a centered (non-stretch) grid item is content-sized, so the image's width:100% has no definite reference and collapses to 0. Give the figure the definite width instead. */ .overview-fig.logo-fig .wp-block-image { width: 100%; max-width: 260px; margin: 0 auto; } .overview-fig.logo-fig img { width: 100%; height: auto; filter: none; } /* CTA button rows that replaced pill rows. .about-cta kept as an alias so the already-live About page markup is not disturbed; .section-cta is the name to use going forward on the hub pages. */ .about-cta, .section-cta { margin-top: var(--space-md); } .section-cta-note { margin-top: var(--space-md); font-size: 0.98rem; color: var(--color-text); } /* Lineup CTA rows sit under the model grid on a light panel. */ .section .cta-row.section-cta, .section-alt .cta-row.section-cta { margin-top: var(--space-lg); justify-content: flex-start; } .wp-block-button.btn-dark .wp-block-button__link { background: rgba(45, 41, 38, 0.9); color: #fff; } .wp-block-button.btn-dark .wp-block-button__link:hover { background: var(--hce-black); } /* Inline quote form in the bottom CTA band (replaces the 3-button row). Band is dark, so the WPForms "modern markup" custom properties get a dark-surface treatment rather than the light one used in the modal. */ .cta-form { max-width: 34rem; margin: var(--space-md) auto 0; text-align: left; } .cta-form .wpforms-container { --wpforms-field-border-color: rgba(255, 255, 255, 0.28); --wpforms-field-background-color: rgba(255, 255, 255, 0.07); --wpforms-field-text-color: #fff; --wpforms-field-border-radius: var(--radius-sm); --wpforms-field-size-input-height: 2.9em; --wpforms-label-color: #fff; --wpforms-label-error-color: #ffb4b4; --wpforms-button-background-color: var(--color-primary); --wpforms-button-background-color-alt: var(--color-primary-hover, #a91217); --wpforms-button-text-color: #fff; --wpforms-button-text-color-alt: #fff; --wpforms-button-border-radius: var(--radius-pill); margin: 0; font-family: var(--font-body); } /* WPForms sizes "medium" fields at 60%, which reads ragged next to the full-width textarea in a centered band. Even them up. */ .cta-form .wpforms-container .wpforms-field-medium, .cta-form .wpforms-container .wpforms-field-small, .cta-form .wpforms-container .wpforms-field-large { max-width: 100%; } .cta-form .wpforms-field-label { font-family: var(--font-heading); font-weight: 700; } .cta-form .wpforms-submit { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.02em; cursor: pointer; } /* Keeps the phone and locations paths alive now that their buttons are gone. */ .cta-alt { margin-top: var(--space-md); font-size: 0.92rem; } .cta-band .cta-alt a { color: #fff; text-decoration: underline; } /* Link-Belt Top 5 Dealer badge in the hero. The artwork is dark-on-transparent, so over a photo it needs a light card to stay legible. */ .phero-badge { position: absolute; top: clamp(16px, 3vh, 34px); right: clamp(16px, 4vw, 48px); z-index: 3; margin: 0; width: clamp(116px, 13vw, 178px); background: #fff; border-radius: var(--radius-md); padding: 13px 15px; box-shadow: 0 14px 34px rgba(20, 18, 17, 0.38); } .phero-badge img { display: block; width: 100%; height: auto; } @media (max-width: 640px) { /* The hero is bottom-aligned, so on a narrow screen the headline grows up into the badge. Reserving top padding on the hero guarantees the text block can never start above the badge. */ .phero-badge { width: 96px; padding: 8px 9px; top: 16px; } .about-hero-badged { padding-top: 128px; } } /* ---- Locations page: narrower, centered 2-up grid + a trailing note ---- */ .locations-grid { max-width: 56rem; margin-inline: auto; } .section-note { max-width: 52rem; margin-top: var(--space-md); } /* Phone rows as a real two-column block so labels and numbers line up in columns on BOTH cards. The default .model-card-specs is a wrapping flex row, which let the Irving card's longer parts number break to a different position than San Antonio's (SA review, 8/4/26). */ .loc-phones { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; align-items: baseline; } .loc-phones p { display: contents; } .loc-phones p strong { color: var(--color-text); font-weight: 700; } .loc-phones p a { color: var(--color-primary); text-decoration: none; font-family: var(--font-mono); } .loc-phones p a:hover { text-decoration: underline; } /* Summary lines promoted from a trailing footnote to intro copy under the section header, so they need subhead weight rather than fine print. */ .section-lead { max-width: 52rem; font-size: 0.98rem; color: var(--color-text-muted); margin: 0 0 0.6rem; } .section-head .section-lead:last-child { margin-bottom: 0; } /* ---- Lineup figure (index overview: multiple small renders in one card) ---- */ .lineup-fig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; } .lineup-fig-grid img { width: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(45,41,38,0.16)); } .lineup-fig-grid .lf-wide { grid-column: span 3; } /* ---- Related ---- */ .related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .related { background: #fff; border: 1px solid rgba(45,41,38,0.07); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 20px; text-align: center; text-decoration: none; color: var(--color-text); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .related:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .related img { height: 100px; width: auto; margin: 0 auto 12px; object-fit: contain; } .related .rn { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; } .related .rc { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-primary); margin-top: 4px; } /* ---- Related grid, 8-up (lattice crawler family: 7 sibling models + a "view all" card back to the hub) ---- */ .related-grid-8 { grid-template-columns: repeat(8, 1fr); gap: 8px; } .related-grid-8 .related { padding: 12px 8px; } .related-grid-8 .related img { height: 52px; margin-bottom: 6px; } .related-grid-8 .related .rn { font-size: 0.84rem; } .related-grid-8 .related .rc { font-size: 0.62rem; } /* ---- Footer lives in the shared assets/css/chrome.css ---- */ /* ---- Reveal ---- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .verify .reveal { opacity: 1; transform: none; transition: none; } /* ---- Responsive ---- */ @media (max-width: 900px) { .nav-links { display: none; } .nav-phone { display: none; } .keyspec-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 0; } .keyspec:nth-child(2) { border-right: 0; } .split-2 { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr 1fr; } .spec-tables { grid-template-columns: 1fr; } .downloads { grid-template-columns: 1fr; } .gallery { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr 1fr; } .related-grid-8 { grid-template-columns: repeat(4, 1fr); } .model-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } .keyspec-grid { grid-template-columns: 1fr 1fr; } .phero-cta .btn, .cta-row .btn { flex: 1 1 auto; } .model-card { flex-direction: column; text-align: center; } .model-card-specs { justify-content: center; } .related-grid-8 { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ Block-markup adapters (MIGRATION.md, Phase 1+) Content pages store native block markup in post_content now. Core blocks wrap elements differently than the original raw HTML did; these rules map block-generated markup onto the exact same look. Raw-HTML selectors above stay untouched so unconverted pattern pages keep rendering during the migration. ============================================================ */ /* Buttons: the editor puts className on .wp-block-button (the wrapper); the visible element is the inner __link. Mirrors .btn/.btn-primary/ .btn-glass so "btn-primary" on a Button block just works. */ .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; } /* A core Button block is

. The modifier lands on the WRAPPER, and the wrapper is a square div sized exactly like the rounded inside it - so the bare .btn-primary / .btn-glass / .btn-dark rules above (written for raw links in the patterns) were painting a hard rectangle directly behind every button. btn-primary read as a red rectangle; btn-glass showed as a pale square poking out past the pill's corners, and its backdrop-filter blurred a square region too. The wrapper is layout only: it must never paint. Keep this AFTER the modifier rules - equal specificity, so source order is what makes it win. :hover is listed explicitly because .btn-primary:hover is (0,2,0) and would otherwise out-rank a bare .wp-block-button and bring the rectangle back on mouseover. */ .wp-block-button, .wp-block-button:hover { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Size/padding matched to momentum.css's .holt-btn so buttons are identical on every page, not just similar (SA "button consistency", 8/10/26). */ .wp-block-button .wp-block-button__link { display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.02em; text-decoration: none; text-align: center; padding: 0.9em 2.6em; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; background: none; color: inherit; transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); } .wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); } .wp-block-button.btn-primary .wp-block-button__link { background: var(--color-primary); color: #fff; } .wp-block-button.btn-primary .wp-block-button__link:hover { background: var(--color-primary-hover); } .wp-block-button.btn-glass .wp-block-button__link { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.4); backdrop-filter: blur(8px); } .wp-block-button.btn-glass .wp-block-button__link:hover { background: rgba(255,255,255,0.26); } /* Image blocks add a
wrapper the raw markup didn't have. */ .phero-media .wp-block-image { margin: 0; height: 100%; } .overview-fig .wp-block-image { margin: 0; } .overview-fig .wp-block-image img { height: auto; } /* Feature-card emoji icons and pills are Paragraph blocks now. */ p.fi { margin: 0 0 12px; } p.pill { margin: 0; } /* Top-level content sections self-pad; cancel any block-gap between them. */ .entry-content > * { margin-block: 0; } /* Cancel WP's flow block-gap inside components the design lays out with its own grid/flex + gap (or intentionally tight stacking), so items align in their tracks. Flow prose columns keep block-gap for paragraph rhythm, and the design's explicit margins (eyebrow, pill-row, section-head) still win. */ .entry-content .split-2 > *, .entry-content .feature-grid > *, .entry-content .spec-tables > *, .entry-content .downloads > *, .entry-content .gallery > *, .entry-content .pill-row > *, .entry-content .faq > * { margin-block-start: 0; } /* ...but the FAQ cards do want a gap. This has to out-specify the line above ((0,2,0)), which .faq details + details ((0,1,2)) does not. */ .entry-content .faq > details + details { margin-block-start: 10px; } /* Spec tables: core Table blocks styled to match the old dl.spec-list. */ .spec-block .wp-block-table { margin: 0; } .spec-block .wp-block-table table { width: 100%; border-collapse: collapse; } .spec-block .wp-block-table td { padding: 11px 0; border-bottom: 1px solid var(--hairline, rgba(45,41,38,0.1)); font-size: 0.86rem; vertical-align: top; border-left: 0; border-right: 0; } .spec-block .wp-block-table tr:last-child td { border-bottom: 0; } .spec-block .wp-block-table td:first-child { color: var(--color-text-muted); } .spec-block .wp-block-table td:last-child { font-weight: 600; font-size: 0.9rem; text-align: right; font-family: var(--font-mono); } /* Downloads as content: the card is a Group now, not an ; the class-based styling still applies. Inner paragraphs carry the icon and the label/link. */ .download.wp-block-group { text-decoration: none; } .download p { margin: 0; } /* Gallery as content: a Group.gallery of core Image blocks (figures). */ .gallery .wp-block-image { margin: 0; height: 100%; } .gallery .wp-block-image img { width: 100%; height: 100%; object-fit: cover; } /* Separator block as the CTA accent rule (core adds hr borders/opacity). */ .cta-band hr.accent-rule { border: 0; opacity: 1; } @media (max-width: 560px) { .phero-cta .wp-block-button, .cta-row .wp-block-button { flex: 1 1 auto; } .phero-cta .wp-block-button .wp-block-button__link, .cta-row .wp-block-button .wp-block-button__link { width: 100%; } } /* ---- Inline contact form (replaces the Contact Us drawer) ---------------- The closing CTA band now carries the real form instead of a pair of buttons that opened a modal, and every contact button on the page is a plain anchor to #contact-form. Plain anchors were chosen over the JS trigger so the path to the form survives with JavaScript disabled or broken. The band is --hce-black, and WPForms' "modern markup" exposes CSS custom properties for exactly this, so the whole form is themed through those rather than by fighting wpforms-full.min.css on specificity. */ .cta-band-form { text-align: left; } .cta-band-form .wrap { max-width: 46rem; } .cta-band-form .accent-rule { margin-inline: 0; } .cta-band-form h2 { text-align: left; } .cta-band-form > .wrap > p { max-width: 38rem; } .cta-band .cta-form { max-width: none; margin-top: var(--space-lg); } .cta-band .cta-form .wpforms-container { --wpforms-field-border-color: rgba(255,255,255,0.22); --wpforms-field-background-color: rgba(255,255,255,0.06); --wpforms-field-text-color: #fff; --wpforms-field-border-radius: var(--radius-sm); --wpforms-field-size-input-height: 3em; --wpforms-label-color: rgba(255,255,255,0.92); --wpforms-label-sublabel-color: rgba(255,255,255,0.55); --wpforms-label-error-color: #ff9ea2; --wpforms-button-background-color: var(--color-primary); --wpforms-button-background-color-alt: var(--color-primary-hover, #a91217); --wpforms-button-text-color: #fff; --wpforms-button-text-color-alt: #fff; --wpforms-button-border-radius: var(--radius-pill); --wpforms-button-size-font-size: 0.875rem; --wpforms-button-size-padding-h: 2.6em; --wpforms-button-size-height: 3.1em; margin: 0; font-family: var(--font-body); } .cta-band .cta-form .wpforms-field-label { font-family: var(--font-heading); font-weight: 700; font-size: 0.86rem; } .cta-band .cta-form .wpforms-field-sublabel, .cta-band .cta-form .wpforms-field-description { font-size: 0.78rem; } .cta-band .cta-form select { color: #fff; } .cta-band .cta-form select option { color: var(--hce-black); } .cta-band .cta-form .wpforms-submit { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.02em; cursor: pointer; } .cta-band .cta-form .wpforms-confirmation-container-full { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); color: #fff; } .cta-band .section-cta-note { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-top: var(--space-md); } .cta-band .section-cta-note a { color: var(--hce-yellow); text-decoration: none; } /* The form is a scroll target, so keep it clear of the fixed header. */ #contact-form { scroll-margin-top: calc(var(--header-height) + 20px); } /* ============================================================ Feature card icons (Rough Terrain first) Replaces the emoji, which rendered in the OS colour set, at three different visual weights, and in a couple of cases had no relationship to the heading (a lobster for outriggers, an abacus for remote sites). Drawn per card rather than picked from a generic set: a tire for unimproved ground, a steering wheel for four steering modes, and so on. Delivered as a CSS mask rather than inline SVG so the page content stays a clean `

` that an editor can move without meeting markup, and so one rule recolours the whole set. ============================================================ */ .fi { width: 44px; height: 44px; margin: 0 0 16px; border-radius: 50%; background: var(--color-primary, #c4161c); color: #fff; position: relative; font-size: 0 !important; /* kills any leftover emoji glyph */ transition: background 0.25s var(--ease), transform 0.25s var(--ease); } .fi::after { content: ""; position: absolute; inset: 10px; /* Explicit white, NOT currentColor: .fi is a

inside .feature, so `.feature p { color: var(--color-text-muted) }` at (0,1,1) out-ranks `.fi` at (0,1,0) and the glyph came out muted grey on the red chip. */ background: #fff; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* The whole card lifts on hover already; the chip deepens and rises with it. */ .feature:hover .fi { background: var(--color-primary-hover, #a91217); transform: translateY(-2px); } .fi-tire::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-steering::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-compact::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-pickcarry::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-engine::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-backed::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* Vocabulary extension. The same card component carries 234 feature cards across the six hubs, 31 crane pages, About and Locations. These cover the recurring concepts so every card gets a drawn icon rather than an emoji. */ .fi-screen::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-outrigger::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-boom::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-counterweight::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-telematics::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-speed::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-chassis::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-track::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-ground::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-cab::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-wrench::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-height::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-jib::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-swing::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-camera::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-eco::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-power::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-award::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-parts::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-servicetruck::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-cycle::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-building::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-lube::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-weld::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-hydraulic::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-radiator::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .fi-offroad::after { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* ---- 404 page ---- */ .nf-hero { min-height: 70vh; } .nf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .nf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }