/* ==========================================================================
iottag — industries pages stylesheet
Page-specific components for /industries/… — load AFTER main.css and
platform.css (industries pages reuse .stages / .layer-band / .sys-grid):
Contents:
1. Hero side cards (translucent pale-blue tiles on the photo hero)
2. Accountability tiles (3 staggered columns of photo labels)
3. Joined visibility strip + cream note row (mining)
4. Callout bar (blue left rule, mining)
5–8. Per-page blocks: tunnelling · bridge · critical infrastructure ·
construction & infrastructure
========================================================================== */
/* 1. HERO SIDE CARDS ------------------------------------------------------- */
.hero-cards { display: flex; flex-direction: column; gap: 8px; width: 400px; flex-shrink: 0; }
.hero-cards__row { display: flex; gap: 8px; }
.hero-card {
flex: 1 1 0; min-width: 0;
/* fixed 160px rows, as in the design — the icon + label block is centred, so
the three-line labels ("Across scaffolding systems") simply sit tighter
than the two-line ones instead of stretching the row */
height: 160px;
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: 0 20px;
}
.hero-card img { width: 24px; height: 24px; }
.hero-card__title {
margin: 0;
/* design's Heading/H6 — Ubuntu bold 20px / 1.4, -0.2px tracking.
Colour is the site's heading dark-grey (#4b5059), not the Figma
neutral-darkest, so the cards match every other heading on the site. */
font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.4;
letter-spacing: -.01em; color: #4b5059;
}
@media (max-width: 1100px) { .hero-cards { width: 100%; } }
/* --split: hero copy column sitting beside the .hero-cards grid (mining) */
.hero__content--split { flex-direction: row; align-items: center; gap: 80px; }
@media (max-width: 1100px) {
.hero__content--split { flex-direction: column; align-items: flex-start; gap: 40px; }
}
/* 2. ACCOUNTABILITY TILES (staggered 3-col photo labels) -------------------- */
.acc-tiles { display: flex; gap: 8px; width: 720px; max-width: 100%; flex-shrink: 0; }
.acc-tiles__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.acc-tiles__col--o40 { padding-top: 40px; }
.acc-tiles__col--o20 { padding-top: 20px; }
.acc-tile {
position: relative; height: 140px;
border-radius: var(--r-md); overflow: hidden;
display: flex; align-items: center;
padding: 32px;
}
.acc-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acc-tile::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.acc-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: 960px) {
.acc-tiles { flex-wrap: wrap; }
.acc-tiles__col { flex: 1 1 45%; min-width: 200px; }
.acc-tiles__col--o40, .acc-tiles__col--o20, .acc-tiles__col--o10, .acc-tiles__col--o60 { padding-top: 0; }
}
.acc-tiles__col--o60 { padding-top: 60px; }
/* smaller tile heading so longer labels ("More environmental monitoring",
"Workforce accountability") sit comfortably inside the tile */
.acc-tiles--sm .acc-tile h3 { font-size: 28px; }
.acc-tiles--xs .acc-tile h3 { font-size: 24px; }
/* --photo: unlabelled 2-col photo grid (mining "challenge" block) — the labels
these tiles used to carry now live in the .mn-checks tick list beside them */
.acc-tiles--photo { width: 480px; flex: 0 0 480px; max-width: 100%; gap: 8px; align-items: flex-start; }
.acc-tiles--photo .acc-tiles__col { gap: 8px; justify-content: flex-start; }
.acc-tiles--photo .acc-tile { height: 128px; padding: 0; }
.acc-tiles--photo .acc-tile::after { content: none; } /* no scrim — plain photos */
@media (max-width: 1100px) { .acc-tiles--photo { flex-basis: 100%; width: 100%; } }
/* two-column tick list under the mining "challenge" copy */
.mn-checks { display: flex; gap: 80px; flex-wrap: wrap; }
.mn-checks__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mn-check {
display: flex; align-items: center; gap: 4px;
font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink);
}
.mn-check img { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 1100px) { .mn-checks { gap: 40px; } }
/* 3. JOINED VISIBILITY STRIP + NOTE ----------------------------------------- */
/* wraps a .track-strip--bare and a .track-note into one bordered rounded box */
.track-wrap { width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.track-strip--bare { border: 0; border-radius: 0; }
.track-note {
min-height: 160px;
background: #fdf6e5; /* web-orange lightest */
border-top: 1px solid var(--c-line);
display: flex; align-items: center; justify-content: center; gap: 16px;
padding: 24px;
}
.track-note img { width: 48px; height: 48px; flex-shrink: 0; }
.track-note h3 {
margin: 0;
font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
letter-spacing: -.01em; color: #4b5059;
}
.track-note p { margin: 0; font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink); }
/* 4. CALLOUT BAR -------------------------------------------------------------- */
.callout { width: 100%; background: #fff; border-left: 2px solid var(--c-blue-light); padding: 40px 40px 40px 42px; }
.callout p {
margin: 0;
font-family: var(--f-alt); font-weight: 600; font-size: 20px; line-height: 1.4;
letter-spacing: -.01em; color: #4b5059;
}
/* 5. TUNNELLING (tunnelling) --------------------------------------------------- */
/* hero cards — the tunnelling design uses 150px rows and Ubuntu Regular labels
(mining's are 160px / bold), so override just those two on this page */
.hero-cards--tn .hero-card { height: 150px; }
.hero-cards--tn .hero-card__title { font-weight: 400; }
/* the project-environment photo grid reuses .acc-tiles--photo (§2); its former
tile labels now live in this two-column tick list beside the copy */
.tn-checks { display: flex; gap: 80px; flex-wrap: wrap; }
.tn-checks__col { display: flex; flex-direction: column; gap: 8px; }
.tn-check {
margin: 0; display: flex; align-items: center; gap: 4px;
font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink);
}
.tn-check .icon { font-size: 16px; color: var(--c-blue); flex-shrink: 0; }
@media (max-width: 1100px) { .tn-checks { gap: 40px; } }
/* safety grid — 5-col bordered cards with a wide cream note cell (row 2) */
.safety-grid {
display: grid; grid-template-columns: repeat(5, 1fr);
width: 100%;
background: #fff;
border: 1px solid var(--c-line); border-radius: var(--r-md);
overflow: hidden;
}
.safety-grid__cell {
min-height: 200px; padding: 24px;
display: flex; flex-direction: column; justify-content: center; gap: 16px;
border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.safety-grid__cell img { width: 44px; height: 44px; }
.safety-grid__cell h3 {
margin: 0; font-family: var(--f-alt); font-weight: 400; font-size: 24px;
line-height: 1.4; letter-spacing: -.01em; color: #4b5059;
}
/* wide highlight cell — icon beside the note on web-orange lightest */
.safety-grid__cell--note {
grid-column: span 3;
flex-direction: row; align-items: center;
background: #fdf6e5;
}
.safety-grid__cell--note img { flex-shrink: 0; }
.safety-grid__cell--note p {
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) {
.safety-grid { grid-template-columns: repeat(2, 1fr); }
.safety-grid__cell--note { grid-column: span 2; }
}
/* shorter applications strip (180px cells) */
.track-strip--s .track-strip__cell { min-height: 180px; }
/* 6. BRIDGE CONSTRUCTION & MAINTENANCE (bridge-construction-maintenance) ------ */
/* hero: 832px copy column beside the 400px tile panel (1312 − 400 − 80 gap),
laid out by the shared .hero__content--split (§1) */
.hero-copy--bridge .hero__text { max-width: none; }
/* section headings — Figma Heading/H2 is Ubuntu Medium 40px (site default is
52px); colour stays the sitewide dark grey the other pages use */
.page-bridge .h2 { font-size: 40px; }
/* joined photo strips — cards fused by 1px seams inside one rounded box */
.photo-strip { display: flex; gap: 1px; width: 100%; border-radius: var(--r-md); overflow: hidden; }
.photo-strip .photo-card { border-radius: 0; }
.photo-strip--env .photo-card { height: 240px; padding: 20px; }
/* Figma Heading/H5 — Ubuntu regular 20px / 1.4 */
.photo-strip--env .photo-card__title { font-size: 20px; font-weight: 400; line-height: 1.4; }
.photo-strip--levels .photo-card { height: 280px; padding: 32px; }
/* Figma renders these labels Ubuntu regular 24px / 1.3 (levels + conditions
strips) — the H4 style is applied but the nodes override the weight */
.photo-card__title--lg { font-size: 24px; font-weight: 400; line-height: 1.3; }
@media (max-width: 1100px) {
.photo-strip { flex-wrap: wrap; gap: 8px; }
.photo-strip .photo-card { min-width: 240px; border-radius: var(--r-md); }
}
/* a sys-grid item that takes its own full-width row under the two columns —
the long "Supporting faster…" label would otherwise widen column 1 past
.feat__copy (740px) and wrap the second column underneath it */
.sys-grid__wide { flex: 1 0 100%; }
/* callout — Figma: lead line Ubuntu bold 20px / 1.4, second line Open Sans
regular 18px / 1.2. `.callout p` outranks a lone `.callout__text`, so the
second line needs the doubled selector to get its own font off the ground. */
.page-bridge .callout p { font-weight: 700; }
.callout p.callout__text { font-family: var(--f-body); font-weight: 400; font-size: 18px; line-height: 1.2; letter-spacing: 0; color: var(--c-ink); }
/* 7. CRITICAL INFRASTRUCTURE (critical-infrastructure) ------------------------ */
/* hero overlay — Figma OVL layer: 80% diagonal navy gradient + 4px backdrop blur */
.hero__ovl--cif {
position: absolute; inset: 0; z-index: 1;
opacity: .8;
background: linear-gradient(122deg, #0c477d 0%, #2f4f5b 49%, #073459 100%);
backdrop-filter: blur(4px);
}
/* "One platform, Complete visibility" band — heading beside 2 staggered rows of layer cards */
.oneplat {
display: flex; gap: 40px; align-items: center;
width: 100%; max-width: 1280px;
filter: drop-shadow(0 20px 12px rgba(0,0,0,.08)) drop-shadow(0 8px 4px rgba(0,0,0,.03));
}
.oneplat__intro { flex: 1 1 0; min-width: 260px; display: flex; flex-direction: column; gap: 16px; }
.oneplat__cards { display: flex; flex-direction: column; gap: 20px; flex-shrink: 0; }
.oneplat__row { display: flex; gap: 20px; }
.oneplat__row--o { padding-left: 80px; }
.oneplat .layer-card { flex: 0 0 auto; width: 220px; min-height: 180px; }
@media (max-width: 1240px) {
.oneplat { flex-direction: column; align-items: flex-start; }
.oneplat__cards { width: 100%; }
.oneplat__row { flex-wrap: wrap; }
.oneplat__row--o { padding-left: 0; }
.oneplat .layer-card { flex: 1 1 200px; }
}
/* two-column intro (heading + bold subs left, running copy right) */
.split-intro { display: flex; gap: 80px; width: 100%; flex-wrap: wrap; }
.split-intro__col { flex: 1 1 0; min-width: 320px; display: flex; flex-direction: column; }
.split-intro__col--copy { justify-content: center; gap: 20px; }
/* 8. CONSTRUCTION & INFRASTRUCTURE (construction-infrastructure) -------------- */
/* hero side cards — Figma "IMG and card" (10577:6832): 140px rows, and the
label is the design's Heading/H5 (Ubuntu regular 20px) where the other
industries pages carry the bold H6 */
.hero-cards--ci .hero-card { height: 140px; }
.hero-cards--ci .hero-card__title { font-weight: 400; }
/* two-column tick list under the workforce copy — Figma 13025:9906: 80px
between the columns, 8px rows, 16px check, Open Sans 18px / 1.2 */
.ci-checks { display: flex; gap: 80px; flex-wrap: wrap; }
.ci-checks__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ci-check {
display: flex; align-items: center; gap: 4px;
font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink);
}
.ci-check img { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 1100px) { .ci-checks { gap: 40px; } }
/* the photo grid beside that list — Figma Row (10542:16167): 480px wide, three
154.67px columns of 140px tiles, 8px gaps, staggered 20 / 10 / 0 from the top */
.acc-tiles--photo.acc-tiles--h140 .acc-tile { height: 140px; }
.acc-tiles__col--o10 { padding-top: 10px; }