/* ═══════════════════════════════════════════════════════════════ KOGNITOS HOMEPAGE v2 — Figma "Web 2.0" (Homepage Light / Dark) Precise reimplementation. Scoped under main.hv2. Fonts: NeueMachina (display / statement headings), NeueMontreal (body). Theme: driven by [data-theme="light"|"dark"] on . ═══════════════════════════════════════════════════════════════ */ .hv2 { /* ── light theme tokens (default) ── */ --hv-yellow: #f2ff70; --hv-yellow-ink: #171717; /* text on yellow */ --hv-page: #e9e9e4; /* page surface */ --hv-ink: #0a0a0a; /* primary text */ --hv-ink-2: #171717; --hv-muted: #525252; /* body copy */ --hv-muted-2: #737373; /* faint labels */ --hv-card: #f3f3ee; /* cream feature card */ --hv-card-ink: #171717; /* card title (fixed both themes) */ --hv-card-border: #dcdcd5; --hv-line: #cbcbc4; /* dividers / hairlines */ --hv-tag-bg: #e2e2dc; --hv-tag-ink: #5a5a55; --hv-btn-dark-bg: #171717; --hv-btn-dark-ink: #ffffff; --hv-btn-out-border:#c7c7c0; --hv-btn-out-ink: #171717; --hv-determ-band: #d4d4cf; /* full-bleed neutral band */ --hv-determ-dark: #6d6d6d; /* LLMs card */ --hv-determ-dark-ink:#ffffff; --hv-determ-tagdark:#3f3f3d; --hv-ctabar: #ecece6; /* "See how Kognitos works" bar */ --hv-ctabar-grid: rgba(0,0,0,0.05); --hv-radius: 4px; /* card / media corner rounding */ --hv-radius-sm: 10px; --hv-shadow-card: 0 1px 2px rgba(0,0,0,0.04); --hv-wrap: 1284px; /* 1204 content + 2×40 pad */ } html[data-theme="dark"] .hv2 { --hv-page: #0a0a0a; --hv-ink: #fafafa; --hv-ink-2: #f5f5f5; --hv-muted: #a3a3a3; --hv-muted-2: #8a8a86; --hv-card: #f3f3ee; /* feature cards stay cream */ --hv-card-ink: #171717; --hv-card-border: rgba(255,255,255,0.06); --hv-line: rgba(255,255,255,0.12); --hv-tag-bg: #262626; --hv-tag-ink: #b5b5b0; --hv-btn-dark-bg: #1c1c1a; --hv-btn-dark-ink: #ffffff; --hv-btn-out-border:rgba(255,255,255,0.22); --hv-btn-out-ink: #fafafa; --hv-determ-band: #757571; --hv-determ-dark: #54554f; --hv-determ-tagdark:#111110; --hv-ctabar: #efefe9; /* CTA bar stays light in dark */ --hv-ctabar-grid: rgba(0,0,0,0.05); --hv-shadow-card: 0 1px 2px rgba(0,0,0,0.3); } /* ── base ── */ main.hv2 { background: var(--hv-page); color: var(--hv-ink); font-family: var(--font-body); position: relative; overflow: hidden; -webkit-font-smoothing: antialiased; /* Extend the page box up behind the fixed top-banner + nav (104px) so the hero's yellow glow — and the page surface — reach the very top instead of being clipped by overflow:hidden at the content edge. The equal padding keeps all content in its original position. */ margin-top: -104px; padding-top: 104px; } /* film grain over the whole page (below content) */ main.hv2::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("/img/home-v2/grain.png"); background-size: 160px 160px; opacity: .5; } /* Paint the page surface onto the home-page too, so the background reads continuously up behind the fixed top-banner + (transparent) nav before scroll — otherwise the lighter global body background (--ds-background) shows as a gap above the hero. Matches --hv-page for each theme. */ body:has(> main.hv2) { background: #e9e9e4; } html[data-theme="dark"] body:has(> main.hv2) { background: #0a0a0a; } /* Header offset — the homepage hides the top banner (index.html sets it display:none and drops the has-top-banner class), but we KEEP the 40px it used to occupy as spacing below the bar: the nav sits flush at the top edge (global nav { top: 0 }) and content starts at 104px, so the reclaimed banner space reads as breathing room under the nav. Matches main.hv2's -104/+104 box extension. Scoped to the homepage so every other page keeps the global 64px no-banner layout. */ body:has(> main.hv2) { padding-top: 104px; } .hv2 * { box-sizing: border-box; } .hv-wrap { max-width: var(--hv-wrap); margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; } .hv2 section { position: relative; z-index: 1; } .hv2 h1, .hv2 h2, .hv2 h3, .hv2 h4, .hv2 p { margin: 0; } .hv2 a { text-decoration: none; } /* ── typography primitives ── */ .hv-eyebrow { /* small tag pill: FAQ / Trust / Integrations / Podcast */ display: inline-flex; align-items: center; font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--hv-tag-ink); background: var(--hv-tag-bg); padding: 5px 8px; border-radius: 3px; width: fit-content; } .hv-eyebrow--hl { /* highlighted eyebrow: "Customer Success" */ background: var(--hv-yellow); color: #171717; font-family: var(--font-head); font-weight: 400; font-size: 20px; letter-spacing: -.01em; text-transform: none; padding: 2px 8px; border-radius: 2px; line-height: 1.3; } /* statement heading — NeueMachina */ .hv-h-machina { font-family: var(--font-head); font-weight: 400; font-size: clamp(30px, 3.35vw, 44px); line-height: 1.1; letter-spacing: -.03em; color: var(--hv-ink); } /* sub heading — NeueMontreal medium */ .hv-h-montreal { font-family: var(--font-body); font-weight: 500; font-size: clamp(28px, 2.7vw, 36px); line-height: 1.12; letter-spacing: -.02em; color: var(--hv-ink); } .hv-underline { position: relative; display: inline-block; white-space: nowrap; } .hv-underline::after { /* yellow marker under the phrase */ content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .12em; background: var(--hv-yellow); z-index: -1; border-radius: 1px; transform-origin: left center; } /* On scroll-reveal the marker grows in from left to right. Guarded by the same reduced-motion query as the .reveal system, so reduced-motion users just get the marker fully drawn. */ @media (prefers-reduced-motion: no-preference) { .hv-underline::after { transform: scaleX(0); transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1) .3s; } .hv-h-machina.visible .hv-underline::after { transform: scaleX(1); } } .hv-lead { /* section intro paragraph */ font-size: 18px; line-height: 1.5; color: var(--hv-muted); max-width: 640px; } /* ── buttons ── */ .hv-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: 0; padding: 13px 20px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease; } .hv-btn:active { transform: translateY(1px); } .hv-btn--yellow { background: var(--hv-yellow); color: #171717; } .hv-btn--yellow:hover { background: #e9f75f; box-shadow: 0 6px 20px rgba(242,255,112,.28); } .hv-btn--dark { background: var(--hv-btn-dark-bg); color: var(--hv-btn-dark-ink); } .hv-btn--dark:hover { background: #000; } .hv-btn--outline { background: transparent; color: var(--hv-btn-out-ink); border-color: var(--hv-btn-out-border); } .hv-btn--outline:hover { background: rgba(0,0,0,.04); } html[data-theme="dark"] .hv-btn--outline:hover { background: rgba(255,255,255,.05); } .hv-btns { display: flex; flex-wrap: wrap; gap: 12px; } /* cascade CTA rows (reuse brand.css .hero-cta / .btn-lime / .btn-outline) — override the global centered/margined .hero-cta to match each section. */ .hv2 .hv-hero .hero-cta { justify-content: flex-start; margin: 41px 0 0; } .hv-financial .hero-cta { justify-content: flex-start; margin: 32px 0 0; } /* "View Our Financial Solutions" is longer than the other cascade CTAs, so the button is wider than the shared .btn-cascade-col's 62px-per-column cap (brand.css) — 3×62px stops short of the button edges and centers, leaving an unfilled sliver of the resting colour on both sides on hover. Let the columns grow to fill this section's (wider) buttons edge-to-edge instead. */ .hv-financial .hero-cta .btn-cascade-col { max-width: none; } .hv2 .hv-final__card .hero-cta { justify-content: center; margin: 30px 0 0; } .hv2 .hv-ctabar .hero-cta { margin: 0; flex: 0 0 auto; position: relative; z-index: 2; } /* text link with arrow */ .hv-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--hv-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hv-line); } .hv-link:hover { color: var(--hv-ink); } /* ═══════════════════════════ 1 · HERO ═══════════════════════════ */ .hv-hero { position: relative; } /* vertical padding via Tailwind py-* utilities */ .hv-hero::before { /* Kognitos-yellow glow, top-right — bleeds up behind banner+nav */ content: ""; position: absolute; inset: -104px 0 auto 0; height: 840px; z-index: 0; pointer-events: none; background: radial-gradient(58% 80% at 100% 12%, rgba(242,255,112,.58) 0%, rgba(242,255,112,0) 58%); } html[data-theme="dark"] .hv-hero::before { background: radial-gradient(58% 80% at 100% 12%, rgba(242,255,112,.26) 0%, rgba(242,255,112,0) 58%); } /* Header (Figma 1451:6874) — eyebrow chip, Neue Machina h1, gaps 41/8/41 */ .hv-hero__eyebrow { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: .24px; color: #525252; margin-bottom: 41px; } .hv-hero__eyebrow b { font-weight: 500; color: #525252; background: #f0f0f0; border: 0; padding: 4px; border-radius: 2px; font-variant-numeric: tabular-nums; } html[data-theme="dark"] .hv-hero__eyebrow { color: var(--hv-muted); } html[data-theme="dark"] .hv-hero__eyebrow b { background: #262626; color: var(--hv-muted); } .hv-hero h1 { font-family: var(--font-head); font-weight: 400; font-size: clamp(38px, 5.2vw, 64px); line-height: .98; letter-spacing: -.026em; color: var(--hv-ink); max-width: 1161px; } .hv-hero__sub { margin-top: 8px; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.2; color: var(--hv-ink-2); max-width: 900px; } .hv-hero .hv-btns { margin-top: 34px; } /* 16:9 media frame (Figma 1451:6886 — 1200×675), dark hairline border */ .hv-hero__media { position: relative; margin-top: 52px; cursor: pointer; border-radius: var(--hv-radius); overflow: hidden; border: 0.7px solid #737373; box-shadow: 0 24px 60px -30px rgba(0,0,0,.35); aspect-ratio: 16 / 9; } .hv-hero__media:focus-visible { outline: 2px solid #171717; outline-offset: 3px; } html[data-theme="dark"] .hv-hero__media { border-color: #737373; box-shadow: 0 24px 70px -30px rgba(0,0,0,.8); } .hv-hero__media video, .hv-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* black #171717 @ 20% overlay — only while the container is hovered (behind the button) */ .hv-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(23,23,23,0); transition: background .25s ease; } .hv-hero__media:hover::after { background: rgba(23,23,23,.2); } /* "Watch The Demo" — visual-only follower (the whole frame is the click target). Hidden until the container is hovered, then fades in and trails the cursor to its bottom-right (JS lerp sets transform). Liquid glass: translucent yellow fill + backdrop blur (Figma 1451:6888). */ .hv-hero__watch { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; min-width: 200px; height: 50px; padding: 3px 22px 0; background: rgba(242,255,112,.5); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); color: #171717; border: 1px solid #171717; border-radius: 3px; font-family: var(--font-head); font-weight: 400; font-size: 18px; letter-spacing: -.01em; box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.4); opacity: 0; will-change: transform, opacity; transition: opacity .16s ease-in-out; } .hv-hero__media:hover .hv-hero__watch, .hv-hero__media:focus-visible .hv-hero__watch { opacity: 1; } /* touch / no-hover devices: no cursor to follow — show the button centered */ @media (hover: none) { .hv-hero__watch { opacity: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); } .hv-hero__media::after { display: none; } } /* ═══════════════════════════ 2 · LOGO GARDEN (3-row scroll) ════ */ /* .hv-logos vertical padding via Tailwind py-* utilities */ /* 2-column layout (Figma 1479-7025): logo garden (653) left · stat card (441) right */ .hv-logos__grid { display: grid; grid-template-columns: 653fr 441fr; gap: 106px; align-items: center; } .hv-garden { display: flex; flex-direction: column; gap: 38px; overflow: hidden; min-width: 0; } .hv-garden__row { position: relative; overflow: hidden; height: 40px; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); } .hv-garden__track { display: flex; width: max-content; align-items: center; animation: hv-garden-scroll 42s linear infinite; } .hv-garden__row--rev .hv-garden__track { animation-direction: reverse; } .hv-garden__row:nth-child(2) .hv-garden__track { animation-duration: 52s; } .hv-garden__row:nth-child(3) .hv-garden__track { animation-duration: 47s; } .hv-garden__set { display: flex; align-items: center; gap: 64px; flex-shrink: 0; padding-right: 64px; } .hv-garden__track img { height: 36px; width: auto; flex-shrink: 0; opacity: .7; /* cr-garden SVGs ship light-grey (for dark bg) → flatten to a muted grey */ filter: brightness(0); } /* JBI shown as a grey 3-square badge (mirrors the stat card's green badge) */ .hv-garden__jbi { display: inline-flex; gap: 3px; flex-shrink: 0; } .hv-garden__jbi span { background: #8f8f8f; color: #fff; font-weight: 700; font-size: 17px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; } html[data-theme="dark"] .hv-garden__track img { filter: brightness(0) invert(1); opacity: .55; } html[data-theme="dark"] .hv-garden__jbi span { background: #cfcfcf; color: #1a1a1a; } @keyframes hv-garden-scroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .hv-garden__track { animation: none; } } @media (max-width: 700px) { .hv-garden { gap: 24px; } .hv-garden__row { height: 30px; } .hv-garden__track img { height: 24px; } .hv-garden__jbi span { width: 22px; height: 22px; font-size: 12px; } .hv-garden__set { gap: 48px; padding-right: 48px; } } /* stat card (JBI factory) */ .hv-statcard { position: relative; border-radius: var(--hv-radius); overflow: hidden; aspect-ratio: 441 / 265; color: #fff; display: block; } .hv-statcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hv-statcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.82) 100%); } .hv-statcard__body { position: absolute; left: 26px; bottom: 24px; right: 26px; z-index: 2; } .hv-statcard__logo { display: inline-flex; gap: 3px; margin-bottom: 14px; } .hv-statcard__logo span { background: #7ac043; color: #fff; font-weight: 700; font-size: 14px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; } .hv-statcard__num { font-family: var(--font-body); font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: -.02em; } .hv-statcard__label { font-size: 17px; color: rgba(255,255,255,.85); margin-top: 8px; } .hv-statcard__arrow { position: absolute; top: 18px; right: 18px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); display: inline-flex; align-items: center; justify-content: center; transition: background .25s ease; } .hv-statcard__arrow svg { width: 13px; height: 13px; stroke: #fff; transition: stroke .25s ease, transform .45s cubic-bezier(.34,1.56,.64,1); } /* hover: pill turns yellow, arrow turns black and springs to point top-right */ .hv-statcard:hover .hv-statcard__arrow { background: var(--hv-yellow); } .hv-statcard:hover .hv-statcard__arrow svg { stroke: #171717; transform: rotate(-45deg); } /* ═══════════════════════════ 3 · FINANCIAL / BENTO ════════════ */ /* Standalone port: vertical padding hand-written here instead of the Tailwind py-24/md:py-32 utilities the source page uses, since this page doesn't load the Tailwind CDN. Values match: 96px, 128px from md (768px) up. */ .hv-financial { padding-top: 96px; padding-bottom: 96px; } @media (min-width: 768px) { .hv-financial { padding-top: 128px; padding-bottom: 128px; } } .hv-financial__head h2 { max-width: 900px; } /* .hv2 prefix needed to outrank the `.hv2 p { margin:0 }` reset above. */ .hv2 .hv-financial__sub { margin-top: 32px; } .hv-financial .hv-btns { margin-top: 26px; } .hv-bento { margin-top: clamp(56px, 5vw, 80px); display: grid; gap: 24px; } .hv-bento__row1 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .hv-bento__row2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .hv-card { background: var(--hv-card); border: 1px solid var(--hv-card-border); border-radius: var(--hv-radius); box-shadow: var(--hv-shadow-card); overflow: hidden; position: relative; } .hv-card__title { font-family: var(--font-body); font-weight: 500; font-size: 23px; line-height: 1.16; letter-spacing: -.01em; color: var(--hv-card-ink); padding: 28px 66px 0 30px; /* right padding clears the corner CTA square */ } .hv-card--tall { min-height: 452px; } .hv-card--mock { min-height: 400px; display: flex; flex-direction: column; } .hv-card--mock .hv-card__mockup { margin-top: auto; width: 100%; display: block; } .hv-card--mock .hv-card__mockup img { width: 100%; height: auto; display: block; } /* journal-review embed: fixed 1087x1080 canvas, scaled via container query units to fill the card at its native proportions regardless of card width. */ .hv-card--mock .hv-card__mockup.hv-journal-embed { position: relative; width: 682px; height: 347px; margin: -14px -97px; overflow: hidden; container-type: inline-size; } .hv-journal-embed iframe { display: block; width: 1087px; height: 1080px; border: 0; background: transparent; transform-origin: top left; transform: scale(calc(100cqw / 1087px)); pointer-events: none; } /* exception-handling embed: fixed 937x1080 canvas; crop a 600x471 window (checkpoint through the siding + "Learned" chip) and scale it to fill the mockup box responsively, preserving the original mockup's ~385x302 footprint. */ .hv-card--mock .hv-card__mockup.hv-exceptions-embed { position: relative; width: 100%; aspect-ratio: 385 / 302; overflow: hidden; container-type: inline-size; } .hv-exceptions-embed iframe { position: absolute; top: 0; left: 0; width: 937px; height: 1080px; border: 0; background: transparent; transform-origin: 0 0; transform: scale(calc(100cqw / 600px)) translate(-150px, -380px); pointer-events: none; } /* video cards — the clip fills the card and is scaled proportionally to fit (contain) */ .hv-card--video { padding: 0; min-height: 400px; background: var(--hv-card); } .hv-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: var(--hv-card); } /* knowledge-graph card — per Figma the graph lives in its own inset inner container (#fafaf8, hairline #d4d4d4 border) below the title, not filling the whole card. The canvas (transparent) fills the frame. */ .hv-graph__frame { position: absolute; top: 82px; left: 34px; right: 34px; bottom: 31px; background: #fafaf8; border: 0.5px solid #d4d4d4; border-radius: var(--hv-radius); overflow: hidden; } .hv-graph { position: absolute; inset: 0; display: block; } .hv-graph__canvas { position: absolute; inset: 0; display: block; touch-action: none; } .hv-graph__sr { /* visually-hidden screen-reader description */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Corner CTA — white rounded-square with an outward arrow, top-right inside every bento card (each card is itself the link, see .hv-card). Hover plays the same diagonal "conveyor" cue as the integrations marquee card, but only once: JS adds .hv-shot on the card's first mouseenter (see home-v2.js), which fires the one-shot keyframes below instead of looping forever. */ .hv-card { display: block; } .hv-corner-cta { position: absolute; top: 16px; right: 16px; z-index: 2; height: 40px; width: 40px; border-radius: 8px; background: #fff; color: #000; display: grid; place-items: center; transition: transform .25s cubic-bezier(.22,1,.36,1); } .hv-card:hover .hv-corner-cta { transform: scale(1.06); } .hv-corner-arrows { position: relative; display: block; height: 18px; width: 18px; overflow: hidden; } .hv-corner-arrow { position: absolute; inset: 0; display: block; color: #000; } .hv-corner-arrow svg { height: 18px; width: 18px; display: block; } .hv-corner-lead { transform: translate(0, 0); opacity: 1; } .hv-corner-trail { transform: translate(-18px, 18px); opacity: 0; } @media (prefers-reduced-motion: no-preference) { .hv-card.hv-shot .hv-corner-lead { animation: hvCornerLead .5s ease-in-out forwards; } .hv-card.hv-shot .hv-corner-trail { animation: hvCornerTrail .5s ease-in-out forwards; } } @keyframes hvCornerLead { from { transform: translate(0,0); opacity: 1; } to { transform: translate(18px,-18px); opacity: 0; } } @keyframes hvCornerTrail { from { transform: translate(-18px,18px); opacity: 0; } to { transform: translate(0,0); opacity: 1; } } /* ═══════════════════════════ 4 · BUILT / TRUST + INTEGRATIONS ══ Ported from the Finance page (.f2-trust); colors wired to home theme tokens. */ /* .hv-built vertical padding via Tailwind py-* utilities */ .hv2 .f2-trust-grid { display: flex; flex-flow: row; justify-content: space-between; gap: 106px; align-items: flex-start; } .hv2 .f2-trust-left { display: flex; flex-direction: column; gap: 120px; align-items: flex-start; } .hv2 .f2-trust-left h2 { font-family: var(--font-body); font-size: 36px; line-height: 39.6px; letter-spacing: 0; font-weight: 450; margin: 0; color: var(--hv-ink); } .hv2 .f2-trust-trustbox { display: flex; flex-direction: column; gap: 36px; align-items: stretch; width: 100%; } .hv2 .f2-label { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; background: var(--hv-tag-bg); border: 0; border-radius: 2px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--hv-tag-ink); line-height: 1; margin: 0; } .hv2 .f2-trust-badges { display: flex; align-items: flex-start; gap: 42px; margin: 0; } .hv2 .f2-trust-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; } .hv2 .f2-trust-badge-icon { width: auto; height: 61px; display: block; } .hv2 .f2-trust-badge-icon[src*="hipaa"] { transform: scaleX(-1); } html[data-theme="dark"] .hv2 .f2-trust-badge-icon { filter: invert(1); opacity: .82; } .hv2 .f2-trust-badge-label { font-family: var(--font-body); font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 21px; color: var(--hv-ink); white-space: nowrap; } .hv2 .f2-trust-left .copy { font-size: 14px; color: var(--hv-muted-2); line-height: 1.5; max-width: 460px; margin: 0; } .hv2 .f2-trust-right { display: flex; flex-direction: column; gap: 42px; flex: 0 0 524px; max-width: 524px; } .hv2 .f2-int-top { display: flex; flex-direction: column; gap: 17px; } /* ── Integrations card: two-plane depth-of-field logo marquee ── Two independently-scrolling planes create depth: a recessed BACKGROUND (desaturated + blurred + faded, no tile, slower) and a floating FOREGROUND (full-colour logos on white tiles with soft shadows, faster). The smaller foreground tiles let the background show through, so the field reads as stacked translucent planes. The planes are built by home-v2-integrations.js. */ .hv2 .f2-int-card { position: relative; display: block; width: 100%; height: 300px; overflow: hidden; border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); background: var(--hv-card); box-shadow: var(--hv-shadow-card); cursor: pointer; text-decoration: none; } /* mask fades the tiles into the card surface at top & bottom instead of hard-clipping */ .hv2 .f2-int-card__field { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 86%, transparent 100%); } .hv2 .f2ic-plane { position: absolute; inset: 0; display: flex; } .hv2 .f2ic-plane.f2ic-fg { gap: 16px; } .hv2 .f2ic-plane.f2ic-bg { gap: 12px; transform: scale(1.08); } .hv2 .f2ic-col { position: relative; flex: 1; min-width: 0; overflow: hidden; } /* seamless loop: track = two copies, translate up by exactly one copy (-50%) */ .hv2 .f2ic-track { display: flex; flex-direction: column; will-change: transform; animation: f2icUp var(--dur, 32s) linear infinite; } @keyframes f2icUp { from { transform: translateY(0); } to { transform: translateY(-50%); } } .hv2 .f2ic-cell { width: 100%; display: flex; align-items: center; justify-content: center; } .hv2 .f2ic-cell.f2ic-fg { height: 62px; margin-bottom: 16px; } .hv2 .f2ic-cell.f2ic-bg { height: 40px; margin-bottom: 12px; } .hv2 .f2ic-tile { width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 0 10px 22px -8px rgba(15,15,15,0.20), 0 3px 8px -3px rgba(15,15,15,0.12); } .hv2 .f2ic-tile img { width: 54%; height: 54%; object-fit: contain; } .hv2 .f2ic-ghost { width: 40px; height: 40px; object-fit: contain; opacity: 0.30; filter: grayscale(1) blur(1.2px); } /* CTA — white rounded-square with an outward arrow; hover plays a diagonal conveyor cue */ .hv2 .f2-int-card__cta { position: absolute; top: 16px; right: 16px; z-index: 2; height: 48px; width: 48px; border-radius: 12px; background: #fff; color: #000; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 6px 16px -4px rgba(0,0,0,0.22), 0 2px 6px -2px rgba(0,0,0,0.14); transition: transform .25s cubic-bezier(.22,1,.36,1); } .hv2 .f2-int-card:hover .f2-int-card__cta { transform: scale(1.06); } .hv2 .f2ic-arrows { position: relative; display: block; height: 20px; width: 20px; overflow: hidden; } .hv2 .f2ic-arrow { position: absolute; inset: 0; display: block; color: #000; } .hv2 .f2ic-arrow svg { height: 20px; width: 20px; display: block; } .hv2 .f2ic-lead { transform: translate(0, 0); opacity: 1; } .hv2 .f2ic-trail { transform: translate(-20px, 20px); opacity: 0; } .hv2 .f2-int-card:hover .f2ic-lead { animation: f2icLead .5s ease-in-out infinite; } .hv2 .f2-int-card:hover .f2ic-trail { animation: f2icTrail .5s ease-in-out infinite; } @keyframes f2icLead { from { transform: translate(0,0); opacity: 1; } to { transform: translate(20px,-20px); opacity: 0; } } @keyframes f2icTrail { from { transform: translate(-20px,20px); opacity: 0; } to { transform: translate(0,0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hv2 .f2ic-track { animation: none !important; } .hv2 .f2-int-card:hover .f2ic-lead, .hv2 .f2-int-card:hover .f2ic-trail { animation: none !important; } } .hv2 .f2-int-footer { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: 14px; color: var(--hv-muted-2); line-height: 1.5; } .hv2 .f2-int-footer p { margin: 0; color: var(--hv-muted-2); font-size: 14px; line-height: 1.5; } .hv2 .f2-int-footer a { color: var(--hv-muted); font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 18px; text-decoration: underline; text-underline-offset: 2px; align-self: flex-start; } .hv2 .f2-int-footer a:hover { color: var(--hv-ink); } @media (max-width: 1000px) { .hv2 .f2-trust-grid { flex-direction: column; gap: 48px; } .hv2 .f2-trust-left { gap: 48px; } .hv2 .f2-trust-badges { flex-wrap: wrap; gap: 28px 36px; } .hv2 .f2-trust-right { flex-basis: auto; width: 100%; max-width: 100%; } } /* ═══════════════════════════ 5 · CUSTOMER SUCCESS ═════════════ */ /* .hv-customer vertical padding via Tailwind py-* utilities */ .hv-customer__grid { display: grid; grid-template-columns: 1.32fr 1fr; gap: 56px; align-items: start; } /* Stretch the text column to the video's height and run it as a flex column so the stat (margin-top:auto below) can sit on the container's bottom edge. */ .hv-customer__col { align-self: stretch; display: flex; flex-direction: column; } .hv-video { position: relative; border-radius: var(--hv-radius); overflow: hidden; aspect-ratio: 720 / 440; cursor: pointer; } .hv-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Ambient looping YouTube player sits behind the gradient + overlays */ .hv-video__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hv-video__bg iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transform: scale(1.09); transform-origin: center; } .hv-video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); } .hv-video__play { position: absolute; left: 24px; top: 24px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.9); display: inline-flex; align-items: center; justify-content: center; } .hv-video__play svg { width: 15px; height: 15px; margin-left: 2px; fill: #171717; } .hv-video__badge { position: absolute; right: 22px; top: 20px; z-index: 2; display: inline-flex; gap: 2px; } .hv-video__badge span { background: #7ac043; color: #fff; font-weight: 700; font-size: 12px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; } .hv-video__quote { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; color: #fff; font-size: 15px; line-height: 1.5; } .hv-customer__eyebrow { margin-bottom: 20px; } .hv-customer__prose { font-size: 18px; line-height: 1.5; color: var(--hv-muted); } .hv-customer .hv-link { margin-top: 18px; } .hv-customer__stat { margin-top: auto; } .hv-customer__stat .num { font-family: var(--font-body); font-weight: 500; font-size: 46px; line-height: 1; letter-spacing: -.02em; color: var(--hv-ink); } .hv-customer__stat .lbl { font-size: 15px; color: var(--hv-muted); margin-top: 8px; } /* ═══════════════════════════ 6 · DETERMINISTIC (band) ═════════ */ .hv-determ { background: var(--hv-determ-band); } /* vertical padding via Tailwind py-* utilities */ .hv-determ h2 { margin-bottom: 40px; } .hv-determ__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .hv-determ__card { border-radius: var(--hv-radius); padding: 30px 32px; min-height: 540px; position: relative; overflow: hidden; } .hv-determ__card--llm { background: var(--hv-determ-dark); color: var(--hv-determ-dark-ink); } .hv-determ__card--kog { background: var(--hv-yellow); color: #171717; } .hv-determ__tag { display: inline-flex; font-size: 12px; font-weight: 500; padding: 5px 9px; border-radius: 4px; margin-bottom: 22px; } .hv-determ__card--llm .hv-determ__tag { background: var(--hv-determ-tagdark); color: #d8d8d4; } .hv-determ__card--kog .hv-determ__tag { background: #171717; color: #fff; } .hv-determ__card p { font-family: var(--font-body); font-weight: 500; font-size: 22px; line-height: 1.28; letter-spacing: -.01em; max-width: 460px; } /* interactive 3D dice fill the card and bounce off its walls; text sits above */ .hv-determ__card--llm .hv-determ__tag, .hv-determ__card--llm > p { position: relative; z-index: 2; } .hv-determ__dice { position: absolute; inset: 0; z-index: 0; perspective: 760px; overflow: hidden; cursor: grab; } .hv-die { position: absolute; top: 0; left: 0; transform-style: preserve-3d; will-change: transform; } .hv-die__face { position: absolute; inset: 0; background: linear-gradient(150deg, #ffffff 0%, #f0f0f0 60%, #e6e6e6 100%); border: 1px solid #c7c7c7; border-radius: 0; box-sizing: border-box; padding: 13%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), inset 0 -3px 6px rgba(0,0,0,.05); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .hv-die__face--front { transform: translateZ(calc(var(--s) / 2)); } .hv-die__face--back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); } .hv-die__face--right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } .hv-die__face--left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); } .hv-die__face--top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); } .hv-die__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); } .hv-die__cell { display: flex; align-items: center; justify-content: center; } .hv-die__pip { width: 44%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2a2a2a, #0c0c0c 75%); box-shadow: inset 0 -1px 1px rgba(255,255,255,.15); } /* CTA bar */ .hv-ctabar { margin-top: 24px; border-radius: var(--hv-radius); background: var(--hv-ctabar); position: relative; overflow: hidden; padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background-image: linear-gradient(90deg, transparent, transparent), linear-gradient(var(--hv-ctabar-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hv-ctabar-grid) 1px, transparent 1px); background-size: 100% 100%, 46px 46px, 46px 46px; } .hv-ctabar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 160% at 100% 60%, rgba(242,255,112,.55), transparent 60%); } .hv-ctabar__text { position: relative; z-index: 1; } .hv-ctabar__text h3 { font-family: var(--font-body); font-weight: 500; font-size: 24px; letter-spacing: -.01em; color: #171717; } .hv-ctabar__text p { font-size: 15px; color: #4b4b47; margin-top: 8px; max-width: 440px; } .hv-ctabar .hv-btn { position: relative; z-index: 1; } /* CTA-bar "Book a Demo": solid black button that flips instantly to grey on hover (no cascade animation). */ .hv2 .hv-ctabar .hero-cta--in-hero .btn-outline { background-color: #171717; border-color: #171717; color: #fff; -webkit-text-fill-color: #fff; transition: none; } .hv2 .hv-ctabar .hero-cta--in-hero .btn-outline .btn-cascade { display: none; } .hv2 .hv-ctabar .hero-cta--in-hero .btn-outline .btn-cascade__label { color: #fff; -webkit-text-fill-color: #fff; } .hv2 .hv-ctabar .hero-cta--in-hero .btn-outline:hover { background-color: #737373; border-color: #737373; color: #fff; -webkit-text-fill-color: #fff; } /* ═══════════════════════════ 7 · LATEST ═══════════════════════ */ /* .hv-latest vertical padding via Tailwind py-* utilities */ .hv-latest > .hv-wrap > h2 { margin-bottom: 40px; } .hv-featured { border: 1px solid var(--hv-line); border-radius: var(--hv-radius); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } html[data-theme="dark"] .hv-featured { border-color: rgba(255,255,255,.1); } .hv-featured__media { background: #e6ea9e; } .hv-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .hv-featured__body { padding: 40px 44px; display: flex; flex-direction: column; } .hv-featured__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .hv-featured__meta .date { font-size: 13px; color: var(--hv-muted); font-weight: 500; } .hv-featured__body h3 { font-family: var(--font-body); font-weight: 500; font-size: 27px; line-height: 1.18; letter-spacing: -.01em; color: var(--hv-ink); } .hv-featured__body p { margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--hv-muted); } .hv-featured__body .hv-btns { margin-top: auto; padding-top: 26px; } .hv-latest__row2 { margin-top: 24px; display: grid; grid-template-columns: 1.86fr 1fr; gap: 24px; } .hv-podcast { border: 1px solid var(--hv-line); border-radius: var(--hv-radius); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; } html[data-theme="dark"] .hv-podcast, html[data-theme="dark"] .hv-roi { border-color: rgba(255,255,255,.1); } .hv-podcast__body { padding: 32px 34px; } .hv-podcast__body h3 { font-family: var(--font-body); font-weight: 500; font-size: 22px; letter-spacing: -.01em; margin: 16px 0 0; color: var(--hv-ink); } .hv-podcast__body p { font-size: 14px; line-height: 1.55; color: var(--hv-muted); margin: 12px 0 0; } .hv-podcast__body .hv-btn { margin-top: 22px; } .hv-podcast__thumb { align-self: stretch; } .hv-podcast__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .hv-roi { border: 1px solid var(--hv-line); border-radius: var(--hv-radius); overflow: hidden; padding: 16px 16px 22px; } .hv-roi img { width: 100%; border-radius: 4px; display: block; } .hv-roi span { display: block; margin-top: 16px; font-size: 16px; color: var(--hv-ink); } /* ═══════════════════════════ 8 · FAQ ══════════════════════════ */ /* .hv-faq vertical padding via Tailwind py-* utilities */ .hv-faq__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; } .hv-faq__head .hv-eyebrow { margin-bottom: 26px; } .hv-faq__head h2 { max-width: 340px; } .hv-faq__list { border-top: 1px solid var(--hv-line); } .hv-faq__item { border-bottom: 1px solid var(--hv-line); } .hv-faq__q { width: 100%; background: none; border: none; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; font-family: var(--font-body); font-size: 17px; color: var(--hv-ink); } .hv-faq__q svg { flex: none; width: 18px; height: 18px; stroke: var(--hv-ink); transition: transform .25s ease; } .hv-faq__item[open] .hv-faq__q svg { transform: rotate(180deg); } .hv-faq__a { padding: 0 4px 24px; font-size: 15px; line-height: 1.65; color: var(--hv-muted); max-width: 680px; } .hv-faq__a a { text-decoration: underline; text-underline-offset: 2px; } /* native

reset */ .hv-faq__item summary { list-style: none; } .hv-faq__item summary::-webkit-details-marker { display: none; } /* ═══════════════════════════ 9 · FINAL CTA ════════════════════ */ /* .hv-final vertical padding via Tailwind py-* utilities. Contained card (Figma 1462:15435): #fafafa, 4px radius, hairline border, corner yellow glows, 100/40 padding. */ .hv-final__card { position: relative; overflow: hidden; border-radius: var(--hv-radius); text-align: center; border: 1px solid rgba(119,51,119,.35); padding: 100px 40px; background: radial-gradient(70% 130% at 2% 0%, rgba(242,255,112,.95), rgba(242,255,112,0) 42%), radial-gradient(80% 130% at 100% 100%, rgba(242,255,112,.7), rgba(242,255,112,0) 46%), #fafafa; } .hv-final__card h2 { font-family: var(--font-head); font-weight: 400; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.03em; color: #0a0a0a; max-width: 810px; margin: 0 auto; } .hv-final__card p { margin: 24px auto 0; font-size: 18px; line-height: 1.5; color: #171717; max-width: 720px; } .hv-final__card .hv-btns { margin-top: 30px; justify-content: center; } .hv-final__card .hv-btn--dark { background: #171717; color: #fff; } /* Secondary CTA ("Start for Free") across hero, financial & final-CTA: #d4d4d4 fill + thin #737373 stroke at rest; the cascade squares and the final hover fill are #737373 (dark text → light on hover). The CTA-bar btn-outline has its own (more specific) rule. */ .hv2 .hero-cta--in-hero .btn-outline { background-color: #d4d4d4; border-color: #737373; color: #171717; -webkit-text-fill-color: #171717; } /* !important: a same-specificity light-mode rule further down the document (`[data-theme="light"] .hero-cta--in-hero .btn-outline .btn-cascade-fill`, meant for the hero/final-CTA's default cascade) wins the source-order tie against this rule and repaints the fill #D4D4D4 — identical to this button's own background, so the cascade becomes invisible. Force the win instead of narrowing this selector, since the comment above documents it's shared by hero + financial + final-CTA. */ .hv2 .hero-cta--in-hero .btn-outline .btn-cascade-fill { background: #737373 !important; } .hv2 .hero-cta--in-hero .btn-outline .btn-cascade__label { color: #171717; -webkit-text-fill-color: #171717; transition: color .25s ease .12s, -webkit-text-fill-color .25s ease .12s; } .hv2 .hero-cta--in-hero .btn-outline:hover { background-color: #d4d4d4; border-color: #737373; color: #fafafa; -webkit-text-fill-color: #fafafa; } .hv2 .hero-cta--in-hero .btn-outline:hover .btn-cascade__label { color: #fafafa; -webkit-text-fill-color: #fafafa; } /* ═══════════════════════════ RESPONSIVE ═══════════════════════ */ @media (max-width: 1000px) { .hv-logos__grid, .hv-built__grid, .hv-customer__grid, .hv-faq__grid, .hv-bento__row1, .hv-determ__cards, .hv-featured, .hv-latest__row2, .hv-podcast { grid-template-columns: 1fr; } .hv-bento__row2 { grid-template-columns: 1fr; } .hv-customer__stat { margin-top: 32px; } .hv-determ__card { min-height: 380px; } .hv-card--tall { min-height: 240px; } .hv-ctabar { flex-direction: column; align-items: flex-start; } } @media (max-width: 700px) { .hv-wrap { padding: 0 20px; } .hv-featured__media { min-height: 200px; } .hv-final__card { padding: 64px 18px 72px; } }