/* ==========================================================================
iottag — platform pages stylesheet
Page-specific components for /platform/… — load AFTER main.css:
Contents:
1. Photo hero (baked photo + navy gradient, bullet lists)
2. System icon grid ("The Visibility Challenge")
3. Stage chevrons (Disconnected systems → Operational Understanding)
4. Photo label cards ("Understanding complex operations")
5. Layer band (dark photo band + white layer cards)
6. Organisation levels timeline (photo circles + connector line)
7. Flat CTA overlay variant
8. Asset visibility (photo card height + bordered tracking strip)
9. Fleet visibility (feature rows + white AI-insight stage cards)
10. Workforce visibility (photo cards + timesheet tiles + quote bar)
11. Operational analytics & benchmarking (tinted role-structure bands)
12. Environmental intelligence (hero overlay, 40px h2, monitoring grid,
technical-resources doc list)
13. Connected Workforce redesign (workforce-visibility, Figma 10584:13913):
question list, bordered 5-col label grid, safety card grid, tagline
note bars, timesheet icon rows
========================================================================== */
/* 1. PHOTO HERO ---------------------------------------------------------- */
.hero--photo { min-height: 720px; }
.hero--photo .hero__bg { opacity: 1; }
.hero-lists { display: flex; gap: 20px; flex-wrap: wrap; }
.hero-lists ul { margin: 0; padding-left: 24px; width: 200px; }
.hero-lists ul:last-child { width: 240px; }
.hero-lists li { font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: #fff; }
.hero-lists li + li { margin-top: 3px; }
/* 2. SYSTEM ICON GRID ----------------------------------------------------- */
.sys-grid { display: flex; gap: 16px 80px; flex-wrap: wrap; }
.sys-grid__col { display: flex; flex-direction: column; gap: 16px; }
.sys-item { display: flex; align-items: center; gap: 12px; font-family: var(--f-body); font-size: 16px; color: var(--c-ink); }
.sys-item__ic {
width: 40px; height: 40px; flex-shrink: 0;
border-radius: 10px; background: var(--c-surface);
display: flex; align-items: center; justify-content: center;
}
.sys-item__ic img { width: 20px; height: 20px; display: block; }
/* 3. STAGE CHEVRONS ------------------------------------------------------- */
.stages { display: flex; width: 100%; height: 160px; opacity: .8; }
.stage {
flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
padding: 20px 28px 16px;
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
}
.stage + .stage { margin-left: -16px; }
.stage--src { background: #fdf6e5; } /* web-orange lightest */
.stage--mid { background: var(--c-blue-pale); }
.stage--dest { background: var(--c-blue-tint); }
.stage img { width: 40px; height: 40px; }
.stage span { font-family: var(--f-body); font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--c-ink); text-align: center; }
/* 4. PHOTO LABEL CARDS ----------------------------------------------------- */
.photo-cards { display: flex; gap: 8px; width: 100%; }
.photo-card {
position: relative;
flex: 1 1 0; min-width: 0; height: 320px;
border-radius: var(--r-md); overflow: hidden;
display: flex; align-items: flex-end;
padding: 24px;
}
.photo-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-card::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.photo-card__title {
position: relative; z-index: 1; margin: 0;
font-family: var(--f-alt); font-weight: 700; font-size: 24px; line-height: 1.4;
letter-spacing: -.01em; color: #fff;
}
@media (max-width: 1100px) { .photo-cards { flex-wrap: wrap; } .photo-card { min-width: 240px; height: 280px; } }
/* 5. LAYER BAND ------------------------------------------------------------ */
.layer-band {
position: relative; overflow: hidden;
padding: 81px 80px;
display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.layer-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.layer-band__overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(0deg, rgba(5,55,80,.5) 0%, rgba(11,125,182,.7) 51%, rgba(11,125,182,.8) 100%);
}
.layer-band > :not(.layer-band__bg):not(.layer-band__overlay) { position: relative; z-index: 2; }
.layer-band .h2, .layer-band .lead, .layer-band .body { color: #fff; }
.layer-cards { display: flex; gap: 20px; width: 100%; max-width: 1280px; }
.layer-card {
flex: 1 1 0; min-width: 0; min-height: 180px;
background: rgba(255,255,255,.9);
border: 1px solid var(--c-line); border-radius: var(--r-md);
padding: 24px;
display: flex; flex-direction: column; gap: 16px; justify-content: center;
transition: background .15s ease, transform .2s ease, box-shadow .2s ease;
}
a.layer-card:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(6,3,9,.3); }
.layer-card img { width: 40px; height: 40px; }
.layer-card__title {
margin: 0;
font-family: var(--f-alt); font-weight: 500; font-size: 24px; line-height: 1.4;
letter-spacing: -.01em; color: #4b5059;
}
.layer-card p { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: var(--c-ink); }
@media (max-width: 960px) { .layer-cards { flex-direction: column; } }
/* 6. ORGANISATION LEVELS TIMELINE ------------------------------------------ */
.levels { display: flex; width: 100%; }
.level {
flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column; align-items: center; gap: 16px;
padding: 8px 0;
text-align: center;
}
.level__ring { display: flex; align-items: center; gap: 8px; width: 100%; }
.level__ring::before, .level__ring::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.level:first-child .level__ring::before,
.level:last-child .level__ring::after { background: transparent; }
.level__ring img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.level__title {
margin: 0;
font-family: var(--f-alt); font-weight: 500; font-size: 24px; line-height: 1.4;
letter-spacing: -.01em; color: #4b5059;
}
.level__text { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: var(--c-grey); max-width: 220px; }
@media (max-width: 960px) {
.levels { flex-wrap: wrap; gap: 24px 0; }
.level { flex-basis: 33%; min-width: 180px; }
.level__ring::before, .level__ring::after { background: transparent; }
}
/* 7. FLAT CTA OVERLAY VARIANT ---------------------------------------------- */
.cta-band__overlay--flat { background: rgba(5,55,80,.6); }
/* 8. ASSET VISIBILITY (asset-visibility) ----------------------------------- */
/* asset type cards are shorter than the OI 320px photo cards */
.photo-cards--asset .photo-card { height: 280px; }
/* bordered 6-up tracking strip ("High-volume asset tracking") */
.track-strip {
display: flex; width: 100%;
background: #fff;
border: 1px solid var(--c-line); border-radius: var(--r-md);
overflow: hidden;
}
.track-strip__cell {
flex: 1 1 0; min-width: 0; min-height: 200px;
display: flex; flex-direction: column; justify-content: center; gap: 16px;
padding: 24px;
}
.track-strip__cell + .track-strip__cell { border-left: 1px solid var(--c-line); }
.track-strip__label {
margin: 0;
font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
letter-spacing: -.01em; color: #4b5059;
}
@media (max-width: 1100px) {
.track-strip { flex-wrap: wrap; }
.track-strip__cell { flex: 1 1 33%; min-width: 200px; min-height: 160px; border-top: 1px solid var(--c-line); }
.track-strip__cell:nth-child(-n+3) { border-top: 0; }
}
/* --eq: uniform 48px icon boxes + fixed-height label rows so icons and labels
sit on the same lines across all cells (ODT strip) */
.track-strip--eq .track-strip__cell img { width: 48px; height: 48px; }
.track-strip--eq .track-strip__label { display: flex; align-items: center; min-height: 68px; }
/* 9. FLEET VISIBILITY (fleet-visibility) ------------------------------------ */
/* Rebuilt 2026-07-21 from Figma 10584:14765 ("FLEET OPERATIONS", "Ready to
Dev" canvas): photo hero (Connected Fleet), icon-list intro row with the
blue-rule callout (.oab-note, §11), collision-avoidance .track-strip. */
/* hero overlay — Figma OVL pair reads as the brand gradient wash */
.hero__overlay--fv {
position: absolute; inset: 0; z-index: 1;
opacity: .8;
background: var(--grad-hero);
backdrop-filter: blur(4px);
}
/* intro list items are a step up from the 16px feature-row chips */
.sys-item--lg { font-weight: 600; font-size: 18px; }
/* this design's strip labels are Ubuntu 20, not the asset-page 24px;
cells top-align so icons and first label lines share the same rows
across all six cells regardless of how far the labels wrap */
.track-strip--fv .track-strip__label { font-size: 20px; }
.track-strip--fv .track-strip__cell { justify-content: flex-start; padding-top: 44px; }
/* alternating 740px copy + shadowed photo rows */
.feat { display: flex; gap: 40px; align-items: center; width: 100%; }
.feat--flip { flex-direction: row-reverse; }
.feat__copy { width: 740px; max-width: 100%; flex-shrink: 0; display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.feat__img {
flex: 1 1 0; min-width: 300px; height: 420px;
border-radius: var(--r-md); object-fit: cover;
box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}
/* device-frame renders (tablet bezel + shadow baked into the transparent PNG) —
the CSS radius/shadow would draw a rectangle around the transparent margins */
.feat__img--device { border-radius: 0; box-shadow: none; object-fit: contain; }
/* dashboard rows: a 16:9 screenshot kept at its natural aspect only reaches
~260px beside the 740px copy, so trade copy width for image width */
.feat--dash .feat__copy { width: 620px; }
@media (max-width: 1240px) {
.feat, .feat--flip { flex-direction: column; align-items: flex-start; }
.feat__copy { width: 100%; }
.feat__img { width: 100%; min-width: 0; height: auto; max-height: 420px; }
}
/* white AI-insight stage cards (longer copy than the coloured chevrons);
top-aligned (not centered) so the icons and first text lines sit on the
same rows across all four cards regardless of copy length */
.stages--cards { height: auto; }
.stages--cards .stage { background: #fff; min-height: 200px; padding: 36px 36px 24px; justify-content: flex-start; gap: 16px; }
.stages--cards .stage img { flex-shrink: 0; }
.stages--cards .stage p { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: var(--c-ink); text-align: center; }
@media (max-width: 960px) {
.stages--cards { flex-wrap: wrap; gap: 12px; }
.stages--cards .stage { flex-basis: 100%; clip-path: none; border-radius: var(--r-md); }
.stages--cards .stage + .stage { margin-left: 0; }
}
/* 10. WORKFORCE VISIBILITY (workforce-visibility) ---------------------------- */
/* Rebuilt 2026-07-21 from Figma 10584:13913 ("WORKFORCE OPERATIONS", "Ready to
Dev" canvas) — "Connected Workforce". Page components live in §13; the
timesheet tiles below stay for resources/video-library (.ts-tiles--vl). */
/* hero: the OVL wash is baked into wv-hero-bg.jpg (Figma render of 10584:13915)
— the CSS grad-hero overlay reads far heavier than the design's OVL pair */
.hero--photo .hero__content { z-index: 10; }
/* timesheet photo tiles (staggered 2-col, 120px rows) */
.ts-tiles { display: flex; gap: 16px; flex: 1 1 0; min-width: 320px; }
.ts-tiles__col { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ts-tiles__col--offset { padding-top: 40px; }
.ts-tile {
position: relative; height: 120px;
border-radius: var(--r-md); overflow: hidden;
display: flex; align-items: center;
padding: 32px;
}
.ts-tile::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.ts-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ts-tile h3 {
position: relative; z-index: 1; margin: 0;
font-family: var(--f-alt); font-weight: 400; font-size: 32px; line-height: 1.3;
letter-spacing: -.01em; color: #fff;
}
@media (max-width: 640px) {
.ts-tiles { flex-direction: column; }
.ts-tiles__col--offset { padding-top: 0; }
}
/* sys-item chips on the pale section background → white tile behind the icon */
.sys-item__ic--card { background: #fff; }
/* 11. OPERATIONAL ANALYTICS & BENCHMARKING (operational-analytics-benchmarking)
Rebuilt 2026-07-16 from Figma 12733:81766 ("5. OPERATIONAL ANALYTICS &
BENCHMARKING", "Ready to Dev" canvas). Page loads main.css + platform.css
(.sys-grid/.sys-item chips, .stages/.stage chevrons, .feat rows, .cta-band)
+ solutions.css (.odt2-hero, .odt2-title/.odt2-h2/.odt2-sub/.odt2-copy,
.odt2-levels, .odt2-panel, .odt2-cta). */
/* bordered 6-col "They need to understand" grid (same 1px-collapse as .vis-grid) */
.oab-needs {
/* 1.25px: survives the html zoom .8 (1.25 x .8 = 1 device px; plain 1px collapses) */
display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25px;
width: 100%;
background: var(--c-line);
border: 1.25px solid var(--c-line); border-radius: var(--r-md);
overflow: hidden;
}
.oab-need { min-height: 160px; padding: 24px 20px; background: #fff; display: flex; flex-direction: column; gap: 16px; }
.oab-need img { width: 40px; height: 40px; }
.oab-need p { margin: 0; font: 600 16px/1.2 var(--f-body); color: var(--c-ink); }
@media (max-width: 1100px) { .oab-needs { grid-template-columns: repeat(3, 1fr); } .oab-need { min-height: 140px; } }
@media (max-width: 640px) { .oab-needs { grid-template-columns: repeat(2, 1fr); } }
/* pale flow band with a blue left rule: 5 labels split by thin white chevrons,
then a bold blue takeaway row under a white hairline */
.oab-flow { width: 100%; background: var(--c-blue-pale); border-left: 2px solid var(--c-blue); }
.oab-flow__row { display: flex; gap: 24px; height: 80px; padding: 0 40px; }
.oab-flow__cell { flex: 1 1 0; min-width: 0; display: flex; align-items: center; font: 600 16px/1.2 var(--f-body); color: var(--c-ink); }
.oab-flow__sep { flex: 0 0 24px; align-self: stretch; }
.oab-flow__sep svg { width: 100%; height: 100%; display: block; }
.oab-flow__quote { margin: 0; border-top: 2px solid #fff; padding: 40px; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #1e729c; }
@media (max-width: 960px) {
.oab-flow__row { flex-wrap: wrap; height: auto; gap: 8px 24px; padding: 16px 24px; }
.oab-flow__sep { display: none; }
.oab-flow__cell { flex: 1 1 40%; }
.oab-flow__quote { padding: 24px; }
}
/* single-site vs portfolio duo card */
.oab-duo { display: flex; width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.oab-duo__card { flex: 1 1 0; min-width: 0; display: flex; gap: 20px; align-items: center; padding: 24px; }
.oab-duo__card--cream { background: #fdf6e5; }
.oab-duo__ic {
width: 48px; height: 48px; flex-shrink: 0;
border-radius: 50%; background: var(--c-blue-pale);
display: flex; align-items: center; justify-content: center;
}
.oab-duo__card--cream .oab-duo__ic { background: #fff; }
.oab-duo__ic img { width: 24px; height: 24px; }
.oab-duo__card p { margin: 0; font: 600 18px/1.2 var(--f-body); color: var(--c-ink); }
@media (max-width: 760px) { .oab-duo { flex-direction: column; } }
/* benchmarking board reuses .pi-dash (solutions.css §9): pale band, photo
circles, zigzag hairline dividers and the connector line through the kink.
--inset: 16px gap only between photo and title; title and text touch */
.pi-dash--inset .pi-dash__col { gap: 0; }
.pi-dash--inset .pi-dash__col h3 { margin-top: 16px; }
.pi-dash--inset .pi-dash__col p { margin-right: 12px; }
/* operational-hierarchy card (Figma 12736:83454): white rounded card, three
label + circle-timeline rows split by hairlines */
.oab-hier__ring { display: flex; align-items: center; gap: 8px; }
.oab-hier__ring img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.oab-hier__ring::after { content: ""; flex: 1; height: 1px; background: var(--c-blue-tint); }
.oab-tiers { width: 100%; background: #fff; border-radius: var(--r-md); overflow: hidden; }
.oab-tiers__row { display: flex; align-items: center; gap: 40px; padding: 40px; }
.oab-tiers__row + .oab-tiers__row { border-top: 1px solid var(--c-line); }
.oab-tiers__label { margin: 0; width: 240px; flex-shrink: 0; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #060309; }
.oab-tiers__cols { flex: 1 1 0; min-width: 0; display: flex; gap: 20px; }
.oab-tiers__cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.oab-tiers__cell:last-child { flex: 0 1 280px; }
.oab-tiers__cell:last-child .oab-hier__ring::after { background: transparent; }
.oab-tiers__cell p { margin: 0; font: 400 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #060309; }
@media (max-width: 960px) {
.oab-tiers__row { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
.oab-tiers__label { width: auto; }
.oab-tiers__cols { flex-direction: column; width: 100%; }
.oab-tiers__cell:last-child { flex: 1 1 0; }
.oab-tiers .oab-hier__ring::after { background: transparent; }
}
/* rule-edged callout (blue left bar); pale on white sections, white on pale */
.oab-note { width: 100%; background: var(--c-blue-pale); border-left: 2px solid var(--c-blue); padding: 20px 40px; }
.oab-note--white { background: #fff; }
.oab-note p { margin: 0; font: 600 18px/1.2 var(--f-body); color: var(--c-ink); }
.oab-note--lg { padding: 40px; }
.oab-note--lg p { font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; text-align: left; }
@media (max-width: 640px) { .oab-note, .oab-note--lg { padding: 20px 24px; } }
/* "Supporting Owners…" white card: title + four circle columns split by
zigzag hairlines running the full card height (same geometry as .pi-dash,
solutions.css §9, but white card + pale lines) */
.oab-sup { width: 100%; background: #fff; border-radius: var(--r-md); padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.oab-sup__title { margin: 0; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.oab-sup__cols { display: flex; gap: 20px; }
.oab-sup__cell { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.oab-sup__role { margin: 0; font: 400 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.oab-sup__cell > p:last-child { margin: 0; font: 400 16px/1.2 var(--f-body); color: var(--c-grey); }
/* zigzag divider = two skewed hairlines meeting on the circle connector line
(y:50 = circle radius in cell coords). The card top edge sits 88px above
the cols row (padding 40 + one-line title 28 + card gap 20), so the upper
leg reaches up through the title band; the lower leg runs down through the
bottom padding. Same leg slopes as .pi-dash. */
.oab-sup__cell + .oab-sup__cell::before,
.oab-sup__cell + .oab-sup__cell::after {
content: ""; position: absolute; left: -11px; width: 1px;
background: var(--c-blue-tint);
}
.oab-sup__cell + .oab-sup__cell::before {
top: -88px; height: 138px; transform: skewX(9.3deg); transform-origin: bottom left;
}
.oab-sup__cell + .oab-sup__cell::after {
top: 50px; height: calc(100% - 10px); transform: skewX(-4.2deg); transform-origin: top left;
}
/* circle connector reaches the zigzag kink (kink at next col left -11px; gap 20) */
.oab-sup__cell .oab-hier__ring::after { margin-right: -9px; }
.oab-sup__cols > .oab-sup__cell:last-child .oab-hier__ring::after { background: transparent; }
@media (max-width: 960px) {
.oab-sup { padding: 24px; }
.oab-sup__cols { flex-wrap: wrap; }
.oab-sup__cell { flex: 1 1 40%; min-width: 200px; }
.oab-sup__cell + .oab-sup__cell::before,
.oab-sup__cell + .oab-sup__cell::after { display: none; }
.oab-sup__cell .oab-hier__ring::after { margin-right: 0; }
}
/* continuous-improvement intro: fixed 380px heading column + free-flow copy */
.oab-ci { display: flex; gap: 80px; align-items: center; width: 100%; }
.oab-ci__head { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.oab-ci__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 960px) { .oab-ci { flex-direction: column; gap: 24px; } .oab-ci__head { width: 100%; } }
/* ecosystem panel: .odt2-panel with a half-width photo + linked rows;
row text follows the site greys (odt2 default is near-black) */
.oab-eco .odt2-panel__photo { width: 50%; }
.oab-eco .odt2-panel__row h3 { color: #4b5059; }
.oab-eco .odt2-panel__row p { color: var(--c-ink); }
.oab-eco a.odt2-panel__row:hover h3 { color: var(--c-blue); }
@media (max-width: 900px) { .oab-eco .odt2-panel__photo { width: 100%; } }
/* 12. ENVIRONMENTAL MONITORING (environmental-monitoring) -------------------- */
/* hero: translucent pale-blue mini cards, staggered 2-col, right of the copy.
Scoped to platform pages — industries pages define their own .hero-cards
(row-based) in industries.css and must not inherit these. */
[data-page="platform"] .hero-cards { display: flex; gap: 8px; width: 400px; flex-shrink: 0; align-items: center; }
[data-page="platform"] .hero-cards__col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
[data-page="platform"] .hero-card {
height: 128px;
background: rgba(233,243,249,.9);
border: 1px solid var(--c-line); border-radius: var(--r-md);
display: flex; flex-direction: column; justify-content: center; gap: 16px;
padding: 24px 20px;
}
[data-page="platform"] .hero-card img { width: 24px; height: 24px; }
[data-page="platform"] .hero-card span {
font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
letter-spacing: -.01em; color: #4b5059;
}
@media (max-width: 1240px) { [data-page="platform"] .hero-cards { display: none; } }
/* bordered 5-col visibility grid — 1px gaps over a line-coloured backing so the
inner borders collapse cleanly at any column count; note cell spans 2 */
.vis-grid {
/* 1.25px: survives the html zoom .8 (1.25 x .8 = 1 device px; plain 1px collapses) */
display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25px;
width: 100%;
background: var(--c-line);
border: 1.25px solid var(--c-line); border-radius: var(--r-md);
overflow: hidden;
}
.vis-cell {
min-height: 180px; padding: 24px;
background: #fff;
display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.vis-cell img { width: 48px; height: 48px; }
.vis-cell__label {
margin: 0;
font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
letter-spacing: -.01em; color: #4b5059;
}
.vis-cell--note { grid-column: span 2; flex-direction: row; align-items: center; gap: 8px; background: var(--c-blue-pale); }
@media (max-width: 1100px) {
.vis-grid { grid-template-columns: repeat(2, 1fr); }
.vis-cell { min-height: 140px; }
}
/* example chevrons carry sentence copy, not labels → regular weight */
.stages--example .stage span { font-weight: 400; }
/* 12. ENVIRONMENTAL INTELLIGENCE (environmental-intelligence) --------------- */
/* hero overlay — Figma OVL layer: 80% brand gradient + 4px backdrop blur */
.hero__overlay--em {
position: absolute; inset: 0; z-index: 1;
opacity: .8;
background: var(--grad-hero);
backdrop-filter: blur(4px);
}
/* this design's section headings are Ubuntu Medium 40 (like the 12405-wave
solutions pages), not the site 52px .h2 — fleet- and workforce-visibility
share them */
.em-h2, .fv-h2, .wv-h2 {
margin: 0;
font-family: var(--f-alt); font-weight: 500; font-size: 40px; line-height: 1.2;
letter-spacing: -.01em; color: #4b5059;
}
/* Environmental Visibility intro — 520px title column + free-flow copy */
.em-intro { display: flex; gap: 80px; align-items: center; width: 100%; }
.em-intro__title { width: 520px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
/* bordered 6-col monitoring grid (same line-collapse trick as .vis-grid).
1.25px hairlines: the site renders at html zoom .8, so 1px would rasterize
to 0.8 device px and some dividers vanish at default zoom — 1.25 x .8 = 1. */
.em-grid {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25px;
width: 100%;
background: var(--c-line);
border: 1.25px solid var(--c-line); border-radius: var(--r-md);
overflow: hidden;
}
.em-cell {
min-height: 220px; padding: 24px 20px;
background: #fff;
display: flex; flex-direction: column; gap: 12px;
}
/* each cell is now titled: 32px icon beside a semibold label, list underneath */
.em-cell__hd { display: flex; gap: 8px; align-items: center; }
.em-cell img { width: 32px; height: 32px; flex-shrink: 0; }
.em-cell__hd span {
font-family: var(--f-body); font-weight: 600; font-size: 16px; line-height: 1.2; color: #4b5059;
}
.em-cell ul { margin: 0; padding: 0; list-style: none; }
.em-cell li { font-family: var(--f-body); font-weight: 400; font-size: 16px; line-height: 1.2; color: var(--c-ink); }
.em-cell li::before { content: "- "; }
/* Regulatory Compliance Automation (Figma 12696:15863) — the one row in the
pale band that sits on its own WHITE full-viewport band, with the laptop
render bleeding off the left edge. The exported asset is already clipped on
its left side, so the cut only reads as intentional when it lands exactly on
the viewport edge — hence the 100vw break-out rather than a padded row.
Widths divide by the html zoom (.8, main.css): under zoom 100vw paints at
only 80% of the screen (same trick as .fri-dark in solutions.css). */
.feat--bleed {
width: calc(100vw / 0.8);
margin-left: calc(50% - 50vw / 0.8);
background: #fff;
gap: 80px;
padding: 20px 0 0;
/* keep the copy's right edge on the page content column on wide screens */
padding-right: max(var(--pad-x), calc(50vw / 0.8 - var(--maxw) / 2));
/* row-reverse: pins the copy right and the render hard left, free space between */
justify-content: space-between;
}
.feat--bleed .feat__copy { width: auto; flex: 1 1 0; min-width: 0; max-width: 800px; }
.feat--bleed .feat__img {
\* 913x904 source: the box keeps that aspect so nothing crops, and is sized
to close most of the space-between gap toward the copy on wide screens */
flex: 0 0 760px; width: 760px; height: 752px;
border-radius: 0; box-shadow: none; object-fit: cover;
}
/* stacked (matches the .feat column breakpoint) — the band keeps its white
full-bleed, the render keeps hugging the left edge so the clip stays hidden */
@media (max-width: 1240px) {
.feat--bleed { gap: 32px; padding: 20px var(--pad-x) 48px 0; }
.feat--bleed .feat__copy { width: 100%; max-width: none; padding-left: var(--pad-x); }
.feat--bleed .feat__img {
flex: 0 0 auto; width: min(760px, 92%); height: auto; max-height: none;
}
}
/* Download Technical Resources — two columns of underlined doc links */
.em-docs { display: flex; gap: 40px; width: 100%; }
.em-docs__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.em-doc {
display: flex; gap: 8px; align-items: center;
padding: 16px 0;
border-bottom: 1px solid var(--c-line);
text-decoration: none;
}
.em-doc img { width: 40px; height: 40px; flex-shrink: 0; }
.em-doc span {
font-family: var(--f-alt); font-weight: 700; font-size: 24px; line-height: 1.3;
letter-spacing: -.01em; color: #4b5059;
}
a.em-doc:hover span { color: var(--c-blue); }
@media (max-width: 1100px) {
.em-grid { grid-template-columns: repeat(3, 1fr); }
.em-cell { min-height: 160px; }
.em-intro { flex-direction: column; align-items: flex-start; gap: 24px; }
.em-intro__title { width: 100%; }
.em-docs { flex-direction: column; gap: 0; }
}
@media (max-width: 820px) {
.em-h2, .fv-h2, .wv-h2 { font-size: 32px; }
.em-doc span { font-size: 20px; }
.em-grid { grid-template-columns: 1fr 1fr; }
}
/* 13. CONNECTED WORKFORCE (workforce-visibility, Figma 10584:13913) ---------- */
/* "answers the key questions" list — bare 20px icons, 18px semibold copy.
Column-flow grid so the rows of the two columns line up with each other */
.wv-qs {
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto);
grid-auto-flow: column; gap: 20px 40px;
width: 100%;
}
/* top-aligned so the ? icons stay in a straight column when copy wraps to 2 lines */
.wv-q { display: flex; align-items: flex-start; gap: 12px; font: 600 18px/1.2 var(--f-body); color: var(--c-ink); }
.wv-q img { flex-shrink: 0; margin-top: 1px; }
/* intro row: copy + question list left, tracking-UI still right, bottom-aligned */
.wv-mtt { display: flex; gap: 40px; align-items: flex-end; width: 100%; }
.wv-mtt__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.wv-mtt__img { width: 440px; max-width: 100%; height: auto; flex-shrink: 0; }
/* unified-platform chevrons: white cells on the pale band */
.stages--wv .stage { background: #fff; }
/* workforce-management header: fixed 440px title column + free-flow copy */
.wv-intro { display: flex; gap: 80px; align-items: center; width: 100%; }
.wv-intro__head { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.wv-intro__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* bordered 5-col label grid (same 1.25px line-collapse as .vis-grid/.em-grid) */
.wv-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25px;
width: 100%;
background: var(--c-line);
border: 1.25px solid var(--c-line); border-radius: var(--r-md);
overflow: hidden;
}
.wv-cell {
/* top-aligned so icons and labels line up across a row (labels wrap 1–2 lines) */
min-height: 180px; padding: 32px 24px 24px;
background: #fff;
display: flex; flex-direction: column; justify-content: flex-start; gap: 16px;
}
.wv-cell h3 {
margin: 0;
font-family: var(--f-alt); font-weight: 400; font-size: 20px; line-height: 1.4;
letter-spacing: -.01em; color: #4b5059;
}
/* safety card grid: 4×2 white cards split by hairline gaps on the pale band */
.wv-safe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25px; width: 100%; border-radius: var(--r-md); overflow: hidden; }
.wv-safe__card {
/* top-aligned so icons, titles and bullet lists line up across a row */
min-height: 200px; padding: 24px 28px 20px;
background: #fff;
display: flex; flex-direction: column; justify-content: flex-start; gap: 8px;
}
.wv-safe__card h3 {
margin: 0;
/* reserve two title lines so the bullet lists start on the same baseline */
min-height: 56px;
font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.4;
letter-spacing: -.01em; color: #4b5059;
}
.wv-safe__card ul { margin: 0; padding-left: 24px; }
.wv-safe__card li { font: 400 16px/1.2 var(--f-body); color: var(--c-ink); }
/* timesheets row: chip list left, briefing photo right */
.wv-ts { display: flex; gap: 40px; align-items: center; width: 100%; }
.wv-ts__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.wv-ts__img { width: 520px; max-width: 100%; height: auto; flex-shrink: 0; border-radius: var(--r-md); }
@media (max-width: 1100px) {
.wv-mtt, .wv-ts { flex-direction: column; align-items: flex-start; }
.wv-mtt__img, .wv-ts__img { width: 100%; }
.wv-intro { flex-direction: column; gap: 24px; }
.wv-intro__head { width: 100%; }
.wv-grid { grid-template-columns: repeat(3, 1fr); }
.wv-cell { min-height: 140px; }
.wv-safe { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.wv-qs { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
.wv-grid { grid-template-columns: 1fr 1fr; }
.wv-safe { grid-template-columns: 1fr; }
}