/* * Copyright (c) 2026 Anchor Technologies, Inc. All rights reserved. * * This source code is the proprietary and confidential property of Anchor * Technologies, Inc. Unauthorized copying, distribution, modification, or use * of this file, in whole or in part, via any medium, is strictly prohibited * without the express prior written permission of Anchor Technologies, Inc. */ /* Reusable layout primitives shared across site pages. Tokens come from index.css. */ /* Smooth scrolling exists here for in-page anchor jumps, but `scroll-behavior` governs EVERY programmatic scroll of this element — including the offset the browser restores on reload. Declared unconditionally, a refresh started at the top and animated down to where you had been, which reads as the page scrolling itself rather than as landing where you left it. So it is armed, not declared: header.js adds the class once load is done and the restore has happened. Every anchor jump comes after that point, so they are unaffected. */ html { scroll-behavior: auto; } html.scroll-smooth { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html.scroll-smooth { scroll-behavior: auto; } } /* Hosted-only chrome (Pricing, Contact sales) links to pages that exist only on the hosted deployment. On on-prem installs those routes 404, so the server tags at serve time — see server/routes/platform/site.ts — and we hide them here. Pure CSS so it holds with JS disabled. */ html[data-landing='onprem'] .hosted-only { display: none; } /* Content layout: a centered band at --content-width with side fillers that grow into any remaining viewport space. Sides hold a min-width of --pad-4 until the viewport collapses below 630px, at which point they disappear and the center takes the full width. */ .content { display: flex; } .content__side { flex: 1; min-width: var(--pad-4); } .content__center { flex: 0 1 var(--content-width); } @media (max-width: 630px) { .content__side { display: none; } } /* Button — mirrors the heavy and ghost (skeleton) variants of components/shared/lib/Button.tsx so site pages match the SPA. */ .btn { display: inline-flex; align-items: center; gap: var(--pad-2); padding: var(--pad-2) var(--pad-3); font-family: inherit; font-size: var(--font-3); border: none; border-radius: var(--rad-3); cursor: pointer; text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 1px; } .btn--heavy { color: var(--font-color-inverse); background: var(--font-color); } .btn--ghost { color: var(--font-color); background: transparent; box-shadow: inset 0 0 0 1px var(--highlight); } /* Quarter grid — divides .content__center into 4 equal columns. .col-half spans 2 of 4 (50%), .col-quarter spans 1 of 4 (25%). Responsive: 4-col → 2-col at 900px → 1-col at 640px. Gap defaults to --pad-7; override with inline style if needed. */ .quarter-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .col-half { grid-column: span 2; } .col-quarter { grid-column: span 1; } @media (max-width: 900px) { .quarter-grid { grid-template-columns: repeat(2, 1fr); } .col-half { grid-column: span 2; } } @media (max-width: 640px) { .quarter-grid { grid-template-columns: 1fr; } .col-half { grid-column: span 1; } } /* Sidebar layout — a sticky 1/4-width sidebar on the left with a 3/4-width main content area on the right. The sidebar sticks below the header while scrolling through the content; when the content ends, the sidebar scrolls away with it. Stacks at 900px (sidebar on top, content below). */ .sidebar-layout { display: flex; align-items: flex-start; } .sidebar { flex: 0 0 25%; box-sizing: border-box; position: sticky; top: 0; max-height: calc(100vh - var(--header-height)); overflow-y: auto; scrollbar-width: none; padding: var(--pad-9) var(--pad-4) var(--pad-9) 0; } .sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pad-1); } .sidebar::-webkit-scrollbar { display: none; } .sidebar-main { flex: 1; min-width: 0; border-left: 1px dashed var(--highlight-dark); padding: var(--pad-9) 0 var(--pad-9) var(--pad-4); } @media (max-width: 900px) { .sidebar-layout { flex-direction: column; } .sidebar { flex: none; width: 100%; position: static; max-height: none; padding-top: var(--pad-6); padding-bottom: var(--pad-6); } .sidebar-main { border-left: none; padding: var(--pad-6) 0; border-top: 1px dashed var(--highlight-dark); margin-top: 0; } } /* Ask-AI banner — "Skip the reading" callout with a copy-to-clipboard URL button. Used on docs/setup pages to nudge users toward pasting the page link into their AI instead of reading manually. */ .ask-ai { display: flex; align-items: center; justify-content: space-between; gap: var(--pad-4); padding: var(--pad-4); background: var(--highlight-transparent); border-radius: var(--rad-3); } .ask-ai__text { display: flex; flex-direction: column; gap: var(--pad-1); } .ask-ai__title { margin: 0; font-family: var(--font-display); font-size: var(--font-3); font-weight: 600; color: var(--font-color); } .ask-ai__body { margin: 0; font-size: var(--font-3); color: var(--font-color-light); line-height: 1.4; } .ask-ai__url { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--font-3); color: var(--font-color); background: transparent; border: none; padding: var(--pad-2) var(--pad-3); border-radius: var(--rad-2); box-shadow: inset 0 0 0 1px var(--highlight); cursor: pointer; transition: background 0.15s ease; white-space: nowrap; } .ask-ai__url:hover { background: var(--highlight); } .ask-ai__url:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 1px; } @media (max-width: 640px) { .ask-ai { flex-direction: column; align-items: flex-start; } .ask-ai__url { align-self: stretch; text-align: center; } } /* Sidebar links — TOC-style nav links for the sticky sidebar. */ .sidebar__link { font-size: var(--font-4); color: var(--font-color-light); text-decoration: none; transition: color 0.15s ease; display: block; padding: var(--pad-2) var(--pad-3); border-radius: var(--rad-1); } .sidebar__link:hover { color: var(--font-color); } .sidebar__link--active { color: var(--font-color); background: var(--highlight-light); border-radius: var(--rad-2); } .sidebar__link:focus-visible { outline: 2px solid var(--outline-color); outline-offset: -2px; border-radius: var(--rad-3); } .sidebar__badge { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: var(--highlight-transparent); color: var(--font-color-light); margin-left: 6px; vertical-align: middle; } /* Page header — title + subtitle + ask-ai for sidebar-layout pages. */ .page-title { font-family: var(--font-display); font-size: var(--font-8); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: var(--font-color); margin: 0 0 var(--pad-4); } .page-subtitle { font-size: var(--font-4); line-height: 1.5; color: var(--font-color-light); margin: 0; max-width: 800px; } .page-ask-ai { margin-top: var(--pad-5); } /* Agent section headings — icon + name side by side. */ .agent-heading { font-family: var(--font-display); font-size: var(--font-6); font-weight: 600; color: var(--font-color); margin: 0 0 var(--pad-4); display: flex; align-items: center; gap: var(--pad-2); } .agent-heading__icon { width: 28px; height: 28px; flex-shrink: 0; transform: scale(1.2); } .agent-body { font-size: var(--font-3); line-height: 1.6; color: var(--font-color-light); margin: 0; max-width: 700px; } .agent-steps { font-size: var(--font-4); line-height: 1.6; color: var(--font-color); margin: 0; display: flex; flex-direction: column; gap: var(--pad-3); max-width: 700px; } .agent-steps strong { color: var(--font-color); font-weight: 600; } .agent-steps__link { color: var(--font-color); font-weight: 500; } .agent-steps__link:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; border-radius: 2px; } .agent-steps__code { display: block; overflow-x: auto; margin-top: var(--pad-2); font-family: var(--font-mono); font-size: var(--font-3); color: var(--font-color); background: var(--highlight-transparent); padding: var(--pad-2) var(--pad-3); border-radius: var(--rad-2); border: none; outline: none; cursor: pointer; text-align: left; transition: background 0.15s ease; } .agent-steps__code:hover { background: var(--highlight); } .agent-steps__code:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 1px; } /* OS tabs — macOS / Linux / Windows selector above a code block. */ .os-tabs { margin-top: var(--pad-2); max-width: 80%; } .os-tabs__bar { display: flex; gap: 0; } .os-tabs__btn { font-family: var(--font-body); font-size: var(--font-2); padding: var(--pad-1) var(--pad-3); background: transparent; border: none; cursor: pointer; color: var(--font-color-light); border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .os-tabs__btn:hover { color: var(--font-color); } .os-tabs__btn--active { color: var(--font-color); border-bottom-color: var(--font-color); } .os-tabs__btn:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 1px; border-radius: 2px; } .os-tabs__panel { display: none; } .os-tabs__panel--active { display: block; } .os-tabs__panel .agent-steps__code { margin-top: 0; border-radius: 0 0 var(--rad-2) var(--rad-2); } /* Header — shared nav bar + mobile menu used across site pages. Includes desktop nav links (hidden at 700px), burger menu (shown at 700px), mobile menu overlay with fade + scroll lock, and the menu-open body class that fades out content centers. */ .header-logo:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; border-radius: 2px; } .header-nav a:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; border-radius: 2px; } .mobile-menu { position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; flex-direction: column; background: var(--font-color-inverse); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .content__center { transition: opacity 0.2s ease; } .menu-open .content__center { opacity: 0; } .mobile-menu .content__center, #header .content__center { opacity: 1 !important; } #header { transition: background 0.2s ease; } .menu-open #header { background: var(--font-color-inverse); } .mobile-menu[hidden] { display: none; } .mobile-menu.mobile-menu--open { opacity: 1; pointer-events: auto; background: var(--font-color-inverse); } .mobile-menu__link { font-family: var(--font-display); font-size: var(--font-5); font-weight: 500; color: var(--font-color); padding-bottom: var(--pad-5); border-bottom: 1px solid var(--highlight); text-decoration: none; } .mobile-menu__link:hover { opacity: 0.7; } .mobile-menu__link:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; border-radius: 2px; } .header-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 36px; align-items: center; background: none; border: none; padding: 0; cursor: pointer; border-radius: var(--rad-2); } .header-burger:hover { background: var(--highlight); } .header-burger:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 1px; } .burger-line { display: block; width: 18px; height: 2px; background: var(--font-color); border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease; } .header-burger--open .burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .header-burger--open .burger-line:nth-child(2) { opacity: 0; } .header-burger--open .burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 700px) { .header-nav { display: none !important; } .header-burger { display: inline-flex; } } /* CTA grid — "Start building today" section with half-width hero (title + subtitle + buttons) and two quarter-width feature cards. Depends on .quarter-grid, .col-half, .col-quarter above. */ .cta-grid__hero { display: flex; flex-direction: column; gap: var(--pad-4); padding: var(--pad-9) var(--pad-4); } .cta-grid__title { font-family: var(--font-display); font-size: var(--font-7); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: var(--font-color); margin: 0; } .cta-grid__subtitle { font-size: var(--font-4); line-height: 1.5; color: var(--font-color-light); margin: 0; max-width: 90%; } .cta-grid__buttons { display: flex; gap: var(--pad-3); flex-wrap: wrap; } .cta-grid__card { display: flex; flex-direction: column; gap: var(--pad-3); padding: var(--pad-9) var(--pad-4); } .cta-grid__card-title { font-family: var(--font-display); font-size: var(--font-4); font-weight: 600; color: var(--font-color); margin: 0; } .cta-grid__card-body { font-size: var(--font-3); line-height: 1.5; color: var(--font-color-light); margin: 0; } .cta-grid__link { font-size: var(--font-3); font-weight: 500; color: var(--font-color); text-decoration: none; align-self: flex-start; } .cta-grid__link:hover { text-decoration: underline; } .cta-grid__link:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; border-radius: 2px; } @media (max-width: 900px) { .cta-grid__hero, .cta-grid__card { padding-top: 0; padding-bottom: 0; } .cta-grid__hero { padding-top: var(--pad-9); } .cta-grid__card:last-child { padding-bottom: var(--pad-9); } } @media (max-width: 640px) { .cta-grid__subtitle, .cta-grid__card-body { max-width: 70%; } .cta-grid__buttons .btn { flex: 1; text-align: center; justify-content: center; } } /* Footer grid — shared 4-column footer used across site pages. Depends on .quarter-grid and .col-quarter above. Light vertical dividers between columns collapse at 2-col and 1-col breakpoints. */ .footer-grid__col { padding: var(--pad-5) var(--pad-4); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05); } .footer-grid__col:last-child { box-shadow: none; } .footer-grid__title { font-family: var(--font-display); font-size: var(--font-3); font-weight: 700; color: var(--font-color-inverse); margin: 0 0 var(--pad-3); } .footer-grid__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pad-2); } .footer-grid__list a { font-size: var(--font-3); color: var(--font-color-inverse); text-decoration: none; opacity: 0.7; transition: opacity 0.15s; } .footer-grid__list a:hover { opacity: 1; } .footer-grid__list a:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; border-radius: 2px; } .footer-grid__address { font-style: normal; font-size: var(--font-3); line-height: 1.5; opacity: 0.7; margin: 0 0 var(--pad-2); } .footer-grid__email { font-size: var(--font-3); color: var(--font-color-inverse); text-decoration: none; opacity: 0.7; transition: opacity 0.15s; } .footer-grid__email:hover { opacity: 1; } .footer-grid__email:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; border-radius: 2px; } #row-5 a:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; border-radius: 2px; } @media (max-width: 900px) { .footer-grid__col { box-shadow: none; } .footer-grid__col:nth-child(odd) { box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.1); } } @media (max-width: 640px) { .footer-grid__col, .footer-grid__col:nth-child(odd) { box-shadow: none; } } /* ── use-case cards, their dialog, and the use case as a page ───────────────── Shared by /hello and /use-cases. Both are filled by the GTM repo's generator between its gtm:use-case markers, so the markup is identical on each and the styling has to live where both can reach it. */ /* The name of the use case, small and set apart — it labels the card rather than titling it, so the sentence below can do the work. */ .uc-eyebrow { margin: 0 0 var(--pad-3); font-family: var(--font-mono); font-size: var(--font-1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--font-color-light); } /* Title and accent are one sentence broken in two, and the accent runs on from the title in italic — the same pairing the pilot brief uses, so a story reads identically wherever somebody meets it. */ .uc-title { margin: 0; font-family: var(--font-display); font-size: var(--font-5); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--font-color); /* Not balance: evening the lines out pushes the accent onto its own row even when the line above it had room for it. */ text-wrap: pretty; } .uc-accent { font-style: italic; font-weight: 500; color: var(--font-color-light); } /* margin-top:auto is the load-bearing line here. Titles run one to three lines, and without it four cards of different heights would leave their personas floating at four different levels instead of reading as a set. */ .uc-persona { margin-top: auto; padding-top: var(--pad-5); display: flex; align-items: center; gap: var(--pad-3); } .uc-face { flex: none; width: 42px; height: 42px; border-radius: 50%; background: rgba(0, 0, 0, 0.05); color: var(--font-color); overflow: hidden; display: block; } /* The portrait is drawn to the edges of its own box, so it is scaled up and pushed down to sit like a face in a frame rather than a head floating in the middle of a circle. */ .uc-face > svg { width: 106%; height: 106%; margin: -3% 0 0 -3%; display: block; } .uc-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .uc-name { font-family: var(--font-display); font-size: var(--font-4); font-weight: 600; line-height: 1.1; color: var(--font-color); } .uc-role { font-family: var(--font-mono); font-size: var(--font-2); line-height: 1.3; color: var(--font-color-light); } @media (max-width: 640px) { .uc-grid { grid-template-columns: minmax(0, 1fr); } } /* ── use-case cards and their dialog ────────────────────────────────────────── Shared by /hello and /use-cases. Both are filled by the GTM repo's generator between its gtm:use-case markers, so the markup is identical on each and the styling has to live somewhere both can reach. */ /* The use-case cards. Two up, stacking to one on narrow screens. The outline rather than a filled surface keeps the section on the page background, per the background rule in this folder's CLAUDE.md. */ /* grid-auto-rows:1fr rather than letting rows size to content. Cards in one row already stretch to match each other; without this the second row sizes itself independently and the four read as two pairs. */ .uc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--pad-4); margin: var(--pad-6) 0 0; } /* Same surface as the .tile grid above: an inset ring rather than a border, and a radial wash whose focal point moves card to card so four of them side by side do not read as four copies of one gradient. */ /* The wash is drawn larger than the card and parked off to one side, so hover has somewhere to slide it to. Moving background-position rather than the focal point keeps this to one animatable property that every browser handles — a custom property in a gradient cannot transition without being registered first. */ .uc-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; padding: var(--pad-5); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); border-radius: var(--rad-2); overflow: hidden; cursor: pointer; transition: box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.3, 1); } .uc-card:hover, .uc-card:focus-visible { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); } .uc-card:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .uc-card { transition: none; } } /* Only ever rendered with scripting off, where the card cannot open a dialog. Spaced away from the card's own persona row so the two do not run together. */ .uc-fallback { margin-top: var(--pad-5); padding-top: var(--pad-5); border-top: 1px solid rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: var(--pad-4); } .uc-fallback .uc-steps { gap: var(--pad-3); } /* ── the use-case modal ────────────────────────────────────────────── THE PADDING IS PART OF THE SCROLL, not an inset on a fixed box. The overlay is the scroll container and carries the padding itself, so a short document sits centred inside it and a long one starts under the top padding, runs past the bottom of the viewport, and ends against the same gap once you have scrolled to it. display:flex with margin:auto on the dialog rather than align-items:center — centring a flex child taller than its container clips the top of it and puts it out of reach of the scrollbar, which is precisely the case a long use case produces. */ .uc-modal { position: fixed; inset: 0; z-index: 200; display: flex; overflow-y: auto; /* contain, not none: the content is free to rubber-band at its ends, which is the scroll behaving normally. What must not move is the backdrop, and that is a fixed layer below rather than a background on this element. Chaining to the page behind is still blocked. */ overscroll-behavior: contain; padding: clamp(14px, 5vh, 56px) clamp(14px, 4vw, 56px); } /* THE BACKDROP IS ITS OWN FIXED LAYER, not a background on the scroll container. Painted on the container, it travels with the elastic bounce at the ends of the scroll and the whole overlay visibly rubber-bands. Fixed to the viewport, it cannot move whatever the content does. */ .uc-modal::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg-color-transparent); } /* Load-bearing: display:flex above would otherwise beat the hidden attribute, leaving an empty dialog on screen that nothing can close. */ .uc-modal[hidden] { display: none; } .uc-modal__dialog { position: relative; margin: auto; width: min(820px, 100%); padding: var(--pad-6); background: var(--color-surface, #fff); border-radius: var(--rad-2); /* Two soft layers rather than one heavy one: a close, faint shadow to seat the edge, and a wide, very light one for depth. */ box-shadow: 0 1px 2px rgba(26, 21, 35, 0.06), 0 12px 32px -12px rgba(26, 21, 35, 0.14); } .uc-modal__dialog:focus { outline: none; } .uc-modal::before { animation: uc-fade 0.26s ease both; } .uc-modal__close { float: right; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: calc(var(--pad-2) * -1) calc(var(--pad-2) * -1) 0 var(--pad-4); border: 0; /* The same corner the cards and tiles use, not a circle. Transparent until hovered — the icon is the target, the tint only confirms it. */ border-radius: var(--rad-2); background: transparent; color: var(--font-color); cursor: pointer; transition: background 0.2s ease; } .uc-modal__close:hover { background: rgba(0, 0, 0, 0.11); } .uc-modal__close:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; } /* ── inside the dialog ──────────────────────────────────────────── Same account of the use case the pilot brief gives, set for a screen instead of a sheet: the sentence, who it happens to, what goes wrong, what Anchor does, and the steps in order. */ .uc-modal__eyebrow { margin: 0 0 var(--pad-3); font-family: var(--font-mono); font-size: var(--font-1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--font-color-light); } .uc-modal__title { margin: 0; font-family: var(--font-display); font-size: var(--font-7); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: var(--font-color); max-width: 24ch; text-wrap: pretty; } .uc-modal__title em { font-style: italic; font-weight: 500; color: var(--font-color-light); } /* The company, set behind a divider so the role still reads first. */ .uc-org::before { content: "·"; margin: 0 0.5em; opacity: 0.5; } .uc-modal__persona { display: flex; align-items: center; gap: var(--pad-3); margin: var(--pad-5) 0 0; padding: 0 0 var(--pad-6); border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08)); } /* A small mono label, set apart from the prose it introduces — the same register the cards use for the use case name. */ .uc-modal__label { margin: var(--pad-6) 0 var(--pad-3); font-family: var(--font-mono); font-size: var(--font-1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--font-color-light); } .uc-modal__prose { margin: 0; font-family: var(--font-body); font-size: var(--font-4); line-height: 1.6; color: var(--font-color); max-width: 62ch; } /* The steps, numbered in mono down the margin so the titles keep a single left edge however far the count runs. */ /* A generous gap, because each step is a title with a piece of artwork under it — at the old spacing a step's canvas sat as close to the next step's title as to its own. */ .uc-steps { list-style: none; margin: 0; padding: 0; counter-reset: ucstep; display: flex; flex-direction: column; gap: var(--pad-8); } /* No max-width here. A reading measure is right for the title, but the artwork below it is drawn on a 700px canvas and nothing outside an iframe can reflow what is inside one — so constraining the list item constrained the canvas, and the difference came out as a sideways scrollbar under every step. */ .uc-step { counter-increment: ucstep; position: relative; padding-left: 48px; font-family: var(--font-body); font-size: var(--font-4); line-height: 1.5; color: var(--font-color); } .uc-step::before { content: counter(ucstep, decimal-leading-zero); position: absolute; left: 0; top: 0.02em; font-family: var(--font-mono); font-size: var(--font-4); font-weight: 600; letter-spacing: -0.02em; color: var(--font-color-light); } /* A step's artwork, in its own document. Written against the brief's stylesheet, which is shipped to /_site/v-1787631701/gtm-use-case.css by the GTM build — three-letter class names and sealed drawn fragments are why it is framed rather than inlined. The canvases inside are drawn at fixed widths, 560 or 700, and nothing out here can reflow what is in there. So the wrapper scrolls sideways rather than clipping when the dialog is narrower than the artwork. */ .uc-art { /* Pulled back out of the step's number gutter, so the canvas gets the dialog's full width rather than the width left over after the 36px. */ margin: var(--pad-4) 0 var(--pad-2) -48px; overflow-x: auto; overscroll-behavior-x: contain; } .uc-art__frame { display: block; width: 100%; min-width: 700px; /* A holding height until the document inside measures itself and says what it actually needs — collapsed to nothing, the iframe would never lay out and never report. */ height: 260px; border: 0; } /* The use case as a page rather than a card: the same sentence, set to open a document instead of to fit in a tile. */ .uc-title--page { font-size: var(--font-7); line-height: 1.12; max-width: 20ch; margin: 0 0 var(--pad-3); } .uc-title--page + .uc-modal__persona { margin-top: var(--pad-4); }