/* ═══════════════════════════════════════════════════════════════════════════ ai-ops-hub.css Industry hub layout (6 instances: finance / sales / people / operations / engineering / marketing). All scoped under `.ai-ops-hub-body`. Inner classes use the `.ai-ops-hub-` prefix. Visual parity with home + use-case templates: dark Poppins theme, gradient buttons, glassmorphic cards. Compare-table reuses the home's `.ao-cell--us` / `.ao-cell-tick` pattern (renamed from --aiops to --us here so it matches the prototype semantic). Sources: Figma node 29129:620 (1440 × 6858 dark home of /finance/) Prototype HTML at ai-demos/.../wwwroot/{role}/index.html (light theme, used for content + section structure only) ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ LAYOUT PRIMITIVES — full-bleed sections, content max centered ═══════════════════════════════════════════════════════════════════════════ */ .ai-ops-hub-body .ai-ops-hub-section { position: relative; width: 100%; /* F-75 (2026-05-23): horizontal padding uses the same centered-anchor formula the hero override already uses. At ≤1640px viewports the calc resolves ≤ 64px and `max()` returns the flat 64px gutter (same behavior as before); at >1640px viewports every section's left/right edges align with the hero. Pre-F-75 the flat `var(--ao-section-pad-x)` left a visible "step" between hero and body sections on wide monitors. */ padding-top: var(--ao-section-pad-y); padding-bottom: var(--ao-section-pad-y); padding-left: max(var(--ao-section-pad-x), calc(50% - var(--ao-design-half-width) + var(--ao-section-pad-x))); padding-right: max(var(--ao-section-pad-x), calc(50% - var(--ao-design-half-width) + var(--ao-section-pad-x))); box-sizing: border-box; } .ai-ops-hub-body .ai-ops-hub-section > * { max-width: var(--ao-content-max); margin-left: auto; margin-right: auto; } /* Hero left-anchored, no right-anchor max */ .ai-ops-hub-body .ai-ops-hub-section--hero { padding-top: var(--ao-hero-pad-top); /* v0.1.46: bottom 80 → 100 to match home's section padding rhythm. */ padding-bottom: var(--ao-section-pad-y); /* v1.0.26 (F-045): align hero content to the same x as the nav wordmark via the centered-1440 anchor (matches use-case Hero v1.0.5 F-023). Without this the hub hero stays at flat 100px padding while the nav wordmark drifts right at viewports >1480. */ padding-left: max(var(--ao-section-pad-x), calc(50% - var(--ao-design-half-width) + var(--ao-section-pad-x))); padding-right: max(var(--ao-section-pad-x), calc(50% - var(--ao-design-half-width) + var(--ao-section-pad-x))); } /* Section header — centered + left variants */ .ai-ops-hub-body .ai-ops-uc-shead { display: flex; flex-direction: column; gap: 16px; text-align: center; align-items: center; max-width: var(--ao-shead-max); margin: 0 auto 56px; } .ai-ops-hub-body .ai-ops-uc-shead > * { margin: 0 !important; } .ai-ops-hub-body .ai-ops-hub-shead--center { align-items: center; text-align: center; } /* v0.1.47: .ai-ops-hub-h2 + .ai-ops-hub-shead-sub rules deleted — hub partials now use .ai-ops-h-h3 + .ai-ops-h-shead-sub (re-scoped to .ai-ops-body in home.css), so the same spec applies without duplication. Saves ~16 lines. */ /* ═══════════════════════════════════════════════════════════════════════════ HUB BREADCRUMB — "Home › Finance" sits above the hero content frame. v0.1.32: lets visitors navigate up to home from any hub. Absolute-positioned at the top-left of the hero (matches the use-case template breadcrumb convention). ═══════════════════════════════════════════════════════════════════════════ */ .ai-ops-hub-body .ai-ops-hub-breadcrumb { position: absolute; top: var(--ao-breadcrumb-top); /* v1.3.8 (2026-05-18, UI-AUDIT UI-S03): the v1.3.4 `left: 0` assumed the containing block was the padding-box of the section, so `0` would land flush with the inside of the section's padding. That's true for plain `position: relative` containers, but the hub hero section uses an asymmetric dynamic `padding-left: max(var(--ao-section-pad-x), calc(50% - var(--ao-design-half-width) + var(--ao-section-pad-x)))` formula that anchors hero content to a centered design grid at viewports >1640. The browser's containing block for an absolutely-positioned descendant is the section's padding-box edge — but `left: 0` lands at the left padding-box edge (which equals padding-left=0 in viewport space, not where the hero text starts). At 2560px viewport, hero text starts at x≈524 while the breadcrumb was rendering at x=0 — a 524px misalignment caught by the 2026-05-18 UI audit on all 6 hubs. Match the hero's same formula so the breadcrumb tracks the hero content edge at every viewport. */ left: max(var(--ao-section-pad-x), calc(50% - var(--ao-design-half-width) + var(--ao-section-pad-x))); display: inline-flex; align-items: center; gap: 12px; font-family: var(--ao-font); font-size: 16px; line-height: 1.7; letter-spacing: 0.32px; color: var(--ao-text-muted); z-index: 3; } .ai-ops-hub-body .ai-ops-hub-breadcrumb a { color: var(--ao-text-muted); text-decoration: none; transition: color 0.15s ease; } .ai-ops-hub-body .ai-ops-hub-breadcrumb a:hover { color: var(--ao-link-hover); } .ai-ops-hub-body .ai-ops-hub-breadcrumb-sep { color: var(--ao-text-faded); } .ai-ops-hub-body .ai-ops-hub-breadcrumb-current { color: var(--ao-text-primary); font-weight: 500; } /* ═══════════════════════════════════════════════════════════════════════════ 01 · HERO — eyebrow + H1 + sub + 2 CTAs + footnote + competitor note ═══════════════════════════════════════════════════════════════════════════ */ .ai-ops-hub-body .ai-ops-hub-section--hero { overflow: hidden; /* v1.0.25: section is transparent — `.ai-ops-uc-top` wrapper (shared.css) paints the gradient canvas covering Hero + Compare so the boundary between them is a continuous tonal slope. */ background: transparent; } /* F-47 (2026-05-22, Stas direction): card-mode hero only. Bleed-mode sections carry both `--hero` AND `--hero-bg-video` and already set their own sizing via `aspect-ratio: 16/9 + min-height: 580px` (see bleed-mode rule below); we must NOT apply the card-mode cap to them. The `:not(--hero-bg-video)` guard keeps the two modes isolated. Card-mode hero is now a capped-height container so the recording can be absolutely positioned, pinned to the section's right edge, and stretched to the section's full height. `overflow: hidden` (above) clips any natural-width overflow on the left cleanly. `position: relative` is the anchor for the absolute video element. */ /* F-47 (2026-05-22, iteration 7 — full .ai-ops-uc-top background, FINALLY anchored correctly): The base rule `.ai-ops-hub-body .ai-ops-hub-section` (line 22) sets `position: relative` on EVERY hub section — that's why prior iterations of the video kept anchoring to the section instead of `.ai-ops-uc-top`. We explicitly flip the card-mode hero section back to `position: static` (higher specificity wins) so the absolute video wrapper walks up the DOM and lands on `.ai-ops-uc-top` (which is `position: relative` via `ai-ops-shared.css:544`). Bleed-mode is explicitly excluded via `:not(--hero-bg-video)` so its own positioning stays intact. The breadcrumb (also position:absolute) continues to anchor to `.ai-ops-uc-top` and lands at the same visual position because the section and `.ai-ops-uc-top` share the same left edge (no inset between them). */ .ai-ops-hub-body .ai-ops-uc-top { overflow: hidden; } .ai-ops-hub-body .ai-ops-hub-section--hero:not(.ai-ops-hub-section--hero-bg-video) { position: static; min-height: 580px; } .ai-ops-hub-body .ai-ops-hub-hero-inner { max-width: 620px; position: relative; z-index: 2; margin-left: 0; } /* Hero 2-column grid (Figma 29476:5452 et al — copy 620, mock 480, gap 80). F-105 (2026-05-10): at 1440 viewport, the 1180px grid sat inside a 1240px content area with 60px of slack on the right, so the mock image right-edge sat 60px short of where compare/benefits sections extend below. Adding `justify-content: space-between` pins the mock to the right edge of the content area, matching the right edge of every section below for a clean vertical scroll alignment. */ .ai-ops-hub-body .ai-ops-hub-hero-grid { /* F-47 (2026-05-22, iteration 6): `position: relative` REMOVED. It was creating a positioning context that stole the absolute video wrapper's anchor from `.ai-ops-uc-top`. The text column inside (`.ai-ops-hub-hero-inner`) still has its own `position: relative; z-index: 2` so it stays above the video. The grid stays as flexbox layout for the text content only — the video is no longer flowed inside it. */ display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 64px; /* v1.3.4 (2026-05-15): override the inherited `.ai-ops-hub-section > * { margin: 0 auto }` rule so the grid's left edge sits flush with the section's left padding instead of getting auto-centered inside the 1280-wide content cap. Keeps hero copy aligned with the breadcrumb and the nav wordmark — all three share the same x position. */ margin-left: 0; } /* F-47 (2026-05-22): text column flexes to fill remaining space; cap at 600px so the hero copy doesn't grow indefinitely on ultra-wide viewports. `min-width: 0` lets the column shrink below its content minimum when the visual demands more room. */ .ai-ops-hub-body .ai-ops-hub-hero-grid .ai-ops-hub-hero-inner { flex: 1 1 auto; min-width: 0; max-width: 600px; } .ai-ops-hub-body .ai-ops-hub-hero-visual { /* F-47 (2026-05-22, iteration 5 — full background): the video wrapper now covers the entire hero section (inset: 0 = top:0 right:0 bottom:0 left:0). The video inside uses object-fit: cover with object-position: right so when cropping is needed to fill the section, the right-side content of the frame (the subject) stays visible. Pattern is identical to bleed- mode's `.ai-ops-hub-hero-bg-video` rule but kept under the card-mode selector chain so the existing bleed-mode rules are unaffected. */ margin: 0; position: absolute; inset: 0; } /* v1.3.1: video variant — autoplay/muted/loop ambient scene on the right side of the hero. Pattern modeled on stand.chat: no controls chrome, the video reads as a "window" into a moment. The poster image (first frame) loads instantly while the mp4 streams in, so there's no flash of empty container. Subtle border-radius + 1px inner stroke + soft halo glow reinforces the "screen" feel. */ .ai-ops-hub-body .ai-ops-hub-hero-visual--video { /* F-47 (2026-05-22, iteration 3): card-style chrome (border-radius, glow shadow, 1px inner stroke) all removed — the video is now a background layer, not a window-style card. `position: absolute` reinforces the base wrapper's right-pin in case ordering shifts. The ::after border pseudo is also removed. */ position: absolute; z-index: 0; } /* F-47 (2026-05-22, iteration 5 — full background): left-to-right darkening gradient covering the full section so the hero copy stays readable on top of the video background. Stronger on the left (where text lives) and fades to transparent on the right (where the recording's subject sits). Mirrors bleed-mode's overlay. */ .ai-ops-hub-body .ai-ops-hub-hero-visual--video::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to right, rgba(16, 16, 16, 0.92) 0%, rgba(16, 16, 16, 0.75) 25%, rgba(16, 16, 16, 0.35) 55%, rgba(16, 16, 16, 0) 80% ); z-index: 1; pointer-events: none; } .ai-ops-hub-body .ai-ops-hub-hero-video { /* F-47 (2026-05-22, iteration 5 — full background): fill the entire hero section. object-fit: cover scales the video to fully cover the section while preserving its aspect ratio (crops at edges that overflow). object-position: right keeps the right side of each frame visible when cropping is needed — the recordings frame their subjects on the right, so this preserves them. Standard CSS background-image: cover pattern. */ display: block; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: right center; /* Dark plate fills the bounding box before the first frame paints — also covers any letterboxing if a future recording ships at a non-16:9 ratio. */ background: #0e0e0e; /* F-47: smooth in so the first paint is the dark plate (which matches the surrounding section), then the recording fades in once playback starts. JS orchestrator on the bleed variant already handles this; the card-mode video relied on autoplay's native transition which read as a flash on slow networks. */ transition: opacity 280ms ease; } /* ─────────────────────────────────────────────────────────────────────── v1.3.4 (Finance + People hubs): full-bleed BACKGROUND video variant. Pattern follows the Apple/Stripe/Linear hero — the video covers the entire hero section as a backdrop; the text floats on top with a horizontal darkening overlay on the text side for legibility. Replaces the earlier (v1.3.2) two-column right-side bleed which felt cropped at typical viewports. Architecture: ─ `
` becomes positioning context with overflow hidden. ─ A direct-child `