/* ===== CSS custom properties (design tokens) ===== */ :root{ --lime-100:rgba(111,138,5,0.22); --navy-050:rgba(10,50,63,0.08); --navy-950:#0A323F; --navy-800:#153F4D; --navy-700:#1B4856; --navy-500:#2C5A67; --teal-600:#007D81; --teal-400:#5FB0AE; --lime-500:#6F8A05; --lime-600:#5E7504; --mint-300:#C6E6DB; --verify-500:#2F8F6D; --paper:#F5F7F6; --paper-alt:#ECEFED; --ink-900:#10262C; --ink-600:#4A5C61; --ink-400:#7C8C90; --line:rgba(16,38,44,0.14); --line-strong:rgba(16,38,44,0.26); --white:#FFFFFF; --font-display:'Space Grotesk'; --font-body:'Inter'; --font-mono:'IBM Plex Mono'; } /* ===== Source global.css ===== */ /* ============================================================ SupplierGateway — global styles Colour and font values are injected as CSS variables by BaseLayout.astro from src/data/tokens.json. Change them there, not here, and every page updates. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body), sans-serif; background: var(--white); color: var(--ink-900); line-height: 1.55; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--lime-500); color: var(--navy-950); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; } @media (max-width: 640px) { .wrap { padding: 0 20px; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- Header ---------- */ .sg-header { position: sticky; top: 0; z-index: 60; background: var(--navy-950); } .nav-primary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 32px; max-width: 1400px; margin: 0 auto; } .nav-logo img { height: 38px; width: auto; } .nav-links { display: flex; gap: 28px; font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.85); } .nav-links a:hover { color: #fff; } .nav-cta { display: flex; gap: 10px; align-items: center; } .nav-secondary { border-top: 1px solid rgba(255,255,255,.1); padding: 10px 32px; max-width: 1400px; margin: 0 auto; display: flex; justify-content: flex-end; gap: 20px; } .nav-secondary a { font-size: 13px; color: rgba(255,255,255,.6); } .nav-secondary a:hover { color: #fff; } @media (max-width: 1040px) { .nav-links { display: none; } } @media (max-width: 560px) { .nav-cta .btn-outline { display: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 20px; font-size: 13.5px; font-weight: 600; border-radius: 100px; border: 1.5px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; font-family: inherit; white-space: nowrap; } .btn-lime { background: var(--lime-500); color: var(--navy-950); } .btn-lime:hover { background: var(--lime-600); } .btn-outline { color: #fff; border-color: rgba(255,255,255,.7); } .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); } .btn-ghost { color: var(--navy-950); border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--navy-950); } .btn-solid { background: var(--navy-950); color: #fff; } .btn-solid:hover { background: var(--navy-800); } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display), sans-serif; font-weight: 700; letter-spacing: -0.02em; color: var(--navy-950); } h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -0.03em; max-width: 20ch; } .hl-accent { color: var(--lime-500); } h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; } h3 { font-size: 20px; line-height: 1.2; } h4 { font-size: 17px; font-weight: 600; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono), monospace; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-500); margin-bottom: 18px; } .eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--verify-500); border-radius: 1px; } .lede { margin-top: 18px; font-size: 18px; line-height: 1.55; color: var(--ink-600); max-width: 46ch; } .body-text { font-size: 16px; color: var(--ink-600); line-height: 1.65; max-width: 62ch; } .body-text + .body-text { margin-top: 12px; } /* ---------- Sections ---------- */ .section { padding: 76px 0; } .section--tight { padding: 48px 0; } .section--alt { background: var(--paper); background-image: radial-gradient(rgba(16,38,44,.14) 1px, transparent 1px); background-size: 22px 22px; } .section--dark { background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 24px 24px; } .section--dark { background: var(--navy-950); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } .section--dark .body-text, .section--dark .lede { color: rgba(255,255,255,.72); } .section--dark .eyebrow { color: var(--mint-300); } @media (max-width: 640px) { .section { padding: 52px 0; } } .section-head { max-width: 46rem; margin-bottom: 32px; } /* ---------- Point list (the four short points) ---------- */ .points { list-style: none; margin-top: 26px; display: grid; gap: 2px; } .point { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink-900); } .point:last-child { border-bottom: 1px solid var(--line); } .point::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 8px; background: var(--lime-500); border-radius: 1px; } .section--dark .point { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.14); } /* ---------- Bento grid ---------- Tiles are individually bordered and the container is transparent, so a partially filled last row shows page background rather than a grey block. ------------------------------------------------------------------ */ .bento { display: grid; grid-template-columns: repeat(var(--bento-cols, 4), 1fr); gap: 14px; margin-top: 28px; } .tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 172px; padding: 22px 22px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } a.tile:hover, a.tile:focus-visible { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 14px 28px -18px rgba(10,50,63,.32); } .tile--hero { grid-column: span 2; grid-row: span 2; } /* Narrow hero (Bento's heroCols={1}) — one column tall rather than a 2x2 block, which frees a column for the tiles beside it. */ .tile--hero-narrow { grid-column: span 1; } .tile--wide { grid-column: span 2; } .tile--xwide { grid-column: span 3; } .tile--dark { background: var(--navy-950); border-color: var(--navy-950); } .tile--dark .tile__face { color: #fff; } .tile--dark .tile__hover { color: rgba(255,255,255,.68); } .tile--dark .tile__icon { color: var(--lime-500); } .tile--dark .tile__arrow { color: var(--lime-500); } .tile--accent { background: var(--mint-300); border-color: #A9D8C9; } .tile--accent .tile__icon { color: var(--teal-600); } .tile__icon { width: 26px; height: 26px; color: var(--teal-600); flex-shrink: 0; } .tile__imgbox { display: flex; align-items: center; justify-content: flex-start; height: 46px; width: 100%; overflow: visible; } .tile__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .tile--hero .tile__imgbox { height: 76px; } /* ---- Uniform logo scale (opt-in via Bento's `uniformLogos`) ---- The product wordmarks all share an intrinsic height of 488px but differ in width (4.07:1 up to 6.73:1). In a fixed-height box with max-width:100%, the wide ones hit the width limit first and shrink, so the product names ended up rendering at different sizes — Access & Monitoring at 33px against ESG Platform at 46px. Giving the box the widest logo's aspect ratio means width never binds: the box height is derived from its own width, every logo is scaled to that height, and all the wordmarks land at one size at every viewport. The hero tile is the exception: it spans two columns plus a gap, so its box is ~2.26x wider and the derived height came out ~75px against everyone else's ~33px. Its ratio is scaled by the same factor so it tracks the rest, and max-height caps the whole set so they agree exactly once the wrap hits its 1240px maximum. */ .bento--uniform .tile__imgbox { height: auto; aspect-ratio: 6.73; max-height: 35px; flex: none; } .bento--uniform .tile__img { height: calc(100% * var(--logo-scale, 1)); width: auto; } .bento--uniform .tile--hero .tile__imgbox { height: auto; aspect-ratio: 15.2; } .bento--uniform .tile--hero-narrow .tile__imgbox { aspect-ratio: 6.73; } /* Below 540px the hero drops to a single column, so it is no wider than its siblings and takes the standard ratio again. */ @media (max-width: 540px) { .bento--uniform .tile--hero .tile__imgbox { aspect-ratio: 6.73; } } .tile--graphic { background: var(--white); }.tile--graphic .tile__icon { color: var(--teal-600); } .tile--hero .tile__icon { width: 34px; height: 34px; } .tile__body { display: flex; flex-direction: column; } .tile__face { font-family: var(--font-display), sans-serif; font-weight: 600; font-size: 18px; line-height: 1.22; letter-spacing: -0.01em; color: var(--navy-950); } /* Every tile's heading is the same size. The hero tile used to be 26px, but since each tile also carries a product logo, the larger label only made the grid's typography look inconsistent. */ .tile__hover { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-600); transition: max-height .22s ease, opacity .22s ease, margin-top .22s ease; } .tile:hover .tile__hover, .tile:focus-visible .tile__hover { max-height: 9rem; opacity: 1; margin-top: 9px; } .tile__arrow { position: absolute; top: 20px; right: 22px; font-family: var(--font-mono), monospace; font-size: 14px; color: var(--navy-500); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; } .tile:hover .tile__arrow, .tile:focus-visible .tile__arrow { opacity: 1; transform: translateX(0); } @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); gap: 12px; } .tile--hero { grid-column: span 2; grid-row: auto; } .tile--wide, .tile--xwide { grid-column: span 2; } .tile__hover { max-height: 9rem; opacity: 1; margin-top: 9px; } } @media (max-width: 540px) { .bento { grid-template-columns: 1fr; } .tile--hero, .tile--wide, .tile--xwide { grid-column: span 1; } } /* ---------- Marquee (scrolling client logos) ---------- Client logo files are white/reverse versions, so this band sits on navy. Swap .marquee--dark for .marquee--light only if full-colour logo files are supplied. ------------------------------------------------------------ */ .marquee { padding: 30px 0; overflow: hidden; position: relative; } .marquee--dark { background: var(--navy-950); } .marquee--light { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .marquee-label { font-family: var(--font-mono), monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; text-align: center; } .marquee--dark .marquee-label { color: rgba(255,255,255,.5); } .marquee--light .marquee-label { color: var(--ink-400); } .marquee-track { display: flex; align-items: center; gap: 40px; width: max-content; animation: marquee-scroll 42s linear infinite; } .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; } .marquee-logo { /* Every logo gets the same box, so square marks and wide wordmarks carry equal visual weight. */ /* Height comes per-logo from clients.json so every mark carries similar optical weight. */ height: 40px; width: auto; max-width: 132px; flex: 0 0 auto; object-fit: contain; opacity: .8; transition: opacity .2s ease; } .marquee:hover .marquee-logo { opacity: 1; } .marquee-item { font-family: var(--font-display), sans-serif; font-weight: 600; font-size: 18px; white-space: nowrap; flex: 0 0 auto; } .marquee--dark .marquee-item { color: rgba(255,255,255,.72); } .marquee--light .marquee-item { color: var(--ink-600); } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee::before, .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none; } .marquee--dark::before { left: 0; background: linear-gradient(to right, var(--navy-950), transparent); } .marquee--dark::after { right: 0; background: linear-gradient(to left, var(--navy-950), transparent); } .marquee--light::before { left: 0; background: linear-gradient(to right, var(--white), transparent); } .marquee--light::after { right: 0; background: linear-gradient(to left, var(--white), transparent); } @media (max-width: 640px) { .marquee-logo { transform: scale(.82); } .marquee-track { gap: 30px; } } /* ---------- Figure (images in content) ---------- */ .figure { margin-top: 28px; } .figure img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); } .figure--half { max-width: 560px; } .figure--inline { max-width: 340px; border: none; } .figure--banner { margin-top: 26px; } .figure--banner { clear: both; } .figure--banner img { border: none; background: none; border-radius: 0; width: 100%; } /* Full-width screenshot: bigger, with a subtle frame */ .figure--full img { width: 100%; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 16px 40px -20px rgba(10,50,63,.22); } .figure--inline img { border: none; background: none; } .figure-caption { margin-top: 10px; font-size: 13px; color: var(--ink-400); line-height: 1.5; } .section--dark .figure img { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); } .section--dark .figure-caption { color: rgba(255,255,255,.55); } /* ---------- Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); } .stat { padding: 26px 22px 22px 0; border-right: 1px solid var(--line); } .stat:last-child { border-right: none; } .stat-num { font-family: var(--font-mono), monospace; font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -0.02em; color: var(--navy-950); } .stat-label { margin-top: 6px; font-size: 13px; color: var(--ink-400); } .section--dark .stats { border-color: rgba(255,255,255,.16); } .section--dark .stat { border-color: rgba(255,255,255,.16); } .section--dark .stat-num { color: var(--lime-500); } .section--dark .stat-label { color: rgba(255,255,255,.6); } @media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat { border-right: none; } } /* ---------- Quote ---------- */ .quote { border-left: 3px solid var(--lime-500); padding: 4px 0 4px 24px; font-family: var(--font-display), sans-serif; font-weight: 500; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.35; color: var(--navy-950); letter-spacing: -0.01em; max-width: 40ch; } .quote-attrib { margin-top: 14px; font-family: var(--font-body), sans-serif; font-size: 14px; font-weight: 500; color: var(--ink-600); letter-spacing: 0; } .section--dark .quote { color: #fff; } .section--dark .quote-attrib { color: rgba(255,255,255,.65); } /* ---------- Depth disclosure ---------- */ .depth { border-top: 1px solid var(--line); } .depth:last-of-type { border-bottom: 1px solid var(--line); } .depth summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-family: var(--font-display), sans-serif; font-weight: 600; font-size: 17px; color: var(--navy-950); } .depth summary::-webkit-details-marker { display: none; } .depth summary::after { content: '+'; font-family: var(--font-mono), monospace; font-size: 19px; color: var(--navy-500); flex: 0 0 auto; transition: transform .18s ease; } .depth[open] summary::after { content: '\2013'; } .depth-body { padding: 0 0 24px 0; } .depth-body > * + * { margin-top: 12px; } /* ---------- CTA band ---------- */ .cta-band { background: var(--navy-950); } .cta-band .wrap { text-align: center; } .cta-band h2 { color: #fff; max-width: 26ch; margin: 0 auto; } .cta-actions { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .cta-inline { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; } /* ---------- Review flags (dev only) ---------- */ .todo { border-left: 3px solid #C9A227; background: #FDF6DD; padding: 12px 16px; font-size: 13.5px; color: #6B5200; line-height: 1.5; border-radius: 0 4px 4px 0; } .todo + .todo { margin-top: 8px; } .todo-tag { font-family: var(--font-mono), monospace; font-weight: 500; font-size: 11px; letter-spacing: .06em; display: block; margin-bottom: 4px; } .review-banner { background: #FDF6DD; border-bottom: 1px solid #E4CE72; padding: 8px 32px; font-size: 12.5px; color: #6B5200; font-family: var(--font-mono), monospace; text-align: center; } /* ---------- Footer ---------- */ .sg-footer { background: var(--navy-950); color: rgba(255,255,255,.62); padding: 56px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.1); } .footer-brand img { height: 34px; margin-bottom: 14px; } .footer-brand p { font-size: 13.5px; line-height: 1.6; max-width: 30ch; } .footer-col h4 { font-family: var(--font-mono), monospace; font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 12px; } .footer-col a { display: block; font-size: 13.5px; padding: 5px 0; color: rgba(255,255,255,.75); } .footer-col a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; gap: 12px; padding-top: 22px; font-size: 12.5px; color: rgba(255,255,255,.38); flex-wrap: wrap; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .bento-tile--static { cursor: default; } /* ---------- Split hero: copy left, live feed right ---------- */ .hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .hero-split__text .lede { max-width: 44ch; } @media (max-width: 980px) { .hero-split { grid-template-columns: 1fr; gap: 34px; } } /* ---------- Two-column block (used by the agents section) ---------- */ .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 30px; } .cols__item { background: var(--white); padding: 30px 30px 32px; } .cols__item:last-child { background: var(--paper); } .cols__head { font-size: 19px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--lime-500); display: inline-block; } .cols__item .body-text + .body-text { margin-top: 12px; } @media (max-width: 820px) { .cols { grid-template-columns: 1fr; } } /* ---------- Feed disclaimer ---------- */ .vfeed-note { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--ink-400); text-align: right; } /* ---------- Product graphic: top-right, aligned with headline ---------- */ .hero-top-graphic { float: right; margin: 4px 0 22px 40px; max-width: 44%; } .hero-top-graphic img { width: 100%; height: auto; } @media (max-width: 820px) { .hero-top-graphic { float: none; margin: 0 0 22px; max-width: 70%; } } @media (max-width: 520px) { .hero-top-graphic { max-width: 100%; } } /* Open a depth section when linked to directly from a pricing tile */ .depth:target { } /* ---------- Consistent left-alignment across all sections ---------- depth-body, mid-page surface content, and accordion innards should align with the section heading, not the viewport edge. This was showing as tight-left text on pages like Data Enrichment. ----------------------------------------------------------------- */ .section .body-text, .section .points, .section .quote, .section .figure, .section .bento, .section .cols, .section .quotes { max-width: 100%; } /* Depth summary and body align with the surface content above. The surface text sits inside section-head which creates visual structure; depth sections need equivalent spacing to read as part of the same page. */ .depth summary { padding: 20px 0; } .depth-body { padding: 0 0 28px; } .depth-body .body-text, .depth-body .points, .depth-body .quote, .depth-body .figure { max-width: 62ch; } /* ---------- Desktop card-stack carousel (shared by all laptop carousels) ---------- */ .dstack { margin-top: 28px; } .dstack__stage { position: relative; width: 100%; max-width: 680px; margin: 0 auto; height: 520px; perspective: 1000px; } .dstack__card { position: absolute; left: 50%; top: 0; width: 580px; transform-origin: center bottom; cursor: pointer; transition: transform .5s cubic-bezier(.4,0,.15,1), opacity .5s ease; } .dstack__card.is-front { transform: translateX(-50%) scale(1); opacity: 1; z-index: 3; cursor: default; } .dstack__card.is-right { transform: translateX(-10%) scale(.85); opacity: .4; z-index: 2; } .dstack__card.is-left { transform: translateX(-90%) scale(.85); opacity: .4; z-index: 1; } .dstack__card.is-right:hover, .dstack__card.is-left:hover { opacity: .6; } .dstack__caption { text-align: center; font-size: 13px; color: var(--ink-600); margin-top: 24px; opacity: 0; transition: opacity .4s ease; padding-top: 4px; } .dstack__card.is-front .dstack__caption { opacity: 1; } .dstack__dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; } .dstack__dot { width: 30px; height: 4px; border: none; border-radius: 2px; padding: 0; background: var(--line-strong); cursor: pointer; transition: background .2s ease; } .dstack__dot.is-active { background: var(--navy-950); } .dstack__dot:hover { background: var(--navy-500); } /* Laptop frame */ .laptop { width: 100%; } .laptop__screen { background: var(--white); border: 2px solid #2A2E32; border-radius: 10px 10px 0 0; overflow: hidden; box-shadow: 0 12px 32px -16px rgba(10,50,63,.35); } .laptop__base { height: 12px; background: linear-gradient(to bottom, #3A3E42, #2A2E32); border-radius: 0 0 6px 6px; margin: 0 24px; } /* Window chrome */ .wb__bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--paper-alt); border-bottom: 1px solid var(--line); } .wb__dots { display: flex; gap: 5px; } .wb__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); display: block; } .wb__dots i:first-child { background: #F87171; } .wb__dots i:nth-child(2) { background: #FBBF24; } .wb__dots i:last-child { background: #34D399; } .wb__title { flex: 1; font-family: var(--font-display), sans-serif; font-size: 11px; font-weight: 600; color: var(--ink-900); } .wb__badge { font-family: var(--font-mono), monospace; font-size: 9px; letter-spacing: .04em; padding: 2px 8px; border-radius: 4px; background: var(--navy-950); color: var(--lime-500); } .wb__body { padding: 12px 14px; font-size: 10.5px; color: var(--ink-900); height: 340px; overflow-y: auto; } @media (prefers-reduced-motion: reduce) { .dstack__card, .dstack__caption { transition: none; } } @media (max-width: 720px) { .dstack__stage { max-width: 100%; height: 400px; } .dstack__card { width: 92vw; } .dstack__card.is-right { transform: translateX(-15%) scale(.82); } .dstack__card.is-left { transform: translateX(-85%) scale(.82); } } @media (max-width: 480px) { .dstack__stage { height: 360px; } } /* ---------- Mockup screen CSS variables (used by enrichment + spend report carousels) ---------- */ :root { --ink: #1c2b29; --deep: #0c3836; --mid: #4d6f6c; --mute: #8a8577; --faint: #6b665a; --border: #e8e3d8; --border2: #d8d2c2; --surface: #fff; --surface2: #faf8f3; --surface3: #f0ede3; --green: #2f6b2a; --green-bg: #e5f2e0; --red: #a53228; --red-bg: #fbe6e4; --amber: #93691a; --amber-bg: #fdf2d9; --teal-mock: #0c3836; --c1: #0c3836; --c2: #1a7a6d; --c3: #3aaa8c; --c4: #7ecfb8; --c5: #bfe3d4; --c6: #d4a62a; --c7: #c0453b; --c8: #8b6bb5; --radius: 10px; --radius-sm: 7px; --radius-pill: 999px; } /* ---------- Iframe screen rendering inside laptop frames ---------- The iframe loads the full standalone HTML at 1120px wide, then CSS transform scales it down to fit the ~550px laptop screen. The result is pixel-perfect rendering of the mockup at miniature size. ----------------------------------------------------------------- */ .iframe-wrap { position: relative; width: 100%; height: 340px; overflow: hidden; } .iframe-wrap iframe { position: absolute; top: 0; left: 0; width: 1120px; height: 800px; transform: scale(0.49); transform-origin: top left; border: none; pointer-events: none; /* prevent interaction — it's a preview, not a live app */ } @media (max-width: 720px) { .iframe-wrap { height: 280px; } .iframe-wrap iframe { transform: scale(0.42); } } /* Small figure — constrained width for portraits/headshots */ .figure--small { max-width: 280px; } .figure--small img { border-radius: 12px; } /* Logo-sized figure — same scale as the product graphics on module pages */ .figure--logo { max-width: 160px; } .figure--logo img { max-height: 80px; width: auto; } /* Aside figure — floated right, aligned with the section headline */ .figure--aside { float: right; max-width: 240px; margin: 0 0 16px 28px; } .figure--aside img { width: 100%; height: auto; border-radius: 10px; } @media (max-width: 640px) { .figure--aside { float: none; max-width: 200px; margin: 0 0 16px 0; } } /* Float-right figure — aligned with the top headline, text wraps around it */ .figure--float-right { float: right; max-width: 240px; margin: -8px 0 16px 28px; } .figure--float-right img { width: 100%; height: auto; border-radius: 10px; } @media (max-width: 640px) { .figure--float-right { float: none; max-width: 200px; margin: 0 0 16px 0; } } /* Contained float-right — stays within its section, doesn't overlap into the next */ .figure--portrait { float: right; max-width: 120px; margin: 0 0 12px 20px; } .figure--portrait img { width: 100%; height: auto; border-radius: 10px; } @media (max-width: 640px) { .figure--portrait { float: none; max-width: 120px; margin: 0 0 12px 0; } } /* Michael's About page portrait — sized to match the other hero graphics */ .hero-top-graphic img[src*="michael-cardinal"] { border-radius: 10px; } /* ========================================================================== Bold page system — promoted from the /buyers/ redesign (Aug 2026). Shared primitives for the new page style, so future bespoke pages reuse these classes instead of each carrying their own copy of the same CSS. Uses the site's existing brand vars (navy, lime, ink, line, radius) rather than redefining them, so a tokens.json change reaches every page. ========================================================================== */ :root { --fs-h1: clamp(32px, 3.5vw, 46px); --fs-h2: clamp(23px, 2.3vw, 30px); --fs-h3: 17px; --fs-h4: 14px; --fs-lede: 16px; --fs-body: 14.5px; --fs-small: 13px; --fs-micro: 11px; } /* Shared type scale + layout rhythm for bold-page pages. Both /buyers/ and /buyers/pricing/ had independently arrived at the same h1/h2/h3/.lede/ .wrap/.section values — one written out in full, one minified inline — which is exactly the duplication this promotion pattern exists to avoid. Apply .bold-page to a page's root wrapper div instead of redeclaring these locally. */ .bold-page h1 { font-size: var(--fs-h1); line-height: 1.07; letter-spacing: -.03em; max-width: 15ch; } .bold-page h2 { font-size: var(--fs-h2); line-height: 1.14; max-width: 20ch; } .bold-page h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; } .bold-page .lede { margin-top: 16px; font-size: var(--fs-lede); line-height: 1.65; max-width: 44ch; } .bold-page .wrap { max-width: 1240px; padding: 0 40px; } @media (max-width: 640px) { .bold-page .wrap { padding: 0 20px; } } .bold-page .section { padding: 64px 0; } .bold-page .section--tight { padding: 40px 0; } .bold-page .body-text { font-size: var(--fs-body); line-height: 1.6; } /* Icon-in-circle chip, pale lime wash background */ .icon-chip { width: 38px; height: 38px; border-radius: 50%; background: var(--lime-100); display: flex; align-items: center; justify-content: center; flex: none; } .icon-chip svg { width: 18px; height: 18px; fill: none; stroke: var(--navy-950); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .icon-chip.chip-grey { background: var(--paper-alt); } /* Short accent rule, used under headings/eyebrows */ .rule { width: 24px; height: 3px; background: var(--lime-500); border-radius: 2px; margin-top: 12px; } /* Small rounded label, used for capability/compliance-style tags */ .pill { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--paper-alt); font-size: var(--fs-small); font-weight: 600; color: var(--navy-950); } /* Quote / fact card ("voice") */ .voice { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .voice .anchor { margin-bottom: 14px; } .voice .anchor i { display: block; width: 24px; height: 3px; background: var(--lime-500); border-radius: 2px; } .voice p { font-size: var(--fs-lede); line-height: 1.5; color: var(--navy-950); } .voice .attrib { margin-top: 14px; font-size: var(--fs-small); color: var(--ink-400); font-weight: 600; } .voice--fact { background: var(--navy-950); border-color: var(--navy-950); } .voice--fact p, .voice--fact .attrib { color: #fff; } .voice--fact .attrib { opacity: .72; } .voice--fact .anchor i { opacity: .9; } /* Stat tile with progress bar */ .tile-stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; } .tile-stat .num { font-family: var(--font-display), sans-serif; font-weight: 700; font-size: 28px; color: var(--navy-950); letter-spacing: -.01em; } .tile-stat .unit { font-size: var(--fs-micro); font-weight: 600; color: var(--ink-400); text-transform: uppercase; letter-spacing: .04em; margin-left: 5px; } .tile-stat .lab { font-size: var(--fs-small); color: var(--ink-600); margin-top: 6px; } .tile-stat .bar { height: 3px; background: var(--lime-500); border-radius: 2px; margin-top: 16px; } /* Halo / orbit decorative hero graphic — concentric circle with drifting dots */ .halo { position: relative; width: 100%; aspect-ratio: 1; max-width: 340px; } .halo .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line); } .halo .ring--in { inset: 15%; } .halo .core { position: absolute; inset: 38%; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(16,38,44,.04), 0 8px 24px rgba(16,38,44,.06); display: flex; align-items: center; justify-content: center; } .halo .d1, .halo .d2, .halo .d3 { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--lime-500); } .orbit { position: relative; } .orbit .dot-a, .orbit .dot-b, .orbit .dot-c { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--lime-500); } /* Section head with a two-column split (label rail + heading) */ .sec-head--split { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 40px; align-items: start; } .sec-head--split h2::after { content: ''; display: block; width: 34px; height: 3px; background: var(--lime-500); border-radius: 2px; margin-top: 16px; } @media (max-width: 720px) { .sec-head--split { grid-template-columns: 1fr; gap: 16px; } } .btn-link { font-size: var(--fs-small); font-weight: 600; color: var(--navy-950); display: inline-flex; gap: 4px; align-items: center; border-bottom: 1.5px solid var(--lime-500); padding-bottom: 0; text-decoration: none; } /* ===== Component-scoped styles (from per-page