/* ===================================================================== interior.css — CyMobility interior content pages Shared, page-scoped styles for the interior landing pages that all use the same template: .page-industry — Automotive OEMs, Tier-1/Tier-2 Suppliers, Connected Devices & IoT .page-services — the Services hub (/services/) Sits on top of the shared About design system (styles.css) + header/footer chrome (site-chrome.css), exactly like contact.css. Reuses the About panels (.hero, .grid-header, .cards-grid/.card, .stats/.stat-strip, .btn-primary) and only adds what the template needs: hero reg-pills, a dark intro band, a capability grid, a typographic stage flow (.jflow) / coverage / obligations block, a proof strip, a FAQ accordion, related-link cards and a final CTA. All new class names are ind-* / svc-* / hero-pills to avoid the generic class collisions noted for this codebase. Was industries.css until the Services hub adopted the same template. The components below are deliberately shared by BOTH page families — a change here lands on Industries and Services at once, which is the point. Rules that only ever apply to one family stay scoped to that family's class (.page-oem / .page-supplier / .page-iot / .page-services). Colour note: this codebase's accent is BLUE (--color-cyan-1 #4d7fe6), NOT the teal the content spec references — we follow the live About/ Contact system so every page matches. Crimson (#d1274f) is reserved strictly for loss-of-approval / deadline / fine language, per the spec. ===================================================================== */ .page-industry, .page-services { --ind-crimson: #d1274f; } /* ============================ SECTION 1 — Hero ======================= */ /* Keep the About page's dark, left-aligned authority hero (breadcrumb-as- eyebrow + ambient node grid), just a touch more compact for a sub-page, and add the regulation pills + single CTA. No accent bar — decorative gradient bars are removed site-wide. */ .page-industry .hero, .page-services .hero { justify-content: flex-start; min-height: 54vh; /* Tighter top so the header doesn't leave a big empty band above the h1. */ padding: clamp(40px, 4.6vw, 66px) 8% 66px; } .page-industry .hero-content, .page-services .hero-content { max-width: 68ch; } /* Keeps a term whole across a line break. A hyphen is a break opportunity, so "AIS-190" was free to split into "AIS-" / "190" across two lines of the hero headline. Wrap the TOKEN only, never a whole phrase — pinning "AIS-189 / AIS-190" as one unit would overflow the hero on a narrow screen, where the h1 is still 48px. */ .nb { white-space: nowrap; } .page-industry .hero .sub-headline, .page-services .hero .sub-headline { max-width: 62ch; } /* ============ Industry hero with a motion figure (.page-ind-anim) ========== The Industry equivalent of .page-svc-anim in services.css, which these pages cannot use because they do not load that sheet. Same arrangement, same class names on the markup (.hero-head / .hero-anim / .hero-scan), so the platform, services and industries heroes are one system rather than three dialects. Opt-in on , so any Industry page without a graphic keeps the plain left-aligned hero untouched. .hero already carries position: relative, overflow: hidden and isolation: isolate from styles.css, so nothing here needs to touch stacking order. */ .page-ind-anim .hero-head { position: relative; z-index: 1; } .page-ind-anim .hero-content { position: relative; z-index: 1; max-width: 56ch; } /* The copy column is roughly half the width it had as a full-bleed hero, so the heading must be allowed to wrap rather than break mid-word. It runs at the shared site-wide hero scale (--fs-hero-h1, css/styles.css); only the wrapping behaviour is page-specific. */ .page-ind-anim .hero h1 { font-size: var(--fs-hero-h1); line-height: var(--lh-hero-h1); overflow-wrap: normal; word-break: normal; } .page-ind-anim .hero .sub-headline { max-width: 52ch; font-size: var(--fs-hero-lede); } .page-ind-anim .hero-anim { position: relative; width: 100%; max-width: 600px; height: clamp(430px, 58vh, 580px); } /* No mask: these are labelled diagrams, and a radial feather would clip the very labels they exist to show. */ .page-ind-anim .hero-scan { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } @media (min-width: 901px) { .page-ind-anim .hero { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 42vw, 600px); grid-template-areas: "head figure" "content figure"; column-gap: clamp(24px, 3vw, 48px); align-items: center; align-content: center; } .page-ind-anim .hero-head { grid-area: head; align-self: end; } .page-ind-anim .hero-content { grid-area: content; align-self: start; } .page-ind-anim .hero-anim { grid-area: figure; align-self: center; } } /* Stacked: heading -> figure -> copy, in DOM order. */ @media (max-width: 900px) { .page-ind-anim .hero { min-height: auto; overflow-x: clip; } .page-ind-anim .hero h1 { max-width: 100%; } .page-ind-anim .hero-content { max-width: 100%; } .page-ind-anim .hero-anim { width: 420px; max-width: 92vw; height: 420px; margin: 1.2rem auto 0.4rem; } } /* Regulation pills */ .page-industry .hero-pills, .page-services .hero-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.9rem 0 0; } .page-industry .hero-pills li, .page-services .hero-pills li { font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.01em; color: #fff; background: rgba(73, 41, 154, 0.55); border: 1px solid rgba(130, 130, 159, 0.28); padding: 0.44rem 0.95rem; border-radius: 20px; backdrop-filter: blur(4px); /* Same hover as the homepage's .pill: a small lift + a brighter edge */ transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out); } .page-industry .hero-pills li:hover, .page-services .hero-pills li:hover { transform: translateY(-3px); border-color: rgba(77, 127, 230, 0.75); background: rgba(73, 41, 154, 0.75); } .page-industry .hero-cta, .page-services .hero-cta { margin-top: 2.4rem; } /* ========= SECTION 2 — The Reality / Why It Matters (LIGHT) ========== */ /* Shared: the Industry pages' "reality" intro band and the Services sub-pages' "Why It Matters" band are the same object — the LIGHT beat that follows the dark hero. It used to be dark navy, attached under the dark hero the way About attaches its stat strip. That made the hero and the section below it read as one undifferentiated block of navy. The rule now is one dark section, then one light section: the dark hero is followed by a light band, so the two are plainly separate while the page still reads as the About template. Lavender rather than white, because the capability grid directly below is white — lavender keeps every neighbouring band a different tone. */ .page-industry .ind-reality, .page-services .ind-reality { background: var(--color-lavender); padding: clamp(72px, 9vw, 120px) 8%; box-shadow: inset 0 10px 30px rgba(0,0,59,.02), inset 0 -10px 30px rgba(0,0,59,.02); } .page-industry .reality-inner, .page-services .reality-inner { max-width: 820px; margin: 0 auto; } .page-industry .ind-reality h2, .page-services .ind-reality h2 { color: var(--color-navy); font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 1.6rem; } .page-industry .ind-reality p, .page-services .ind-reality p { color: rgba(0, 0, 59, 0.8); font-size: 1.14rem; line-height: 1.75; max-width: 760px; } .page-industry .ind-reality p + p, .page-services .ind-reality p + p { margin-top: 1.3rem; } /* Crimson reserved for loss-of-approval / deadline / fine language only. The full-strength crimson works here; the rose tint was only for the dark band. */ .page-industry .ind-reality .fine, .page-services .ind-reality .fine { color: var(--ind-crimson); font-weight: 600; } .page-industry .ind-reality strong, .page-services .ind-reality strong { color: var(--color-navy); } /* An optional emphasis card that sits inside the reality section. White on the lavender ground, with the soft resting shadow the other light cards carry. */ .page-industry .reality-note, .page-services .reality-note { margin-top: 2.2rem; background: var(--color-white); border: 1px solid rgba(73, 41, 154, 0.14); border-radius: 12px; padding: 1.4rem 1.6rem; color: rgba(0, 0, 59, 0.8); font-size: 1.05rem; line-height: 1.65; box-shadow: 0 6px 22px rgba(0, 0, 59, 0.06); } .page-industry .reality-note strong, .page-services .reality-note strong { color: var(--color-navy); } .page-industry .reality-note a, .page-services .reality-note a { color: var(--color-purple); font-weight: 600; } /* ================= SECTION 3 — Capability card grid (light) ========= */ .page-industry .ind-caps, .page-services .ind-caps { background: var(--color-white); } .page-industry .ind-caps .cards-grid, .page-services .ind-caps .cards-grid { grid-template-columns: repeat(3, 1fr); } .page-industry .cap-ico, .page-services .cap-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(73, 41, 154, 0.08); color: var(--color-purple); margin-bottom: 1.3rem; transition: var(--transition-smooth); } .page-industry .cap-ico svg, .page-services .cap-ico svg { width: 24px; height: 24px; } .page-industry .card:hover .cap-ico, .page-services .card:hover .cap-ico { color: var(--color-cyan-1); background: rgba(77, 127, 230, 0.12); } /* The capability cards drop the big index numeral used on About's pillar grid; the icon carries the visual weight instead. */ .page-industry .ind-caps .card, .page-services .ind-caps .card { display: flex; flex-direction: column; } .page-industry .ind-caps .card-link, .page-services .ind-caps .card-link { margin-top: auto; } /* Engine names (security.core, threat.core, vulnerability.core, pentest.core) get NO special styling whatsoever — they inherit the font, size, weight and colour of whatever text they sit in, so the page reads with one uniform font throughout. `` is kept purely as semantic markup; it must never reintroduce a monospace face, a chip background, or its own colour. */ .page-industry code, .page-services code { font: inherit; color: inherit; background: none; padding: 0; border-radius: 0; } /* ============ SECTION 4a — Type-approval / conformity journey (dark) = */ .page-industry .ind-journey, .page-services .ind-journey { background: linear-gradient(160deg, #05052c 0%, var(--color-navy) 60%, #0b0838 100%); padding: clamp(72px, 9vw, 120px) 8%; } .page-industry .ind-journey .grid-header h2, .page-services .ind-journey .grid-header h2 { color: #fff; } /* Typographic flow — the third design for this block. Not the boxed cards with arrows (v1) and not the gradient rail through circular nodes (v2): here the numerals ARE the structure, so there is no rail, no node, no box and no line of any kind. Restraint does the work; the only "device" is the type. The one meaningful contrast: 01-04 sit ghosted because they are a finite project that ends at type approval, while 05 is lit and labelled because monitoring runs for the vehicle's life. That is the "and Beyond" in the heading, encoded rather than decorated. */ .page-industry .jflow, .page-services .jflow { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.6rem, 2.6vw, 3rem); max-width: 1180px; margin: 0 auto; padding: 0; } /* Cards match the EU-CRA "obligation" cards: soft purple-gradient fill + light purple border, lifting to a blue edge + glow on hover. */ .page-industry .jflow-step, .page-services .jflow-step { position: relative; background: linear-gradient(180deg, rgba(52, 28, 122, 0.55), rgba(38, 20, 92, 0.62)); border: 1px solid rgba(160, 140, 235, 0.32); border-radius: 14px; padding: 1.8rem 1.6rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: var(--transition-smooth); } .page-industry .jflow-step:hover, .page-services .jflow-step:hover { transform: translateY(-6px); border-color: rgba(143, 180, 255, 0.75); background: linear-gradient(180deg, rgba(63, 35, 146, 0.62), rgba(45, 24, 108, 0.7)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 38px rgba(10, 4, 40, 0.45); } .page-industry .jflow-n, .page-services .jflow-n { display: block; /* No font-family of its own — inherits the page's default body font, like the text beside it. Only size/colour are set here. */ font-size: clamp(2.6rem, 4.2vw, 3.9rem); font-weight: 700; line-height: 0.9; color: rgba(255, 255, 255, 0.13); margin-bottom: 1.15rem; font-variant-numeric: tabular-nums lining-nums; transition: color 0.35s var(--ease-out); } .page-industry .jflow-step:hover .jflow-n, .page-services .jflow-step:hover .jflow-n { color: rgba(255, 255, 255, 0.26); } .page-industry .jflow-step h3, .page-services .jflow-step h3 { color: #fff; font-size: 1.2rem; margin-bottom: 0.55rem; } .page-industry .jflow-step p, .page-services .jflow-step p { color: var(--color-text-light); opacity: 0.78; font-size: 0.94rem; line-height: 1.65; margin: 0; } /* Every numeral is the same colour — 05 is not singled out by colour. The "Never stops" label alone carries that it is the open-ended stage. */ .page-industry .jflow-state, .page-services .jflow-state { display: inline-block; margin-top: 0.85rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8fb4ff; } /* ============ SECTION 4b — Component coverage badge grid (dark) ====== */ /* This is the Supplier page's mid-page dark band — the counterpart of About's "Our Vision" and the OEM page's journey. It has to be dark, or the page runs white → lavender → white → lavender and never gets the dark beat the About rhythm depends on. Same gradient as the journey band so the two interior families share one "feature band" treatment. */ .page-industry .ind-coverage { background: linear-gradient(160deg, #05052c 0%, var(--color-navy) 60%, #0b0838 100%); border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .page-industry .ind-coverage .grid-header h2 { color: #fff; } .page-industry .coverage-lead { text-align: center; max-width: 640px; margin: -1.5rem auto 2.75rem; color: var(--color-text-light); font-size: 1.08rem; } /* Mirrors the homepage's `.asset-grid` treatment (style.css): flowing, centre-aligned pill chips with a small glowing accent dot — no boxes and no per-item icons. Rebuilt on this page's tokens since the industry pages load styles.css, not style.css. On the dark band the chips take the same translucent purple glass as the hero's regulation pills, so pills-on-dark look the same everywhere. */ .page-industry .asset-grid, .page-services .asset-grid { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.1vw, 14px); max-width: 960px; margin: 0 auto; padding: 0; } .page-industry .asset-grid li, .page-services .asset-grid li { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: rgba(73, 41, 154, 0.55); border: 1px solid rgba(130, 130, 159, 0.28); backdrop-filter: blur(4px); font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: #fff; letter-spacing: -0.01em; transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out); } .page-industry .asset-grid li::before, .page-services .asset-grid li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-cyan-1); box-shadow: 0 0 8px var(--color-cyan-1); flex-shrink: 0; } .page-industry .asset-grid li:hover, .page-services .asset-grid li:hover { transform: translateY(-3px); border-color: rgba(77, 127, 230, 0.75); background: rgba(73, 41, 154, 0.75); } /* ============ SECTION 4c — EU CRA obligations cards (dark) =========== */ /* The IoT page's mid-page dark band — same role and same gradient as the Supplier coverage band and the OEM journey. See the note on .ind-coverage. */ .page-industry .ind-obligations { background: linear-gradient(160deg, #05052c 0%, var(--color-navy) 60%, #0b0838 100%); border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .page-industry .ind-obligations .grid-header h2 { color: #fff; } .page-industry .obligations-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; max-width: 1150px; margin: 0 auto; } /* Purple glass on the dark band — the same treatment as the OEM claim cards, so cards-on-dark read identically across the interior pages. */ .page-industry .obligation { flex: 1 1 300px; max-width: 360px; background: linear-gradient(180deg, rgba(52, 28, 122, 0.55), rgba(38, 20, 92, 0.62)); border: 1px solid rgba(160, 140, 235, 0.32); border-radius: 14px; padding: 1.8rem 1.6rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: var(--transition-smooth); } .page-industry .obligation:hover { transform: translateY(-4px); border-color: rgba(143, 180, 255, 0.75); background: linear-gradient(180deg, rgba(63, 35, 146, 0.62), rgba(45, 24, 108, 0.7)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 34px rgba(10, 4, 40, 0.45); } .page-industry .obligation-ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, 0.08); color: #8fb4ff; margin-bottom: 1.1rem; } .page-industry .obligation-ico svg { width: 22px; height: 22px; } .page-industry .obligation h3 { color: #fff; font-size: 1.08rem; margin-bottom: 0.5rem; } .page-industry .obligation p { color: var(--color-text-light); font-size: 0.97rem; line-height: 1.6; margin: 0; } /* ================= SECTION 5a — Board-level claim strip (white) ====== */ /* These are CLAIMS, not numbers (per the spec) — they fade in, no count-up. White, NOT the purple band it used to be: this section sits directly after the dark journey band, and the About rhythm puts white after its dark Vision band (white → DARK → white → LAVENDER → white). Purple here made two dark bands touch, which is the one thing the rhythm forbids. It also puts the OEM tail in step with the Supplier/IoT pages, whose equivalent proof section is likewise the white beat after their dark feature band. */ .page-industry .ind-claims { background: var(--color-white); padding: clamp(64px, 8vw, 104px) 8%; } .page-industry .ind-claims .claims-head { text-align: center; max-width: 820px; margin: 0 auto 3rem; } .page-industry .claims-strip { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; max-width: 1150px; margin: 0 auto; } /* Light cards on the white band — same object as the .proof-card used on the Supplier/IoT pages (soft resting shadow, lift on hover, no coloured border), so the "why trust us" block reads identically across all three Industry pages. */ .page-industry .claim { position: relative; background: var(--color-white); border: 1px solid var(--color-lavender); border-radius: 14px; padding: 2rem 1.7rem; min-height: 128px; display: flex; gap: 0.9rem; align-items: flex-start; box-shadow: 0 6px 22px rgba(0, 0, 59, 0.07); transition: var(--transition-smooth); } .page-industry .claim:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(0, 0, 59, 0.13); } .page-industry .claim svg { width: 24px; height: 24px; color: var(--color-cyan-1); flex-shrink: 0; margin-top: 2px; transition: var(--transition-smooth); } .page-industry .claim:hover svg { transform: scale(1.08); } .page-industry .claim span { color: var(--color-navy); font-family: var(--font-heading); font-weight: 500; font-size: 1.06rem; line-height: 1.5; } /* Trust line + ISO badges. On the white band it needs its own ground to read as a distinct row, so it takes the lavender tint the cards no longer carry. */ .page-industry .claims-trust { max-width: 1150px; margin: 3rem auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.6rem; background: var(--color-lavender); border-radius: 16px; padding: 1.5rem 2rem; text-align: center; } .page-industry .claims-trust p { margin: 0; color: var(--color-purple); font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; } .page-industry .claims-badges { display: flex; align-items: center; gap: 1.4rem; } .page-industry .claims-badges img { height: 62px; width: auto; } /* ================= SECTION 5b/c — Proof cards (lavender) ============= */ .page-industry .ind-proof, .page-services .ind-proof { background: var(--color-lavender); box-shadow: inset 0 10px 30px rgba(0,0,59,.02), inset 0 -10px 30px rgba(0,0,59,.02); } .page-industry .proof-grid, .page-services .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; max-width: 1100px; margin: 0 auto; } .page-industry .proof-card, .page-services .proof-card { background: var(--color-white); border: 1px solid var(--color-lavender); border-radius: 16px; padding: 2rem 1.8rem; box-shadow: 0 6px 22px rgba(0, 0, 59, 0.07); transition: var(--transition-smooth); } /* No coloured border on hover — the lift and shadow carry it. */ .page-industry .proof-card:hover, .page-services .proof-card:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(0, 0, 59, 0.13); } .page-industry .proof-tick, .page-services .proof-tick { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(77, 127, 230, 0.12); color: var(--color-cyan-1); margin-bottom: 1.15rem; } .page-industry .proof-tick svg, .page-services .proof-tick svg { width: 22px; height: 22px; } .page-industry .proof-card h3, .page-services .proof-card h3 { color: var(--color-purple); font-size: 1.14rem; margin-bottom: 0.55rem; } .page-industry .proof-card p, .page-services .proof-card p { color: rgba(0,0,59,.8); font-size: 0.99rem; line-height: 1.65; margin: 0; } .page-industry .proof-badges, .page-services .proof-badges { display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap; margin: 2.6rem auto 0; } .page-industry .proof-badges img, .page-services .proof-badges img { height: 60px; width: auto; } .page-industry .proof-badges .badge-text, .page-services .proof-badges .badge-text { font-family: var(--font-heading); font-weight: 600; color: var(--color-navy); font-size: 0.95rem; opacity: 0.8; } /* ---- Credentials block under the proof cards ---- The About page's "Certified and Backed by the Standards That Matter" band, reused inside .ind-proof. Its heading is navy and larger than the proof cards' purple h3s on purpose: it introduces the whole badge row rather than labelling a fourth card, and reading it as a card title would be wrong. .proof-badges keeps its own 2.6rem top margin, so it spaces itself off the paragraph without another rule. */ .page-industry .proof-creds, .page-services .proof-creds { max-width: 820px; margin: 3.4rem auto 0; text-align: center; } .page-industry .proof-creds h3, .page-services .proof-creds h3 { font-size: 1.6rem; color: var(--color-navy); margin-bottom: 0.9rem; } .page-industry .proof-creds p, .page-services .proof-creds p { color: rgba(0, 0, 59, 0.8); font-size: 1rem; line-height: 1.7; margin: 0; } /* ---- Credentials-only variant of the proof section ---- Where .ind-proof carries the credentials block and nothing else, the badges are the section's subject rather than a footnote under a card row, so they take the About page's 120px and its wider 3.5rem gap. The block's own top margin goes: with no cards above it, the section's padding is the spacing. */ /* .grid-header is 750px wide with a 5rem bottom margin — both sized for a card grid underneath. Here a lede follows the heading directly, so 5rem opens a gap the About page does not have, and 750px wraps a title that fits one line with room to spare. Widened and tightened, and still free to wrap narrower. */ .ind-proof--creds .grid-header { max-width: 1100px; margin-bottom: 1.6rem; } .ind-proof--creds .proof-creds { margin-top: 0; } .ind-proof--creds .proof-badges { gap: 3.5rem; margin-top: 3.2rem; } .ind-proof--creds .proof-badges img { height: 120px; } @media (max-width: 640px) { .ind-proof--creds .proof-badges { gap: 2rem; } .ind-proof--creds .proof-badges img { height: 92px; } } /* ---- Dark-band variant of the "What You Receive" proof section ---- Opt-in per page by adding `ind-proof--dark` to the .ind-proof section. Reuses the same feature-band gradient as the journey / coverage bands. */ .page-industry .ind-proof.ind-proof--dark, .page-services .ind-proof.ind-proof--dark { background: linear-gradient(160deg, #05052c 0%, var(--color-navy) 60%, #0b0838 100%); box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.18), inset 0 -10px 30px rgba(0, 0, 0, 0.18); border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .ind-proof--dark .grid-header h2 { color: #fff; } .ind-proof--dark .proof-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.09); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.20); } .ind-proof--dark .proof-card:hover { transform: translateY(-5px); border-color: rgba(0, 204, 204, 0.45); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(0, 204, 204, 0.16); } .ind-proof--dark .proof-tick { background: rgba(0, 204, 204, 0.14); color: var(--color-cyan-1); } .ind-proof--dark .proof-card h3 { color: #ffffff; } .ind-proof--dark .proof-card p { color: rgba(255, 255, 255, 0.75); } .ind-proof--dark .proof-badges .badge-text { color: rgba(255, 255, 255, 0.82); } /* Credentials block on the dark variant. R155/R156 is a light band, so this is not exercised today — but the light rules hard-code navy, which would be near-invisible if any page opts into ind-proof--dark later. */ .ind-proof--dark .proof-creds h3 { color: #ffffff; } .ind-proof--dark .proof-creds p { color: rgba(255, 255, 255, 0.75); } /* ===================== SECTION 6 — FAQ accordion ==================== */ .page-industry .ind-faq, .page-services .ind-faq { background: var(--color-white); } .page-industry .faq-list, .page-services .faq-list { max-width: 820px; margin: 0 auto; } .page-industry .faq-item, .page-services .faq-item { border-bottom: 1px solid var(--color-lavender); } .page-industry .faq-item:first-child, .page-services .faq-item:first-child { border-top: 1px solid var(--color-lavender); } .page-industry .faq-q, .page-services .faq-q { width: 100%; text-align: left; cursor: pointer; background: none; border: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0.25rem; font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; color: var(--color-navy); transition: color 0.2s ease; } .page-industry .faq-q:hover, .page-services .faq-q:hover, .page-industry .faq-q[aria-expanded="true"], .page-services .faq-q[aria-expanded="true"] { color: var(--color-purple); } .page-industry .faq-chevron, .page-services .faq-chevron { flex-shrink: 0; width: 22px; height: 22px; color: var(--color-cyan-1); transition: transform 0.3s ease; } .page-industry .faq-q[aria-expanded="true"] .faq-chevron, .page-services .faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); } .page-industry .faq-panel, .page-services .faq-panel { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; } .page-industry .faq-panel-inner, .page-services .faq-panel-inner { padding: 0 0.25rem 1.5rem 0.25rem; color: rgba(0,0,59,.75); line-height: 1.7; } .page-industry .faq-panel-inner a, .page-services .faq-panel-inner a { color: var(--color-purple); font-weight: 600; border-bottom: 1px solid currentColor; } /* ===================== SECTION 7 — Related-link cards (lavender) ===== */ .page-industry .ind-related { background: var(--color-lavender); box-shadow: inset 0 10px 30px rgba(0,0,59,.02), inset 0 -10px 30px rgba(0,0,59,.02); } .page-industry .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; max-width: 1050px; margin: 0 auto; } /* Carries a soft shadow at rest so the cards read as designed objects without needing a hover, and a circular icon chip matching the proof cards. */ .page-industry .related-card { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-lavender); border-radius: 16px; padding: 1.9rem 1.7rem; box-shadow: 0 6px 22px rgba(0, 0, 59, 0.07); transition: var(--transition-smooth); color: inherit; } .page-industry .related-card:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(0, 0, 59, 0.13); } .page-industry .related-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(77, 127, 230, 0.12); color: var(--color-cyan-1); margin-bottom: 1.1rem; transition: var(--transition-smooth); } .page-industry .related-card:hover .related-ico { background: rgba(77, 127, 230, 0.2); transform: scale(1.06); } .page-industry .related-ico svg { width: 21px; height: 21px; } .page-industry .related-card h3 { color: var(--color-purple); font-size: 1.1rem; margin-bottom: 0.5rem; } .page-industry .related-card p { color: rgba(0,0,59,.8); font-size: 0.97rem; line-height: 1.6; margin: 0 0 1.1rem; } .page-industry .related-arrow { margin-top: auto; font-family: var(--font-heading); font-weight: 600; font-size: 0.94rem; color: var(--color-cyan-1); display: inline-flex; align-items: center; gap: 0.4rem; } /* ===================== SECTION 8 — Final CTA (dark card) ============= */ /* Mirror the About / Contact final-CTA exactly: rounded inset card, gradient fill, glowing border, slowly-spinning conic sheen, centred content, blue accent word. (--heading/--txt/--line-hi/--accent come from site-chrome.css.) */ .page-industry .final-cta, .page-services .final-cta { position: relative; overflow: hidden; background: #00003b; padding: clamp(70px, 8vw, 120px) 0; border-radius: 28px; margin: clamp(20px, 3vw, 44px) clamp(12px, 2vw, 32px); } [data-theme="light"] .page-industry .final-cta, [data-theme="light"] .page-services .final-cta { background: #EEF0FB; } .page-industry .final-cta::before, .page-services .final-cta::before, .page-industry .final-cta::after, .page-services .final-cta::after { display: none !important; } .page-industry .final-cta .final-bg, .page-services .final-cta .final-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, rgba(77, 127, 230, 0.16), rgba(90, 63, 176, 0.2)); border: 1px solid var(--line-hi); border-radius: 28px; overflow: hidden; } .page-industry .final-cta .final-bg::before, .page-services .final-cta .final-bg::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(77, 127, 230, 0.18), transparent 40%, rgba(90, 63, 176, 0.16), transparent 75%); animation: spin 16s linear infinite; } @media (prefers-reduced-motion: reduce) { .page-industry .final-cta .final-bg::before, .page-services .final-cta .final-bg::before { animation: none; } } .page-industry .final-cta-content, .page-services .final-cta-content { position: relative; z-index: 2; max-width: 820px; margin-inline: auto; text-align: center; padding-inline: 6%; } .page-industry .final-cta h2, .page-services .final-cta h2 { color: var(--heading); font-size: clamp(2.1rem, 5vw, 3.1rem); } .page-industry .final-cta h2 em.accent, .page-services .final-cta h2 em.accent { font-style: italic; color: #00dddd; font-weight: 700; } .page-industry .final-cta p, .page-services .final-cta p { color: var(--txt); font-size: 1.24rem; max-width: 640px; margin-inline: auto; } .page-industry .final-cta-buttons, .page-services .final-cta-buttons { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.2rem; } .page-industry .final-cta-link, .page-services .final-cta-link { color: var(--accent); text-decoration: none; font-weight: 600; border-bottom: 0; } .page-industry .final-cta-link:hover, .page-services .final-cta-link:hover { color: var(--accent-2); } /* ======================= Section rhythm per page ===================== */ /* Every interior page follows the About page's band rhythm — one dark beat and one lavender beat, each separated by white, so no two same-tone bands ever touch. The About reference, and what each page maps onto it: About hero+stats(dark) → who(white) → vision(DARK) → pillars(white) → reach(LAVENDER) → cert(white) → cta(dark) OEM hero+reality(dark) → caps(white) → journey(DARK) → claims(white) → faq(LAVENDER) → related(white) → cta(dark) Supplier hero+reality(dark) → caps(white) → coverage(DARK) → proof(white) → faq(LAVENDER) → related(white) → cta(dark) IoT hero+reality(dark) → caps(white) → obligations(DARK) → proof(white) → faq(LAVENDER) → related(white) → cta(dark) Contact hero(dark) → paths(white) → form(DARK) → channels(white) → offices(LAVENDER) → faq(white) → cta(dark) Services hero+lifecycle(dark) → grid(white) → proof(LAVENDER) → faq(white) → cta(dark) A dark band sitting directly under the dark hero is the one allowed same-tone pair — About does it with its stat strip, and the interior pages do it with their reality/lifecycle intro band. Services carries four content sections rather than About's five, so it has no room for a mid-page dark beat; its dark band is the hero-attached one. That is why it keeps the interior.css defaults (proof lavender, faq white) while all three Industry pages flip to the tail below. Change a band's tone and you MUST re-check its neighbours here. Verify by probing each
's computed background — a pixel-run check merges two touching dark bands into one run and will report a false pass. */ .page-oem .ind-claims, .page-supplier .ind-proof, .page-iot .ind-proof { background: var(--color-white); box-shadow: none; } .page-oem .ind-faq, .page-supplier .ind-faq, .page-iot .ind-faq { background: var(--color-lavender); box-shadow: inset 0 10px 30px rgba(0,0,59,.02), inset 0 -10px 30px rgba(0,0,59,.02); } .page-oem .ind-related, .page-supplier .ind-related, .page-iot .ind-related { background: var(--color-white); box-shadow: none; } /* The default lavender hairline is invisible on the lavender band, so the FAQ dividers get a neutral navy tint here (never a purple one). The related cards need no border tint on the white ground — their resting shadow already gives them an edge. */ .page-oem .ind-faq .faq-item, .page-supplier .ind-faq .faq-item, .page-iot .ind-faq .faq-item { border-bottom-color: rgba(0, 0, 59, 0.1); } .page-oem .ind-faq .faq-item:first-child, .page-supplier .ind-faq .faq-item:first-child, .page-iot .ind-faq .faq-item:first-child { border-top-color: rgba(0, 0, 59, 0.1); } /* Note: the shared cym design system (styles.css) defines NO [data-theme="dark"] rules — the light content sections (white/lavender, navy headings) stay light in both themes; only the hero, the dark reality/journey/claim bands and the header/footer chrome respond to the toggle. These industry sections follow the same model, so no dark-theme section overrides are added here. */ /* ============================ Responsive ============================= */ @media (max-width: 1000px) { .page-industry .ind-caps .cards-grid, .page-services .ind-caps .cards-grid { grid-template-columns: repeat(2, 1fr); } /* 5 -> 2 columns; the numerals keep the reading order obvious */ .page-industry .jflow, .page-services .jflow { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; max-width: 720px; } .page-industry .claims-strip { grid-template-columns: repeat(2, 1fr); } .page-industry .proof-grid, .page-services .proof-grid, .page-industry .related-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .page-industry .ind-caps .cards-grid, .page-services .ind-caps .cards-grid { grid-template-columns: 1fr; } .page-industry .claims-strip { grid-template-columns: 1fr; } .page-industry .claims-trust { flex-direction: column; text-align: center; } }