/* ═══════════════════════════════════════════════════════════════════════════
ai-ops-home.css
Home-page-specific layout. Sections are baked in via templates/home-sections/
partials. All selectors scoped under `.ai-ops-home-body` to avoid any
cross-template CSS leak. Inner-element selectors use the `.ai-ops-h-`
prefix (h = home).
Sources:
Figma node 29132:516 ("Home page - Kateryna's option")
Sub-nodes: 29132:521 (Hero), 29132:627 (Integrations), 29132:734
(Problem), 29132:807 (How It Works), 29132:889 (Mid-CTA), 29132:906
(Comparison), 29132:1030 (Creds + Human Control), 29132:1160
(Cost of Waiting), 29132:1205 (Social Proof), 29132:1449 (FAQ),
29132:1502 (Engage), 29132:1556 (Footer — uses shared partial).
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
LAYOUT PRIMITIVES — same as use-case (full-bleed sections, content max
centered) so the home and use-case templates share visual rhythm.
═══════════════════════════════════════════════════════════════════════════ */
.ai-ops-home-body .ai-ops-h-section {
position: relative;
width: 100%;
/* F-75 (2026-05-23): horizontal padding uses the same centered-anchor
formula the hero override already uses — `max(--ao-section-pad-x,
calc(50% - --ao-design-half-width + --ao-section-pad-x))`. At ≤1640px
viewports the calc resolves ≤ 64px and `max()` returns the flat
64px gutter (same behavior as before). At >1640px viewports it
grows so every section's left/right edges align with the hero (and
the nav wordmark, which uses the same formula). Pre-F-75 this rule
was flat `var(--ao-section-pad-x)`, which produced a visible "step"
on wide monitors where the hero text was inset further than every
section below it. Vertical padding unchanged. */
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-home-body .ai-ops-h-section > * {
max-width: var(--ao-content-max);
margin-left: auto;
margin-right: auto;
}
/* Hero is the only section with left-anchored content (620 max-width frame).
Same convention as use-case template hero.
F-110 (2026-05-10): on wide screens (>1480px), home hero text was misaligned
with the persistent "AI Ops" nav wordmark by ~220px at 1920. The nav
(shared.css:346-347), hub hero (hub.css:43-44), and use-case hero
(use-case.css:65-66) all anchor padding to a centered 1480-design-box via
`max(section-pad-x, calc(50% - design-half-width + section-pad-x))`.
Home hero was using flat `var(--ao-section-pad-x)` (constant 100px), so
its left edge stayed at x=100 while the nav padded out to x≈320. Lift the
same formula from hub/use-case here so the hero text and nav wordmark
share a left anchor at every viewport above the design width. */
.ai-ops-home-body .ai-ops-h-section--hero {
padding-top: var(--ao-hero-pad-top);
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)));
}
.ai-ops-home-body .ai-ops-h-section--hero > * {
max-width: var(--ao-hero-content-max);
margin-left: 0;
}
/* Section header (eyebrow + h2 + sub) — centered by default. The
`--left` modifier left-aligns it (used on Problem + Comparison). */
.ai-ops-home-body .ai-ops-uc-shead {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
text-align: center;
max-width: var(--ao-shead-max);
margin: 0 auto 56px;
}
.ai-ops-home-body .ai-ops-uc-shead > * { margin: 0 !important; }
/* v0.1.40 (FB-012/013): defensive — `!important` on the left modifier so
inherited center alignment from the parent .ai-ops-uc-shead rule never
silently wins (was a bug Stas spotted on the Comparison header).
Applied site-wide; affects every section that uses the modifier. */
.ai-ops-home-body .ai-ops-h-shead--left {
align-items: flex-start !important;
text-align: left !important;
/* v0.1.44: match the cards' content-max (1140px) instead of the
narrower default shead-max (900px). Header is then centered in
the SAME 1140px space as the cards/table beneath it, so both
sit at the same left edge — which also matches the Engage H3's
left edge (it lives inside an .ai-ops-h-engage-grid that's
max-width: 1140 centered). v0.1.42's `margin: 0 0` and v0.1.43's
cards-flush-left are reverted; they overshot to the section's
left padding edge instead of the cards' centered position. */
max-width: var(--ao-content-max) !important;
margin: 0 auto 48px;
}
/* Children inherit text alignment so H3 + sub also align left when the
modifier is applied. */
.ai-ops-home-body .ai-ops-h-shead--left > * {
text-align: left !important;
}
/* F-30 (2026-05-21): the eyebrow used to be centered (`align-self: center`,
v0.1.45) even when the surrounding header was left-aligned. Stas asked
for it to follow the header — left-aligned headers now also get a
left-aligned eyebrow so "THE PROBLEM" sits flush with the H2 + sub
beneath it. */
.ai-ops-home-body .ai-ops-h-shead--left .ai-ops-uc-eyebrow {
align-self: flex-start !important;
}
/* v0.1.47: .ai-ops-h-h3 + .ai-ops-h-shead-sub were re-scoped to .ai-ops-body
so other templates could reuse them — but this only worked at compile time.
At enqueue time only the per-template stylesheet loads, so home.css never
reaches hub pages.
v0.1.52: rules moved to ai-ops-shared.css (loaded by every template) where
the .ai-ops-body scope actually behaves cross-template. */
/* v0.1.47: eyebrow base rules promoted to shared.css (.ai-ops-body scope)
so home + hub + use-case + integrations all inherit the same dot+uppercase
treatment from one place. Per-section eyebrow overrides (e.g. red dot
on Problem section, line 670) stay below. */
/* ═══════════════════════════════════════════════════════════════════════════
01 · HERO
620px text frame on the left, 3 absolutely-positioned floating cards on
the right. Mic button (z-index 5, JS-injected) sits on top.
═══════════════════════════════════════════════════════════════════════════ */
.ai-ops-home-body .ai-ops-h-section--hero {
overflow: hidden;
/* v1.0.23 (F-042): luxury JPEG replaced with pure CSS gradient
stack — same atmospheric palette as use-case .ai-ops-uc-top so
hero areas across templates look consistent without depending
on a binary asset.
v1.0.32 (F-063): when wrapped in .ai-ops-uc-top, the wrapper
paints the gradient instead — overrides below set hero +
integrations to transparent so the wrapper's continuous canvas
isn't double-painted. */
background-color: #1a1a1a;
background-image:
radial-gradient(ellipse 70% 60% at 92% 8%,
rgba(80, 140, 200, 0.30) 0%,
rgba(40, 80, 130, 0) 70%),
radial-gradient(ellipse 60% 50% at 5% 25%,
rgba(0, 0, 0, 0.40) 0%,
rgba(0, 0, 0, 0) 70%),
linear-gradient(180deg,
#0e1224 0%,
#11142a 20%,
#14182e 40%,
#161a2c 60%,
#181a25 80%,
#1a1a1a 100%);
background-size: 100% 100%, 100% 100%, 100% 100%;
background-position: center, center, center;
background-repeat: no-repeat;
}
/* v1.0.32 (F-063): when hero + integrations are wrapped in the shared
.ai-ops-uc-top, the wrapper handles the atmospheric gradient — inner
sections go transparent so we don't double-paint and so the integrations
strip blends seamlessly into the wrapper's vertical slope.
v1.0.33 (F-070): wrap extended to also include 02b-targets — same
transparent-override applied so the wrapper's vertical gradient runs
continuously through the targets section too. */
.ai-ops-home-body .ai-ops-uc-top .ai-ops-h-section--hero,
.ai-ops-home-body .ai-ops-uc-top .ai-ops-h-section--integrations,
.ai-ops-home-body .ai-ops-uc-top .ai-ops-h-section--targets {
background: transparent;
}
.ai-ops-home-body .ai-ops-h-hero-text {
max-width: 620px;
position: relative;
z-index: 2;
}
.ai-ops-home-body .ai-ops-h-hero-h1 {
font-family: var(--ao-font);
font-size: 48px;
font-weight: 700;
line-height: 1.2;
/* v1.0.30: letter-spacing 0.96 → 2px to match Figma typography spec
(Tailwind `tracking-[2px]` = literal 2px, not 2% × 48). */
letter-spacing: 2px;
color: var(--ao-text-primary);
margin: 32px 0;
max-width: 620px;
}
.ai-ops-home-body .ai-ops-h-hero-sub {
font-size: 16px;
line-height: 1.7;
letter-spacing: 0.32px;
color: var(--ao-text-body);
margin: 0 0 32px;
}
/* v0.1.41: strong span color matches Figma — same as body color (#D2D2D2),
just bold weight. Was forced to white in v0.1.x; the bold weight alone
provides the visual emphasis Figma intends. */
.ai-ops-home-body .ai-ops-h-hero-sub strong {
color: var(--ao-text-body);
font-weight: 700;
}
.ai-ops-home-body .ai-ops-h-hero-sub a {
color: var(--ao-text-body);
text-decoration: underline;
}
/* ───────────────────────────────────────────────────────────────────────────
v1.26.0 (2026-05-29): home hero full-bleed background recording.
Ports the hub bleed-hero pattern (ai-ops-hub.css "hero-bg-video" block) to
the home, home-scoped. Same left-to-right gradient scrim as the hub for
text legibility. The shared ai-ops-hero-video.js (now enqueued on the home
template) crossfades poster→video by toggling `.is-playing` on the section.
Home-specific note: unlike the standalone hub hero, the home hero is stacked
INSIDE `.ai-ops-uc-top` directly above the targets section. A second,
vertical bottom-fade is layered onto the overlay so the video dissolves into
the section below instead of cutting hard. The left-to-right scrim is
identical to the hub; only the bottom fade is additive.
─────────────────────────────────────────────────────────────────────────── */
.ai-ops-home-body .ai-ops-h-section--hero-bg-video {
position: relative;
overflow: hidden;
isolation: isolate;
aspect-ratio: 16 / 9;
min-height: 580px;
}
/* The bg layers must escape the hero's centered-anchor padding + the
`.ai-ops-h-section--hero > * { max-width; margin-left:0 }` constraint so they
fill the section edge-to-edge. Selector is 3 classes → beats that 2-class rule. */
.ai-ops-home-body .ai-ops-h-section--hero-bg-video > .ai-ops-h-hero-bg-video,
.ai-ops-home-body .ai-ops-h-section--hero-bg-video > .ai-ops-h-hero-bg-poster,
.ai-ops-home-body .ai-ops-h-section--hero-bg-video > .ai-ops-h-hero-bg-overlay {
max-width: none;
margin: 0;
}
/* Poster: scene-establishing still, visible at opacity 1 on load, fades out
once the video plays. Permanent visual on mobile + reduced-motion. */
.ai-ops-home-body .ai-ops-h-hero-bg-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
opacity: 1;
transition: opacity 600ms ease-out;
pointer-events: none;
background: var(--ao-bg-deep, #0e0e0e);
}
.ai-ops-home-body .ai-ops-h-hero-bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
background: var(--ao-bg-deep, #0e0e0e);
pointer-events: none;
/* Starts hidden; .is-playing on the section fades it in. */
opacity: 0;
transition: opacity 600ms ease-out;
}
.ai-ops-home-body .ai-ops-h-section--hero-bg-video.is-playing .ai-ops-h-hero-bg-video {
opacity: 1;
}
.ai-ops-home-body .ai-ops-h-section--hero-bg-video.is-playing .ai-ops-h-hero-bg-poster {
opacity: 0;
}
/* Overlay: identical left-to-right scrim to the hub (rgba(8,12,24)) +
home-only vertical bottom fade to blend into the section below. */
.ai-ops-home-body .ai-ops-h-hero-bg-overlay {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
to right,
rgba(8, 12, 24, 0.97) 0%,
rgba(8, 12, 24, 0.86) 30%,
rgba(8, 12, 24, 0.42) 50%,
rgba(8, 12, 24, 0.00) 70%
),
linear-gradient(
to bottom,
rgba(8, 12, 24, 0.00) 65%,
rgba(8, 12, 24, 0.85) 100%
);
}
/* Lift hero text above poster/video/overlay (hub puts content at z3; the
home hero text is z2 by default — bump it in bleed mode). */
.ai-ops-home-body .ai-ops-h-section--hero-bg-video .ai-ops-h-hero-text {
z-index: 3;
}
/* Text-shadow safety net — guarantees readability on a very bright frame. */
.ai-ops-home-body .ai-ops-h-section--hero-bg-video .ai-ops-h-hero-h1 {
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.ai-ops-home-body .ai-ops-h-section--hero-bg-video .ai-ops-uc-eyebrow,
.ai-ops-home-body .ai-ops-h-section--hero-bg-video .ai-ops-h-hero-sub {
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
/* Mobile: poster-only (no video fetch). Drop the 16:9 pin so the section
tracks content height; steeper text-side + bottom gradient for legibility. */
@media (max-width: 767.98px) {
.ai-ops-home-body .ai-ops-h-section--hero-bg-video {
aspect-ratio: auto;
min-height: 580px;
}
.ai-ops-home-body .ai-ops-h-hero-bg-video {
display: none;
}
.ai-ops-home-body .ai-ops-h-hero-bg-overlay {
background:
linear-gradient(
to right,
rgba(10, 18, 38, 0.95) 0%,
rgba(10, 18, 38, 0.88) 50%,
rgba(10, 18, 38, 0.65) 80%,
rgba(10, 18, 38, 0.35) 100%
),
linear-gradient(
to bottom,
rgba(10, 18, 38, 0.0) 50%,
rgba(10, 18, 38, 0.65) 100%
);
}
}
/* Accessibility: respect reduced-motion — poster permanent, video skipped. */
@media (prefers-reduced-motion: reduce) {
.ai-ops-home-body .ai-ops-h-hero-bg-video {
display: none;
}
}
.ai-ops-home-body .ai-ops-h-hero-sub a:hover {
color: var(--ao-link-hover);
}
.ai-ops-home-body .ai-ops-h-value-stack {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
list-style: none;
margin: 0 0 40px;
padding: 0;
}
/* v0.1.40 (FB-027): value stack text color matches Figma's #A5A5A5 (was
accent in v0.1.39). Arrow glyph swapped from Unicode → glyph to the
octicon SVG asset (rendered as ![]()
, color baked into the SVG). */
.ai-ops-home-body .ai-ops-h-value-stack li {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--ao-font);
font-size: 16px;
line-height: 1.7;
letter-spacing: 0.32px;
color: #A5A5A5;
}
.ai-ops-home-body .ai-ops-h-value-stack li.sep {
color: #575757;
}
.ai-ops-home-body .ai-ops-h-value-stack .ao-arr {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* v1.3.5 (2026-05-16): the legacy 3-card mock that lived in this slot
(activity + HITL + hours-reclaimed) was retired. The hero right pane
is now the auto-cycling carousel showing the 6 role × tool panels —
rules live near the bottom of this file ("HOME HERO CAROUSEL"). The
classes `.ai-ops-h-hero-card--{activity,hitl,stat}` and supporting
`.ao-card-*` / `.ao-hitl-*` / `.ao-stat-*` rules were deleted because
no markup references them anymore. Pane base rules also retired —
carousel scopes its own positioning. */
/* ═══════════════════════════════════════════════════════════════════════════
02 · INTEGRATIONS strip
White-bordered rounded card holding 13 integration name chips.
Sits between Hero and Problem.
═══════════════════════════════════════════════════════════════════════════ */
/* v0.1.41: vertical padding bumped 32 → 64 per Figma 29132:627; section
was visibly tighter than designed in v0.1.40. Background also gains
the 2 overlay gradients Figma layers on top of the base gradient — the
horizontal blue sweep gives the strip area depth (was flatter in v0.1.40). */
.ai-ops-home-body .ai-ops-h-section--integrations {
/* F-75 (2026-05-23): horizontal padding switched to the centered-anchor
formula so this section's left/right edges align with the hero on
wide viewports (>1640). Vertical padding keeps the per-section 64
override (not the global --ao-section-pad-y) per Figma 29132:627. */
padding-top: 64px;
padding-bottom: 64px;
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)));
background:
linear-gradient(-1.71deg, #10141b 13%, rgba(16, 20, 27, 0) 63%),
linear-gradient(90deg, #080810 0%, #0b0b17 33%, #141724 57%, #1b2738 80%, #1e3854 100%),
linear-gradient(177deg, #0d121a 13%, #191a1b 87%);
}
/* F-10 (2026-05-28, Stas): add one extra break-line of breathing room
above the "Stop managing the workflow. Start managing the outcome."
(HIW) section on the home page. Bumps top padding by ~40px (≈ one
body line-height) over the global --ao-section-pad-y (72px). Scoped
to .ai-ops-home-body so hub HIW sections keep the standard rhythm. */
.ai-ops-home-body .ai-ops-h-section--hiw {
padding-top: calc(var(--ao-section-pad-y) + 40px);
}
/* v1.0.31 (F-057): "Targets we underwrite at kickoff" section. Sits
between integrations strip and problem section. 3 metric cards with
gradient-text labels + target subtitles + thesis disclaimer footer. */
/* F-76 (2026-05-23): tightened Targets→Problem section gap from ~228px
to ~144px (= standard section-to-section rhythm). Two values were
inflating the gap: (1) the section's hard-coded `100px` bottom padding
never moved to the `--ao-section-pad-y` token when F-29 dropped that
token 100→72 site-wide; (2) the row's `margin-bottom: 56px` was
orphaned in F-28 v1.5.2 when the "Targets we underwrite at kickoff…"
footer sentence was removed but its space-away margin stayed.
Switching to the token + dropping the orphan margin restores the
normal section rhythm without touching the Problem section's top
padding. */
.ai-ops-home-body .ai-ops-h-section--targets {
/* F-75 (2026-05-23): horizontal padding switched to the centered-anchor
formula so this section's left/right edges align with the hero on
wide viewports (>1640). Vertical padding still uses the global
--ao-section-pad-y token. */
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)));
background: linear-gradient(180deg, #0d121a 0%, #191a1b 100%);
}
.ai-ops-home-body .ai-ops-h-targets-row {
display: flex;
gap: 24px;
align-items: stretch;
max-width: var(--ao-content-max);
margin: 0 auto;
}
/* F-62 (2026-05-21) → restored 2026-05-23 to match Figma 29381:862.
The F-62 "final-final" plain-text variant was reverted on Stas's
direction. Cards now render with the original chrome: 3px white-24%
left border + 4×24 asymmetric padding + 10px backdrop blur + gradient-
text uppercase labels + 16px muted body sub. The base `.ai-ops-h-target-
card` rule below already carries those properties — this modifier just
sets the 4-column grid layout + gap so the base chrome takes effect.
Responsive ladder: 4-up at ≥1080px → 2×2 at ≤1080px → single column
at ≤720px (so the longer "Enterprise-Grade Security" label has room). */
.ai-ops-home-body .ai-ops-h-targets-row--cols-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1080px) {
.ai-ops-home-body .ai-ops-h-targets-row--cols-4 {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
@media (max-width: 720px) {
.ai-ops-home-body .ai-ops-h-targets-row--cols-4 {
grid-template-columns: 1fr;
gap: 24px;
}
}
.ai-ops-home-body .ai-ops-h-target-card {
flex: 1 1 0;
min-width: 0;
border-left: 3px solid rgba(255, 255, 255, 0.24);
padding: 4px 24px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.ai-ops-home-body .ai-ops-h-target-label {
font-family: var(--ao-font);
font-size: 19px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.38px;
text-transform: uppercase;
margin: 0;
background: linear-gradient(222.24deg, #50d5ff 0%, #acb9ff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
width: 100%;
/* F-62 (2026-05-21): allow wrapping for the long
"Security · Governance · Transparency" label without overflowing. */
overflow-wrap: anywhere;
}
.ai-ops-home-body .ai-ops-h-target-sub {
font-family: var(--ao-font);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
letter-spacing: 0.32px;
color: var(--ao-text-body);
margin: 0;
}
.ai-ops-home-body .ai-ops-h-targets-foot {
font-family: var(--ao-font);
font-size: 19px;
line-height: 1.6;
letter-spacing: 0.38px;
color: var(--ao-text-muted);
text-align: center;
max-width: var(--ao-content-max);
margin: 0 auto;
}
@media (max-width: 800px) {
.ai-ops-home-body .ai-ops-h-targets-row {
flex-direction: column;
gap: 32px;
}
}
/* v1.0.31 (F-054): "+1000 more integrations" link below the logo strip. */
.ai-ops-home-body .ai-ops-h-integrations-more {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 24px auto 0;
font-family: var(--ao-font);
font-size: 19px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.38px;
color: var(--ao-link);
text-decoration: none;
transition: color 0.15s ease;
}
.ai-ops-home-body .ai-ops-h-integrations-more:hover {
color: var(--ao-link-hover);
}
.ai-ops-home-body .ai-ops-h-integrations-more .ao-arrow {
transition: transform 0.15s ease;
}
.ai-ops-home-body .ai-ops-h-integrations-more:hover .ao-arrow {
transform: translateX(2px);
}
/* v0.1.42: strip rewrite — 13 prototype-style tile cards (HSL gradient
bg + favicon overlay + first-letter fallback). Replaces the v0.1.41
Simple Icons monochrome logo strip per Stas's review feedback ("use the
same library as the prototype's integrations page"). Each tile mirrors
the per-vendor card on the standalone /integrations/ page, sized
compactly so 13 fit in a single horizontal strip at desktop. */
.ai-ops-home-body .ai-ops-h-int-strip {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 12px;
padding: 16px 18px;
}
.ai-ops-home-body .ai-ops-h-int-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 0 0 auto;
width: 72px;
text-align: center;
}
.ai-ops-home-body .ai-ops-h-int-logo {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 8px;
position: relative;
overflow: hidden;
font-family: var(--ao-font);
font-weight: 700;
font-size: 20px;
color: #fff;
text-transform: uppercase;
}
.ai-ops-home-body .ai-ops-h-int-logo-letter {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ai-ops-home-body .ai-ops-h-int-logo-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
padding: 6px;
z-index: 1;
}
.ai-ops-home-body .ai-ops-h-int-name {
font-family: var(--ao-font);
font-size: 12px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.24px;
color: var(--ao-text-body);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 72px;
}
/* ═══════════════════════════════════════════════════════════════════════════
03 · PROBLEM
2-column card grid + center caption.
═══════════════════════════════════════════════════════════════════════════ */
/* v1.0.33 (F-071): Problem section paints flat #191A1B per Stas — the
v0.1.41 gradient (180deg from #0d121a → #191a1b) is gone. Tonal
continuity from the wrapper-end (#1a1a1a) into Problem now reads
cleaner; gradient was visual noise next to the cleaner Targets row
above (which is now inside the wrapper per F-070). */
.ai-ops-home-body .ai-ops-h-section--problem {
background: #191A1B;
}
.ai-ops-home-body .ai-ops-h-problem-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
/* v0.1.44: reverted to centered. Header above is now also centered
in the same 1140px content-max space (via .ai-ops-h-shead--left
max-width override), so both share the same left edge. */
margin: 0 auto 56px;
}
/* v0.1.52: .ai-ops-h-problem-card chrome moved to ai-ops-shared.css so hub
benefit cards + use-case callouts that reuse the class actually pick up
the chrome at runtime (was a P1 bug in v0.1.51 — chrome lived in home.css
only, never reached hub at enqueue time). */
/* v0.1.40 (FB-006): added `align-self: flex-start` so the icon container sits
at its natural 48×48 size at the top-left of the card instead of
stretching to fill the parent flex column. Inner ![]()
is 24×24 per the
width/height HTML attributes. */
.ai-ops-home-body .ai-ops-h-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px;
border-radius: 8px;
align-self: flex-start;
width: 48px;
height: 48px;
box-sizing: border-box;
}
.ai-ops-home-body .ai-ops-h-icon img {
display: block;
width: 24px;
height: 24px;
}
.ai-ops-home-body .ai-ops-h-icon--alert {
background: rgba(248, 113, 113, 0.10);
border: 1px solid #762424;
color: #f87171;
}
/* v0.1.40 (FB-008): Problem section eyebrow dot is RED per Figma. Default
.ai-ops-uc-eyebrow::before uses --ao-link (blue); override here. */
.ai-ops-home-body .ai-ops-h-section--problem .ai-ops-uc-eyebrow::before {
background: #F87171;
}
/* v1.0.32 (F-065): Problem tiles get a subtle red-tinted border + 12px
radius (vs. shared default `1px solid #575757` + 16px radius). Scoped to
the home Problem section so hub benefit cards / callouts that reuse
.ai-ops-h-problem-card keep their neutral border. */
.ai-ops-home-body .ai-ops-h-section--problem .ai-ops-h-problem-card {
border: 1px solid #502828;
border-radius: 12px;
}
/* v0.1.40 (FB-007): defensive — confirm the left-align modifier actually
wins over any inherited center text-align from the parent shead container
in case downstream CSS gets layered on top. */
.ai-ops-home-body .ai-ops-h-section--problem .ai-ops-h-shead--left {
text-align: left;
align-items: flex-start;
}
/* v0.1.52: .ai-ops-h-problem-card-h moved to ai-ops-shared.css for the same
cross-template reason as .ai-ops-h-problem-card above. */
.ai-ops-home-body .ai-ops-h-problem-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.ai-ops-home-body .ai-ops-h-problem-list li {
display: flex;
gap: 12px;
align-items: flex-start;
font-family: var(--ao-font);
font-size: 19px;
line-height: 1.6;
letter-spacing: 0.38px;
color: var(--ao-text-body);
}
.ai-ops-home-body .ai-ops-h-problem-list .ao-dash {
font-weight: 700;
font-size: 16px;
line-height: 1.7;
letter-spacing: 0.32px;
color: var(--ao-text-body);
flex-shrink: 0;
width: 1em;
}
.ai-ops-home-body .ai-ops-h-problem-tag {
text-align: center;
font-family: var(--ao-font);
font-size: 19px;
line-height: 1.6;
letter-spacing: 0.38px;
color: var(--ao-text-muted);
margin: 0 auto;
max-width: 800px;
}
.ai-ops-home-body .ai-ops-h-problem-tag strong {
color: #fff;
font-weight: 700;
}
/* ═══════════════════════════════════════════════════════════════════════════
04 · HOW IT WORKS — 4-step engagement lifecycle
────────────────────────────────────────────────────────────────────────────
F-91 (2026-05-23): rules moved to `ai-ops-shared.css` with `.ai-ops-body`
scope so the same section renders on every AI Ops template (home + 6 hubs).
Markup lives in `partials/how-it-works.php`. See `aiops_how_it_works_section()`
in functions.php.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
05 · MID-CTA — REMOVED in v0.1.51
═══════════════════════════════════════════════════════════════════════════ */
/* v0.1.51 (Figma alignment pass against node 28960:7796): the canonical
home Figma frame has no mid-CTA section; same for hub frame 29129:1125.
Stas-confirmed drop. The CTA reinforcement role is now served by the
bottom-of-page Final CTA (12-engage.php) only. The mid-CTA bg image
asset (assets/img/bg/midcta-bg.png) is no longer referenced — leaving
in place for now since deleting requires a release-tracking change.
To restore the section: revert to v0.1.50 + re-add the include in
page-ai-ops-home.php and page-ai-ops-hub.php. */
/* ═══════════════════════════════════════════════════════════════════════════
06 · COMPARISON TABLE — 5 cols × 7 rows, Varyence column highlighted
═══════════════════════════════════════════════════════════════════════════ */
.ai-ops-home-body .ai-ops-h-section--comparison {
background: #191a1b;
}
.ai-ops-home-body .ai-ops-h-cmp-wrap {
border-radius: 16px;
overflow: hidden;
/* v0.1.44: reverted to centered. See note on .ai-ops-h-problem-cols. */
margin: 0 auto 48px;
}
.ai-ops-home-body .ai-ops-h-cmp-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.ai-ops-home-body .ai-ops-h-cmp-table th,
.ai-ops-home-body .ai-ops-h-cmp-table td {
padding: 16px;
border-bottom: 1px solid var(--ao-bg-card-bord);
text-align: left;
vertical-align: middle;
font-family: var(--ao-font);
font-size: 16px;
line-height: 1.7;
letter-spacing: 0.32px;
color: var(--ao-text-body);
}
.ai-ops-home-body .ai-ops-h-cmp-table thead th {
color: #fff;
font-weight: 700;
}
.ai-ops-home-body .ai-ops-h-cmp-table .ao-cell--cap {
width: auto; /* fluid first column */
}
.ai-ops-home-body .ai-ops-h-cmp-table .ao-cell {
width: 160px;
}
.ai-ops-home-body .ai-ops-h-cmp-table .ao-cell--aiops {
width: 220px;
/* v1.0.30: tint hue indigo → cyan to match brand gradient (same as
Hub F-B1 fix in v1.0.28). */
background: rgba(80, 213, 255, 0.08);
border-left: 0.5px solid #fff;
border-right: 0.5px solid #fff;
text-align: center;
color: #fff;
font-weight: 500;
}
.ai-ops-home-body .ai-ops-h-cmp-table tbody tr:first-child .ao-cell--aiops {
border-top: 0.5px solid #fff;
}
.ai-ops-home-body .ai-ops-h-cmp-table tbody tr:last-child .ao-cell--aiops {
border-bottom: 0.5px solid #fff;
}
.ai-ops-home-body .ai-ops-h-cmp-table thead .ao-cell--aiops-head {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-top: 0.5px solid #fff;
}
.ai-ops-home-body .ai-ops-h-cmp-table .ao-cell-tick,
.ai-ops-home-body .ai-ops-h-cmp-table .ao-cell-cross {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-right: 6px;
font-weight: 700;
flex-shrink: 0;
}
.ai-ops-home-body .ao-cell-tick {
color: #34d399;
}
.ai-ops-home-body .ao-cell-cross {
color: #f87171;
}
.ai-ops-home-body .ai-ops-h-cmp-table .ao-cell-text {
display: inline;
}
.ai-ops-home-body .ai-ops-h-cmp-caption {
font-family: var(--ao-font);
font-size: 16px;
font-style: italic;
line-height: 1.5;
color: var(--ao-text-body);
text-align: center;
max-width: 800px;
margin: 0 auto;
}
/* ═══════════════════════════════════════════════════════════════════════════
07 · CREDS — 3 gradient-headlined cards
═══════════════════════════════════════════════════════════════════════════ */
.ai-ops-home-body .ai-ops-h-section--creds {
background: #191a1b;
padding-top: 32px;
padding-bottom: 32px;
}
.ai-ops-home-body .ai-ops-h-creds-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
.ai-ops-home-body .ai-ops-h-cred-card {
/* v1.0.32 (F-067): Stas explicitly chose `transparent` over Figma's
#272727 — keeps the credibility tiles flush with the section bg.
Border + radius preserved. */
background: transparent;
border: 1px solid #575757;
border-radius: 12px;
padding: 32px 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
.ai-ops-home-body .ai-ops-h-cred-big {
font-family: var(--ao-font);
font-size: 28px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.56px;
margin: 0;
/* v0.1.41: Figma 29132:790 spec — 238.48deg, distinct from button gradients
(245-262deg). Inlined here so the angle stays per-spec. */
background: linear-gradient(238.48deg, rgb(80, 213, 255) 0%, rgb(172, 185, 255) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ai-ops-home-body .ai-ops-h-cred-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.ai-ops-home-body .ai-ops-h-cred-head {
font-family: var(--ao-font);
font-size: 16px;
font-weight: 700;
line-height: 1.7;
letter-spacing: 0.32px;
color: #fff;
margin: 0;
}
.ai-ops-home-body .ai-ops-h-cred-text {
font-family: var(--ao-font);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
letter-spacing: 0.32px;
color: var(--ao-text-body);
margin: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
08 · HUMAN CONTROL — eyebrow + h3 + sub + 2×2 feature grid
═══════════════════════════════════════════════════════════════════════════
v0.1.52: section bg + feat grid + feat card + illustration container
+ body typography rules moved to ai-ops-shared.css (re-scoped from
.ai-ops-home-body to .ai-ops-body). Hub now uses the same DOM via
templates/hub-sections/06b-human-control.php; rules in shared.css are
loaded on every AI Ops template so the cross-template selectors
actually apply at runtime. The 4 illustration assets (control-01 to -04)
live at assets/img/illustrations/ and are referenced via the .ao-illu--*
classes; works on both home and hub. Per-page overrides (if ever needed)
can land in this section under .ai-ops-home-body or .ai-ops-hub-body
selectors below. */
/* ═══════════════════════════════════════════════════════════════════════════
09 · COST OF WAITING — 2 cards (without/with)
═══════════════════════════════════════════════════════════════════════════ */
.ai-ops-home-body .ai-ops-h-section--cost {
background: #191a1b;
}
.ai-ops-home-body .ai-ops-h-cost-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.ai-ops-home-body .ai-ops-h-cost-card {
background: var(--ao-bg-card);
/* v1.0.32 (F-069): per-tile colored borders replace v1.0.31's
neutral white border. Radius drops back to 12 per Stas's snippets
(matches Problem-tile radius from F-065). Border lives on the
--without / --with modifiers below. */
border-radius: 12px;
padding: 40px;
display: flex;
flex-direction: column;
gap: 20px;
}
.ai-ops-home-body .ai-ops-h-cost-card--without {
border: 1px solid #502828; /* red-tinted — "Without automation" */
}
.ai-ops-home-body .ai-ops-h-cost-card--with {
border: 1px solid #28503C; /* green-tinted — "With AI Ops" */
}
.ai-ops-home-body .ai-ops-h-cost-h {
font-family: var(--ao-font);
font-size: 23px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.46px;
margin: 0;
}
/* v0.1.40 (FB-016): defensive `!important` so the heading colors survive
varyence theme's `h3 { color: ... }` rules (the v0.1.39 colors were
getting overridden silently). Stas wanted gradient pill badges; we're
doing colored text per Figma — re-flag for badge treatment if Stas wants
to push beyond Figma fidelity. */
.ai-ops-home-body .ao-cost-h--red { color: #f87171 !important; }
.ai-ops-home-body .ao-cost-h--green { color: #34d399 !important; }
/* v0.1.40 (FB-015): Cost of Waiting eyebrow dot is RED per Figma — same as
FB-008 for the Problem section. Both convey urgency/pain. */
.ai-ops-home-body .ai-ops-h-section--cost .ai-ops-uc-eyebrow::before {
background: #F87171;
}
.ai-ops-home-body .ai-ops-h-cost-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.ai-ops-home-body .ai-ops-h-cost-list li {
display: flex;
gap: 12px;
align-items: flex-start;
font-family: var(--ao-font);
font-size: 16px;
line-height: 1.7;
letter-spacing: 0.32px;
color: var(--ao-text-body);
}
/* v0.1.41: ✓/✗ glyphs swapped from Unicode to Figma SVG assets per spec.
Sized explicitly so the natural intrinsic dims (24×30 / 12×12) win and
the icons sit on the body-text baseline. */
.ai-ops-home-body .ai-ops-h-cost-list li .ao-cell-tick {
display: inline-block;
width: 24px;
height: 30px;
flex-shrink: 0;
}
.ai-ops-home-body .ai-ops-h-cost-list li .ao-cell-cross {
display: inline-block;
width: 12px;
height: 12px;
flex-shrink: 0;
margin-top: 8px;
}
/* ═══════════════════════════════════════════════════════════════════════════
10 · SOCIAL PROOF — 2×2 stat cards (glassmorphic)
═══════════════════════════════════════════════════════════════════════════ */
.ai-ops-home-body .ai-ops-h-section--proof {
background:
radial-gradient(circle at 80% 30%, rgba(80, 213, 255, 0.06) 0%, rgba(80, 213, 255, 0) 60%),
#191a1b;
}
.ai-ops-home-body .ai-ops-h-proof-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 0 auto 48px;
}
.ai-ops-home-body .ai-ops-h-proof-card {
background: rgba(25, 26, 27, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 8px;
padding: 40px 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
.ai-ops-home-body .ai-ops-h-proof-num {
margin: 0;
background: var(--ao-grad-primary-tighter);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: var(--ao-font);
font-weight: 700;
letter-spacing: 0.8px;
}
.ai-ops-home-body .ai-ops-h-proof-num .ao-num-big {
font-size: 40px;
line-height: 1.2;
}
.ai-ops-home-body .ai-ops-h-proof-num .ao-num-small {
font-size: 28px;
line-height: 1.5;
letter-spacing: 0.56px;
margin-left: 6px;
}
.ai-ops-home-body .ai-ops-h-proof-label {
font-family: var(--ao-font);
font-size: 16px;
font-weight: 700;
line-height: 1.7;
letter-spacing: 0.32px;
color: #fff;
margin: 0;
}
.ai-ops-home-body .ai-ops-h-proof-body {
font-family: var(--ao-font);
font-size: 16px;
line-height: 1.7;
letter-spacing: 0.32px;
color: var(--ao-text-body);
margin: 0;
}
.ai-ops-home-body .ai-ops-h-proof-body strong {
color: #fff;
font-weight: 700;
}
.ai-ops-home-body .ai-ops-h-proof-body a {
color: var(--ao-link);
font-weight: 500;
text-decoration: underline;
}
.ai-ops-home-body .ai-ops-h-proof-tag {
text-align: center;
font-family: var(--ao-font);
font-size: 19px;
line-height: 1.6;
letter-spacing: 0.38px;
color: var(--ao-text-muted);
margin: 0 auto 24px;
max-width: 720px;
}
.ai-ops-home-body .ai-ops-h-section--proof > .ai-ops-btn {
display: inline-flex;
margin: 0 auto;
}
/* ═══════════════════════════════════════════════════════════════════════════
11 · FAQ — accordion (4 questions)
The accordion JS (ai-ops-faq.js) toggles the [data-open] attribute.
We also support native via [open]; matching CSS targets both.
═══════════════════════════════════════════════════════════════════════════ */
/* F-92 (2026-05-23): FAQ section rules moved to `ai-ops-shared.css` with
`.ai-ops-body` scope so the same accordion + chevron + answer typography
render on every AI Ops template. Hub FAQ previously degraded to raw
browser `` styling because these rules were `.ai-ops-home-body`-
scoped only. Markup lives in `partials/faq.php`. See
`aiops_faq_section()` in functions.php. */
/* ═══════════════════════════════════════════════════════════════════════════
12 · ENGAGE — two-column grid (left: copy + trust; right: form)
═══════════════════════════════════════════════════════════════════════════ */
/* v0.1.40 (FB-018): replace v0.1.x radial-gradient combo with the actual
Figma decorative shapes — luxury-bg image as base + 2 absolute-positioned
blur shapes. Reuses `assets/img/luxury-bg.jpg` (already loaded by Hero,
so no extra HTTP cost) at 180deg rotation per Figma's bottom-CTA orientation. */
/* v1.0.23 (F-042/F-043): luxury-bg-180.jpg + two engage-blur SVGs all
replaced with pure CSS gradient stack. Hero-style backdrop with
accents mirrored vertically (the section is at the bottom of the
page, so the bright accent sits bottom-right instead of top-right
like the hero). */
.ai-ops-home-body .ai-ops-h-section--engage {
position: relative;
overflow: hidden;
background-color: #1a1a1a;
background-image:
radial-gradient(ellipse 70% 60% at 92% 92%,
rgba(80, 140, 200, 0.30) 0%,
rgba(40, 80, 130, 0) 70%),
radial-gradient(ellipse 60% 50% at 5% 75%,
rgba(0, 0, 0, 0.40) 0%,
rgba(0, 0, 0, 0) 70%),
linear-gradient(180deg,
#1a1a1a 0%,
#181a25 20%,
#161a2c 45%,
#14182e 60%,
#181a25 80%,
#1a1a1a 100%);
background-size: 100% 100%, 100% 100%, 100% 100%;
background-position: center, center, center;
background-repeat: no-repeat;
}
.ai-ops-home-body .ai-ops-h-section--engage > * {
position: relative;
z-index: 1;
}
.ai-ops-home-body .ai-ops-h-engage-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.ai-ops-home-body .ai-ops-h-engage-left {
display: flex;
flex-direction: column;
gap: 24px;
}
.ai-ops-home-body .ai-ops-h-engage-left .ai-ops-h-h3 {
text-align: left;
}
.ai-ops-home-body .ai-ops-h-engage-sub {
font-family: var(--ao-font);
font-size: 16px;
line-height: 1.7;
letter-spacing: 0.32px;
color: var(--ao-text-body);
margin: 0;
}
.ai-ops-home-body .ai-ops-h-engage-trust {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.ai-ops-home-body .ai-ops-h-engage-trust li {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--ao-font);
font-size: 16px;
font-weight: 500;
line-height: 1.7;
letter-spacing: 0.32px;
color: #fff;
}
/* v0.1.40 (FB-019): trust-list ✓ swapped from Unicode glyph to Figma's
bi:check SVG asset (24×30). Tick stays white per Figma. */
.ai-ops-home-body .ai-ops-h-engage-trust li .ao-cell-tick {
display: inline-block;
width: 24px;
height: 30px;
flex-shrink: 0;
}
.ai-ops-home-body .ai-ops-h-engage-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.ai-ops-home-body .ai-ops-h-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.ai-ops-home-body .ai-ops-h-field-label {
font-family: var(--ao-font);
font-size: 14px;
font-weight: 500;
line-height: 1.55;
color: #fff;
}
.ai-ops-home-body .ai-ops-h-engage-form input,
.ai-ops-home-body .ai-ops-h-engage-form textarea {
font-family: var(--ao-font);
font-size: 16px;
line-height: 1.7;
letter-spacing: 0.32px;
color: #fff;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--ao-bg-card-bord);
border-radius: 8px;
padding: 12px 24px;
box-sizing: border-box;
width: 100%;
transition: border-color 0.15s ease, background 0.15s ease;
}
.ai-ops-home-body .ai-ops-h-engage-form input { height: 44px; }
.ai-ops-home-body .ai-ops-h-engage-form textarea { resize: vertical; min-height: 96px; }
.ai-ops-home-body .ai-ops-h-engage-form input::placeholder,
.ai-ops-home-body .ai-ops-h-engage-form textarea::placeholder {
color: var(--ao-text-faded);
}
.ai-ops-home-body .ai-ops-h-engage-form input:focus,
.ai-ops-home-body .ai-ops-h-engage-form textarea:focus {
outline: none;
border-color: var(--ao-link);
background: rgba(81, 161, 255, 0.06);
}
.ai-ops-home-body .ai-ops-h-engage-submit {
align-self: flex-start;
margin-top: 8px;
}
.ai-ops-home-body .ai-ops-h-engage-status {
font-family: var(--ao-font);
font-size: 14px;
line-height: 1.7;
color: var(--ao-text-body);
margin: 0;
min-height: 1.7em;
}
/* ═══════════════════════════════════════════════════════════════════════════
10 · ROLES
"An AI agent for every role on your team." — 6 linked role tiles +
4 dashed coming-soon tiles. Restored in v0.1.39 (was deferred from the
initial WP port; see partial docblock for slot history).
═══════════════════════════════════════════════════════════════════════════ */
/* v0.1.40 (FB-024): port the deleted Social Proof section's bg treatment.
`#191A1B` solid + 2 decorative blur shapes (purple-blur in upper-right,
smaller glow in lower-left) — gives the section the same lift the social-
proof tiles had. v0.1.39 radial-gradients are dropped in favor of the
actual Figma assets. */
.ai-ops-home-body .ai-ops-h-section--roles {
position: relative;
background: #191A1B;
overflow: hidden;
}
/* v1.0.23 (F-043): purple-blur + glow SVGs replaced with CSS radials
on ::before/::after. Same color palette (lavender purple right,
cyan-teal lower-left). */
.ai-ops-home-body .ai-ops-h-section--roles::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 60% at 95% 30%,
rgba(160, 130, 220, 0.22) 0%,
rgba(120, 90, 180, 0.10) 35%,
rgba(120, 90, 180, 0) 70%);
pointer-events: none;
z-index: 0;
}
.ai-ops-home-body .ai-ops-h-section--roles::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 35% 35% at 5% 75%,
rgba(80, 200, 220, 0.15) 0%,
rgba(60, 160, 200, 0.06) 40%,
rgba(60, 160, 200, 0) 75%);
pointer-events: none;
z-index: 0;
}
.ai-ops-home-body .ai-ops-h-section--roles > * {
position: relative;
z-index: 1;
}
/* Active tiles — 2 cols × 3 rows at desktop. Matches prototype's tile
prominence; 3-col would shrink the outcome line too tight at 1140. */
.ai-ops-home-body .ai-ops-h-roles-active {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 40px;
/* F-66 (2026-05-21): make every row's tiles match the tallest one in
the row so character anchors line up across the two columns. */
align-items: stretch;
}
.ai-ops-home-body .ai-ops-h-role-tile {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
background: var(--ao-bg-card);
border: 1px solid var(--ao-bg-card-bord);
border-radius: 16px;
text-decoration: none;
color: inherit;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
overflow: hidden;
}
/* v1.0.30: per-role mock illustration exported from Figma Group 48096843
children. 510×264 PNG, displayed at the card's content width (auto)
with object-fit: cover so the visual fills the slot at any card size. */
.ai-ops-home-body .ai-ops-h-role-mock {
display: block;
width: 100%;
height: 264px;
object-fit: cover;
object-position: center;
border-radius: 12px;
margin-bottom: 12px;
/* 2026-05-23 (Stas): flat `--ao-bg-card` matches the surrounding tile
chrome — the role tile itself uses the same color, so the mock slot
reads as a continuous card surface rather than a distinct framed
element. Previously `rgba(255, 255, 255, 0.04)` (faint white tint
designed for the old 510×264 dashboard-mock era). */
background: var(--ao-bg-card);
}
/* v1.3.4 (Finance/Sales/People): switched from 510×264 dashboard UI mocks
to free-standing 3D character renders ("welcome" series — FIN, REV, HR
robots). Source files are 1020×578 (aspect 1.764).
The default mock slot is 510×264 (aspect 1.93) — wider than the source —
which crops the top of the character when using `cover`. Fix: override
the mock to match the source aspect (`aspect-ratio: 1020/578`) and use
`contain` so the full character renders at the frame's full height with
no clipping, top or bottom. Width = 100% of tile content, height auto.
2026-05-23 (Stas): all 6 welcome PNGs were re-exported with transparent
backgrounds (rembg U²-Net pass) — so the slot's own background now
shows through. Switched from the dark blue radial-+-linear gradient
"studio backdrop" to flat `var(--ao-bg-card)`, matching the surrounding
tile chrome. Character now floats on the same card surface as the rest
of the tile, with no visible frame around the image. */
.ai-ops-home-body .ai-ops-h-role-tile--finance .ai-ops-h-role-mock,
.ai-ops-home-body .ai-ops-h-role-tile--sales .ai-ops-h-role-mock,
.ai-ops-home-body .ai-ops-h-role-tile--people .ai-ops-h-role-mock,
.ai-ops-home-body .ai-ops-h-role-tile--operations .ai-ops-h-role-mock,
.ai-ops-home-body .ai-ops-h-role-tile--engineering .ai-ops-h-role-mock,
.ai-ops-home-body .ai-ops-h-role-tile--marketing .ai-ops-h-role-mock {
height: auto;
aspect-ratio: 1020 / 578;
object-fit: contain;
object-position: center bottom;
background: var(--ao-bg-card);
}
.ai-ops-home-body a.ai-ops-h-role-tile:hover {
transform: translateY(-2px);
border-color: rgba(81, 161, 255, 0.4);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
}
.ai-ops-home-body .ai-ops-h-role-eyebrow {
font-family: var(--ao-font);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ao-text-accent);
}
.ai-ops-home-body .ai-ops-h-role-name {
font-family: var(--ao-font);
font-size: 28px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.56px;
color: var(--ao-text-primary);
}
.ai-ops-home-body .ai-ops-h-role-outcome {
font-family: var(--ao-font);
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.32px;
color: var(--ao-text-body);
/* F-66 (2026-05-21): outcomes range from 27 to 36 chars and were
wrapping to one or two lines depending on viewport, which made
neighboring tiles render at different heights and threw the
grid out of alignment. Reserve a 2-line slot so every tile
takes the same vertical space whether the outcome wraps or not. */
min-height: calc(1.6em * 2);
margin-top: 4px;
}
.ai-ops-home-body .ai-ops-h-role-link {
margin-top: auto;
padding-top: 12px;
font-family: var(--ao-font);
font-size: 16px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.32px;
color: var(--ao-link);
}
.ai-ops-home-body .ai-ops-h-role-link .ao-arr {
margin-left: 4px;
transition: transform 160ms ease;
display: inline-block;
}
.ai-ops-home-body a.ai-ops-h-role-tile:hover .ai-ops-h-role-link {
color: var(--ao-link-hover);
}
.ai-ops-home-body a.ai-ops-h-role-tile:hover .ai-ops-h-role-link .ao-arr {
transform: translateX(4px);
}
/* Coming-soon tiles — 4 cols, dashed border, no hover. The pill conveys the
roadmap commitment without making the tile look interactive. */
.ai-ops-home-body .ai-ops-h-roles-coming {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.ai-ops-home-body .ai-ops-h-role-tile--coming {
position: relative;
padding: 24px;
background: rgba(255, 255, 255, 0.02);
border: 1px dashed rgba(255, 255, 255, 0.18);
cursor: default;
}
.ai-ops-home-body .ai-ops-h-role-tile--coming:hover {
transform: none;
border-color: rgba(255, 255, 255, 0.18);
box-shadow: none;
}
.ai-ops-home-body .ai-ops-h-role-tile--coming .ai-ops-h-role-name {
font-size: 22px;
letter-spacing: 0.44px;
}
.ai-ops-home-body .ai-ops-h-role-coming-pill {
align-self: flex-start;
padding: 4px 10px;
background: rgba(81, 161, 255, 0.16);
border: 1px solid rgba(81, 161, 255, 0.32);
border-radius: 999px;
font-family: var(--ao-font);
font-size: 11px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.55px;
text-transform: uppercase;
color: var(--ao-link);
}
/* ═══════════════════════════════════════════════════════════════════════════
WHY DIFFERENT #1 — v0.1.51 (Figma 28960:7950)
3 credibility cards on a #191a1b slab. Stat headline uses gradient text;
each card has a soft top decorative gradient (blue/purple/orange).
═══════════════════════════════════════════════════════════════════════════ */
.ai-ops-home-body .ai-ops-h-section--why-different-1 {
background: #191a1b;
padding-top: 100px;
padding-bottom: 100px;
display: flex;
flex-direction: column;
align-items: center;
gap: 56px;
}
.ai-ops-home-body .ai-ops-h-section--why-different-1 .ai-ops-uc-shead--center {
max-width: 860px;
gap: 16px;
}
.ai-ops-home-body .ai-ops-h-h3--why-different {
font-size: 40px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.8px;
color: #fff;
text-align: center;
}
.ai-ops-home-body .ai-ops-h-shead-sub--tagline {
font-style: normal;
color: #d2d2d2;
}
.ai-ops-home-body .ai-ops-h-why-different-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
width: 100%;
max-width: 1140px;
}
.ai-ops-home-body .ai-ops-h-why-different-card {
position: relative;
background: #272727;
border: 1px solid #575757;
border-radius: 12px;
padding: 32px 24px;
display: flex;
flex-direction: column;
gap: 24px;
overflow: hidden;
}
.ai-ops-home-body .ai-ops-h-why-different-card::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
width: 369px;
height: 246px;
opacity: 0.6;
pointer-events: none;
background: linear-gradient(180deg, rgba(23, 25, 29, 0) 55.223%, rgba(81, 161, 255, 0.5) 100%);
}
.ai-ops-home-body .ai-ops-h-why-different-card--purple::before {
background: linear-gradient(180deg, rgba(23, 25, 29, 0) 55.223%, rgba(151, 81, 255, 0.5) 100%);
}
.ai-ops-home-body .ai-ops-h-why-different-card--orange::before {
background: linear-gradient(180deg, rgba(23, 25, 29, 0) 55.223%, rgba(255, 127, 81, 0.5) 100%);
}
.ai-ops-home-body .ai-ops-h-why-different-stat {
position: relative;
font-size: 28px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.56px;
background: linear-gradient(238.48deg, #50d5ff 0%, #acb9ff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin: 0;
}
.ai-ops-home-body .ai-ops-h-why-different-card-h {
position: relative;
font-size: 16px;
font-weight: 700;
line-height: 1.7;
letter-spacing: 0.32px;
color: #fff;
margin: 0;
}
.ai-ops-home-body .ai-ops-h-why-different-card-p {
position: relative;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
letter-spacing: 0.32px;
color: #d2d2d2;
margin: -16px 0 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
WHY DIFFERENT #2 — v0.1.51 (Figma 28960:7975)
3 step cards with mock visuals on top + Step label + H + body. Connecting
line between Steps 1↔2 rendered via pseudo-element.
═══════════════════════════════════════════════════════════════════════════ */
.ai-ops-home-body .ai-ops-h-section--why-different-2 {
background: #191a1b;
padding-top: 100px;
padding-bottom: 100px;
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
}
.ai-ops-home-body .ai-ops-h-section--why-different-2 .ai-ops-uc-shead--center {
max-width: 900px;
gap: 16px;
}
/* ───────────────────────────────────────────────────────────────────────────
v1.0.33 (F-073) — "Why AI agents?" 4-principle grid (replaces v1.0.31
Human Control / .ai-ops-h-feat-grid layout for this slot). 2×2 cards,
each with a "PRINCIPLE 0X · LABEL" eyebrow, bold headline, body text.
(The legacy mock-visual CSS rules — `.ao-term-line`, `.ao-appr-row`,
`.ai-ops-h-why-different-2-mock*`, etc. — were removed 2026-05-21
as part of the F-36/F-64 dead-code cleanup. They were never referenced
from any markup after v0.1.40.)
─────────────────────────────────────────────────────────────────────── */
.ai-ops-home-body .ai-ops-h-principles-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.ai-ops-home-body .ai-ops-h-principle {
background: #272727;
border: 1px solid #3b3b3b;
border-radius: 16px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ai-ops-home-body .ai-ops-h-principle-eyebrow {
margin: 0;
font-family: var(--ao-font);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.78px;
text-transform: uppercase;
color: #bcbcbc;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ai-ops-home-body .ao-principle-num {
/* Teal-cyan accent matching the integrations-link color from F-054.
Uses the home accent var so it tracks with the rest of the page. */
color: var(--ao-link, #51a1ff);
font-weight: 700;
}
.ai-ops-home-body .ao-principle-sep {
color: #6b6b6b;
font-weight: 400;
}
.ai-ops-home-body .ao-principle-label {
color: #bcbcbc;
}
.ai-ops-home-body .ai-ops-h-principle-h {
margin: 0;
font-family: var(--ao-font);
font-size: 23px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.46px;
color: #fff;
}
.ai-ops-home-body .ai-ops-h-principle-body {
margin: 0;
font-family: var(--ao-font);
font-size: 16px;
font-weight: 400;
line-height: 1.65;
letter-spacing: 0.32px;
color: #d2d2d2;
}
@media (max-width: 768px) {
.ai-ops-home-body .ai-ops-h-principles-grid {
grid-template-columns: minmax(0, 1fr);
}
.ai-ops-home-body .ai-ops-h-principle {
padding: 24px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
RESPONSIVE
At narrow viewports the home compresses gracefully:
- Hero right pane hides below 1300px (no horizontal room)
- 2-col grids stack to 1-col below 940px
- 3-col HIW row stacks to 1-col below 940px
- Section padding tightens
═══════════════════════════════════════════════════════════════════════════ */
/* v1.3.5 (2026-05-16): the legacy mock's "@media (max-width: 1279px) hide
the pane" rule was removed when the 3-card mock was retired. The
carousel keeps its own responsive overrides in the HOME HERO CAROUSEL
section near the bottom of this file. */
@media (max-width: 1100px) {
.ai-ops-home-body .ai-ops-h-section {
padding-left: 32px;
padding-right: 32px;
}
/* Below desktop: integrations strip already has flex-wrap; tighten
horizontal gap so 13 tiles wrap into 2-3 rows cleanly instead of
4-5 rows with wide gutters. */
.ai-ops-home-body .ai-ops-h-int-strip {
justify-content: center;
gap: 12px 10px;
}
.ai-ops-home-body .ai-ops-h-cmp-table th,
.ai-ops-home-body .ai-ops-h-cmp-table td {
font-size: 14px;
padding: 12px 8px;
}
.ai-ops-home-body .ai-ops-h-cmp-table .ao-cell { width: auto; }
.ai-ops-home-body .ai-ops-h-cmp-table .ao-cell--aiops { width: auto; }
/* F-91 (2026-05-23): HIW responsive override moved to ai-ops-shared.css
(rendered on both home + hub now). */
}
@media (max-width: 940px) {
.ai-ops-home-body .ai-ops-h-h3 { font-size: 32px; line-height: 1.2; }
.ai-ops-home-body .ai-ops-h-hero-h1 { font-size: 36px; line-height: 1.2; }
.ai-ops-home-body .ai-ops-h-problem-cols,
.ai-ops-home-body .ai-ops-h-cost-cols,
.ai-ops-home-body .ai-ops-h-creds-row,
.ai-ops-home-body .ai-ops-h-feat-grid,
.ai-ops-home-body .ai-ops-h-proof-grid,
.ai-ops-home-body .ai-ops-h-engage-grid,
.ai-ops-home-body .ai-ops-h-roles-active,
.ai-ops-home-body .ai-ops-h-roles-coming {
grid-template-columns: 1fr;
gap: 16px;
}
/* F-91 (2026-05-23): HIW @940px override moved to ai-ops-shared.css. */
.ai-ops-home-body .ai-ops-h-feat {
flex-direction: column;
height: auto;
align-items: flex-start;
}
.ai-ops-home-body .ai-ops-h-feat-illu {
width: 100%;
}
.ai-ops-home-body .ai-ops-h-cmp-table .ao-cell--aiops-head {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* Comparison table: scroll horizontally below 940 — full width forces
column compression that hurts legibility. */
.ai-ops-home-body .ai-ops-h-cmp-wrap {
overflow-x: auto;
margin-left: -16px;
margin-right: -16px;
padding: 0 16px;
}
.ai-ops-home-body .ai-ops-h-cmp-table {
min-width: 720px;
}
}
/* v1.0.36 (audit F-084): tighter mobile step for hero H1.
The existing 940px breakpoint drops H1 from 48px to 36px, which still
reads oversized at 375px viewports. Step down further at <=480px to
keep the line-count manageable on phones. */
@media (max-width: 480px) {
.ai-ops-home-body .ai-ops-h-hero-h1 {
font-size: 30px;
line-height: 1.15;
letter-spacing: 0.6px;
}
.ai-ops-home-body .ai-ops-h-h3 {
font-size: 26px;
line-height: 1.2;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
HOME HERO CAROUSEL (v1.3.5, 2026-05-16)
Auto-cycling display of the 6 role × tool panels (Finance/Outlook,
Sales/HubSpot, HR/Teams, Operations/Slack, Engineering/GitHub,
Marketing/Asana). Lives in the hero right pane as a wide
"background-style" element:
· Pane sizes itself via `aspect-ratio: 1920/1088`, so image renders
uncropped on every axis at any hero height.
· Anchored RIGHT to the same x as the legacy 3-card mock; bleeds
LEFT under the hero text column.
· z-index 1 vs hero text z-index 2 → text always reads on top.
· Each slide carries a left-side darkening scrim so the white H1 /
sub paragraph stays readable against any tool UI.
· Per-slide role badge top-right; hover-revealed prev/next arrows
bottom-right. Behaviour in assets/js/ai-ops-hero-carousel.js.
═══════════════════════════════════════════════════════════════════════════ */
.ai-ops-home-body .ai-ops-h-hero-pane.ai-ops-h-hero-carousel {
/* v1.4 (2026-05-17): contained-card variant — matches the hub card
chrome (480-560 card on the right). Reasoning: full-bleed carousel
(~1106 wide at 1440) crowded the H1 column and made AI-generated
artifacts in product mocks visible at high fidelity. Smaller frame
(~620 wide) shrinks fine detail and aligns home / hub / use-case
hero language at three apertures. The left-side scrim is dropped
(no longer needed — carousel no longer sits under text). */
position: absolute;
aspect-ratio: 1920 / 1088;
top: 50%;
bottom: auto;
transform: translateY(-50%);
left: auto;
/* Anchor to the right of the design canvas with 80px breathing room. */
right: max(80px, calc(50% - 720px + 80px));
width: min(620px, 48vw);
height: auto;
z-index: 1;
pointer-events: auto;
max-width: none !important;
display: flex;
flex-direction: column;
outline: none;
}
.ai-ops-home-body .ai-ops-h-hero-carousel:focus-visible .ai-ops-h-hero-carousel-stage {
box-shadow: 0 0 0 2px rgba(151, 199, 255, 0.55), 0 18px 40px rgba(0, 0, 0, 0.45);
}
/* Stage fills the entire pane; pane width is sized so stage aspect
matches image aspect, so `object-fit: contain` produces zero
letterbox at the design size.
v1.4 (2026-05-17): chrome upgraded to match the hub card pattern —
slightly deeper border-radius, a 1px inner stroke, and a softer cyan-
tinted halo (same recipe as `.ai-ops-hub-hero-visual--video`). */
.ai-ops-home-body .ai-ops-h-hero-carousel-stage {
position: relative;
flex: 1;
width: 100%;
min-height: 0;
background: transparent;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 18px 60px -20px rgba(80, 213, 255, 0.18),
0 8px 24px -8px rgba(0, 0, 0, 0.5);
transition: box-shadow 200ms ease;
}
.ai-ops-home-body .ai-ops-h-hero-carousel-stage::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(151, 199, 255, 0.18);
pointer-events: none;
z-index: 3;
}
.ai-ops-home-body .ai-ops-h-hero-carousel-slide {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
transition: opacity 400ms ease;
pointer-events: none;
}
.ai-ops-home-body .ai-ops-h-hero-carousel-slide.is-active {
opacity: 1;
pointer-events: auto;
}
.ai-ops-home-body .ai-ops-h-hero-carousel-img {
display: block;
width: 100%;
height: 100%;
/* `contain` (not cover) so the image is NEVER cropped on either
axis — pane width is already sized to the image's aspect. */
object-fit: contain;
object-position: right center;
}
/* Left-side darkening scrim — historically painted inside each slide
so the hero text (which used to overlay the pane) stayed readable.
v1.4 (2026-05-17): carousel is now a contained card on the right and
no longer overlaps the text column, so the scrim is no longer needed.
Selector retained as a no-op so any inline content depending on the
`::before` slot still works; gradient set to transparent. */
.ai-ops-home-body .ai-ops-h-hero-carousel-slide::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: transparent;
}
/* Hover-revealed prev/next arrows. Bottom-right cluster — visible right
portion of the pane. Hidden by default; appear on stage hover or
focus-within so the carousel reads clean while auto-scrolling. */
.ai-ops-home-body .ai-ops-h-hero-carousel-arrow {
position: absolute;
bottom: 18px;
z-index: 4;
appearance: none;
background: rgba(8, 12, 24, 0.80);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #ffffff;
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
font-family: var(--ao-font, 'Poppins'), system-ui, sans-serif;
font-size: 26px;
line-height: 1;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease, background-color 200ms ease, transform 200ms ease;
}
.ai-ops-home-body .ai-ops-h-hero-carousel-arrow--prev { right: 76px; } /* 18 + 44 + 14 gap */
.ai-ops-home-body .ai-ops-h-hero-carousel-arrow--next { right: 18px; }
.ai-ops-home-body .ai-ops-h-hero-carousel-stage:hover .ai-ops-h-hero-carousel-arrow,
.ai-ops-home-body .ai-ops-h-hero-carousel:focus-within .ai-ops-h-hero-carousel-arrow {
opacity: 1;
pointer-events: auto;
}
.ai-ops-home-body .ai-ops-h-hero-carousel-arrow:hover {
background: rgba(8, 12, 24, 0.95);
transform: scale(1.05);
}
.ai-ops-home-body .ai-ops-h-hero-carousel-arrow:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(151, 199, 255, 0.55);
opacity: 1;
pointer-events: auto;
}
/* Reduced motion — instant slide swaps. */
@media (prefers-reduced-motion: reduce) {
.ai-ops-home-body .ai-ops-h-hero-carousel-slide,
.ai-ops-home-body .ai-ops-h-hero-carousel-arrow {
transition: none;
}
}
/* ── Responsive ─────────────────────────────────────────────────────── */
/* Below the desktop layout, drop the absolute anchor and let the
carousel sit as an inline block below the hero text. Constrain the
width so it doesn't get absurdly wide on landscape tablets. */
@media (max-width: 1279px) {
.ai-ops-home-body .ai-ops-h-hero-pane.ai-ops-h-hero-carousel {
position: static;
right: auto;
top: auto;
bottom: auto;
left: auto;
width: 100%;
max-width: 880px;
height: auto;
margin: 40px auto 0;
aspect-ratio: 1920 / 1088;
/* v1.4: reset the desktop vertical-centering transform — on mobile
the carousel stacks inline below CTAs and shouldn't be pulled up. */
transform: none;
}
}
/* On phones the hover-reveal mechanic doesn't fire — make arrows
permanently visible. */
@media (max-width: 520px) {
.ai-ops-home-body .ai-ops-h-hero-carousel-arrow {
opacity: 0.95;
pointer-events: auto;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
v1.3.6 (2026-05-17, QA-AUDIT P1-5): parent-brand chip + attribution
line for the rebranded "About Varyence" sections (03b-why-different-1
and 07-creds).
═══════════════════════════════════════════════════════════════════════════ */
.ai-ops-home-body .ai-ops-uc-eyebrow--brand {
display: inline-flex;
align-items: center;
gap: 10px;
justify-content: center;
}
.ai-ops-home-body .ai-ops-h-brand-chip {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(81, 161, 255, 0.20), rgba(151, 199, 255, 0.12));
border: 1px solid rgba(81, 161, 255, 0.40);
color: var(--ao-special-blue, #97c7ff);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: none;
}
.ai-ops-home-body .ai-ops-uc-eyebrow--brand .ai-ops-uc-eyebrow-text {
color: var(--ao-text-faded, #8f8f8f);
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 600;
}
.ai-ops-home-body .ai-ops-h-brand-attribution {
margin: 32px auto 0;
max-width: 720px;
text-align: center;
font-family: var(--ao-font, 'Poppins'), system-ui, sans-serif;
font-size: 14px;
letter-spacing: 0.28px;
color: var(--ao-text-faded, #8f8f8f);
}
.ai-ops-home-body .ai-ops-h-brand-attribution strong {
color: var(--ao-text-body, #d2d2d2);
}
/* ═══════════════════════════════════════════════════════════════════════════
v1.3.6 (2026-05-17, QA-AUDIT P2-12): home hero H1 clamp at very narrow
viewports (iPhone SE / 320px-class). Existing H1 is 30px @ 375; on a
320 viewport that overflows. Conservative — only fires below 360.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
.ai-ops-home-body .ai-ops-h-hero-h1 {
font-size: 28px;
line-height: 1.15;
letter-spacing: 0.56px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
v1.3.6 (2026-05-17, QA-AUDIT P2-4): mobile-only edge-mask + scroll hint
on the comparison-table scroll wrap. Lets visitors see that the table
extends to the right when content overflows. Pure-CSS via mask-image.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.ai-ops-home-body .ai-ops-h-cmp-wrap,
.ai-ops-hub-body .ai-ops-hub-cmp-wrap {
position: relative;
mask-image: linear-gradient(
to right,
#000 0%,
#000 88%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
to right,
#000 0%,
#000 88%,
transparent 100%
);
}
.ai-ops-home-body .ai-ops-h-cmp-wrap::after,
.ai-ops-hub-body .ai-ops-hub-cmp-wrap::after {
content: "Scroll →";
display: block;
text-align: right;
margin-top: 8px;
font-size: 11px;
letter-spacing: 0.6px;
color: var(--ao-text-faded, #8f8f8f);
text-transform: uppercase;
}
}
/* ================================================================
Home Engage — role-picker grid (replaces the legacy Talk Card)
See templates/home-sections/12-engage.php
================================================================ */
.ai-ops-h-engage-picker .ai-ops-h-role-picker {
list-style: none;
margin: 24px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.ai-ops-h-engage-picker .ai-ops-h-role-picker li {
margin: 0;
}
.ai-ops-h-role-tile {
display: grid;
grid-template-columns: 40px 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"avatar name"
"avatar tagline";
gap: 2px 12px;
align-items: center;
padding: 12px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.ai-ops-h-role-tile:hover,
.ai-ops-h-role-tile:focus-visible {
border-color: rgba(81, 161, 255, 0.55);
/* 2026-05-23 (Stas): background fill on hover/focus dropped — kept the
border accent + lift transform so the tile still signals interactivity
without the brighten flash. The role-tile hover for the variant
(rule earlier in this file, ~line 1240) carries the same border
accent + translateY lift + box-shadow and was already background-
neutral; this rule is the lower-specificity sibling that also covers
the :focus-visible state for keyboard users. */
transform: translateY(-1px);
outline: none;
}
.ai-ops-h-role-tile-avatar {
grid-area: avatar;
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.ai-ops-h-role-tile-name {
grid-area: name;
font-size: 0.95rem;
font-weight: 600;
color: #fff;
line-height: 1.2;
}
.ai-ops-h-role-tile-tagline {
grid-area: tagline;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.62);
line-height: 1.3;
}
@media (max-width: 540px) {
.ai-ops-h-engage-picker .ai-ops-h-role-picker {
grid-template-columns: 1fr;
}
}