/* ============================================================ AI AGENTS PAGE (services/ai-agents/ only, after site.css and service-page.css). Prefix ag-. The layout, type and How it works come from service-page.css (svt- slots); this file only styles the page's two pieces: 1 hero - the agent at work: a field of faint brand blocks where a cobalt selector picks up four tasks one by one and sets them down in order as the logo's staircase 2 what you get - an illustrative "agent at work": a row of uses as tabs and, for the chosen one, its run - the goal, the steps it reasoned through with the tool each used, a person's check and the result Both play once in view (svc-agents.js, on service-page.js's [data-svt-in]); the tabs stay clickable after. The plain rules are the finished states; the script adds .ag-run (hero) and .ag-play (a run) only while motion is allowed, so with reduced motion or no script both simply show how they end. ============================================================ */ #site .ag-hero, #site .ag-get { --ag-ink: #0B1B33; --ag-mu: #4A5A72; --ag-mu2: #5E6D84; --ag-ln: rgba(11,27,51,.14); --ag-ln2: rgba(11,27,51,.08); --ag-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; } /* the big line breaks evenly rather than leaving one word on its own */ #site .ag-hero .svt-big { text-wrap: balance; } /* ============ 1 HERO: the block field ============ */ /* 10 x 8 cells (44px at full size, scaled to the slot), faint slots as one tiled square, the field's blocks as navy at faint opacities, the four tasks as and the agent as .ag-bot (finished: the tasks stand as the staircase and the agent waits on the next step, an empty cell) */ #site .ag-field { position: relative; width: min(100%, 440px); aspect-ratio: 10 / 8; container-type: inline-size; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 22%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent); mask-composite: intersect; } #site .ag-fd { --c: 10cqi; position: absolute; left: 0; top: 0; width: calc(var(--c) * 10); height: calc(var(--c) * 8); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='1' y='1' width='42' height='42' rx='3' fill='%230B1B33' fill-opacity='.02'/%3E%3C/svg%3E") 0 0 / var(--c) var(--c); } #site .ag-fd i, #site .ag-fd b, #site .ag-bot { position: absolute; left: 0; top: 0; translate: calc(var(--x) * var(--c)) calc(var(--y) * var(--c)); } #site .ag-fd i, #site .ag-fd b { margin: 1px; width: calc(var(--c) - 2px); height: calc(var(--c) - 2px); border-radius: 3px; } #site .ag-fd i { background: var(--nvy); opacity: calc(var(--o) * .6); } /* finished state: the four tasks set down in order as the staircase */ #site .ag-fd b { z-index: 1; background: var(--cb); opacity: var(--o); } #site .ag-fd b:first-of-type { box-shadow: 0 10px 22px -10px rgba(44,95,216,.7); } /* the agent: a cobalt selector round one cell */ #site .ag-bot { z-index: 2; width: var(--c); height: var(--c); box-sizing: border-box; border: 2px solid var(--cb); border-radius: 5px; box-shadow: 0 0 0 4px rgba(44,95,216,.12), 0 12px 24px -12px rgba(44,95,216,.8); } @media (max-width: 900px) { /* cropped to the five rows the agent works in (rows 2 to 6) */ #site .ag-field { aspect-ratio: 10 / 5; -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 16%, #000 88%, transparent); } #site .ag-fd { top: calc(var(--c) * -2); } } /* while it runs (svc-agents.js): the script moves each piece by setting --x / --y, with the move's length in --d */ #site .ag-run .ag-fd b, #site .ag-run .ag-bot { transition: translate var(--d, .4s) cubic-bezier(.55,0,.3,1), background-color .3s ease, opacity .35s ease, box-shadow .35s ease; } #site .ag-run .ag-fd b { background: var(--nvy); opacity: .24; box-shadow: none; } #site .ag-run .ag-fd b.ag-held { background: var(--cb); opacity: 1; box-shadow: 0 10px 22px -10px rgba(44,95,216,.7); } #site .ag-run .ag-fd b.ag-set { background: var(--cb); opacity: var(--o); box-shadow: none; } #site .ag-run .ag-fd b.ag-set:first-of-type { box-shadow: 0 10px 22px -10px rgba(44,95,216,.7); } #site .ag-run .ag-bot { opacity: 0; } #site .ag-run .ag-bot.ag-on { opacity: 1; } #site .ag-run .ag-bot.ag-grab { animation: ag-grab .32s ease; } @keyframes ag-grab { 50% { scale: .9; } } /* ============ 2 WHAT YOU GET: the agent at work ============ */ /* a white card: a header, a row of use tabs, then the panes stacked in one grid cell (so the card keeps one height whichever use is shown). Each pane: Goal, the steps with the tool each used, "Checked by a person" and the result. */ #site .ag-wk { position: relative; margin: 0; container-type: inline-size; } #site .ag-card { border: 1px solid var(--ag-ln2); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(11,27,51,.04), 0 2px 6px -2px rgba(11,27,51,.07), 0 40px 80px -40px rgba(11,27,51,.42); } #site .ag-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4cqi 5.2cqi; border-bottom: 1px solid var(--ag-ln2); } #site .ag-hd { display: inline-flex; align-items: center; gap: 2.6cqi; min-width: 0; } #site .ag-hd b { font-size: max(14.5px, 3.7cqi); font-weight: 600; letter-spacing: -.01em; color: var(--ag-ink); } /* the brand mark in small: three blocks stepping down */ #site .ag-mk { position: relative; flex: none; width: 22px; height: 18px; } #site .ag-mk i { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--cb); } #site .ag-mk i:nth-child(1) { left: 0; top: 0; } #site .ag-mk i:nth-child(2) { left: 7px; top: 5px; opacity: .74; } #site .ag-mk i:nth-child(3) { left: 14px; top: 10px; opacity: .5; } #site .ag-tag { flex: none; font-family: var(--ag-mono); font-size: 12.5px; line-height: 1; text-transform: uppercase; letter-spacing: .03em; color: var(--ag-mu2); padding: 1.6cqi 2.4cqi; border: 1px solid var(--ag-ln); border-radius: 100px; } /* the uses: pill tabs that wrap onto a second row */ #site .ag-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 3.8cqi 5.2cqi; border-bottom: 1px solid var(--ag-ln2); } #site .ag-tab { appearance: none; margin: 0; padding: 6px 11px; border: 1px solid var(--ag-ln); border-radius: 100px; background: #fff; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.2; letter-spacing: -.005em; color: var(--ag-mu); transition: background-color .2s ease, border-color .2s ease, color .2s ease; } #site .ag-tab:hover { border-color: rgba(44,95,216,.45); color: var(--ag-ink); } #site .ag-tab[aria-selected="true"] { border-color: var(--cb); background: var(--cb); color: #fff; } #site .ag-tab:focus-visible { outline: 2px solid var(--cb); outline-offset: 2px; } #site .ag-panes { display: grid; background: #FAFBFD; } #site .ag-pane { grid-area: 1 / 1; visibility: hidden; padding: 4.6cqi 5.2cqi 5.2cqi; } #site .ag-pane.ag-on { visibility: visible; } #site .ag-lab { display: block; font-family: var(--ag-mono); font-size: 12.5px; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: .03em; color: var(--ag-mu2); } #site .ag-goal { margin: 0; } #site .ag-gt { display: block; margin-top: 5px; font-size: max(15px, 3.8cqi); font-weight: 600; line-height: 1.35; letter-spacing: -.012em; color: var(--ag-ink); text-wrap: pretty; } /* the steps: a tick, what it did, and the tool it used */ #site .ag-wk .ag-steps { list-style: none; margin: 3.8cqi 0 0; padding: 0; display: grid; gap: 2.4cqi; } #site .ag-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2.6cqi; row-gap: 3px; align-items: start; } #site .ag-ck { grid-row: 1 / span 2; position: relative; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 0; border-radius: 5px; background: #EEF3FD; color: var(--cb); } #site .ag-ck svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } #site .ag-st { font-size: 14px; line-height: 1.4; color: var(--ag-ink); } #site .ag-tool { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 7px; border-radius: 5px; border: 1px solid var(--ag-ln2); background: #fff; font-family: var(--ag-mono); font-size: 12.5px; line-height: 1.4; color: var(--ag-mu); } #site .ag-tool::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1.5px; background: var(--cb); opacity: .6; } /* a person's check, then the result */ #site .ag-ok { display: flex; align-items: center; gap: 2.4cqi; margin: 4cqi 0 0; padding-top: 3.6cqi; border-top: 1px solid var(--ag-ln2); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ag-ink); } #site .ag-pp { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--k-acc, #47A045); color: #fff; } #site .ag-pp svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } #site .ag-out { margin-top: 3.2cqi; padding: 3.4cqi 3.8cqi; border-radius: 10px; background: #fff; border: 1px solid rgba(44,95,216,.3); box-shadow: 0 14px 30px -24px rgba(44,95,216,.6); } #site .ag-out .ag-lab { color: var(--cb); } #site .ag-out p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ag-ink); text-wrap: pretty; } /* while a run plays (svc-agents.js adds .ag-play to the pane, then marks each step .ag-now while it works and .ag-do once done, and the pane .ag-sok / .ag-sout for the check and the result). Without the script, or with reduced motion, every pane simply shows its finished run. */ #site .ag-play .ag-steps li, #site .ag-play .ag-ok, #site .ag-play .ag-out { opacity: 0; translate: 0 6px; transition: opacity .35s ease, translate .45s cubic-bezier(.16,.6,.18,1); } #site .ag-play .ag-steps li.ag-now, #site .ag-play .ag-steps li.ag-do, #site .ag-play.ag-sok .ag-ok, #site .ag-play.ag-sout .ag-out { opacity: 1; translate: 0 0; } #site .ag-play li.ag-now .ag-ck svg { opacity: 0; } #site .ag-play li.ag-now .ag-ck::after { content: ""; position: absolute; inset: 6px; border-radius: 2px; background: var(--cb); animation: ag-think .8s ease-in-out infinite; } @keyframes ag-think { 50% { opacity: .3; scale: .7; } } #site .ag-play li.ag-now .ag-tool { opacity: 0; } #site .ag-play li.ag-do .ag-tool { transition: opacity .3s ease; } #site .ag-play .ag-goal { animation: ag-goal .4s ease; } @keyframes ag-goal { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { #site .ag-play .ag-goal, #site .ag-play li.ag-now .ag-ck::after { animation: none !important; } } @media (max-width: 900px) { /* on phones the card takes the full column so the six tabs fit in two or three short rows */ #site .ag-get .svt-deliv { width: 100%; max-width: 440px; } #site .ag-tab { padding: 6px 10px; font-size: 13px; } }