/* ========================================================================== AI Application detail pages - SHARED stylesheet Used by every individual application page (learning-foundry.html and the rest). One file, not one per page. Per-application colour comes from a single modifier class on , e.g. .aiapd-learning. All selectors are namespaced .aiapd-* or scoped under .aiapd-page. No shared main.css rule is modified. ========================================================================== */ .aiapd-page { --aiapd-ink: #080E1B; --aiapd-ink-2: #111B31; --aiapd-line: rgba(125, 162, 255, 0.20); --aiapd-accent: #7C5CE0; /* light-background accent (AA on white) */ --aiapd-glow: #A78BFA; /* dark-background accent */ } .aiapd-page.aiapd-learning { --aiapd-accent: #7C5CE0; --aiapd-glow: #A78BFA; } .aiapd-page.aiapd-talent { --aiapd-accent: #2F6BE0; --aiapd-glow: #60A5FA; } .aiapd-page.aiapd-desk { --aiapd-accent: #0E8FA8; --aiapd-glow: #22D3EE; } .aiapd-page.aiapd-help { --aiapd-accent: #5457C9; --aiapd-glow: #818CF8; } .aiapd-page.aiapd-agree { --aiapd-accent: #12897C; --aiapd-glow: #2DD4BF; } /* ---------- Hero ------------------------------------------------------- */ .aiapd-hero { padding: 176px 0 100px; position: relative; overflow: hidden; background: linear-gradient(135deg, #080E1B 0%, #111B31 55%, #0A1324 100%); } .aiapd-hero::before { content: ""; position: absolute; inset: -25%; background: radial-gradient(36% 36% at 24% 28%, color-mix(in srgb, var(--aiapd-glow) 34%, transparent) 0%, transparent 62%), radial-gradient(32% 32% at 76% 26%, rgba(34, 211, 238, 0.20) 0%, transparent 62%), radial-gradient(38% 38% at 60% 80%, color-mix(in srgb, var(--aiapd-glow) 26%, transparent) 0%, transparent 62%); filter: blur(30px); animation: aiapdMesh 28s ease-in-out infinite alternate; pointer-events: none; z-index: 2; } @keyframes aiapdMesh { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2.5%,-2%,0) scale(1.06); } 100% { transform: translate3d(-2%,2.5%,0) scale(1.03); } } .aiapd-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(125,162,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(125,162,255,0.05) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 78%); pointer-events: none; z-index: 3; } .aiapd-hero > .container { position: relative; z-index: 4; } /* ---------- Photograph as the room ------------------------------------- The hero photograph is the ground the section sits in, not an object placed on top of one. It is heavily darkened and graded toward the product's own accent, so it reads as place and depth rather than as a picture competing with the product panel for attention. Layer order: photograph 0, accent grade 1, drifting mesh 2, grid 3, content 4. ---------------------------------------------------------------------- */ .aiapd-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } /* Matches the homepage hero. main.css:4175 gives `.header-img1` a `transition: transform 8000ms ease` and the active carousel slide pushes it to scale(1.2) - a single 8-second push-in on arrival, not a loop. Same timing and ease here. It starts at 1.02 rather than 1.0 so the image always over-covers its box; at exactly 1.0 sub-pixel rounding can flash a hairline at the edge. The origin sits over the subject (left third, slightly low), so the push leans into the person rather than the frame. */ @keyframes aiapdRoomPush { from { transform: scale(1.02); } to { transform: scale(1.18); } } .aiapd-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; transform-origin: 32% 56%; animation: aiapdRoomPush 8000ms ease forwards; } /* Darkest under the headline, lifting toward the panel so the room is readable on the side where nothing has to be read. */ .aiapd-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 14, 27, 0.955) 0%, rgba(8, 14, 27, 0.90) 38%, rgba(11, 18, 36, 0.77) 68%, rgba(13, 15, 40, 0.70) 100%); } /* Below lg the panel stacks under the text, so nothing sits on the right to justify lifting that side. A flat vertical wash keeps the copy well clear of the contrast floor wherever it lands. */ @media (max-width: 991px) { .aiapd-hero-bg::after { background: linear-gradient(180deg, rgba(8, 14, 27, 0.945) 0%, rgba(8, 14, 27, 0.905) 55%, rgba(11, 18, 36, 0.865) 100%); } } .aiapd-hero-grade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(58% 62% at 78% 40%, color-mix(in srgb, var(--aiapd-glow) 26%, transparent) 0%, transparent 70%), radial-gradient(48% 52% at 10% 82%, rgba(34, 211, 238, 0.11) 0%, transparent 70%); } /* The panel sat at y176, marginally above where the text block starts (kicker y185), which read as floating high. Dropped 60px so it sits in the lower half of the hero, below the heading and past the button row (y585-633). `position: relative` moves it visually without disturbing the text column, and the hero's bottom padding grows by the same amount so nothing clips. */ .aiapd-hero.has-photo { padding-bottom: 160px; } .aiapd-hero.has-photo .aiapd-hero-visual { position: relative; top: 60px; } /* Once the columns stack there is nothing to align to, so it resets. */ @media (max-width: 991px) { .aiapd-hero.has-photo { padding-bottom: 80px; } .aiapd-hero.has-photo .aiapd-hero-visual { top: 0; } } /* With a photograph behind it the drifting mesh only needs to be a hint. */ .aiapd-hero.has-photo::before { opacity: .45; } .aiapd-hero.has-photo::after { opacity: .55; } .aiapd-crumb { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s14); color: rgba(255,255,255,0.52); margin-bottom: 20px; } .aiapd-crumb a { color: rgba(255,255,255,0.72); transition: color .3s ease; } .aiapd-crumb a:hover { color: var(--aiapd-glow); } .aiapd-crumb span { margin: 0 8px; opacity: .45; } /* main.css sets `background-color: #fe0605 !important` on `.hero3-section-area .hero-header-area.endtoend h5`, which was overriding every application accent with the hex flagged as failing AA. !important is the only way back. Scoped to these pages. */ .aiapd-hero .hero-header-area.endtoend .aiapd-kicker { color: var(--aiapd-glow); background-color: color-mix(in srgb, var(--aiapd-glow) 13%, transparent) !important; border: 1px solid color-mix(in srgb, var(--aiapd-glow) 30%, transparent); } .aiapd-hero h1 { color: var(--ztc-text-text-1); } .aiapd-hero p { color: rgba(255,255,255,0.74); } .aiapd-hero-visual { width: 100%; height: auto; max-width: 720px; display: block; margin-inline: auto; border-radius: 26px; box-shadow: 0 30px 70px rgba(4,8,18,0.55); } .aiapd-hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; } .aiapd-hero-cta .header-btn12 { color: var(--ztc-text-text-1); border-color: rgba(255,255,255,0.42); background: rgba(255,255,255,0.04); transition: background .35s ease, border-color .35s ease; } .aiapd-hero-cta .header-btn12:hover { color: var(--ztc-text-text-1); border-color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.10); } .aiapd-hero-cta a i, .aiapd-cta-row a i { transition: transform .35s ease; } .aiapd-hero-cta a:hover i, .aiapd-cta-row a:hover i { transform: translateX(5px); } @media (max-width: 991px) { .aiapd-hero { padding: 148px 0 76px; } .aiapd-hero-visual { margin-top: 44px; max-width: 540px; } } @media (max-width: 767px) { .aiapd-hero { padding: 128px 0 58px; } .aiapd-hero-visual { margin-top: 32px; border-radius: 18px; } } /* ---------- Jump chips ------------------------------------------------- */ .aiapd-jump { background: var(--ztc-bg-bg-1); border-bottom: 1px solid var(--ztc-border-border-1); padding: 20px 0; } .aiapd-jump-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .aiapd-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ztc-border-border-2); background: #fff; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s14); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-4); transition: border-color .3s ease, color .3s ease, transform .3s ease; } .aiapd-chip b { font-weight: var(--ztc-weight-bold); color: var(--aiapd-accent); } .aiapd-chip:hover { border-color: color-mix(in srgb, var(--aiapd-accent) 45%, transparent); color: var(--ztc-text-text-3); transform: translateY(-2px); } /* ---------- Definition panel ------------------------------------------ */ .aiapd-define { border-radius: 18px; border: 1px solid var(--ztc-border-border-1); background: var(--ztc-bg-bg-1); padding: 38px 40px; } .aiapd-define h2 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s26); line-height: 1.35; font-weight: var(--ztc-weight-bold); color: var(--ztc-text-text-3); margin-bottom: 14px; } .aiapd-define p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: 1.72; color: var(--ztc-text-text-4); margin-bottom: 0; } .aiapd-define p + p { margin-top: 14px; } .aiapd-define strong { color: var(--ztc-text-text-3); } @media (max-width: 767px) { .aiapd-define { padding: 28px 24px; } } /* ---------- Section tints --------------------------------------------- */ .aiapd-page .aiapd-tint { background: var(--ztc-bg-bg-1); } /* ---------- Spotlight (full-width dark photo feature) ------------------ */ .aiapd-spotlight { position: relative; overflow: hidden; padding: 130px 0; } .aiapd-spotlight-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 28%; } .aiapd-spotlight::after { content: ""; position: absolute; inset: 0; background: linear-gradient(75deg, rgba(8,10,24,0.95) 0%, rgba(8,10,24,0.86) 46%, rgba(8,10,24,0.34) 100%); } .aiapd-spotlight > .container { position: relative; z-index: 1; } .aiapd-spotlight .aiapd-cap-num { color: var(--aiapd-glow); } .aiapd-spotlight h3 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s36); line-height: 1.28; font-weight: var(--ztc-weight-bold); color: var(--ztc-text-text-1); margin-bottom: 16px; } .aiapd-spotlight p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: 1.72; color: rgba(255,255,255,0.78); margin-bottom: 0; } .aiapd-spotlight .aiapd-breaks { background: rgba(255,255,255,0.06); border-left-color: var(--aiapd-glow); color: rgba(255,255,255,0.74); } .aiapd-spotlight .aiapd-breaks strong { color: #fff; } @media (max-width: 767px) { .aiapd-spotlight { padding: 76px 0; } .aiapd-spotlight h3 { font-size: var(--ztc-font-size-font-s26); } .aiapd-spotlight::after { background: linear-gradient(180deg, rgba(8,10,24,0.86) 0%, rgba(8,10,24,0.96) 100%); } } /* ---------- Before / after comparison ---------------------------------- */ .aiapd-compare-wrap { position: relative; padding: 8px; border-radius: 26px; background: radial-gradient(60% 70% at 78% 20%, color-mix(in srgb, var(--aiapd-accent) 12%, transparent) 0%, transparent 70%), linear-gradient(150deg, var(--ztc-bg-bg-1) 0%, #fff 70%); border: 1px solid var(--ztc-border-border-1); } .aiapd-compare { display: grid; grid-template-columns: 1fr 84px 1fr; align-items: stretch; } .aiapd-compare-col { border-radius: 20px; padding: 38px 34px 32px; position: relative; } .aiapd-compare-col.is-before { background: transparent; } .aiapd-compare-col.is-after { background: #fff; border: 1px solid color-mix(in srgb, var(--aiapd-accent) 26%, transparent); box-shadow: 0 26px 60px rgba(8, 14, 27, 0.13); } .aiapd-compare-col.is-after::before { content: ""; position: absolute; top: 0; left: 34px; right: 34px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--aiapd-accent), var(--aiapd-glow)); } .aiapd-compare-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s12); font-weight: var(--ztc-weight-semibold); letter-spacing: .12em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; } .is-before .aiapd-compare-tag { color: var(--ztc-text-text-11); background: rgba(0,0,0,0.045); } .is-after .aiapd-compare-tag { color: #fff; background: linear-gradient(90deg, var(--aiapd-accent), var(--aiapd-glow)); } .aiapd-compare-col h4 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s22); font-weight: var(--ztc-weight-bold); line-height: 1.35; margin-bottom: 22px; } .aiapd-compare-col.is-before h4 { color: var(--ztc-text-text-11); } .aiapd-compare-col.is-after h4 { color: var(--ztc-text-text-3); } .aiapd-compare-col ul { list-style: none; margin: 0; padding: 0; } .aiapd-compare-col li { display: flex; align-items: flex-start; gap: 14px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.55; padding: 13px 0; } .aiapd-compare-col.is-before li { color: var(--ztc-text-text-11); border-bottom: 1px dashed rgba(0,0,0,0.08); } .aiapd-compare-col.is-after li { color: var(--ztc-text-text-4); border-bottom: 1px solid var(--ztc-border-border-1); } .aiapd-compare-col li:last-child { border-bottom: 0; } .aiapd-compare-col li .aiapd-mark { width: 24px; height: 24px; flex: 0 0 auto; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .aiapd-compare-col li .aiapd-mark svg { width: 13px; height: 13px; } .is-before .aiapd-mark { background: rgba(0,0,0,0.06); color: #9A93AD; } .is-after .aiapd-mark { background: color-mix(in srgb, var(--aiapd-accent) 13%, #fff); color: var(--aiapd-accent); } .aiapd-compare-arrow { display: flex; align-items: center; justify-content: center; } .aiapd-compare-arrow span { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--aiapd-accent), var(--aiapd-glow)); color: #fff; box-shadow: 0 12px 28px color-mix(in srgb, var(--aiapd-accent) 34%, transparent); } .aiapd-compare-arrow svg { width: 22px; height: 22px; } @media (max-width: 991px) { .aiapd-compare { grid-template-columns: 1fr; } .aiapd-compare-wrap { padding: 6px; } .aiapd-compare-col { padding: 30px 24px 26px; } .aiapd-compare-arrow { padding: 14px 0; } .aiapd-compare-arrow span { transform: rotate(90deg); } } /* ---------- Capability blocks ----------------------------------------- */ .aiapd-cap { display: grid; grid-template-columns: 76px 1fr; gap: 26px; padding: 38px 0; border-top: 1px solid var(--ztc-border-border-1); align-items: start; scroll-margin-top: 110px; } .aiapd-cap:last-child { border-bottom: 1px solid var(--ztc-border-border-1); } .aiapd-cap-icon { width: 62px; height: 62px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--aiapd-accent); background: color-mix(in srgb, var(--aiapd-accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--aiapd-accent) 22%, transparent); } .aiapd-cap-icon svg { width: 28px; height: 28px; } .aiapd-cap-num { display: block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s12); font-weight: var(--ztc-weight-semibold); letter-spacing: .14em; text-transform: uppercase; color: var(--aiapd-accent); margin-bottom: 8px; } .aiapd-cap h3 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s26); line-height: 1.32; font-weight: var(--ztc-weight-bold); color: var(--ztc-text-text-3); margin-bottom: 12px; } .aiapd-cap p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.72; color: var(--ztc-text-text-4); margin-bottom: 0; max-width: 76ch; } .aiapd-breaks { margin-top: 16px; padding: 15px 18px; border-radius: 12px; background: color-mix(in srgb, var(--aiapd-accent) 6%, #fff); border-left: 3px solid var(--aiapd-accent); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.68; color: var(--ztc-text-text-6); max-width: 76ch; } .aiapd-breaks strong { color: var(--ztc-text-text-3); } @media (max-width: 767px) { .aiapd-cap { grid-template-columns: 1fr; gap: 18px; padding: 30px 0; } .aiapd-cap h3 { font-size: var(--ztc-font-size-font-s22); } } /* ---------- Feature rows (media + text, alternating) ------------------- */ .aiapd-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--ztc-border-border-1); scroll-margin-top: 110px; } .aiapd-feature:last-child { border-bottom: 1px solid var(--ztc-border-border-1); } .aiapd-feature.is-flip .aiapd-feature-media { order: 2; } .aiapd-feature.is-flip .aiapd-feature-body { order: 1; } .aiapd-feature-media img { width: 100%; max-width: 580px; /* uniform across every feature row, so the UI type inside each vignette renders at one scale */ height: auto; display: block; margin-inline: auto; border-radius: 16px; border: 1px solid var(--ztc-border-border-1); box-shadow: 0 18px 44px rgba(8, 14, 27, 0.10); } .aiapd-feature-media.is-photo img { border: 0; } .aiapd-feature-body .aiapd-cap-num { margin-bottom: 10px; } .aiapd-feature-body h3 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s30); line-height: 1.3; font-weight: var(--ztc-weight-bold); color: var(--ztc-text-text-3); margin-bottom: 14px; } .aiapd-feature-body p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.72; color: var(--ztc-text-text-4); margin-bottom: 0; } @media (max-width: 991px) { .aiapd-feature { grid-template-columns: 1fr; gap: 30px; padding: 44px 0; } .aiapd-feature.is-flip .aiapd-feature-media { order: 1; } .aiapd-feature.is-flip .aiapd-feature-body { order: 2; } .aiapd-feature-body h3 { font-size: var(--ztc-font-size-font-s24); } } /* ---------- Full-width photo band -------------------------------------- */ .aiapd-band { position: relative; min-height: 480px; max-height: 560px; display: flex; align-items: center; overflow: hidden; } .aiapd-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* bias the crop upward so subjects' heads are not clipped by the top edge */ object-position: center 32%; } .aiapd-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,14,27,0.92) 0%, rgba(8,14,27,0.78) 42%, rgba(8,14,27,0.20) 100%); } .aiapd-band > .container { position: relative; z-index: 1; } .aiapd-band h2 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s40); line-height: 1.25; font-weight: var(--ztc-weight-bold); color: var(--ztc-text-text-1); margin-bottom: 16px; } .aiapd-band p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: 1.7; color: rgba(255,255,255,0.80); margin-bottom: 0; } .aiapd-band .aiapd-kicker { color: var(--aiapd-glow); } @media (max-width: 767px) { .aiapd-band { min-height: 340px; } .aiapd-band h2 { font-size: var(--ztc-font-size-font-s30); } .aiapd-band::after { background: linear-gradient(180deg, rgba(8,14,27,0.80) 0%, rgba(8,14,27,0.92) 100%); } } /* ---------- Lifecycle -------------------------------------------------- */ .aiapd-flow { background: var(--aiapd-ink); position: relative; overflow: hidden; } .aiapd-flow::before { content: ""; position: absolute; inset: 0; background: radial-gradient(44% 56% at 76% 20%, color-mix(in srgb, var(--aiapd-glow) 22%, transparent) 0%, transparent 68%), radial-gradient(40% 52% at 14% 86%, rgba(34,211,238,0.14) 0%, transparent 68%); pointer-events: none; } .aiapd-flow > .container { position: relative; z-index: 1; } .aiapd-flow .aiapd-kicker { color: var(--aiapd-glow); } .aiapd-flow h2 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s40); line-height: 1.25; font-weight: var(--ztc-weight-bold); color: var(--ztc-text-text-1); margin-bottom: 16px; } .aiapd-flow > .container > .row > div > p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: 1.65; color: rgba(255,255,255,0.70); margin-bottom: 0; } @media (max-width: 767px) { .aiapd-flow h2 { font-size: var(--ztc-font-size-font-s30); } } .aiapd-step { height: 100%; padding: 26px 22px; border-radius: 14px; border: 1px solid var(--aiapd-line); background: rgba(255,255,255,0.035); transition: transform .45s ease, border-color .45s ease, background .45s ease; } .aiapd-step:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--aiapd-glow) 50%, transparent); background: rgba(255,255,255,0.06); } .aiapd-step h3 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); color: var(--ztc-text-text-1); margin-bottom: 8px; } .aiapd-step p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.65; color: rgba(255,255,255,0.66); margin-bottom: 0; } /* ---------- Unified section typography --------------------------------- */ /* main.css renders .tg-element-title at 32px/500 and .section-subtitle in the non-AA red. Both are normalised here, page-scoped, so every section heading on a detail page matches the dark bands (40px/700) and the eyebrow uses the application accent. */ .aiapd-page .qw-section-area h2.tg-element-title, .aiapd-page .aiapd-band h2, .aiapd-page .aiapd-flow h2 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s40); line-height: 1.25; font-weight: var(--ztc-weight-bold); margin-bottom: 16px; } .aiapd-page .qw-section-area h2.tg-element-title { color: var(--ztc-text-text-3); } .aiapd-page .section-subtitle, .aiapd-page .aiapd-kicker.section-subtitle { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s14); line-height: 1.4; font-weight: var(--ztc-weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--aiapd-accent); margin-bottom: 14px; } .aiapd-page .aiapd-band .aiapd-kicker, .aiapd-page .aiapd-flow .section-subtitle, .aiapd-page .aiapd-flow .aiapd-kicker { font-size: var(--ztc-font-size-font-s14); font-weight: var(--ztc-weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--aiapd-glow); background: none; border: 0; padding: 0; margin-bottom: 14px; } .aiapd-page .section-description { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: 1.7; color: var(--ztc-text-text-4); } @media (max-width: 767px) { .aiapd-page .qw-section-area h2.tg-element-title, .aiapd-page .aiapd-band h2, .aiapd-page .aiapd-flow h2 { font-size: var(--ztc-font-size-font-s30); } } /* ---------- Icons inside step and audience cards ----------------------- */ .aiapd-step { position: relative; } .aiapd-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .aiapd-step-head h3 { margin-bottom: 0; } .aiapd-step-num { position: absolute; top: 22px; right: 22px; width: auto; height: auto; background: none; border: 0; border-radius: 0; font-size: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-bold); color: rgba(255,255,255,0.13); margin: 0; line-height: 1; } .aiapd-step-ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--aiapd-glow) 14%, transparent); border: 1px solid color-mix(in srgb, var(--aiapd-glow) 32%, transparent); color: var(--aiapd-glow); flex: 0 0 auto; } .aiapd-step-ico svg { width: 20px; height: 20px; } .aiapd-who-ico { width: 54px; height: 54px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--aiapd-accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--aiapd-accent) 22%, transparent); color: var(--aiapd-accent); margin-bottom: 18px; transition: transform .4s ease, background .4s ease; } .aiapd-who-ico svg { width: 24px; height: 24px; } .aiapd-who:hover .aiapd-who-ico { transform: translateY(-2px) scale(1.05); background: color-mix(in srgb, var(--aiapd-accent) 16%, #fff); } /* ---------- Use-case pills -------------------------------------------- */ .aiapd-uses { display: flex; flex-wrap: wrap; gap: 10px; } .aiapd-use { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--ztc-border-border-2); background: #fff; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); color: var(--ztc-text-text-4); transition: border-color .3s ease, transform .3s ease; } .aiapd-use:hover { border-color: color-mix(in srgb, var(--aiapd-accent) 45%, transparent); transform: translateY(-2px); } .aiapd-use i { color: var(--aiapd-accent); font-size: 13px; } /* ---------- Audience cards -------------------------------------------- */ .aiapd-who { height: 100%; padding: 30px 26px; border-radius: 16px; border: 1px solid var(--ztc-border-border-1); background: #fff; transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease; } .aiapd-who:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--aiapd-accent) 40%, transparent); box-shadow: 0 18px 40px rgba(8,14,27,0.10); } .aiapd-who h3 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-bold); color: var(--ztc-text-text-3); margin-bottom: 10px; } .aiapd-who p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.68; color: var(--ztc-text-text-4); margin-bottom: 0; } /* ---------- Consultation section -------------------------------------- */ .aiapd-page .contact1-section-area { background-image: none !important; background: linear-gradient(135deg, #0A1324 0%, #111B31 52%, #080E1B 100%) !important; } .aiapd-page .contact1-section-area::after { background: radial-gradient(46% 60% at 80% 18%, color-mix(in srgb, var(--aiapd-glow) 18%, transparent) 0%, transparent 66%), radial-gradient(42% 56% at 12% 88%, rgba(34,211,238,0.14) 0%, transparent 66%); opacity: 1; } .aiapd-page .contact1-section-area .contact-submit-boxarea { background: rgba(255,255,255,0.055); border: 1px solid var(--aiapd-line); border-radius: 16px; } /* ---------- Reduced motion -------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .aiapd-page *, .aiapd-page *::before, .aiapd-page *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .aiapd-hero::before { animation: none; } /* Hold the room still, but keep the over-cover scale so no edge shows. */ .aiapd-hero-bg img { animation: none !important; transform: scale(1.02); } .aiapd-page [data-aos] { opacity: 1 !important; transform: none !important; visibility: visible !important; } } /* ========================================================================== SIGNATURE COMPONENTS Each application page replaces the generic step grid with one structural signature matching the shape of that product's work: rail Learning Foundry a climb through a gate that must be passed funnel Talent Compass many in, one out day FrontDesk one day on a timeline, present tense thread AI Helpdesk a conversation where the replies do things track Agreemint a line that ends, definitively All five sit inside the existing dark .aiapd-flow band and inherit --aiapd-glow, so the page still reads as part of the family. ========================================================================== */ /* ---------- Rail: Learning Foundry ------------------------------------- */ .aiapd-rail { max-width: 800px; margin: 56px auto 0; } .aiapd-rail-item { display: grid; grid-template-columns: 48px 1fr; gap: 24px; padding-bottom: 32px; position: relative; } .aiapd-rail-item::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.13); } .aiapd-rail-item:last-child { padding-bottom: 0; } .aiapd-rail-item:last-child::before { display: none; } .aiapd-rail-dot { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--aiapd-glow); background: color-mix(in srgb, var(--aiapd-glow) 14%, transparent); border: 1px solid color-mix(in srgb, var(--aiapd-glow) 38%, transparent); } .aiapd-rail-dot svg { width: 21px; height: 21px; } /* The climb: each stage sits a little brighter than the one below it. */ .aiapd-rail-item:nth-child(1) .aiapd-rail-dot { opacity: .70; } .aiapd-rail-item:nth-child(2) .aiapd-rail-dot { opacity: .80; } .aiapd-rail-item:nth-child(3) .aiapd-rail-dot { opacity: .88; } .aiapd-rail-item:nth-child(n+5) .aiapd-rail-dot { opacity: 1; } .aiapd-rail h3 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-bold); color: #fff; margin: 10px 0 7px; } .aiapd-rail p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.68; color: rgba(255, 255, 255, 0.66); margin: 0; } .aiapd-gate { margin: 4px 0 32px 72px; padding: 20px 24px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--aiapd-glow) 58%, transparent); background: color-mix(in srgb, var(--aiapd-glow) 9%, transparent); display: flex; align-items: flex-start; gap: 15px; } .aiapd-gate svg { width: 22px; height: 22px; color: var(--aiapd-glow); flex: 0 0 auto; margin-top: 2px; } .aiapd-gate strong { display: block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); color: #fff; margin-bottom: 5px; } .aiapd-gate span { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.65; color: rgba(255, 255, 255, 0.70); } /* ---------- Funnel: Talent Compass ------------------------------------- */ .aiapd-funnel { max-width: 900px; margin: 56px auto 0; } .aiapd-funnel-row { display: grid; grid-template-columns: 1fr 280px; gap: 30px; align-items: center; margin-bottom: 14px; } .aiapd-funnel-bar { height: 66px; border-radius: 12px; display: flex; align-items: center; gap: 14px; padding: 0 24px; color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--aiapd-glow) 46%, transparent), color-mix(in srgb, var(--aiapd-glow) 16%, transparent)); border: 1px solid color-mix(in srgb, var(--aiapd-glow) 34%, transparent); transition: transform .4s ease; } .aiapd-funnel-row:hover .aiapd-funnel-bar { transform: translateX(6px); } .aiapd-funnel-bar b { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-bold); letter-spacing: -0.01em; } .aiapd-funnel-bar em { font-style: normal; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-semibold); color: rgba(255, 255, 255, 0.82); } /* Widths are the argument: the shape narrows as the work narrows. */ .aiapd-funnel-row.w1 .aiapd-funnel-bar { width: 100%; } .aiapd-funnel-row.w2 .aiapd-funnel-bar { width: 76%; } .aiapd-funnel-row.w3 .aiapd-funnel-bar { width: 54%; } .aiapd-funnel-row.w4 .aiapd-funnel-bar { width: 34%; } .aiapd-funnel-row.w5 .aiapd-funnel-bar { width: 20%; min-width: 132px; } .aiapd-funnel-row p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.6; color: rgba(255, 255, 255, 0.62); margin: 0; } /* ---------- Day: FrontDesk Assistance ---------------------------------- */ .aiapd-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 860px; margin: 52px auto 60px; } .aiapd-board-cell { text-align: center; padding: 22px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); } .aiapd-board-cell b { display: block; font-family: var(--ztc-family-font1); font-size: 34px; font-weight: var(--ztc-weight-bold); color: var(--aiapd-glow); line-height: 1.1; margin-bottom: 6px; } .aiapd-board-cell span { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s14); color: rgba(255, 255, 255, 0.62); } .aiapd-day { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; padding-top: 44px; } .aiapd-day::before { content: ""; position: absolute; left: 6%; right: 6%; top: 13px; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--aiapd-glow) 50%, transparent) 12%, color-mix(in srgb, var(--aiapd-glow) 50%, transparent) 88%, transparent); } .aiapd-day-node { text-align: center; position: relative; } .aiapd-day-node::before { content: ""; position: absolute; top: -38px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; border-radius: 50%; background: var(--aiapd-glow); box-shadow: 0 0 0 6px color-mix(in srgb, var(--aiapd-glow) 18%, transparent); } .aiapd-day-time { display: block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-bold); color: var(--aiapd-glow); margin-bottom: 8px; } .aiapd-day-node h3 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); color: #fff; margin-bottom: 8px; } .aiapd-day-node p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.66; color: rgba(255, 255, 255, 0.64); margin: 0; } /* ---------- Thread: AI Helpdesk ---------------------------------------- */ .aiapd-thread { max-width: 800px; margin: 56px auto 0; display: flex; flex-direction: column; gap: 18px; } .aiapd-turn { max-width: 82%; padding: 18px 22px; border-radius: 18px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.66; } .aiapd-turn.is-person { align-self: flex-end; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-bottom-right-radius: 5px; color: rgba(255, 255, 255, 0.88); } .aiapd-turn.is-system { align-self: flex-start; background: color-mix(in srgb, var(--aiapd-glow) 11%, transparent); border: 1px solid color-mix(in srgb, var(--aiapd-glow) 32%, transparent); border-bottom-left-radius: 5px; color: rgba(255, 255, 255, 0.78); } .aiapd-turn-who { display: block; font-size: var(--ztc-font-size-font-s12); font-weight: var(--ztc-weight-semibold); letter-spacing: .11em; text-transform: uppercase; margin-bottom: 8px; opacity: .62; } .aiapd-turn.is-system .aiapd-turn-who { color: var(--aiapd-glow); opacity: 1; } /* What separates this from a chatbot: the reply lists what it did. */ .aiapd-turn ul { list-style: none; margin: 12px 0 0; padding: 0; } .aiapd-turn ul li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; color: #fff; font-weight: var(--ztc-weight-medium); } .aiapd-turn ul li::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%; background: var(--aiapd-glow); -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------- Track: Agreemint ------------------------------------------- */ .aiapd-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 62px 0 0; position: relative; padding-top: 46px; } .aiapd-track::before { content: ""; position: absolute; left: 8%; right: 8%; top: 14px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--aiapd-glow) 22%, transparent), color-mix(in srgb, var(--aiapd-glow) 92%, transparent)); } .aiapd-track-node { text-align: center; position: relative; } .aiapd-track-node::before { content: ""; position: absolute; top: -39px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--aiapd-ink); border: 3px solid color-mix(in srgb, var(--aiapd-glow) 62%, transparent); } /* The point of the whole product: the line ends somewhere final. */ .aiapd-track-node.is-end::before { width: 24px; height: 24px; top: -43px; background: var(--aiapd-glow); border-color: var(--aiapd-glow); box-shadow: 0 0 0 8px color-mix(in srgb, var(--aiapd-glow) 20%, transparent); } .aiapd-track-node h3 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); color: #fff; margin-bottom: 8px; } .aiapd-track-node.is-end h3 { color: var(--aiapd-glow); } .aiapd-track-node p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.64; color: rgba(255, 255, 255, 0.64); margin: 0; } .aiapd-track-seal { max-width: 640px; margin: 54px auto 0; text-align: center; padding: 20px 26px; border-radius: 14px; background: color-mix(in srgb, var(--aiapd-glow) 10%, transparent); border: 1px solid color-mix(in srgb, var(--aiapd-glow) 32%, transparent); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.66; color: rgba(255, 255, 255, 0.78); } .aiapd-track-seal strong { color: #fff; } /* ---------- Signature responsive --------------------------------------- */ @media (max-width: 991px) { .aiapd-board { grid-template-columns: repeat(2, 1fr); } .aiapd-day { grid-template-columns: repeat(2, 1fr); row-gap: 46px; } .aiapd-day::before { display: none; } .aiapd-day-node::before { position: static; transform: none; display: block; margin: 0 auto 12px; } .aiapd-track { grid-template-columns: repeat(2, 1fr); row-gap: 46px; } .aiapd-track::before { display: none; } .aiapd-track-node::before { position: static; transform: none; display: block; margin: 0 auto 12px; } .aiapd-track-node.is-end::before { margin: 0 auto 12px; } .aiapd-funnel-row { grid-template-columns: 1fr; gap: 10px; margin-bottom: 22px; } /* Keep the taper, just shallower: a 20% bar is unreadable at 375px, but losing the narrowing altogether loses the whole argument. */ .aiapd-funnel-row.w1 .aiapd-funnel-bar { width: 100%; } .aiapd-funnel-row.w2 .aiapd-funnel-bar { width: 88%; } .aiapd-funnel-row.w3 .aiapd-funnel-bar { width: 74%; } .aiapd-funnel-row.w4 .aiapd-funnel-bar { width: 60%; } .aiapd-funnel-row.w5 .aiapd-funnel-bar { width: 48%; min-width: 158px; } } @media (max-width: 767px) { .aiapd-rail-item { grid-template-columns: 40px 1fr; gap: 16px; } .aiapd-rail-item::before { left: 19px; top: 46px; } .aiapd-rail-dot { width: 40px; height: 40px; } .aiapd-gate { margin-left: 0; } .aiapd-board { grid-template-columns: repeat(2, 1fr); gap: 12px; } .aiapd-day { grid-template-columns: 1fr; } .aiapd-track { grid-template-columns: 1fr; } .aiapd-turn { max-width: 94%; } } /* ---------- Composite media: photograph + floating interface card ------- Same device as the hub. The photograph supplies the room and the people; the card supplies the proof the software exists. The card is drawn at 560x372 with oversized type so it stays readable at the ~330px it actually renders at, unlike the feature-row vignettes which are drawn for 565px and would be illegible at this size. ---------------------------------------------------------------------- */ .aiapd-feature-media.is-composite { position: relative; /* The card is absolutely positioned and the photo is a bare aspect-ratio box, so this element has no intrinsic width; without an explicit one an auto-sized grid column collapses to a couple of pixels. */ width: 100%; max-width: 580px; margin-inline: auto; padding-bottom: 112px; } .aiapd-composite-photo { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 2; box-shadow: 0 26px 60px rgba(8, 14, 27, 0.24); } .aiapd-composite-photo img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; } .aiapd-composite-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(178deg, rgba(8,14,27,0) 46%, rgba(8,14,27,0.36) 100%); pointer-events: none; } /* The card artboard is 560x506 (aspect 1.11). Width is set from what the drawing needs to stay legible, and the hang below the photo is set so the card still leaves the photo's top third and right third visible. */ .aiapd-composite-card { position: absolute; left: -6%; bottom: 0; width: 66%; min-width: 250px; } .aiapd-composite-card img { width: 100%; height: auto; display: block; max-width: none; } @media (max-width: 575px) { .aiapd-feature-media.is-composite { padding-bottom: 128px; } .aiapd-composite-photo { border-radius: 16px; } .aiapd-composite-card { left: 0; width: 90%; } } /* ========================================================================== COMPARISON VARIANTS The same before/after argument, presented five different ways so the five pages do not scan as one template with the words swapped: swap Learning Foundry old struck out, new in its place ledger Talent Compass paired rows on a shared spine objects FrontDesk two physical things: a paper book, a screen pairs AI Helpdesk six small cards, each Before over Now compress Agreemint a long meandering path against a short one ========================================================================== */ /* ---------- swap: Learning Foundry ------------------------------------- */ .aiapd-swap { max-width: 900px; margin-inline: auto; } .aiapd-swap-row { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--ztc-border-border-1); } .aiapd-swap-row:last-child { border-bottom: 0; } .aiapd-swap-old { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.6; color: var(--ztc-text-text-11); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ztc-text-text-11) 55%, transparent); text-align: right; } .aiapd-swap-arrow { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-inline: auto; color: var(--aiapd-accent); background: color-mix(in srgb, var(--aiapd-accent) 11%, #fff); border: 1px solid color-mix(in srgb, var(--aiapd-accent) 26%, transparent); } .aiapd-swap-arrow svg { width: 16px; height: 16px; } .aiapd-swap-new { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.6; font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); } .aiapd-swap-head { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 20px; margin-bottom: 8px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s12); font-weight: var(--ztc-weight-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--ztc-text-text-11); } .aiapd-swap-head span:first-child { text-align: right; } .aiapd-swap-head span:last-child { color: var(--aiapd-accent); } /* ---------- ledger: Talent Compass ------------------------------------- */ .aiapd-ledger { max-width: 980px; margin-inline: auto; border: 1px solid var(--ztc-border-border-1); border-radius: 18px; overflow: hidden; background: #fff; } .aiapd-ledger-head, .aiapd-ledger-row { display: grid; grid-template-columns: 1fr 62px 1fr; align-items: center; } .aiapd-ledger-head { background: var(--ztc-bg-bg-1); border-bottom: 1px solid var(--ztc-border-border-1); padding: 16px 26px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s12); font-weight: var(--ztc-weight-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--ztc-text-text-11); } .aiapd-ledger-head span:last-child { color: var(--aiapd-accent); } .aiapd-ledger-row { padding: 18px 26px; border-bottom: 1px solid var(--ztc-border-border-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.6; } .aiapd-ledger-row:last-child { border-bottom: 0; } .aiapd-ledger-row:nth-child(even) { background: color-mix(in srgb, var(--aiapd-accent) 3%, #fff); } .aiapd-ledger-row > span:first-child { color: var(--ztc-text-text-11); } .aiapd-ledger-row > span:last-child { color: var(--ztc-text-text-3); font-weight: var(--ztc-weight-semibold); } .aiapd-ledger-n { justify-self: center; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--ztc-font-size-font-s14); font-weight: var(--ztc-weight-bold); color: var(--aiapd-accent); background: color-mix(in srgb, var(--aiapd-accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--aiapd-accent) 24%, transparent); } /* ---------- objects: FrontDesk ----------------------------------------- */ .aiapd-objects { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; max-width: 980px; margin-inline: auto; } .aiapd-object h4 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-bold); margin-bottom: 6px; } .aiapd-object > span { display: block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s12); font-weight: var(--ztc-weight-semibold); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; } /* the paper book: ruled, warm, slightly off-square */ .aiapd-object.is-paper > span { color: var(--ztc-text-text-11); } .aiapd-object.is-paper h4 { color: var(--ztc-text-text-3); } .aiapd-paper { background: #FBF8F1; border: 1px solid #E6DFCE; border-radius: 4px; padding: 22px 24px 24px; transform: rotate(-0.7deg); box-shadow: 0 12px 30px rgba(60, 50, 30, 0.09); } .aiapd-paper li { list-style: none; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.5; color: #6E6553; padding: 13px 0; border-bottom: 1px solid #E9E2D2; } .aiapd-paper li:last-child { border-bottom: 0; } /* the screen: cool, square, precise */ .aiapd-object.is-screen > span { color: var(--aiapd-accent); } .aiapd-object.is-screen h4 { color: var(--ztc-text-text-3); } .aiapd-screen { background: #fff; border: 1px solid var(--ztc-border-border-1); border-radius: 16px; padding: 10px 20px 14px; box-shadow: 0 16px 38px rgba(8, 14, 27, 0.09); } .aiapd-screen li { list-style: none; display: flex; align-items: flex-start; gap: 12px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.5; font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-3); padding: 13px 0; border-bottom: 1px solid var(--ztc-border-border-1); } .aiapd-screen li:last-child { border-bottom: 0; } .aiapd-screen li::before { content: ""; flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; border-radius: 50%; background: var(--aiapd-accent); -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------- pairs: AI Helpdesk ----------------------------------------- */ .aiapd-pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1040px; margin-inline: auto; } .aiapd-pair { border: 1px solid var(--ztc-border-border-1); border-radius: 16px; padding: 22px 22px 24px; background: #fff; transition: border-color .35s ease, transform .35s ease; } .aiapd-pair:hover { border-color: color-mix(in srgb, var(--aiapd-accent) 40%, transparent); transform: translateY(-4px); } .aiapd-pair-before, .aiapd-pair-after { font-family: var(--ztc-family-font1); line-height: 1.58; } .aiapd-pair-before { font-size: var(--ztc-font-size-font-s16); color: var(--ztc-text-text-11); padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px dashed var(--ztc-border-border-1); } .aiapd-pair-after { font-size: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); } .aiapd-pair small { display: block; font-size: var(--ztc-font-size-font-s12); font-weight: var(--ztc-weight-semibold); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 7px; } .aiapd-pair-before small { color: var(--ztc-text-text-11); } .aiapd-pair-after small { color: var(--aiapd-accent); } /* ---------- compress: Agreemint ---------------------------------------- */ .aiapd-compress { max-width: 1000px; margin-inline: auto; } .aiapd-compress-lane { margin-bottom: 46px; } .aiapd-compress-lane:last-child { margin-bottom: 0; } .aiapd-compress-label { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; } .aiapd-compress-label b { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-bold); color: var(--ztc-text-text-3); } .aiapd-compress-label span { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s14); color: var(--ztc-text-text-11); } .aiapd-compress-lane.is-after .aiapd-compress-label b { color: var(--aiapd-accent); } /* the old way: six separate stops, each a handoff */ .aiapd-hops { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .aiapd-hop { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s14); line-height: 1.45; color: var(--ztc-text-text-4); background: var(--ztc-bg-bg-1); border: 1px dashed var(--ztc-border-border-1); border-radius: 10px; padding: 11px 14px; } .aiapd-hop-sep { color: var(--ztc-text-text-11); font-size: 15px; } /* the new way: one continuous run */ .aiapd-run { border-radius: 14px; border: 1px solid color-mix(in srgb, var(--aiapd-accent) 28%, transparent); background: color-mix(in srgb, var(--aiapd-accent) 5%, #fff); padding: 8px 22px; } .aiapd-run li { list-style: none; display: flex; align-items: flex-start; gap: 12px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: 1.55; font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-3); padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--aiapd-accent) 14%, transparent); } .aiapd-run li:last-child { border-bottom: 0; } .aiapd-run li::before { content: ""; flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; border-radius: 50%; background: var(--aiapd-accent); -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------- comparison variants responsive ----------------------------- */ @media (max-width: 991px) { .aiapd-pairs { grid-template-columns: repeat(2, 1fr); } .aiapd-objects { grid-template-columns: 1fr; gap: 34px; } .aiapd-paper { transform: none; } } @media (max-width: 767px) { .aiapd-swap-head { display: none; } .aiapd-swap-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; } .aiapd-swap-old { text-align: left; } .aiapd-swap-arrow { margin-inline: 0; transform: rotate(90deg); } .aiapd-ledger-head { display: none; } .aiapd-ledger-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 20px; position: relative; } .aiapd-ledger-row .aiapd-ledger-n { justify-self: start; } .aiapd-pairs { grid-template-columns: 1fr; } } /* ========================================================================== COMPARISON STAGING - dark stage The same markup on every page (tag, heading and six marked items on both sides), staged on a dark inset: "Today" recedes into it and the "With" card is the only lit object on the section. CSS only, scoped to .aiapd-page, which is the five application detail pages. The hub uses .aiapp-page and carries no comparison block. No page markup changes, so no content can be lost. ========================================================================== */ .aiapd-page .aiapd-compare-wrap { padding: 14px; background: linear-gradient(150deg, #0B1220 0%, #131F35 60%, #0D1526 100%); border-color: rgba(125, 162, 255, 0.16); } .aiapd-page .is-before .aiapd-compare-tag { color: rgba(255, 255, 255, 0.52); background: rgba(255, 255, 255, 0.07); } .aiapd-page .aiapd-compare-col.is-before h4 { color: rgba(255, 255, 255, 0.46); } .aiapd-page .aiapd-compare-col.is-before li { color: rgba(255, 255, 255, 0.44); border-bottom-color: rgba(255, 255, 255, 0.10); } .aiapd-page .is-before .aiapd-mark { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.44); } .aiapd-page .aiapd-compare-arrow span { box-shadow: 0 12px 34px color-mix(in srgb, var(--aiapd-glow) 46%, transparent); } .aiapd-page .aiapd-compare-col.is-after { border: 0; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px color-mix(in srgb, var(--aiapd-glow) 30%, transparent); } /* On dark, a 3px rule hanging off the card edge is swallowed by the card's own contrast. It becomes a full-width cap, clipped by the card radius, so it reads as part of the object rather than a hairline on it. */ .aiapd-page .aiapd-compare-col.is-after::before { top: 0; left: 0; right: 0; height: 6px; border-radius: 0; }