/* Shared marketing-site styles: sections, cards, buttons, and the animated product scenes (src/_includes/scenes/*). Loaded on every page by layouts/main.njk. */ /* ---------- Reveal on scroll ---------- */ /* Hidden only once JS is known to run (gp-js is set inline in ), so a failed script never hides content. */ .gp-js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); } .gp-js [data-reveal].is-visible { opacity: 1; transform: none; } .gp-card:nth-child(2) { transition-delay: .06s; } .gp-card:nth-child(3) { transition-delay: .12s; } .gp-card:nth-child(4) { transition-delay: .18s; } .group.gp-card { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; } .group.gp-card.is-visible:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(14, 116, 144, .45); border-color: #b9dde2; } /* ---------- Hero ---------- */ .gp-hero { position: relative; isolation: isolate; } .gp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); } .gp-aurora { position: absolute; border-radius: 50%; filter: blur(70px); } .gp-aurora-a { width: 62vw; height: 44vw; max-width: 980px; max-height: 700px; left: -14%; top: -22%; background: radial-gradient(closest-side, rgba(22,116,127,.30), transparent); animation: gpAuroraA 46s ease-in-out infinite alternate; } .gp-aurora-b { width: 52vw; height: 40vw; max-width: 860px; max-height: 640px; right: -14%; top: -16%; background: radial-gradient(closest-side, rgba(8,145,178,.20), transparent); animation: gpAuroraB 52s ease-in-out infinite alternate; } .gp-aurora-c { width: 40vw; height: 30vw; max-width: 640px; max-height: 480px; left: 34%; top: 8%; background: radial-gradient(closest-side, rgba(236,72,153,.08), transparent); animation: gpAuroraA 60s ease-in-out infinite alternate-reverse; } @keyframes gpAuroraA { to { transform: translate(6%, 5%) scale(1.08); } } @keyframes gpAuroraB { to { transform: translate(-7%, 6%) scale(1.06); } } .gp-dotgrid { position: absolute; inset: 0; background-image: radial-gradient(rgba(22,116,127,.20) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 55% 45% at 50% 28%, #000, transparent 80%); mask-image: radial-gradient(ellipse 55% 45% at 50% 28%, #000, transparent 80%); } .gp-hero-note { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 15px; color: #4b5563; transition: color .2s ease; } .gp-hero-note b { color: #0e7490; font-weight: 600; } .gp-hero-note-sep { width: 1px; height: 14px; background: #d1d5db; } .gp-hero-note-arrow { display: inline-block; margin-left: 2px; transition: transform .2s ease; } .gp-hero-note:hover { color: #111827; } .gp-hero-note:hover .gp-hero-note-arrow { transform: translateX(3px); } .gp-hero-stage { position: relative; animation: gpStageIn 1.1s forwards cubic-bezier(.2,.7,.2,1) .2s; opacity: 0; } @keyframes gpStageIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } } .gp-hero-frame { position: relative; border-radius: 16px; overflow: hidden; background: #fff; transform-origin: 50% 0; will-change: transform; box-shadow: 0 70px 120px -50px rgba(12, 58, 65, .45), 0 36px 60px -36px rgba(0, 0, 0, .28), 0 0 0 1px rgba(15, 23, 42, .07); } .gp-hero-frame .hero-fader { animation: none; opacity: 1; transform: none; } .gp-hero-frame .hero-fader picture img { border-radius: 0; } .gp-hero-frame .hero-fader::before { padding-top: 62.5%; } .gp-hero-chrome { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: linear-gradient(#fbfcfc, #f2f4f6); border-bottom: 1px solid #e6ebef; } .gp-hero-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; } .gp-hero-chrome i:nth-child(1) { background: #f8a5a5; } .gp-hero-chrome i:nth-child(2) { background: #f6d27b; } .gp-hero-chrome i:nth-child(3) { background: #9adba9; } .gp-hero-chrome span { margin: 0 auto; transform: translateX(-24px); font-size: 12px; color: #6b7280; padding: 3px 40px; border-radius: 6px; background: #fff; border: 1px solid #e6ebef; } .gp-hero-glow { position: absolute; width: 40%; height: 60%; border-radius: 50%; filter: blur(90px); pointer-events: none; } .gp-hero-glow-a { left: -6%; top: 10%; background: rgba(14, 116, 144, .28); } .gp-hero-glow-b { right: -6%; bottom: 0; background: rgba(22, 163, 74, .14); } @media (max-width: 767px) { .gp-hero-glow-a { left: 0; } .gp-hero-glow-b { right: 0; } } .gp-live-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; min-width: 250px; max-width: 320px; padding: 12px 15px; border-radius: 14px; background: rgba(255,255,255,.9); border: 1px solid rgba(15,23,42,.06); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 30px 50px -24px rgba(12, 58, 65, .38), 0 2px 6px rgba(0,0,0,.04); font-size: 13px; line-height: 1.3; color: #1f2937; opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); } .gp-live-card.is-in { opacity: 1; transform: none; } .gp-live-card.is-out { opacity: 0; transform: translateY(-8px); transition-duration: .4s; } .gp-live-card > div:nth-child(2) { flex: 1; min-width: 0; } .gp-live-title { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; line-height: 1.2; } .gp-live-text { font-weight: 500; } .gp-live-value { font-weight: 600; color: #0f766e; white-space: nowrap; } .gp-live-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #14b8a6; box-shadow: 0 0 0 4px rgba(20,184,166,.14); } .gp-live-card[data-kind="expansion"] .gp-live-dot { background: #0284c7; box-shadow: 0 0 0 4px rgba(2,132,199,.14); } .gp-live-card[data-kind="ai"] .gp-live-dot { background: #7c3aed; box-shadow: 0 0 0 4px rgba(124,58,237,.14); } .gp-live-card[data-kind="churn"] .gp-live-dot { background: #e11d48; box-shadow: 0 0 0 4px rgba(225,29,72,.14); } .gp-live-card[data-kind="churn"] .gp-live-value { color: #be123c; } .gp-live-card[data-kind="recovered"] .gp-live-dot, .gp-live-card[data-kind="trial"] .gp-live-dot { background: #d97706; box-shadow: 0 0 0 4px rgba(217,119,6,.14); } .gp-live-a { left: -3%; top: 14%; } .gp-live-b { right: -3%; top: 44%; } .gp-live-c { left: 8%; bottom: 7%; } @media (max-width: 1280px) { .gp-live-a { left: 1%; } .gp-live-b { right: 1%; } } @media (max-width: 949px) { .gp-live-c { display: none; } .gp-live-card { min-width: 0; max-width: 260px; font-size: 12px; padding: 9px 12px; } .gp-live-a { top: 6%; } .gp-live-b { top: auto; bottom: 6%; } } @media (max-width: 575px) { .gp-live-b { display: none; } .gp-live-a { left: 50%; top: auto; bottom: -26px; transform: translateX(-50%); } .gp-live-a.is-in { transform: translateX(-50%); } .gp-hero-chrome span { display: none; } } /* ---------- Customer logos: marquee on a gently curved surface ---------- */ .gp-logo-stage { position: relative; height: 70px; overflow: hidden; perspective: 1000px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .gp-logo-track { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; } .gp-logo-item { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: default; width: 200px; height: 70px; display: flex; align-items: center; justify-content: center; will-change: transform, opacity; } .gp-logo-item img { max-height: 30px; max-width: 150px; opacity: .92; transition: opacity .35s ease, transform .35s ease; } .gp-logo-item img.gp-logo-sm { max-height: 22px; } .gp-logo-item:hover img { opacity: 1; transform: scale(1.06); } @media (max-width: 575px) { .gp-logo-item { width: 150px; } .gp-logo-item img { max-height: 24px; max-width: 120px; } } /* ---------- Buttons: pill-shaped across the page ---------- */ a.bg-cyan-700, a.border-cyan-700, .gp-hero-stage ~ * a.bg-cyan-700 { border-radius: 9999px !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; transition: background-color .2s ease, color .2s ease, box-shadow .25s ease, transform .25s ease; } a.bg-cyan-700:hover { box-shadow: 0 10px 24px -10px rgba(14,116,144,.6); transform: translateY(-1px); } a.bg-cyan-700.py-4 { padding-top: .85rem !important; padding-bottom: .85rem !important; } .gp-link-arrow span { display: inline-block; transition: transform .2s ease; } .gp-link-arrow:hover span { transform: translateX(3px); } /* ---------- Testimonials ---------- */ .gp-tst-card { position: relative; display: flex; flex-direction: column; height: 100%; margin: 0; padding: 30px 30px 26px; border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 30px 60px -40px rgba(12,58,65,.45), 0 0 0 1px rgba(15,23,42,.06); overflow: hidden; isolation: isolate; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; } .gp-tst-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--a1), var(--a2)); } .gp-tst-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--a2) 22%, transparent), transparent); transition: transform .6s ease; } .gp-tst-card.is-visible:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -40px rgba(12,58,65,.55), 0 0 0 1px rgba(15,23,42,.08); } .gp-tst-card:hover::after { transform: scale(1.25); } .gp-tst-card:nth-child(2) { transition-delay: .08s; } .gp-tst-card:nth-child(3) { transition-delay: .16s; } .gp-tst-stat b { display: block; font-size: 38px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .gp-tst-stat span { display: block; margin-top: 4px; font-size: 14px; color: #6b7280; } .gp-stars { display: flex; gap: 2px; margin: 20px 0 12px; color: #f5b301; } .gp-stars svg { width: 17px; height: 17px; } .gp-tst-card blockquote { flex: 1; margin: 0; font-size: 17px; line-height: 1.6; color: #1f2937; } .gp-tst-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(15,23,42,.07); } .gp-tst-av { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 600; background: linear-gradient(135deg, var(--a1), var(--a2)); } .gp-tst-card figcaption b { display: block; font-size: 15px; color: #111827; } .gp-tst-card figcaption div span { font-size: 13.5px; color: #6b7280; } .gp-tst-card figcaption img { height: 20px; width: auto; margin-left: auto; opacity: .9; } /* ---------- Animated section backgrounds (waves + polygons) ---------- */ .gp-bg-anim { position: relative; isolation: isolate; } .gp-bg-layer { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } /* Headings: a bit more air between lines (Tailwind's text-5xl sets line-height: 1) */ section h2 { line-height: 1.22 !important; } /* "All the metrics" cards: roomier, softer */ .group.gp-card { padding: 34px 32px 30px !important; border-radius: 24px !important; border-color: rgba(15,23,42,.08) !important; box-shadow: 0 20px 40px -34px rgba(12,58,65,.35); } .group.gp-card > div:first-child { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 26px; } .group.gp-card h3 { margin-bottom: 10px; } .group.gp-card p { line-height: 1.65; margin-bottom: 20px; } /* ---------- Product scenes (drawn at a fixed design size, scaled to the column) ---------- */ .gp-mock { position: relative; width: 100%; } .gp-mock-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; } .gp-app, .gp-mail { font-family: 'Public Sans', system-ui, sans-serif; font-size: 12px; color: #1f2937; -webkit-font-smoothing: antialiased; } .gp-app { width: 100%; height: 100%; display: grid; grid-template-columns: 148px 1fr; background: #f3f5f7; border-radius: 14px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(12, 58, 65, .35), 0 30px 60px -30px rgba(0, 0, 0, .22), 0 0 0 1px rgba(15, 23, 42, .06); } .gp-app svg { display: block; } .gp-app-side { background: #323742; padding: 16px 9px; } .gp-app-logo { width: 106px; height: auto; margin: 2px 7px 18px; } .gp-app-account { display: flex; align-items: center; gap: 4px; margin: 0 8px 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: #9aa3b2; } .gp-app-account svg { width: 10px; height: 10px; fill: currentColor; } .gp-nav { display: flex; align-items: center; gap: 9px; padding: 7px 9px; margin-bottom: 2px; border-radius: 6px; color: #e2e6ec; font-size: 12px; } .gp-nav svg { width: 13px; height: 13px; fill: #cdd3dc; } .gp-nav-sub { white-space: nowrap; padding: 6px 9px 6px 31px; margin-bottom: 1px; border-radius: 6px; color: #cdd3dc; font-size: 11.5px; } .gp-nav.on, .gp-nav-sub.on { background: #2e6049; color: #fff; } .gp-nav.open { color: #fff; } .gp-app-main { display: grid; grid-template-rows: 40px 1fr; min-width: 0; } .gp-app-top { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: #fff; border-bottom: 1px solid #e8ebef; } .gp-ico-btn { display: inline-flex; align-items: center; } .gp-ico-btn svg { width: 15px; height: 15px; fill: #374151; } .gp-app-top-r { display: flex; align-items: center; gap: 12px; } .gp-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #16747f, #50aa75); } .gp-app-content { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; overflow: hidden; min-width: 0; } .gp-app-head { display: flex; align-items: center; gap: 10px; min-height: 30px; } .gp-app-title { display: flex; align-items: center; gap: 5px; font-size: 19px; font-weight: 500; color: #111827; letter-spacing: -.01em; } .gp-i svg { width: 11px; height: 11px; fill: #9ca3af; color: #9ca3af; } .gp-chip-filter { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 6px; background: #d6e8f2; color: #1f4f66; font-size: 11.5px; font-weight: 500; } .gp-chip-filter svg { width: 11px; height: 11px; fill: currentColor; } .gp-app-head-r { display: flex; gap: 6px; margin-left: auto; } .gp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 7px; background: #fff; color: #111827; font-size: 11px; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px rgba(15,23,42,.06); white-space: nowrap; } .gp-chip-ico svg { width: 12px; height: 12px; fill: #374151; } .gp-card { position: relative; padding: 10px 14px; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px rgba(15,23,42,.05); } .gp-card-h { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; } .gp-card-h > b { font-size: 15px; font-weight: 500; color: #111827; } .gp-card-h > span:not([class]) { font-size: 11px; color: #6b7280; } .gp-kpi { display: flex; align-items: center; gap: 8px; } .gp-kpi > b { font-size: 17px; font-weight: 500; } .gp-kpi-d { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .gp-app em, .gp-mail em { font-style: normal; } .gp-app em.up { color: #16a34a; font-size: 11px; } .gp-app em.down { color: #dc2626; font-size: 11px; } .gp-kpi small { font-size: 9px; color: #9ca3af; } .gp-kpi-s { font-size: 14px; font-weight: 500; } .gp-app-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .gp-chart { overflow: visible; } .gp-chart text { font-size: 8.5px; fill: #9ca3af; font-family: 'Public Sans', system-ui, sans-serif; } .gp-chart-wrap { position: relative; } .gp-tip { position: absolute; left: 0; top: 0; z-index: 3; padding: 6px 9px; border-radius: 7px; background: #fff; font-size: 10.5px; color: #4b5563; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 24px -8px rgba(15,23,42,.28), 0 0 0 1px rgba(15,23,42,.06); opacity: 0; transition: opacity .25s ease; } .gp-tip b { display: block; font-size: 12px; font-weight: 600; color: #111827; } .gp-tip.on { opacity: 1; } .gp-tip-cash { min-width: 150px; } .gp-tip-cash div { display: flex; align-items: center; gap: 6px; font-size: 10px; line-height: 1.55; } .gp-tip-cash div i { width: 7px; height: 7px; border-radius: 2px; } .gp-tip-cash div span { margin-left: auto; padding-left: 12px; color: #111827; } .gp-toast { position: absolute; right: 4px; top: -2px; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 8px; background: #fff; font-size: 10.5px; color: #374151; box-shadow: 0 10px 24px -8px rgba(15,23,42,.3), 0 0 0 1px rgba(15,23,42,.06); opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); } .gp-toast.on { opacity: 1; transform: none; } .gp-toast i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); } .gp-toast b { color: #16a34a; font-weight: 600; } .gp-seg { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; background: #e8f4ee; color: #14532d; font-size: 11.5px; transition: background .3s ease; } .gp-seg i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; } .gp-seg b { font-weight: 500; } .gp-seg.swap { animation: gpSegSwap .7s ease; } @keyframes gpSegSwap { 30% { background: #c8ebd6; } } .gp-tabs { display: flex; gap: 18px; border-bottom: 1px solid #e5e7eb; font-size: 12px; color: #374151; } .gp-tabs span { padding-bottom: 7px; } .gp-tabs .on { color: #1f6f9f; box-shadow: inset 0 -2px 0 #1f6f9f; } .gp-heat-card { padding: 8px 12px 10px; } .gp-heat { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 10.5px; } .gp-heat th { padding: 3px 0 5px; font-weight: 600; color: #111827; text-align: center; } .gp-heat th:first-child, .gp-heat td:first-child { width: 68px; text-align: left; font-weight: 600; color: #111827; } .gp-heat td { height: 22px; text-align: center; color: #1f2937; } .gp-heat td.v { transition: opacity .4s ease; } .gp-select { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; font-size: 11px; box-shadow: 0 0 0 1px #e5e7eb; } .gp-select svg { width: 10px; height: 10px; fill: #6b7280; } .gp-legend { display: flex; flex-wrap: wrap; gap: 4px 13px; margin-top: 6px; font-size: 10px; color: #4b5563; } .gp-legend span { display: inline-flex; align-items: center; gap: 5px; } .gp-legend i { width: 7px; height: 7px; border-radius: 50%; } .gp-cash-table { padding: 6px 12px; } .gp-cash-table table { width: 100%; border-collapse: collapse; font-size: 11px; } .gp-cash-table th { padding: 5px 6px; font-weight: 600; text-align: right; color: #111827; } .gp-cash-table td { padding: 5px 6px; text-align: right; border-top: 1px solid #f1f3f5; white-space: nowrap; } .gp-cash-table th:first-child, .gp-cash-table td:first-child { text-align: left; } .gp-cash-table td:first-child i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; } .gp-cash-table td em { margin-left: 5px; font-size: 9.5px; color: #16a34a; } .gp-cash-table td em.down { color: #dc2626; } .gp-cur.flip { animation: gpFlip .6s ease; } @keyframes gpFlip { 0% { transform: rotateX(0); } 45% { transform: rotateX(90deg); } 55% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } } /* Phone */ .gp-phone-stage { position: relative; width: 360px; height: 660px; perspective: 1500px; display: flex; justify-content: center; padding-top: 12px; } .gp-phone { position: relative; z-index: 1; width: 300px; height: 620px; padding: 11px; border-radius: 50px; background: linear-gradient(145deg, #2d3139, #111318); box-shadow: inset 0 0 0 1.5px #4b515c, inset 0 0 0 4px #1b1e23, 0 50px 90px -40px rgba(12,58,65,.55), 0 30px 50px -30px rgba(0,0,0,.45); transform: rotateY(-16deg) rotateX(6deg) rotateZ(1.2deg); transform-style: preserve-3d; animation: gpPhoneFloat 8s ease-in-out infinite; } @keyframes gpPhoneFloat { 50% { transform: rotateY(-12deg) rotateX(5deg) rotateZ(1deg) translateY(-8px); } } .gp-phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 40px; background: #f3f5f7; font-size: 12px; color: #1f2937; font-family: 'Public Sans', system-ui, sans-serif; } .gp-phone-shadow { position: absolute; left: 22%; right: 22%; bottom: 0; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(12,58,65,.32), transparent); filter: blur(4px); } .gp-m-status { position: relative; height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 30px; background: #323742; color: #fff; font-size: 12px; } .gp-m-island { position: absolute; left: 50%; top: 9px; width: 88px; height: 25px; border-radius: 14px; background: #000; transform: translateX(-50%); } .gp-m-sig { display: flex; align-items: flex-end; gap: 2px; height: 10px; } .gp-m-sig i { width: 3px; border-radius: 1px; background: #fff; } .gp-m-sig i:nth-child(1) { height: 4px; } .gp-m-sig i:nth-child(2) { height: 6px; } .gp-m-sig i:nth-child(3) { height: 8px; } .gp-m-sig i:nth-child(4) { height: 10px; } .gp-m-bar { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 14px; background: #323742; } .gp-m-bar .gp-app-logo { width: 96px; margin: 0; } .gp-m-bar .gp-ico-btn svg { fill: #fff; width: 16px; height: 16px; display: block; } .gp-m-bar-r { display: flex; align-items: center; gap: 10px; } .gp-m-scroll { position: absolute; top: 76px; right: 0; bottom: 0; left: 0; overflow: hidden; } .gp-m-content { display: flex; flex-direction: column; gap: 9px; padding: 10px 9px 40px; will-change: transform; } .gp-m-content svg { display: block; } .gp-m-chips { display: flex; justify-content: flex-end; gap: 6px; } .gp-m-title { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 500; color: #111827; } .gp-m-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; margin-top: 8px; } .gp-m-kpis b { display: block; font-size: 13px; font-weight: 500; } .gp-m-kpis span { display: block; font-size: 9.5px; color: #6b7280; } .gp-phone em.up { color: #16a34a; font-style: normal; } .gp-phone .down { color: #dc2626; } .gp-m-table > div:not(.gp-card-h) { display: grid; grid-template-columns: 1fr auto 28px; gap: 6px; padding: 5px 0; border-top: 1px solid #f1f3f5; font-size: 11px; } .gp-m-table > div > span { display: flex; align-items: center; gap: 6px; } .gp-m-table i { width: 7px; height: 7px; border-radius: 50%; } .gp-m-table b { font-weight: 500; } .gp-m-table em { text-align: right; font-size: 9.5px; color: #16a34a; font-style: normal; } .gp-m-total { font-weight: 600; } .gp-m-total b { font-weight: 600; color: #16a34a; } .gp-m-notif { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 5; display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 18px; background: rgba(246,247,249,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.35); transform: translateY(-130%); transition: transform .65s cubic-bezier(.2,.9,.25,1.05); } .gp-m-notif.on { transform: none; } .gp-m-notif-ico { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); } .gp-m-notif-ico img { width: 20px; height: 20px; } .gp-m-notif b { display: block; font-size: 11.5px; } .gp-m-notif span { font-size: 11px; line-height: 1.3; color: #374151; } .gp-m-notif small { align-self: flex-start; margin-left: auto; font-size: 9.5px; color: #6b7280; } .gp-m-home { position: absolute; bottom: 7px; left: 50%; width: 110px; height: 4px; border-radius: 3px; background: #111827; opacity: .8; transform: translateX(-50%); } /* Mail client */ .gp-mail { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 50px 100px -40px rgba(12, 58, 65, .35), 0 30px 60px -30px rgba(0, 0, 0, .22), 0 0 0 1px rgba(15, 23, 42, .07); } .gp-mail-top { display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 12px; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; } .gp-mail-dots { display: flex; gap: 6px; } .gp-mail-dots i { width: 10px; height: 10px; border-radius: 50%; } .gp-mail-dots i:nth-child(1) { background: #f8a5a5; } .gp-mail-dots i:nth-child(2) { background: #f6d27b; } .gp-mail-dots i:nth-child(3) { background: #9adba9; } .gp-mail-app { font-weight: 600; font-size: 12px; } .gp-mail-search { flex: 1; max-width: 320px; margin: 0 auto; height: 24px; line-height: 24px; padding-left: 10px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #e5e7eb; color: #9ca3af; font-size: 11px; } .gp-mail-body { display: grid; grid-template-columns: 124px 264px 1fr; height: calc(100% - 38px); } .gp-mail-folders { padding: 10px 8px; background: #f9fafb; border-right: 1px solid #eef0f2; font-size: 12px; } .gp-mail-folders > div { display: flex; justify-content: space-between; padding: 6px 9px; border-radius: 5px; color: #374151; } .gp-mail-folders .gp-mail-new { justify-content: center; margin-bottom: 10px; background: #2f6fb3; color: #fff; font-weight: 600; } .gp-mail-folders .on { background: #e8eef7; font-weight: 600; color: #111827; } .gp-mail-folders b { color: #2f6fb3; transition: transform .3s ease; } .gp-mail-folders b.bump { animation: gpBump2 .5s ease; } @keyframes gpBump2 { 40% { transform: scale(1.35); } } .gp-mail-list { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #eef0f2; } .gp-mail-list-h { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px 8px; } .gp-mail-list-h b { font-size: 15px; font-weight: 600; } .gp-mail-list-h span { font-size: 11px; color: #6b7280; } .gp-mail-list-h u { color: #2f6fb3; text-decoration-thickness: 2px; text-underline-offset: 5px; margin-right: 8px; } .gp-mail-items { overflow: hidden; } .gp-mail-item { position: relative; display: flex; gap: 9px; padding: 9px 12px 9px 13px; border-bottom: 1px solid #f1f3f5; background: #fff; transition: background .3s ease; } .gp-mail-item.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #2f6fb3; } .gp-mail-item.unread b, .gp-mail-item.unread .gp-mail-subj { font-weight: 700; color: #111827; } .gp-mail-item.sel { background: #e8eef7; } .gp-mail-av { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #94a3b8; color: #fff; font-size: 11px; font-weight: 600; } .gp-mail-items > .gp-mail-item:nth-of-type(2) .gp-mail-av { background: #635bff; } .gp-mail-items > .gp-mail-item:nth-of-type(3) .gp-mail-av { background: #c2410c; } .gp-mail-items > .gp-mail-item:nth-of-type(4) .gp-mail-av { background: #0369a1; } .gp-mail-items > .gp-mail-item:nth-of-type(5) .gp-mail-av { background: #7c3aed; } .gp-mail-av-gp, .gp-mail-new-wrap .gp-mail-av { background: linear-gradient(135deg, #16747f, #50aa75); } .gp-mail-it { flex: 1; min-width: 0; } .gp-mail-it-top { display: flex; justify-content: space-between; } .gp-mail-it-top b { font-size: 11.5px; font-weight: 500; } .gp-mail-it-top small { font-size: 9.5px; color: #6b7280; } .gp-mail-subj, .gp-mail-prev { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .gp-mail-subj { font-size: 11px; color: #111827; } .gp-mail-prev { font-size: 10.5px; color: #6b7280; } .gp-mail-new-wrap { height: 0; overflow: hidden; transition: height .55s cubic-bezier(.2,.8,.2,1); } .gp-mail-new-wrap.in { height: 60px; } .gp-mail-new-wrap .gp-mail-item { transform: translateY(-12px); opacity: 0; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease, background .3s ease; } .gp-mail-new-wrap.in .gp-mail-item { transform: none; opacity: 1; } .gp-mail-read { position: relative; min-width: 0; background: #fff; } .gp-mail-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #9ca3af; font-size: 12px; transition: opacity .4s ease; } .gp-mail-empty svg { width: 44px; height: 44px; } .gp-mail-empty.off { opacity: 0; } .gp-mail-msg { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transition: opacity .45s ease; } .gp-mail-msg.on { opacity: 1; } .gp-mail-msg-h { padding: 12px 16px 9px; border-bottom: 1px solid #f1f3f5; } .gp-mail-msg-subj { font-size: 14px; font-weight: 600; color: #111827; } .gp-mail-msg-from { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .gp-mail-msg-from b { display: block; font-size: 11.5px; } .gp-mail-msg-from span { font-size: 10.5px; color: #6b7280; } .gp-mail-msg-from small { margin-left: auto; font-size: 10px; color: #6b7280; } .gp-mail-scroll { flex: 1; overflow: hidden; background: #f5f6f8; } .gp-mail-scroll > div { will-change: transform; } .gp-email { width: 330px; margin: 14px auto; padding: 22px 24px 24px; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); text-align: center; color: #3f3f46; font-family: Arial, Helvetica, sans-serif; } .gp-email-logo { display: block; width: 118px; height: auto; margin: 0 auto 14px; } .gp-email h5 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #3f3f46; } .gp-email h5 u { color: #1a56db; } .gp-email-date { margin-bottom: 12px; font-size: 11px; font-weight: 700; color: #52525b; } .gp-email-ai { margin: 0 0 14px; font-size: 11.5px; line-height: 1.55; } .gp-email table { width: 100%; border-collapse: collapse; font-size: 11px; } .gp-email-kpis td { padding: 4px 0; text-align: right; } .gp-email-kpis td:first-child { text-align: left; color: #71717a; } .gp-email-kpis td:last-child { width: 62px; } .gp-email .up { color: #16a34a; } .gp-email .down { color: #dc2626; } .gp-email h6 { margin: 18px 0 8px; font-size: 13.5px; font-weight: 700; color: #3f3f46; } .gp-email-chart { display: block; margin: 0 auto; overflow: visible; } .gp-email-chart text { font-size: 8px; fill: #9ca3af; } .gp-email-moves td { padding: 5px 0; text-align: left; border-top: 1px solid #f4f4f5; } .gp-email-moves td:last-child { text-align: right; } .gp-email-moves i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; } .gp-email-small { margin: 0; font-size: 11px; line-height: 1.5; } .gp-email-btn { display: inline-block; margin-top: 16px; padding: 7px 16px; border-radius: 6px; background: #16747f; color: #fff; font-size: 11.5px; font-weight: 600; } .gp-email-foot { margin-top: 14px; font-size: 9.5px; color: #a1a1aa; } .gp-mail-toast { position: absolute; right: 14px; bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 9px; padding: 10px 14px 10px 10px; border-radius: 10px; background: #fff; font-size: 11px; box-shadow: 0 18px 40px -14px rgba(15,23,42,.38), 0 0 0 1px rgba(15,23,42,.06); opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); } .gp-mail-toast.on { opacity: 1; transform: none; } .gp-mail-toast b { display: block; font-size: 11.5px; } .gp-mail-toast span { color: #4b5563; } .gp-cursor { position: absolute; left: 0; top: 0; z-index: 10; width: 17px; height: 21px; opacity: 0; pointer-events: none; transition: opacity .3s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); } .gp-cursor.on { opacity: 1; } .gp-click { position: absolute; left: 0; top: 0; z-index: 9; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 2px solid rgba(47,111,179,.55); opacity: 0; pointer-events: none; } .gp-click.on { animation: gpClick .55s ease-out; } @keyframes gpClick { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.3); } } /* Dashboard (modelled on the demo account) */ .gp-mock-dash .gp-app { grid-template-columns: 158px 1fr; } .gp-app-top .gp-search { display: flex; align-items: center; gap: 7px; width: 250px; height: 26px; margin-left: 12px; margin-right: auto; padding: 0 8px; border-radius: 7px; box-shadow: 0 0 0 1px #e2e5ea; color: #9ca3af; font-size: 11px; } .gp-search svg { width: 12px; height: 12px; color: #6b7280; } .gp-search kbd { margin-left: auto; padding: 1px 5px; border-radius: 4px; background: #f3f4f6; font-family: inherit; font-size: 9.5px; color: #6b7280; } .gp-caret svg { width: 12px; height: 12px; fill: #6b7280; } .gp-dgrid { display: grid; grid-template-columns: 1fr 228px; gap: 10px; min-height: 0; } .gp-dmain { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-content: start; } .gp-dmain .gp-tile { grid-column: span 2; padding: 9px 12px 10px; } .gp-dmain .gp-growth { grid-column: span 6; } .gp-dmain .gp-mini { grid-column: span 3; padding: 9px 12px 8px; } .gp-tile-h { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: #6b7280; } .gp-tile-h > span { display: flex; align-items: center; gap: 4px; } .gp-tile-h em small, .gp-kpi-d small { margin-left: 4px; font-size: 9px; color: #9ca3af; } .gp-tile > b { display: inline-block; margin-top: 3px; font-size: 21px; font-weight: 500; color: #111827; letter-spacing: -.01em; } .gp-mini .gp-card-h > b, .gp-growth .gp-card-h > b { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #6b7280; font-weight: 500; } .gp-mini .gp-kpi > b { font-size: 16px; } .gp-growth-v { display: flex; align-items: center; gap: 12px; } .gp-growth-v > b { font-size: 19px; font-weight: 500; color: #111827; } .gp-growth-v > span { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; } .gp-growth-v > span b { font-size: 12px; font-weight: 500; } .gp-growth-v small { font-size: 9px; color: #9ca3af; } .gp-dside { display: flex; flex-direction: column; gap: 10px; min-height: 0; } .gp-breakdown { padding: 9px 12px 8px; } .gp-breakdown .gp-card-h > b, .gp-activity .gp-card-h > b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: #6b7280; } .gp-bd-row { display: grid; grid-template-columns: 9px 1fr auto 22px; align-items: center; gap: 7px; margin: 0 -12px; padding: 4.5px 12px; font-size: 11.5px; border-bottom: 1px solid #f1f3f5; } .gp-bd-row i { width: 8px; height: 8px; border-radius: 50%; } .gp-bd-row b { font-weight: 500; color: #111827; } .gp-bd-row em { text-align: right; font-size: 10.5px; } .gp-bd-net { display: flex; justify-content: space-between; margin: 0 -12px; padding: 6px 12px 3px; font-size: 12px; font-weight: 600; } .gp-bd-net b { color: #16a34a; font-weight: 600; } .gp-bd-net b.neg { color: #dc2626; } .gp-bd-fx { display: flex; justify-content: space-between; font-size: 9.5px; color: #9ca3af; } .gp-activity { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 9px 8px 0; overflow: hidden; } .gp-activity .gp-card-h { padding: 0 4px; } .gp-act-list { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); } .gp-act-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 6px; border-bottom: 1px solid #f1f3f5; border-radius: 4px; } .gp-act-row > i { position: relative; top: 4px; width: 8px; height: 8px; flex: none; border-radius: 50%; } .gp-act-row > i.pulse { animation: gpDotPulse 1.8s ease-out infinite; } @keyframes gpDotPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot) 70%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .gp-act-t { flex: 1; min-width: 0; line-height: 1.25; } .gp-act-t b { display: block; font-size: 11.5px; font-weight: 500; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gp-act-t span { font-size: 9.5px; color: #6b7280; } .gp-act-row em { font-size: 11.5px; font-weight: 500; } .gp-app em.up.gp-plain, .gp-act-row em.up { color: #16a34a; } .gp-act-row em.down { color: #dc2626; } .gp-act-row.enter { animation: gpRowEnter .95s cubic-bezier(.25,.6,.3,1) backwards, gpRowGlow 2.6s ease-out; overflow: hidden; } @keyframes gpRowEnter { from { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } to { max-height: 60px; opacity: 1; } } @keyframes gpRowGlow { 0%, 30% { background-color: rgba(43,135,184,.14); } 100% { background-color: transparent; } } .gp-live-dot2 { width: 7px; height: 7px; border-radius: 50%; background: #1e9365; animation: gpDotPulse 1.8s ease-out infinite; --dot: #1e9365; } .gp-flashable { border-radius: 6px; padding: 1px 5px; margin: -1px -5px; } .gp-flash-up { animation: gpValueFlash 1.6s ease-out; --gp-flash: rgba(34,197,94,.32); } .gp-flash-down { animation: gpValueFlash 1.6s ease-out; --gp-flash: rgba(239,68,68,.30); } .gp-flash-neutral { animation: gpValueFlash 1.6s ease-out; --gp-flash: rgba(43,135,184,.25); } @keyframes gpValueFlash { 0% { background-color: var(--gp-flash); } 100% { background-color: transparent; } } /* Forecast */ .gp-sliders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 12px 16px 12px; } .gp-sl b { display: block; font-size: 12px; font-weight: 600; color: #111827; } .gp-sl-d { display: block; margin-top: 1px; font-size: 9.5px; color: #6b7280; } .gp-sl-row { display: flex; align-items: center; gap: 10px; margin: 11px 0 7px; } .gp-sl-track { position: relative; flex: 1; height: 4px; border-radius: 3px; background: #e5e7eb; } .gp-sl-fill { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-radius: 3px; background: #2a78a8; } .gp-sl-knob { position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: #2a78a8; box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(0,0,0,.25); transition: box-shadow .25s ease; } .gp-sl.active .gp-sl-knob { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(42,120,168,.18), 0 1px 4px rgba(0,0,0,.25); } .gp-sl-row em { width: 44px; text-align: right; font-size: 11.5px; font-weight: 600; color: #111827; font-style: normal; } .gp-sl-row em.up { color: #16a34a; } .gp-sl-row em.down { color: #dc2626; } .gp-sl small { font-size: 9.5px; color: #6b7280; } .gp-fc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f3f5; } .gp-fc-kpis b { display: block; font-size: 16px; font-weight: 500; color: #111827; } .gp-fc-kpis span { font-size: 10px; color: #6b7280; } .gp-fc-kpis em { margin-left: 4px; font-size: 10px; } .gp-fc-kpis em.up { color: #16a34a; } .gp-fc-kpis em.down { color: #dc2626; } .gp-chart .gp-today { font-size: 8px; fill: #6b7280; } #gpFcScen stop { transition: stop-color .5s ease; } /* The AI launcher (speech bubble with a star), bottom-right like in the app */ .gp-app { position: relative; } .gp-launcher { position: absolute; right: 14px; bottom: 14px; z-index: 4; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 43%; background: #0078d4; box-shadow: 0 4px 14px rgba(0,120,212,.35); transition: transform .15s ease, box-shadow .15s ease; } .gp-launcher svg { width: 21px; height: 21px; } .gp-phone-screen .gp-launcher { right: 12px; bottom: 16px; width: 36px; height: 36px; } /* ---------- Multi-currency globe ---------- */ .gp-globe { position: relative; width: 100%; max-width: 620px; margin: 0 auto; aspect-ratio: 1 / 1; } .gp-globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; } .gp-globe canvas:active { cursor: grabbing; } .gp-globe-labels { position: absolute; inset: 0; pointer-events: none; } .gp-fx-pill { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.95); color: #1f2937; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(12,58,65,.4), 0 0 0 1px rgba(15,23,42,.06); opacity: 0; transition: opacity .35s ease; will-change: transform, opacity; } .gp-fx-pill small { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: #0e7490; } .gp-fx-pill.to { background: #f0fdf9; color: #065f46; box-shadow: 0 10px 24px -10px rgba(4,120,87,.45), 0 0 0 1px rgba(4,120,87,.18); } .gp-fx-pill.to small { color: #047857; } .gp-globe-hub { position: absolute; left: 50%; bottom: 1%; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: #fff; color: #4b5563; font-size: 13px; transform: translateX(-50%); box-shadow: 0 14px 30px -14px rgba(12,58,65,.4), 0 0 0 1px rgba(15,23,42,.07); white-space: nowrap; } .gp-globe-hub b { min-width: 52px; padding: 4px 11px; border-radius: 999px; background: #0e7490; color: #fff; text-align: center; font-weight: 700; letter-spacing: .04em; } .gp-globe-hub b.flip { animation: gpFlip .6s ease; } /* ---------- Integrations: a light that traces one card's border at a time ---------- */ @property --gp-a { syntax: ''; inherits: false; initial-value: 0deg; } .gp-int-card { position: relative; will-change: transform; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .5s ease; } .gp-int-card.is-visible { transition: opacity .9s ease, transform .2s ease-out, box-shadow .5s ease, border-color .5s ease; } .gp-int-card::before { content: ""; position: absolute; inset: -1px; padding: 1.5px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .8s ease; background: conic-gradient(from var(--gp-a), transparent 0deg 250deg, rgba(20,184,166,.9) 320deg, rgba(34,197,94,.95) 345deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .gp-int-card.gp-int-live::before { opacity: 1; animation: gpTrace 2.4s linear infinite; } .gp-int-card.gp-int-live { box-shadow: 0 20px 40px -28px rgba(14,116,144,.55); } @keyframes gpTrace { to { --gp-a: 360deg; } } .gp-int-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(20,184,166,.10), transparent 45%); } .gp-int-card:hover { border-color: #b9dde2; box-shadow: 0 26px 44px -30px rgba(12,58,65,.45); } .gp-int-card:hover::after { opacity: 1; } .gp-int-card > div:first-child { transition: transform .5s cubic-bezier(.2,.8,.2,1); } .gp-int-card.gp-int-live > div:first-child, .gp-int-card:hover > div:first-child { transform: translateY(-2px); } /* ---------- Built for AI: card slider ---------- */ .gp-ai-section { background: linear-gradient(180deg, #fff, #f5f8f9 55%, #fff); overflow: hidden; } .gp-ai-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; } .gp-ai-head > div:first-child { max-width: 900px; } .gp-ai-nav { display: flex; gap: 10px; flex: none; } .gp-ai-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(15,23,42,.12); background: #fff; color: #0e7490; font-size: 18px; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; } .gp-ai-nav button:hover { background: #0e7490; color: #fff; border-color: #0e7490; } .gp-ai-nav button:disabled { opacity: .35; pointer-events: none; } .gp-ai-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 82vw); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 4px 30px; margin: 0 -4px; scrollbar-width: none; } .gp-ai-track::-webkit-scrollbar { display: none; } .gp-ai-card { scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 24px; background: #fff; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 24px 50px -38px rgba(12,58,65,.5), 0 0 0 1px rgba(15,23,42,.07); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; } .gp-ai-card:hover { transform: translateY(-5px); box-shadow: 0 36px 60px -36px rgba(12,58,65,.55), 0 0 0 1px rgba(15,23,42,.09); } .gp-ai-img { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(120% 90% at 85% 10%, var(--g3), transparent 60%), linear-gradient(145deg, var(--g1), var(--g2)); } .gp-ai-img::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.3px); background-size: 18px 18px; pointer-events: none; } .gp-ai-win { position: relative; z-index: 1; width: 80%; border-radius: 12px; background: #fff; font-size: 11px; color: #1f2937; text-align: left; box-shadow: 0 30px 50px -20px rgba(0,0,0,.45); transform: perspective(900px) rotateX(4deg) translateY(4px); transition: transform .5s cubic-bezier(.2,.8,.2,1); } .gp-ai-card:hover .gp-ai-win { transform: perspective(900px) rotateX(0) translateY(-2px); } .gp-ai-winbar { display: flex; align-items: center; gap: 6px; padding: 8px 11px; border-bottom: 1px solid #eef0f3; font-size: 11px; } .gp-ai-winbar b { font-weight: 600; } .gp-ai-winbar em { margin-left: auto; font-style: normal; font-size: 9.5px; color: #15803d; } .gp-ai-winbar em::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #22c55e; } .gp-ai-logo svg { width: 14px; height: 14px; display: block; } .gp-ai-bub { margin: 8px 11px; padding: 7px 9px; border-radius: 10px; line-height: 1.4; } .gp-ai-bub-u { margin-left: 30%; background: #f1f3f5; } .gp-ai-bub-a { margin-right: 14%; background: #fff; border: 1px solid #eef0f3; } .gp-ai-tool { display: flex; align-items: center; gap: 6px; margin: 0 11px; font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; color: #0e7490; } .gp-ai-tool i { width: 12px; height: 12px; border-radius: 50%; background: #0e7490; box-shadow: inset 0 0 0 3px #d9f1f3; } .gp-ai-mbars { display: flex; align-items: flex-end; gap: 6px; height: 30px; margin-top: 6px; } .gp-ai-mbars i { width: 18px; border-radius: 3px 3px 1px 1px; background: #16747f; } .gp-ai-mbars i + i { background: #7cc4c9; } .gp-ai-mbars i + i + i { background: #c5e4e6; } .gp-ai-panel { width: 66%; margin-right: 12%; } .gp-ai-spark { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 5px; color: #fff; font-size: 9px; background: linear-gradient(135deg, #16747f, #50aa75); } .gp-ai-propose { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 11px 11px; padding: 7px 9px; border-radius: 9px; background: #f5f3ff; border: 1px dashed #c4b5fd; font-size: 10px; color: #4c1d95; } .gp-ai-propose b { padding: 3px 9px; border-radius: 999px; background: #6d28d9; color: #fff; font-size: 9.5px; } .gp-ai-fab { position: absolute; z-index: 2; right: 7%; bottom: 9%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 43%; background: #0078d4; box-shadow: 0 8px 20px rgba(0,0,0,.35); } .gp-ai-fab svg { width: 22px; height: 22px; } .gp-ai-term { background: #0d1117; color: #d1d5db; } .gp-ai-termbar { border-bottom-color: #1f2630; color: #9ca3af; } .gp-ai-termbar i { width: 8px; height: 8px; border-radius: 50%; background: #3a4150; } .gp-ai-term pre, .gp-ai-code pre { margin: 0; padding: 10px 12px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; line-height: 1.6; white-space: pre; overflow: hidden; } .gp-ai-cmd { color: #e5e7eb; } .gp-ai-out { color: #9ca3af; } .gp-ai-out em { font-style: normal; color: #4ade80; } .gp-ai-caret { display: inline-block; width: 6px; height: 12px; margin-left: 1px; vertical-align: -2px; background: #4ade80; animation: gpBlink 1s steps(1) infinite; } .gp-ai-code { background: #0f172a; color: #cbd5e1; } .gp-ai-tabs { display: flex; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #1e293b; font-size: 10px; color: #64748b; } .gp-ai-tabs b { color: #e2e8f0; font-weight: 600; } .gp-ai-code .k { color: #c084fc; } .gp-ai-code .s { color: #86efac; } .gp-ai-code .f { color: #7dd3fc; } .gp-ai-code .p { color: #93c5fd; } .gp-ai-code .n { color: #fcd34d; } .gp-ai-body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; } .gp-ai-body h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: #111827; } .gp-ai-body p { flex: 1; margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: #4b5563; } .gp-ai-link { font-weight: 600; color: #0e7490; } .gp-ai-link span { display: inline-block; transition: transform .2s ease; } .gp-ai-card:hover .gp-ai-link span { transform: translateX(4px); } .gp-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 26px; padding-top: 30px; border-top: 1px solid rgba(15,23,42,.08); font-size: 20px; font-weight: 600; color: #1f2937; } .gp-ask > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .gp-ask a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 500; color: #1f2937; text-decoration: none; box-shadow: 0 0 0 1px rgba(15,23,42,.1); transition: transform .2s ease, box-shadow .2s ease; } .gp-ask a svg { width: 20px; height: 20px; color: var(--c); } .gp-ask a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(12,58,65,.45), 0 0 0 1px rgba(15,23,42,.12); } @media (max-width: 949px) { .gp-ai-head { flex-direction: column; align-items: flex-start; } .gp-ai-nav { display: none; } } @media (max-width: 575px) { .gp-ai-img { aspect-ratio: 4 / 3; } .gp-ai-win, .gp-ai-card:hover .gp-ai-win { width: 88%; transform: scale(.86); } .gp-ai-panel { margin-right: 6%; } } /* ---------- Learn: resource cards + metric tiles ---------- */ .gp-learn { background: linear-gradient(180deg, #fff, #f5f8f9); } .gp-learn-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .gp-learn-cards .gp-ai-img { aspect-ratio: 16 / 8; } .gp-lc-stack { position: relative; z-index: 1; width: 62%; height: 70%; } .gp-lc-stack > div { position: absolute; left: 0; right: 0; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 20px 40px -18px rgba(0,0,0,.45); transition: transform .5s cubic-bezier(.2,.8,.2,1); } .gp-lc-stack > div:nth-child(1) { top: 0; transform: translate(-14%, 0) rotate(-5deg) scale(.9); opacity: .75; } .gp-lc-stack > div:nth-child(2) { top: 10%; transform: translate(12%, 0) rotate(4deg) scale(.94); opacity: .88; } .gp-lc-stack > div:nth-child(3) { top: 22%; } .gp-ai-card:hover .gp-lc-stack > div:nth-child(1) { transform: translate(-22%, -6%) rotate(-8deg) scale(.9); } .gp-ai-card:hover .gp-lc-stack > div:nth-child(2) { transform: translate(20%, -4%) rotate(7deg) scale(.94); } .gp-lc-stack small, .gp-lc-calc > small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0e7490; } .gp-lc-stack b { display: block; margin: 3px 0 8px; font-size: 14px; color: #0f172a; } .gp-lc-stack i, .gp-lc-page i { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: #e5e9ee; } .gp-lc-stack i.s, .gp-lc-page i.s { width: 60%; } .gp-lc-calc { position: relative; z-index: 1; width: 64%; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 24px 44px -18px rgba(0,0,0,.45); font-size: 11.5px; color: #334155; } .gp-lc-row { display: flex; justify-content: space-between; margin-top: 10px; } .gp-lc-row b { color: #0f172a; } .gp-lc-slider { position: relative; display: block; height: 4px; margin-top: 7px; border-radius: 3px; background: #e5e7eb; } .gp-lc-slider i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #1f7a4d; transition: width .6s cubic-bezier(.2,.8,.2,1); } .gp-lc-slider u { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #1f7a4d; box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(0,0,0,.3); transition: left .6s cubic-bezier(.2,.8,.2,1); } .gp-ai-card:hover .gp-lc-slider:first-of-type i { width: 62% !important; } .gp-ai-card:hover .gp-lc-slider:first-of-type u { left: 62% !important; } .gp-lc-res { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef0f3; } .gp-lc-res b { font-size: 18px; color: #15803d; } .gp-lc-doc { position: relative; z-index: 1; display: flex; width: 70%; height: 72%; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 24px 44px -18px rgba(0,0,0,.45); } .gp-lc-side { width: 26%; padding: 12px 10px; background: #f5f3ff; } .gp-lc-side i { display: block; height: 6px; margin-bottom: 9px; border-radius: 3px; background: #ddd6fe; } .gp-lc-side i.on { background: #7c3aed; } .gp-lc-page { flex: 1; padding: 14px 16px; } .gp-lc-page b { display: block; margin-bottom: 8px; font-size: 14px; color: #0f172a; } .gp-lc-code { display: block; margin: 10px 0 4px; padding: 5px 8px; border-radius: 6px; background: #0f172a; font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; color: #86efac; } .gp-mt-head { display: flex; align-items: baseline; justify-content: space-between; margin: 56px 0 18px; } .gp-mt-head h3 { margin: 0; font-size: 22px; font-weight: 700; color: #111827; } .gp-mt-head a { font-weight: 600; color: #0e7490; } .gp-mt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .gp-mt { position: relative; display: flex; flex-direction: column; min-height: 168px; padding: 20px 20px 16px; border-radius: 18px; background: #fff; text-decoration: none; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 0 0 1px rgba(15,23,42,.08); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; } .gp-mt.is-visible:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(12,58,65,.5), 0 0 0 1px rgba(14,116,144,.35); } .gp-mt-top { display: flex; justify-content: space-between; align-items: center; } .gp-mt-top b { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #0f172a; } .gp-mt-top span { color: #0e7490; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; } .gp-mt:hover .gp-mt-top span { opacity: 1; transform: none; } .gp-mt-name { margin-top: 2px; font-size: 14px; color: #4b5563; } .gp-mt code { display: block; margin-top: auto; max-width: 62%; padding-top: 14px; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.45; color: #0e7490; background: none; } .gp-mt svg { position: absolute; right: 16px; bottom: 16px; width: 88px; height: 31px; overflow: visible; } .gp-mt svg .ln { fill: none; stroke: #0e7490; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 0; } .gp-mt svg .ln.rose { stroke: #e11d48; } .gp-mt svg .base { fill: none; stroke: #cbd5e1; stroke-width: 1; stroke-dasharray: 3 3; } .gp-mt svg rect { fill: #0e7490; } .gp-mt svg rect.soft { fill: #b7dfe4; } .gp-mt:hover svg .ln { animation: gpMtDraw .9s ease-out; } @keyframes gpMtDraw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } } .gp-mt:nth-child(4n+2) { transition-delay: .05s; } .gp-mt:nth-child(4n+3) { transition-delay: .1s; } .gp-mt:nth-child(4n+4) { transition-delay: .15s; } @media (max-width: 949px) { .gp-learn-cards { grid-template-columns: 1fr; } .gp-mt-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 575px) { .gp-mt-grid { grid-template-columns: 1fr; } .gp-mt { min-height: 140px; } } /* ---------- Latest blog posts ---------- */ .gp-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; } .gp-blog-card { display: flex; flex-direction: column; border-radius: 22px; background: #fff; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 24px 50px -38px rgba(12,58,65,.5), 0 0 0 1px rgba(15,23,42,.07); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; } .gp-blog-card.is-visible:hover { transform: translateY(-5px); box-shadow: 0 36px 60px -36px rgba(12,58,65,.55), 0 0 0 1px rgba(15,23,42,.09); } .gp-blog-card:nth-child(2) { transition-delay: .07s; } .gp-blog-card:nth-child(3) { transition-delay: .14s; } .gp-blog-img { aspect-ratio: 16 / 9; overflow: hidden; background: #eef3f5; } .gp-blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .gp-blog-card:hover .gp-blog-img img { transform: scale(1.04); } .gp-blog-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; } .gp-blog-meta { display: flex; gap: 14px; font-size: 12.5px; color: #6b7280; } .gp-blog-meta span:first-child { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: #15803d; } .gp-blog-body h3 { flex: 1; margin: 10px 0 18px; font-size: 19px; line-height: 1.4; font-weight: 600; color: #111827; } @media (max-width: 949px) { .gp-blog-grid { grid-template-columns: 1fr; } } /* ---------- The engine: a calm, precise infrastructure schematic ---------- */ .gp-engine-section { background: linear-gradient(180deg, #fff 0%, #f4f7f9 45%, #fff 100%); } .gp-eng { position: relative; padding: 30px 30px 0; border-radius: 26px; background: #fbfcfd; overflow: hidden; isolation: isolate; box-shadow: 0 60px 120px -70px rgba(12,58,65,.45), 0 0 0 1px rgba(15,23,42,.08); } .gp-eng::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(#000, rgba(0,0,0,.4)); mask-image: linear-gradient(#000, rgba(0,0,0,.4)); } .gp-eng-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; } .gp-eng-wires .w { fill: none; stroke: #d3dae2; stroke-width: 1.2; } .gp-eng-wires .w.on { stroke: #0e7490; stroke-opacity: .55; transition: stroke .3s ease; } .gp-eng-wires .pk { fill: #0e7490; } .gp-eng-wires .pk-ring { fill: none; stroke: #0e7490; stroke-opacity: .25; stroke-width: 4; } .gp-eng-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(190px, .8fr) minmax(400px, 1.45fr) minmax(270px, 1fr); gap: 48px; align-items: center; } .gp-eng-col { min-width: 0; } .gp-eng-label { margin-bottom: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #64748b; } .gp-eng-src { position: relative; display: flex; align-items: center; gap: 11px; margin-bottom: 10px; padding: 11px 13px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 0 0 1px rgba(15,23,42,.08); transition: box-shadow .3s ease; } .gp-eng-src b { font-size: 14px; font-weight: 600; color: #0f172a; } .gp-eng-src small { margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: #94a3b8; } .gp-eng-src.emit { box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 0 0 1px rgba(14,116,144,.55); } .gp-eng-ico { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; padding: 3px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.08); } .gp-eng-ico svg { width: 100%; height: 100%; } /* The core: a machined dial with a stage ring, a turbine rotor and a live readout in the hub */ .gp-eng-center { display: flex; flex-direction: column; align-items: center; gap: 34px; } .gp-eng-node { position: relative; display: flex; width: max-content; max-width: 100%; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 0 0 1px rgba(15,23,42,.08); transition: box-shadow .4s ease; } .gp-eng-node b { display: block; font-size: 14px; font-weight: 600; color: #0f172a; line-height: 1.2; } .gp-eng-node small { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: #94a3b8; } .gp-eng-fx { align-self: flex-start; margin-left: 4%; } .gp-eng-crm { align-self: flex-end; margin-right: 4%; } .gp-eng-db { color: #b45309; background: #fff7ed; box-shadow: 0 0 0 1px rgba(180,83,9,.18); padding: 4px; } .gp-eng-rate { margin-left: 8px; padding: 5px 9px; border-radius: 8px; background: #f8fafc; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: #64748b; white-space: nowrap; transition: opacity .25s ease; } .gp-eng-rate b { display: inline; font-size: 11.5px; color: #0f172a; } .gp-eng-rate.fade { opacity: 0; } .gp-eng-fx.hit { box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 0 0 1px rgba(217,119,6,.55); } .gp-eng-crm.hit { box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 0 0 1px rgba(255,122,89,.65); } .gp-eng-sync { display: flex; flex-direction: column; gap: 2px; margin-left: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: #94a3b8; } .gp-eng-sync i { display: flex; align-items: center; gap: 5px; font-style: normal; white-space: nowrap; transition: color .3s ease; } .gp-eng-sync svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .gp-eng-sync i.on { color: #e8623f; } .gp-eng-core { position: relative; width: min(400px, 100%); aspect-ratio: 1; container-type: inline-size; } .gp-eng-core-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .gp-eng-core-svg .housing { fill: url(#gpEngHousing); stroke: rgba(15,23,42,.1); } .gp-eng-core-svg .tick { stroke: #cbd5e1; stroke-width: 1; } .gp-eng-core-svg .tick.major { stroke: #94a3b8; } .gp-eng-core-svg .seg { fill: none; stroke: #edf1f5; stroke-width: 28; transition: stroke .55s ease; } .gp-eng-core-svg .seg.bottom { stroke: #f3f5f8; } .gp-eng-core-svg .seg.on { stroke: #0e7490; transition: stroke .12s ease; } .gp-eng-core-svg .seg.bottom.on { stroke: #5b9fae; } .gp-eng-core-svg .seg.crm.on { stroke: #f2896c; } .gp-eng-core-svg .seg.fx { stroke: #e9a23b; transition: stroke .12s ease; } .gp-eng-core-svg .lbl { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 600; letter-spacing: .12em; fill: #64748b; transition: fill .55s ease; } .gp-eng-core-svg .lbl.bottom { fill: #94a3b8; font-weight: 500; } .gp-eng-core-svg .lbl.on { fill: #fff; transition: fill .12s ease; } .gp-eng-core-svg .rail { fill: none; stroke: rgba(15,23,42,.08); } .gp-eng-core-svg .blade { fill: #dfe6ec; } .gp-eng-core-svg .spark { fill: #fff; stroke: #0e7490; stroke-width: 2; } .gp-eng-core-svg .spark-tail { fill: none; stroke: #0e7490; stroke-opacity: .75; stroke-width: 2.5; stroke-linecap: round; } .gp-eng-hub { position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px; border-radius: 50%; background: #fff; text-align: center; box-shadow: 0 18px 36px -18px rgba(12,58,65,.45), 0 0 0 1px rgba(15,23,42,.07), inset 0 -8px 18px -12px rgba(15,23,42,.12); } .gp-eng-hub > * { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity .25s ease; } .gp-eng-hub small { font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; font-size: max(8px, 2.4cqw); letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; } .gp-eng-hub b { font-size: 16px; font-size: 4cqw; font-weight: 600; color: #0f172a; letter-spacing: -.01em; } .gp-eng-hub em { font-style: normal; font-size: 12px; font-size: 3cqw; font-weight: 600; color: #64748b; } .gp-eng-hub em.up { color: #15803d; } .gp-eng-hub em.down { color: #b91c1c; } .gp-eng-hub span { margin-top: 3px; padding: 3px 8px; border-radius: 6px; background: #f1f7f8; font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-size: max(8px, 2.5cqw); color: #0e7490; } .gp-eng-hub .fade { opacity: 0; } .gp-eng-wires .w.fx { stroke: #ecd3ad; } .gp-eng-wires .w.fx.on { stroke: #d97706; stroke-opacity: .6; } .gp-eng-wires .w.crm { stroke: #f5d4c9; } .gp-eng-wires .w.crm.on { stroke: #ff7a59; stroke-opacity: .7; } .gp-eng-wires .pk.fx { fill: #d97706; } .gp-eng-wires .pk-ring.fx { stroke: #d97706; } .gp-eng-wires .pk.crm { fill: #ff7a59; } .gp-eng-wires .pk-ring.crm { stroke: #ff7a59; } .gp-eng-out { margin-bottom: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 0 0 1px rgba(15,23,42,.08); transition: box-shadow .4s ease; } .gp-eng-out.hit { box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 0 0 1px rgba(14,116,144,.5); } .gp-eng-out-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: #64748b; } .gp-eng-out-h em { font-style: normal; text-transform: none; letter-spacing: 0; color: #15803d; } .gp-eng-out-h em.down { color: #b91c1c; } .gp-eng-inline { display: inline-flex; align-items: center; gap: 6px; } .gp-eng-inline svg { width: 12px; height: 12px; } .gp-eng-mrr { display: flex; align-items: baseline; gap: 8px; } .gp-eng-mrr b { font-size: 26px; font-weight: 600; color: #0f172a; letter-spacing: -.01em; } .gp-eng-mrr small { font-size: 12px; color: #64748b; } .gp-eng-spark { display: block; width: 100%; height: 40px; margin-top: 6px; overflow: visible; } .gp-eng-spark-line { fill: none; stroke: #0e7490; stroke-width: 1.6; vector-effect: non-scaling-stroke; } .gp-eng-spark-area { fill: rgba(14,116,144,.08); } .gp-eng-text { font-size: 13px; line-height: 1.45; color: #1f2937; transition: opacity .35s ease; } .gp-eng-text.fade { opacity: 0; } .gp-eng-ai { margin-bottom: 3px; font-size: 12px; color: #64748b; font-style: italic; } .gp-eng-api { font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.75; color: #334155; } .gp-eng-api div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .gp-eng-api b { color: #0e7490; font-weight: 600; } .gp-eng-api em { font-style: normal; color: #15803d; } .gp-eng-status { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 22px -30px 0; padding: 14px 30px; border-top: 1px solid rgba(15,23,42,.08); background: #fff; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: #64748b; } .gp-eng-status b { font-weight: 600; color: #0f172a; } .gp-eng-ok { color: #15803d; } .gp-eng-ok i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); } .gp-eng-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; } .gp-eng-facts > div { padding: 4px 6px; } .gp-eng-fact-ico { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; margin-bottom: 14px; border-radius: 11px; color: #0e7490; background: #e6f3f5; } .gp-eng-fact-ico svg { width: 20px; height: 20px; } .gp-eng-facts b { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 600; color: #0f172a; } .gp-eng-facts p { margin: 0; font-size: 15px; line-height: 1.6; color: #4b5563; } @media (max-width: 1100px) { .gp-eng-grid { gap: 28px; } } @media (max-width: 949px) { .gp-eng { padding: 20px 16px 0; } .gp-eng-status { margin: 18px -16px 0; padding: 12px 16px; } .gp-eng-grid { grid-template-columns: 1fr; gap: 26px; } .gp-eng-center { gap: 28px; } .gp-eng-fx, .gp-eng-crm { align-self: center; margin: 0; } .gp-eng-sources { display: flex; flex-wrap: wrap; gap: 8px; } .gp-eng-sources .gp-eng-label { width: 100%; margin-bottom: 4px; } .gp-eng-src { margin: 0; padding: 8px 10px; } .gp-eng-src small { display: none; } .gp-eng-facts { grid-template-columns: 1fr 1fr; } } @media (max-width: 575px) { .gp-eng-facts { grid-template-columns: 1fr; } } /* ---------- AI chat ---------- */ .gp-chat { max-width: 580px; margin: 0 auto; border-radius: 22px; background: #fff; border: 1px solid #e5eaef; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(12, 58, 65, .35), 0 20px 40px -24px rgba(0,0,0,.18); } .gp-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #eef2f5; } .gp-chat-head b { display: block; font-size: 15px; color: #1f2937; } .gp-chat-head span { font-size: 12.5px; color: #64748b; } .gp-chat-avatar svg { width: 18px; height: 18px; } .gp-chat-avatar { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #16747f, #50aa75); box-shadow: 0 8px 18px -8px rgba(22,116,127,.8); } .gp-chat-body { padding: 18px; min-height: 360px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(#fbfdfd, #f6f9fa); } .gp-bubble { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; } .gp-bubble-user { align-self: flex-end; color: #fff; background: linear-gradient(135deg, #16747f, #128677); border-bottom-right-radius: 5px; opacity: 0; transform: translateY(10px) scale(.98); transform-origin: 100% 100%; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); } .gp-chat.asked .gp-bubble-user { opacity: 1; transform: none; } .gp-chat-field { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; } .gp-chat-field [data-chat-input] { color: #111827; } .gp-caret { display: none; width: 1.5px; height: 1.1em; margin: 0 1px; background: #0e7490; animation: gpBlink 1s steps(1) infinite; } .gp-chat.typing .gp-caret { display: inline-block; } .gp-chat.typing .gp-chat-ph, .gp-chat.filled .gp-chat-ph { display: none; } .gp-chat-input b { transition: transform .15s ease, background .2s ease; } .gp-chat-input b.press { transform: scale(.86); background: #0b5c70; } .gp-chat.filled .gp-chat-input { box-shadow: 0 0 0 3px rgba(14,116,144,.12); border-color: #9fcfd6; } .gp-chat-input { transition: box-shadow .25s ease, border-color .25s ease; } .gp-chat-thinking { display: none; align-items: center; gap: 5px; font-size: 12.5px; color: #64748b; } .gp-chat-thinking.on { display: flex; } .gp-chat-thinking i { width: 6px; height: 6px; border-radius: 50%; background: #14b8a6; animation: gpDots 1s ease-in-out infinite; } .gp-chat-thinking i:nth-child(2) { animation-delay: .15s; } .gp-chat-thinking i:nth-child(3) { animation-delay: .3s; } .gp-chat-thinking span { margin-left: 6px; } @keyframes gpDots { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } } .gp-bubble-ai { align-self: flex-start; background: #fff; border: 1px solid #e5eaef; color: #1f2937; border-bottom-left-radius: 5px; box-shadow: 0 8px 20px -14px rgba(0,0,0,.25); opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s ease; } .gp-chat.answered .gp-bubble-ai { opacity: 1; transform: none; } .gp-bubble-ai p { margin: 0 0 12px; min-height: 66px; } .gp-chat-chart { display: flex; align-items: flex-end; gap: 14px; height: 110px; padding: 8px 4px 0; border-top: 1px dashed #e5eaef; } .gp-chat-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; } .gp-chat-bar b { font-size: 11.5px; color: #0f766e; } .gp-chat-bar i { display: block; flex: none; width: 100%; max-width: 70px; height: 0; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #2dd4bf, #16747f); transition: height .9s cubic-bezier(.2,.8,.2,1); } .gp-chat-bar:last-child i { background: linear-gradient(180deg, #5eead4, #128677); box-shadow: 0 8px 20px -8px rgba(18,134,119,.8); } .gp-chat-bar span { font-size: 11.5px; color: #64748b; } .gp-chat-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .gp-chat-actions span { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid #cfe3e6; color: #155e63; background: #f0f9fa; } .gp-chat-input { display: flex; align-items: center; justify-content: space-between; margin: 0 14px 14px; padding: 10px 10px 10px 16px; border-radius: 14px; border: 1px solid #e5eaef; background: #fff; font-size: 14px; color: #94a3b8; } .gp-chat-input b { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; background: #16747f; } .gp-chat-stage { position: relative; max-width: 600px; margin: 0 auto; padding-bottom: 74px; } .gp-chat-stage .gp-chat { transform-origin: 100% 100%; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); } .gp-chat-stage:not(.open) .gp-chat { opacity: 0; transform: translateY(18px) scale(.95); } .gp-chat-stage .gp-chat-launcher { right: 4px; bottom: 6px; left: auto; top: auto; width: 54px; height: 54px; } .gp-chat-stage .gp-chat-launcher svg { width: 29px; height: 29px; } .gp-chat-launcher.pressed { transform: scale(.9); box-shadow: 0 2px 8px rgba(0,120,212,.35); } .gp-chat-stage .gp-cursor { position: absolute; left: 0; top: 0; z-index: 10; width: 20px; height: 24px; opacity: 0; transition: opacity .3s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); pointer-events: none; } .gp-chat-stage .gp-cursor.on { opacity: 1; } .gp-chat-stage .gp-click { position: absolute; left: 0; top: 0; z-index: 9; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgba(0,120,212,.55); opacity: 0; pointer-events: none; } .gp-chat-stage .gp-click.on { animation: gpClick .55s ease-out; } @keyframes gpClick { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.3); } } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } .gp-aurora, .gp-ring, .gp-radar-sweep, .gp-phone, .gp-live b, .gp-int-card.gp-int-live::before { animation: none !important; } .gp-hero-stage { animation: none; opacity: 1; } .gp-chat .gp-bubble-ai { opacity: 1; transform: none; } } /* ---------- Site-wide page patterns (product, solutions, comparison, integration pages) ---------- */ /* Page hero: a soft aurora and dot grid instead of the flat wave. */ section.wave-top { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 4rem; background-image: radial-gradient(55% 90% at 12% -10%, rgba(22,116,127,.17), transparent 62%), radial-gradient(45% 80% at 92% 0%, rgba(8,145,178,.13), transparent 60%), radial-gradient(35% 60% at 55% 20%, rgba(236,72,153,.05), transparent 60%); } section.wave-top::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(22,116,127,.18) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000, transparent 80%); mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000, transparent 80%); } section.wave-top h1 { letter-spacing: -.02em; } .gp-page-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #15803d; } .gp-page-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; } .gp-page-ctas a { font-size: 1.125rem; } /* Screenshots in two-column sections: framed, soft shadow. Docs pages don't use this layout. */ section .md\:w-1\/2 picture img.rounded-lg, section .md\:w-5\/12 picture img.rounded-lg, section .md\:w-7\/12 picture img.rounded-lg { border-radius: 16px; box-shadow: 0 50px 90px -50px rgba(12,58,65,.45), 0 20px 40px -30px rgba(0,0,0,.2), 0 0 0 1px rgba(15,23,42,.07); } /* Testimonial box used on product and solution pages */ .reveal-up .bg-white.shadow-lg.rounded-lg { position: relative; overflow: hidden; border-radius: 24px !important; box-shadow: 0 50px 90px -55px rgba(12,58,65,.55), 0 0 0 1px rgba(15,23,42,.06) !important; } .reveal-up .bg-white.shadow-lg.rounded-lg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #527d9b, #50aa9b, #50aa75); } .reveal-up .bg-white.shadow-lg.rounded-lg::after { content: "\201C"; position: absolute; right: 34px; top: 4px; font-size: 140px; line-height: 1; font-family: Georgia, serif; color: rgba(22,116,127,.1); pointer-events: none; } .reveal-up .bg-white.shadow-lg.rounded-lg img.rounded-full { box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(22,116,127,.25); } /* Grey band sections get a subtle gradient rather than a flat fill. */ section[style*="#f4f5f9"] { background: linear-gradient(180deg, #f3f6f8, #f6f8fa) !important; } /* ---------- Pricing ---------- */ .gp-arr { display: grid; grid-template-columns: 150px 1fr 300px auto; align-items: center; gap: 30px; margin: 30px 0 0; padding: 18px 26px; border-radius: 20px; background: rgba(255,255,255,.92); font-size: 15px; box-shadow: 0 30px 60px -45px rgba(12,58,65,.5), 0 0 0 1px rgba(15,23,42,.07); backdrop-filter: blur(8px); } .gp-arr-val label { display: block; font-size: 13px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; } .gp-arr-val b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: #0e7490; line-height: 1.15; } .gp-arr-slider { padding-top: 6px; } #gpArrRange { --track: #e5e7eb; --hi: 0%; width: 100%; height: 6px; margin: 6px 0; -webkit-appearance: none; appearance: none; border-radius: 6px; outline: none; cursor: pointer; background: linear-gradient(to right, #0e7490 0 var(--hi), var(--track) var(--hi) 100%); border: none !important; box-shadow: none !important; } #gpArrRange::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #0e7490; box-shadow: 0 0 0 4px #fff, 0 2px 8px rgba(0,0,0,.28); transition: box-shadow .2s ease, transform .2s ease; } #gpArrRange::-moz-range-thumb { width: 22px; height: 22px; border: none; border-radius: 50%; background: #0e7490; box-shadow: 0 0 0 4px #fff, 0 2px 8px rgba(0,0,0,.28); } #gpArrRange:hover::-webkit-slider-thumb, #gpArrRange:active::-webkit-slider-thumb { transform: scale(1.1); box-shadow: 0 0 0 4px #fff, 0 0 0 10px rgba(14,116,144,.18), 0 2px 8px rgba(0,0,0,.28); } .gp-arr-ticks { position: relative; height: 18px; margin-top: 8px; font-size: 12.5px; color: #9ca3af; } .gp-arr-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; } .gp-arr-result { font-size: 15.5px; line-height: 1.45; color: #374151; } .gp-arr-result b { color: #111827; } .gp-arr-result em { font-style: normal; font-weight: 700; color: #0e7490; } .gp-arr-toggle { display: flex; align-items: center; gap: 12px; padding-left: 26px; border-left: 1px solid rgba(15,23,42,.08); font-size: 15px; color: #374151; white-space: nowrap; } .gp-plan { position: relative; border-radius: 24px !important; border-color: rgba(15,23,42,.08) !important; box-shadow: 0 30px 60px -45px rgba(12,58,65,.5), 0 0 0 1px rgba(15,23,42,.03) !important; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; overflow: hidden; } .gp-plan:hover { transform: translateY(-4px); } .gp-plan.gp-match { border-color: rgba(14,116,144,.55) !important; transform: translateY(-8px); box-shadow: 0 40px 70px -40px rgba(14,116,144,.55), 0 0 0 2px rgba(14,116,144,.35) !important; } .gp-plan.gp-match::before { content: "Your plan"; position: absolute; top: 14px; right: 14px; padding: 3px 10px; border-radius: 999px; background: #0e7490; color: #fff; font-size: 12px; font-weight: 600; } .gp-plan [class^="price-"] { font-weight: 700; letter-spacing: -.03em; transition: color .3s ease; } .gp-plan ul li { font-size: 15.5px; } @media (max-width: 1100px) { .gp-arr { grid-template-columns: 130px 1fr; } .gp-arr-result { grid-column: 1 / 2; } .gp-arr-toggle { grid-column: 2 / 3; justify-self: end; border-left: none; padding-left: 0; } } @media (max-width: 575px) { .gp-arr { grid-template-columns: 1fr; gap: 14px; padding: 16px 18px; } .gp-arr-result, .gp-arr-toggle { grid-column: auto; justify-self: start; } } /* Enterprise */ .gp-ent { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 56px 60px; border-radius: 28px; color: #e6fffb; overflow: hidden; isolation: isolate; background: radial-gradient(90% 120% at 100% 0%, rgba(60,179,162,.45), transparent 60%), radial-gradient(60% 90% at 0% 100%, rgba(11,63,107,.6), transparent 60%), linear-gradient(145deg, #062a30, #0c4f57); box-shadow: 0 60px 100px -60px rgba(6,42,48,.8); } .gp-ent::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.3px); background-size: 20px 20px; } .gp-ent-eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5eead4; } .gp-ent h2 { margin: 0 0 14px; font-size: 38px; font-weight: 700; color: #fff; letter-spacing: -.01em; } .gp-ent-text p { margin: 0 0 26px; font-size: 18px; line-height: 1.6; color: rgba(230,255,251,.85); } .gp-ent-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; background: #fff; color: #0c4f57; font-weight: 600; font-size: 17px; transition: transform .2s ease, box-shadow .2s ease; } .gp-ent-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(0,0,0,.5); } .gp-ent-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .gp-ent-list li { padding: 18px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); } .gp-ent-list span { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; margin-bottom: 12px; border-radius: 10px; background: rgba(94,234,212,.15); color: #5eead4; } .gp-ent-list svg { width: 20px; height: 20px; } .gp-ent-list b { display: block; font-size: 16px; color: #fff; } .gp-ent-list small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: rgba(230,255,251,.7); } @media (max-width: 949px) { .gp-ent { grid-template-columns: 1fr; padding: 36px 26px; } .gp-ent h2 { font-size: 30px; } } @media (max-width: 575px) { .gp-ent-list { grid-template-columns: 1fr; } } /* FAQ accordion */ .gp-faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; max-width: 1280px; margin: 0 auto; } .gp-faq-head h2 { margin: 0 0 14px; } .gp-faq-head p { font-size: 17px; line-height: 1.6; color: #4b5563; } .gp-faq-head a { color: #0e7490; font-weight: 600; } .gp-faq-item { border-radius: 16px; background: #fff; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 0 0 1px rgba(15,23,42,.08); transition: box-shadow .3s ease; } .gp-faq-item[open] { box-shadow: 0 24px 40px -30px rgba(12,58,65,.45), 0 0 0 1px rgba(14,116,144,.3); } .gp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; color: #111827; } .gp-faq-item summary::-webkit-details-marker { display: none; } .gp-faq-item summary i { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #eef6f7; transition: background .3s ease, transform .3s ease; } .gp-faq-item summary i::before, .gp-faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #0e7490; transition: transform .3s ease; } .gp-faq-item summary i::after { transform: rotate(90deg); } .gp-faq-item[open] summary i { background: #0e7490; transform: rotate(180deg); } .gp-faq-item[open] summary i::before, .gp-faq-item[open] summary i::after { background: #fff; } .gp-faq-item[open] summary i::after { transform: rotate(0deg); } .gp-faq-a { padding: 0 22px 20px; } .gp-faq-a p { margin: 0; font-size: 16.5px; line-height: 1.65; color: #4b5563; } .gp-faq-a a { color: #0e7490; } .gp-faq-item[open] .gp-faq-a { animation: gpFaqIn .35s ease; } @keyframes gpFaqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (max-width: 949px) { .gp-faq { grid-template-columns: 1fr; gap: 26px; } } /* ---------- Integration pages: connection strip (the tool's logo, data pulses, GrowPanel) ---------- */ .gp-connect { display: flex; align-items: center; justify-content: center; gap: 0; margin: 0 auto 28px; } .gp-connect-node { width: 72px; height: 72px; flex: none; display: flex; align-items: center; justify-content: center; padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 24px 40px -24px rgba(12,58,65,.45), 0 0 0 1px rgba(15,23,42,.07); } .gp-connect-node svg, .gp-connect-node img { width: 100%; height: 100%; } .gp-connect-fill { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 8px; border-radius: 12px; } .gp-connect-gp img { width: 40px; height: 40px; } .gp-connect-line { position: relative; width: 150px; height: 2px; margin: 0 6px; background-image: linear-gradient(90deg, rgba(14,116,144,.35) 50%, transparent 50%); background-size: 8px 2px; } .gp-connect-line i { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #0e7490; box-shadow: 0 0 0 4px rgba(14,116,144,.14); animation: gpConnect 2.4s cubic-bezier(.45,0,.55,1) infinite; opacity: 0; } .gp-connect-line i:nth-child(2) { animation-delay: .8s; } .gp-connect-line i:nth-child(3) { animation-delay: 1.6s; } .gp-connect-out .gp-connect-line i { background: #15803d; box-shadow: 0 0 0 4px rgba(21,128,61,.14); } @keyframes gpConnect { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } } @media (max-width: 575px) { .gp-connect-line { width: 90px; } .gp-connect-node { width: 58px; height: 58px; padding: 11px; border-radius: 16px; } } @media (prefers-reduced-motion: reduce) { .gp-connect-line i { animation: none; opacity: 1; left: 50%; } .gp-connect-line i + i { display: none; } } /* ---------- Comparison tables ---------- */ table.gp-cmp { border-collapse: separate; border-spacing: 0; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -60px rgba(12,58,65,.5), 0 0 0 1px rgba(15,23,42,.08); } table.gp-cmp thead th { padding-top: 18px; padding-bottom: 18px; font-size: 15px; font-weight: 700; color: #111827; background: #f7f9fb; border-bottom: 1px solid rgba(15,23,42,.08); } table.gp-cmp thead th:last-child { color: #0e7490; background: linear-gradient(180deg, #eef8f9, #f5fbfb); } table.gp-cmp tbody tr { transition: background .2s ease; } table.gp-cmp tbody tr:hover { background: #f8fbfc !important; } table.gp-cmp tbody tr > :last-child { background: rgba(14,116,144,.035); } table.gp-cmp tbody tr:last-child { border-bottom: none; } /* ---------- Outcome cards with mini illustrations (solutions pages) ---------- */ .gp-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; } .gp-outcome { display: flex; flex-direction: column; border-radius: 24px; background: #fff; overflow: hidden; box-shadow: 0 30px 60px -45px rgba(12,58,65,.5), 0 0 0 1px rgba(15,23,42,.07); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; } .gp-outcome.is-visible:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -40px rgba(12,58,65,.55), 0 0 0 1px rgba(15,23,42,.09); } .gp-outcome:nth-child(2) { transition-delay: .08s; } .gp-outcome:nth-child(3) { transition-delay: .16s; } .gp-outcome-body { padding: 24px 26px 28px; } .gp-outcome-body h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: #111827; } .gp-outcome-body p { margin: 0; font-size: 16px; line-height: 1.6; color: #4b5563; } .gp-mini-vis { position: relative; height: 212px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(120% 90% at 85% 0%, var(--g3, #3cb3a2), transparent 60%), linear-gradient(145deg, var(--g1, #0c4f57), var(--g2, #16747f)); } .gp-mini-vis::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.3px); background-size: 16px 16px; pointer-events: none; } .gp-outcome:nth-child(2) .gp-mini-vis { --g1: #14532d; --g2: #1f7a4d; --g3: #5cc28a; } .gp-outcome:nth-child(3) .gp-mini-vis { --g1: #2d2466; --g2: #4c3aa6; --g3: #8a73e0; } /* alerts: a feed that scrolls up one row at a time */ .gp-mv-alerts .gp-mv-feed { position: relative; z-index: 1; width: 78%; height: 138px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); } .gp-mv-feed > div { display: flex; align-items: center; gap: 9px; height: 40px; margin-bottom: 6px; padding: 0 12px; border-radius: 10px; background: #fff; font-size: 12.5px; color: #1f2937; box-shadow: 0 8px 18px -10px rgba(0,0,0,.4); animation: gpFeed 12s cubic-bezier(.6,0,.2,1) infinite; } .gp-mv-feed i { width: 8px; height: 8px; border-radius: 50%; flex: none; } .gp-mv-feed span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gp-mv-feed b { font-weight: 600; margin-right: 4px; } .gp-mv-feed em, .gp-mv-row em { font-style: normal; font-weight: 600; } .gp-mini-vis .up { color: #15803d; } .gp-mini-vis .down { color: #b91c1c; } @keyframes gpFeed { 0%, 16% { transform: translateY(0); } 20%, 36% { transform: translateY(-46px); } 40%, 56% { transform: translateY(-92px); } 60%, 76% { transform: translateY(-138px); } 80%, 96% { transform: translateY(-184px); } 100% { transform: translateY(-230px); } } /* forecast: the scenario draws in over a dashed baseline */ .gp-mv-forecast svg { position: relative; z-index: 1; width: 84%; height: 150px; overflow: visible; } .gp-mv-forecast .hist { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; } .gp-mv-forecast .today { stroke: rgba(255,255,255,.4); stroke-dasharray: 3 4; } .gp-mv-forecast .base { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.6; stroke-dasharray: 5 5; } .gp-mv-forecast .area { fill: rgba(255,255,255,.14); animation: gpMvFade 5s ease-in-out infinite; } .gp-mv-forecast .scen { fill: none; stroke: #86efac; stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 260; animation: gpMvDraw 5s ease-in-out infinite; } .gp-mv-forecast .dot { fill: #dcfce7; animation: gpMvFade 5s ease-in-out infinite; } @keyframes gpMvDraw { 0% { stroke-dashoffset: 260; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes gpMvFade { 0%, 30% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } } .gp-mv-tag, .gp-mv-flag { position: absolute; z-index: 2; left: 16px; top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.95); font-size: 12.5px; color: #1f2937; box-shadow: 0 10px 20px -12px rgba(0,0,0,.5); } .gp-mv-tag b { color: #15803d; } /* report: a document with an AI summary line that writes itself */ .gp-mv-doc { position: relative; z-index: 1; width: 76%; padding: 14px 16px; border-radius: 12px; background: #fff; font-size: 12px; color: #1f2937; box-shadow: 0 20px 40px -18px rgba(0,0,0,.5); animation: gpMvFloat 6s ease-in-out infinite; } .gp-mv-doc-h { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } .gp-mv-doc-h img { width: 16px; height: 16px; } .gp-mv-doc-h small { margin-left: auto; color: #9ca3af; font-size: 10.5px; } .gp-mv-ai { margin: 0 0 8px; padding: 7px 9px; border-radius: 8px; background: #f5f3ff; color: #4c1d95; font-size: 11.5px; line-height: 1.4; } .gp-mv-ai span { display: inline-block; clip-path: inset(0 100% 0 0); animation: gpMvType 6s steps(40, end) infinite; } @keyframes gpMvType { 0%, 8% { clip-path: inset(0 100% 0 0); } 50%, 100% { clip-path: inset(0 0 0 0); } } .gp-mv-row { display: flex; gap: 8px; padding: 4px 0; border-top: 1px solid #f1f3f5; } .gp-mv-row span { flex: 1; color: #6b7280; } @keyframes gpMvFloat { 50% { transform: translateY(-5px); } } /* risk: a metric with a flagged dip */ .gp-mv-risk svg { position: relative; z-index: 1; width: 84%; height: 150px; overflow: visible; } .gp-mv-risk .ln { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } .gp-mv-risk .pt { fill: #fca5a5; } .gp-mv-risk .ring { fill: none; stroke: #fca5a5; stroke-width: 2; transform-origin: 205px 100px; animation: gpMvPing 2s ease-out infinite; } @keyframes gpMvPing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } } .gp-mv-flag { left: auto; right: 16px; top: auto; bottom: 16px; } .gp-mv-flag i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #dc2626; } @media (max-width: 949px) { .gp-outcomes { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .gp-mv-feed > div, .gp-mv-forecast .scen, .gp-mv-forecast .area, .gp-mv-forecast .dot, .gp-mv-ai span, .gp-mv-doc, .gp-mv-risk .ring { animation: none !important; clip-path: none; stroke-dashoffset: 0; opacity: 1; } } /* ---------- Developers solutions page ---------- */ .gp-dev-hl { background: linear-gradient(90deg, #16747f, #15803d); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .gp-dev-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; } .gp-dev-chips span { padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.85); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #0f172a; box-shadow: 0 0 0 1px rgba(15,23,42,.1); } .gp-dev-win { position: relative; border-radius: 16px; overflow: hidden; background: #0f172a; color: #cbd5e1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; box-shadow: 0 60px 100px -50px rgba(12,58,65,.55), 0 30px 60px -30px rgba(0,0,0,.35), 0 0 0 1px rgba(15,23,42,.2); } .gp-dev-bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; background: #111a2e; border-bottom: 1px solid #1e293b; } .gp-dev-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #334155; } .gp-dev-bar > i:nth-child(1) { background: #f87171; } .gp-dev-bar > i:nth-child(2) { background: #fbbf24; } .gp-dev-bar > i:nth-child(3) { background: #4ade80; } .gp-dev-bar b { margin-left: 10px; font-weight: 500; color: #64748b; font-size: 12px; } .gp-dev-tabs { display: flex; gap: 4px; margin-left: 16px; } .gp-dev-tabs button { padding: 5px 11px; border-radius: 7px; background: none; border: none; color: #64748b; font: inherit; font-size: 12.5px; cursor: pointer; transition: background .2s ease, color .2s ease; } .gp-dev-tabs button.on { background: #1e293b; color: #e2e8f0; } .gp-dev-src { margin: 0; min-height: 132px; padding: 20px 22px; white-space: pre; overflow-x: auto; line-height: 1.7; animation: gpDevIn .45s ease; } @keyframes gpDevIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .gp-dev-resp { border-top: 1px solid #1e293b; background: #0b1222; } .gp-dev-resp-h { display: flex; gap: 14px; align-items: center; padding: 10px 22px; font-size: 12px; color: #64748b; border-bottom: 1px solid #1e293b; } .gp-dev-200 { padding: 2px 8px; border-radius: 6px; background: rgba(74,222,128,.12); color: #4ade80; font-weight: 600; } .gp-dev-ms { margin-left: auto; } .gp-dev-resp pre { margin: 0; padding: 16px 22px 20px; line-height: 1.7; } .gp-dev-win .k { color: #c084fc; } .gp-dev-win .s { color: #86efac; } .gp-dev-win .f { color: #7dd3fc; } .gp-dev-win .p { color: #93c5fd; } .gp-dev-win .n { color: #fcd34d; } .gp-dev-win .c { color: #64748b; } .gp-dev-resp.flash { animation: gpDevFlash .6s ease; } @keyframes gpDevFlash { 0% { background: #12233a; } 100% { background: #0b1222; } } .gp-dev-term .gp-dev-screen { margin: 0; height: 380px; padding: 18px 22px; overflow: hidden; white-space: pre; line-height: 1.7; color: #cbd5e1; } .gp-dev-screen .pr { color: #4ade80; } .gp-dev-screen .cm { color: #f8fafc; } .gp-dev-screen .dim { color: #64748b; } .gp-dev-screen .ok { color: #4ade80; } .gp-dev-screen .hd { color: #93c5fd; } .gp-dev-screen .cur { display: inline-block; width: 8px; height: 16px; vertical-align: -3px; background: #4ade80; animation: gpBlink 1s steps(1) infinite; } .gp-dev-mcp { background: #fff; color: #1f2937; font-family: 'Public Sans', system-ui, sans-serif; font-size: 15px; } .gp-dev-mcp-bar { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid #eef0f3; } .gp-dev-claude { display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; background: #fdf1ec; color: #d97757; } .gp-dev-claude svg { width: 16px; height: 16px; } .gp-dev-mcp-bar em { margin-left: auto; font-style: normal; font-size: 12.5px; color: #15803d; } .gp-dev-mcp-bar em i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #22c55e; } .gp-dev-mcp-body { min-height: 400px; padding: 20px; background: #faf9f7; display: flex; flex-direction: column; gap: 12px; } .gp-dev-msg { max-width: 86%; padding: 12px 15px; border-radius: 14px; line-height: 1.55; } .gp-dev-u { align-self: flex-end; background: #efece6; } .gp-dev-a { background: #fff; box-shadow: 0 0 0 1px #eceae4; } .gp-dev-a p { margin: 0 0 12px; } .gp-dev-tool { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #0e7490; } .gp-dev-tool i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #0e7490; border-top-color: transparent; animation: gpSpin .8s linear infinite; } .gp-dev-tool.done i { border-color: #0e7490; animation: none; background: #0e7490; } .gp-dev-tool span { opacity: 0; color: #15803d; } .gp-dev-tool.done span { opacity: 1; } .gp-dev-tool code { font-size: 12.5px; background: none; color: #0e7490; } .gp-dev-mcp [data-step] { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1); } .gp-dev-mcp [data-step].on { opacity: 1; transform: none; } .gp-dev-bars div { display: grid; grid-template-columns: 64px 1fr 40px; align-items: center; gap: 10px; margin-top: 7px; font-size: 13px; color: #4b5563; } .gp-dev-bars i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #16747f, #5cc2a0); width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1); } .gp-dev-mcp .on .gp-dev-bars i, .gp-dev-a.on .gp-dev-bars i { width: var(--w); } .gp-dev-bars b { font-weight: 600; color: #111827; text-align: right; } .gp-dev-hooks { background: #fff; color: #1f2937; font-family: 'Public Sans', system-ui, sans-serif; font-size: 14px; } .gp-dev-hooks-h { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eef0f3; } .gp-dev-hooks-h span { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: #64748b; } .gp-dev-hooks-list { height: 220px; overflow: hidden; } .gp-dev-hook { display: grid; grid-template-columns: 60px 1fr auto 70px; align-items: center; gap: 12px; height: 44px; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #f1f3f5; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; } .gp-dev-hook.enter { animation: gpRowEnter .8s cubic-bezier(.25,.6,.3,1) backwards, gpRowGlow 2.4s ease-out; } .gp-dev-hook b { color: #0e7490; } .gp-dev-hook em { font-style: normal; padding: 2px 8px; border-radius: 6px; background: #ecfdf5; color: #15803d; font-weight: 600; } .gp-dev-hook small { color: #9ca3af; text-align: right; } .gp-dev-hooks-payload { background: #0f172a; color: #cbd5e1; font-family: ui-monospace, Menlo, monospace; font-size: 13px; } .gp-dev-hooks-payload pre { margin: 0; padding: 18px 22px; line-height: 1.7; } .gp-dev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; } .gp-dev-tile { display: block; padding: 22px 22px 24px; border-radius: 18px; background: #fff; text-decoration: none; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 0 0 1px rgba(15,23,42,.08); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; } .gp-dev-tile.is-visible:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(12,58,65,.5), 0 0 0 1px rgba(14,116,144,.35); } .gp-dev-tile b { display: block; margin-bottom: 6px; font-size: 17px; color: #0f172a; } .gp-dev-tile p { margin: 0; font-size: 15px; line-height: 1.55; color: #4b5563; } .gp-dev-tile code { font-size: 13px; color: #0e7490; } @media (max-width: 949px) { .gp-dev-grid { grid-template-columns: 1fr 1fr; } .gp-dev-tabs button { padding: 5px 7px; } } @media (max-width: 575px) { .gp-dev-grid { grid-template-columns: 1fr; } .gp-dev-win { font-size: 11.5px; } .gp-dev-term .gp-dev-screen { height: 330px; } } /* ---------- App scenes: portfolio, scheduled churn, breakdown, trials ---------- */ .gp-mock-wide .gp-app { grid-template-columns: 158px 1fr; } .gp-mock-wide .gp-cursor, .gp-mock-wide .gp-click { z-index: 20; } .gp-port-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .gp-port-card-h b { font-size: 13px; font-weight: 600; color: #111827; margin-right: auto; } /* Portfolio */ .gp-port { position: relative; } .gp-port-view { position: absolute; inset: 12px 16px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: scale(.985); pointer-events: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); } .gp-port-view.on { opacity: 1; transform: none; } .gp-port-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .gp-acct { padding: 10px 12px 9px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px rgba(15,23,42,.06); transition: box-shadow .25s ease, transform .25s ease; } .gp-acct.hover { box-shadow: 0 14px 28px -18px rgba(12,58,65,.5), 0 0 0 1.5px #2b87b8; transform: translateY(-2px); } .gp-acct.press { transform: scale(.985); } .gp-acct-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .gp-acct-h b { font-size: 12.5px; font-weight: 600; color: #111827; } .gp-acct-h span, .gp-acct-f span { padding: 2px 7px; border-radius: 999px; background: #f1f3f6; font-size: 9.5px; color: #6b7280; } .gp-acct svg { display: block; width: 100%; height: 78px; } .gp-acct-f { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; } .gp-acct-f b { font-size: 16px; font-weight: 500; color: #111827; } .gp-acct-f em, .gp-port-kpis em { font-style: normal; font-size: 11px; font-weight: 600; } .gp-acct-f em.up, .gp-port-kpis em.up { color: #15803d; } .gp-acct-f em.down, .gp-port-kpis em.down { color: #c0392b; } .gp-port-back { display: inline-flex; align-items: center; gap: 3px; padding: 5px 9px 5px 6px; border-radius: 7px; background: #fff; font-size: 11px; color: #1f6f9f; box-shadow: 0 0 0 1px #e2e5ea; } .gp-port-back svg { width: 12px; height: 12px; } .gp-port-kpis, .gp-risk-kpis, .gp-trial-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .gp-risk-kpis { grid-template-columns: repeat(3, 1fr); } .gp-port-chart { position: relative; } .gp-port-chart svg { display: block; } .gp-port-tip { position: absolute; left: 0; top: 0; padding: 6px 9px; border-radius: 7px; background: #fff; box-shadow: 0 8px 20px -8px rgba(0,0,0,.3), 0 0 0 1px rgba(15,23,42,.06); opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .3s ease; pointer-events: none; } .gp-port-tip.on { opacity: 1; transform: none; } .gp-port-tip small { display: block; font-size: 9.5px; color: #6b7280; } .gp-port-tip b { font-size: 13px; font-weight: 600; color: #111827; } .gp-port-mv table { width: 100%; border-collapse: collapse; font-size: 11px; color: #374151; } .gp-port-mv th { padding: 2px 8px 6px; text-align: right; font-weight: 600; color: #111827; } .gp-port-mv td { padding: 5px 8px; text-align: right; border-top: 1px solid #f1f3f5; white-space: nowrap; } .gp-port-mv td:first-child, .gp-port-mv th:first-child { text-align: left; } .gp-port-mv small { font-size: 9.5px; } .gp-port-mv small.up { color: #15803d; } .gp-port-mv small.down { color: #c0392b; } /* Scheduled churn */ .gp-risk-grid { display: grid; grid-template-columns: 1fr 250px; gap: 12px; min-height: 0; } .gp-risk-main, .gp-risk-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .gp-risk-chart svg { display: block; } .gp-risk-legend { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #6b7280; } .gp-risk-legend i { width: 8px; height: 8px; border-radius: 2px; margin-left: 6px; } .gp-risk-list { flex: 1; overflow: hidden; } .gp-risk-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid #f1f3f5; } .gp-risk-row.enter { animation: gpRowEnter .7s cubic-bezier(.25,.6,.3,1) backwards, gpRowGlow 2.4s ease-out; } .gp-risk-row b { display: block; font-size: 12px; font-weight: 600; color: #111827; } .gp-risk-row small { display: block; font-size: 10px; color: #6b7280; } .gp-risk-row i { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 999px; background: #f1f3f6; font-style: normal; font-size: 9px; color: #6b7280; } .gp-risk-row i.fail { background: #fff4e5; color: #b45309; } .gp-risk-row em { font-style: normal; font-size: 12px; font-weight: 600; color: #c0392b; white-space: nowrap; } .gp-risk-conc { display: flex; align-items: center; gap: 12px; } .gp-risk-conc svg { width: 58px; height: 58px; flex: none; } .gp-risk-conc small { display: block; font-size: 10px; color: #6b7280; } .gp-risk-conc b { display: block; font-size: 19px; font-weight: 600; color: #111827; } .gp-risk-conc span { font-size: 10px; color: #6b7280; } .gp-risk-toast { position: absolute; top: 50px; right: 18px; z-index: 15; display: flex; gap: 10px; width: 300px; padding: 11px 13px; border-radius: 11px; background: #fff; box-shadow: 0 20px 40px -18px rgba(0,0,0,.35), 0 0 0 1px rgba(15,23,42,.06); opacity: 0; transform: translateY(-8px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); } .gp-risk-toast.on { opacity: 1; transform: none; } .gp-risk-toast-ico { display: flex; width: 26px; height: 26px; flex: none; align-items: center; justify-content: center; border-radius: 7px; background: #f8f5fb; } .gp-risk-toast-ico svg { width: 15px; height: 15px; } .gp-risk-toast b { display: block; font-size: 11.5px; color: #111827; } .gp-risk-toast span { display: block; font-size: 11px; line-height: 1.4; color: #374151; } /* Breakdown */ .gp-brk-sel { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 7px; background: #fff; font-size: 11px; font-weight: 500; color: #111827; box-shadow: 0 0 0 1px #e2e5ea; } .gp-brk-sel svg, .gp-chip svg { width: 11px; height: 11px; fill: #6b7280; } .gp-brk-sel.open { box-shadow: 0 0 0 1.5px #2b87b8; } /* Trials */ .gp-trial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; } .gp-fun { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; } .gp-fun-row { display: grid; grid-template-columns: 48px 1fr 52px 40px; align-items: center; gap: 10px; font-size: 11.5px; color: #374151; } .gp-fun-row i { height: 34px; border-radius: 7px; background: linear-gradient(90deg, #1f6f9f, #2aa596); width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1); } .gp-fun-row:nth-child(2) i { transition-delay: .2s; opacity: .85; } .gp-fun-row:nth-child(3) i { transition-delay: .4s; opacity: .7; } .gp-fun.on .gp-fun-row i { width: var(--w); } .gp-fun-row b { font-size: 13px; font-weight: 600; color: #111827; text-align: right; } .gp-fun-row em { font-style: normal; font-size: 10.5px; color: #15803d; } .gp-trial-bars { position: relative; height: 196px; margin-top: 10px; } .gp-trial-bar { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 10px; height: 30px; font-size: 11.5px; color: #374151; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .35s ease; } .gp-trial-bar i { display: block; height: 12px; border-radius: 6px; background: #2aa596; width: 0; transition: width .8s cubic-bezier(.2,.8,.2,1); } .gp-trial-bar b { font-weight: 600; color: #111827; text-align: right; } .gp-trial-bar.in { animation: gpFadeIn .45s ease backwards; } .gp-trial-bar.out { opacity: 0; } @keyframes gpFadeIn { from { opacity: 0; } } .gp-trial-funnel { display: flex; flex-direction: column; } .gp-trial-out { margin-top: auto; padding-top: 14px; border-top: 1px solid #f1f3f5; } .gp-trial-stack { display: flex; gap: 2px; height: 16px; margin: 4px 0 8px; border-radius: 6px; overflow: hidden; } .gp-trial-stack i { width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1) .5s; } .gp-fun.on ~ .gp-trial-out .gp-trial-stack i, .gp-trial-funnel.on .gp-trial-stack i { width: var(--w); } .gp-trial-leg { display: flex; gap: 14px; font-size: 10.5px; color: #4b5563; } .gp-trial-leg span { display: flex; align-items: center; gap: 5px; } .gp-trial-leg i { width: 8px; height: 8px; border-radius: 2px; } /* Testimonials page */ .gp-tst-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 760px; margin: 38px auto 0; } .gp-tst-stats > div { padding: 18px 16px; border-radius: 18px; background: rgba(255,255,255,.85); text-align: center; box-shadow: 0 0 0 1px rgba(15,23,42,.07); } .gp-tst-stats b { display: block; font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: #0e7490; } .gp-tst-stats span { display: block; margin-top: 2px; font-size: 14px; color: #4b5563; } .gp-tst-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .gp-tst-founder { background: linear-gradient(160deg, #ffffff, #eef6f7) !important; } .gp-tst-founder .gp-tst-stat b { font-size: 24px; } .gp-tst-card figcaption img.gp-tst-photo { width: 44px; height: 44px; margin: 0; border-radius: 50%; object-fit: cover; opacity: 1; filter: none; } .gp-tst-founder figcaption a { color: #0e7490; } @media (max-width: 949px) { .gp-tst-wall { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .gp-tst-wall { grid-template-columns: 1fr; } .gp-tst-stats { grid-template-columns: 1fr; } } /* MRR report grouping scene */ .gp-brk-card { position: relative; } .gp-chip-dim { color: #9ca3af; } .gp-brk-more { font-size: 14px; color: #6b7280; padding: 0 2px; } .gp-gb { position: relative; } .gp-gb-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #d4e8de; color: #1d4d3a; font-size: 11.5px; font-weight: 500; transition: background .25s ease, box-shadow .25s ease; } .gp-gb-chip svg { width: 12px; height: 12px; } .gp-gb-chip.on { background: #a9d3bf; } .gp-gb.open .gp-gb-chip { box-shadow: 0 0 0 2px rgba(29,77,58,.18); } .gp-gb-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 14; display: flex; flex-direction: column; width: 170px; padding: 4px; border-radius: 10px; background: #fff; box-shadow: 0 18px 36px -14px rgba(0,0,0,.3), 0 0 0 1px rgba(15,23,42,.07); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s ease, transform .25s ease; } .gp-gb.open .gp-gb-menu { opacity: 1; transform: none; } .gp-gb-menu span { padding: 5px 9px 5px 22px; border-radius: 7px; font-size: 11px; color: #1f2937; position: relative; } .gp-gb-menu span.sel { background: #dcefe5; } .gp-gb-menu span.sel::before { content: "✓"; position: absolute; left: 8px; font-size: 10px; } .gp-gb-menu span.hl { background: #eef2f5; } .gp-gb-menu span.sel.hl { background: #cfe6da; } .gp-brk-plot { position: relative; } .gp-brk-plot svg { display: block; overflow: hidden; } .gp-brk-tip { position: absolute; left: 0; top: 0; z-index: 5; min-width: 150px; padding: 7px 10px; border-radius: 9px; background: #fff; font-size: 10.5px; color: #1f2937; box-shadow: 0 12px 26px -10px rgba(0,0,0,.28), 0 0 0 1px rgba(15,23,42,.06); opacity: 0; transform: translateY(3px); transition: opacity .2s ease, transform .25s ease; pointer-events: none; } .gp-brk-tip.on { opacity: 1; transform: none; } .gp-brk-tip b { display: block; margin-bottom: 3px; font-size: 11px; } .gp-brk-tip div { display: flex; align-items: center; gap: 6px; line-height: 1.55; } .gp-brk-tip i { width: 7px; height: 7px; border-radius: 50%; flex: none; } .gp-brk-tip span { flex: 1; white-space: nowrap; margin-right: 10px; } .gp-brk-tip em { font-style: normal; font-weight: 500; } .gp-brk-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; min-height: 18px; margin: 6px 0 2px 44px; font-size: 10.5px; color: #374151; opacity: 0; transition: opacity .35s ease; } .gp-brk-legend.on { opacity: 1; } .gp-brk-legend span { display: flex; align-items: center; gap: 5px; } .gp-brk-legend i { width: 8px; height: 8px; border-radius: 50%; } .gp-brk-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; } .gp-brk-kpis b { display: block; font-size: 18px; font-weight: 500; color: #111827; } .gp-brk-kpis span { font-size: 10.5px; color: #374151; } .gp-brk-kpis em { font-style: normal; color: #15803d; margin-left: 3px; } .gp-brk-kpis em.down { color: #c0392b; } .gp-new-badge { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: #e0f2ec; color: #15803d; font-size: 11px; font-weight: 600; letter-spacing: .02em; vertical-align: 2px; } /* ---------- Cross-linking bands: roles, switching strip, explore ---------- */ .gp-roles { background: linear-gradient(180deg, #fff, #f6f9fb); } .gp-roles-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .gp-role { position: relative; display: flex; flex-direction: column; padding: 24px 22px 22px; border-radius: 22px; background: #fff; text-decoration: none; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 0 0 1px rgba(15,23,42,.07); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; } .gp-role::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); opacity: .85; } .gp-role.is-visible:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -30px rgba(12,58,65,.5), 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); } .gp-role-ico { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; margin-bottom: 16px; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 11%, #fff); } .gp-role-ico svg { width: 22px; height: 22px; } .gp-role b { font-size: 17px; color: #0f172a; } .gp-role p { flex: 1; margin: 6px 0 14px; font-size: 15px; line-height: 1.55; color: #4b5563; } .gp-role em { font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--c); } .gp-switch { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-top: 26px; padding: 18px 22px; border-radius: 18px; background: #0f2f38; color: #d7ebef; } .gp-switch b { display: block; font-size: 17px; color: #fff; } .gp-switch span { font-size: 14.5px; color: #a9c9d0; } .gp-switch nav { display: flex; flex-wrap: wrap; gap: 8px; } .gp-switch nav a { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background .2s ease; } .gp-switch nav a:hover { background: rgba(255,255,255,.18); } .gp-explore { background: #f7f9fb; } .gp-explore-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 24px; } .gp-explore-head p { margin: 0; font-size: 16px; color: #4b5563; } .gp-explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .gp-explore-card { display: flex; flex-direction: column; padding: 20px 20px 18px; border-radius: 18px; background: #fff; text-decoration: none; box-shadow: 0 0 0 1px rgba(15,23,42,.07); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; } .gp-explore-card.is-visible:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -30px rgba(12,58,65,.5), 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); } .gp-explore-card i { width: 10px; height: 10px; margin-bottom: 12px; border-radius: 3px; background: var(--c); } .gp-explore-card b { font-size: 16px; color: #0f172a; } .gp-explore-card p { flex: 1; margin: 6px 0 12px; font-size: 14px; line-height: 1.55; color: #4b5563; } .gp-explore-card > span { font-size: 14px; font-weight: 500; color: #0e7490; } .gp-explore-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; color: #6b7280; } .gp-explore-roles > span { margin-right: 4px; } .gp-explore-roles a { padding: 6px 12px; border-radius: 999px; background: #fff; color: #0f172a; text-decoration: none; box-shadow: 0 0 0 1px rgba(15,23,42,.1); transition: box-shadow .2s ease; } .gp-explore-roles a:hover { box-shadow: 0 0 0 1px #0e7490; } .gp-explore-roles a.on { background: #0e7490; color: #fff; box-shadow: none; } @media (max-width: 1100px) { .gp-roles-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .gp-roles-grid { grid-template-columns: 1fr; } .gp-switch { padding: 18px; } } /* Academy: end-of-article hand-off to the product */ .gp-acad-cta { position: relative; display: flex; gap: 22px; align-items: flex-start; margin: 48px 0 8px; padding: 26px 28px; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #0c3f47, #0e5c63 55%, #13706c); color: #d7ebef; box-shadow: 0 30px 60px -40px rgba(12,58,65,.6); } .gp-acad-spark { flex: none; width: 120px; height: 40px; margin-top: 6px; } .gp-acad-cta-body b { display: block; font-size: 21px; color: #fff; } .gp-acad-cta-body p { margin: 6px 0 16px; font-size: 16px; line-height: 1.6; color: #bfe0e4; } .gp-acad-cta-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .gp-acad-btn { padding: 9px 16px; border-radius: 999px; background: #fff; color: #0e5c63 !important; font-size: 15px; font-weight: 600; text-decoration: none !important; } .gp-acad-btn.ghost { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); } .gp-acad-more { color: #9fe1c8 !important; font-size: 15px; font-weight: 500; text-decoration: none !important; } @media (max-width: 640px) { .gp-acad-cta { flex-direction: column; padding: 22px; } } /* Trust row under primary CTAs */ .gp-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 15px; color: #374151; } .gp-trust-row li { display: flex; align-items: center; gap: 7px; } .gp-trust-row li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #dcf5e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%2315803d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; } @media (max-width: 640px) { .gp-trust-row { gap: 6px 14px; font-size: 13.5px; } } /* About page */ .gp-about-story { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; } .gp-about-photo { margin: 0; } .gp-about-photo img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 50px 90px -50px rgba(12,58,65,.5); } .gp-about-photo figcaption { margin-top: 10px; font-size: 14px; color: #6b7280; } .gp-about-text p { margin: 0 0 16px; font-size: 18px; line-height: 1.75; color: #374151; } .gp-about-text p a { color: #0e7490; } .gp-about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 48px; } .gp-about-stats > div { padding: 20px 20px 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07); } .gp-about-stats b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: #0e7490; } .gp-about-stats span { font-size: 14.5px; color: #4b5563; } .gp-about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .gp-about-values > div { padding: 24px; border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(15,23,42,.07); } .gp-about-values .gp-role-ico { margin-bottom: 14px; } .gp-about-values b { display: block; font-size: 17px; color: #0f172a; } .gp-about-values p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: #4b5563; } .gp-about-values a { color: #0e7490; } .gp-about-company { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; padding: 20px 24px; border-radius: 20px; background: #0f2f38; } .gp-about-company b { display: block; color: #fff; font-size: 16px; } .gp-about-company span { font-size: 14px; color: #a9c9d0; } .gp-about-company a { color: #9fe1c8; } @media (max-width: 949px) { .gp-about-story { grid-template-columns: 1fr; gap: 28px; } .gp-about-stats { grid-template-columns: 1fr 1fr; } .gp-about-values { grid-template-columns: 1fr 1fr; } .gp-about-company { grid-template-columns: 1fr; } } @media (max-width: 600px) { .gp-about-values { grid-template-columns: 1fr; } } .prose .gp-acad-cta a { border-bottom: 0 !important; text-decoration: none !important; background-image: none !important; } .prose .gp-acad-cta .gp-acad-btn { display: inline-block; padding: 9px 16px !important; line-height: 1.2; box-shadow: none; } .prose .gp-acad-cta .gp-acad-btn.ghost { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); } .prose .gp-acad-cta p { margin: 6px 0 16px; } .prose .gp-acad-cta b { font-weight: 700; } @media (max-width: 700px) { .gp-roles-grid { gap: 10px; } .gp-role { display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "ico title" "ico tags"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px; border-radius: 16px; } .gp-role-ico { grid-area: ico; margin: 0; } .gp-role b { grid-area: title; font-size: 16px; } .gp-role em { grid-area: tags; } .gp-role p { display: none; } } /* Pricing proof band */ .gp-proof { background: linear-gradient(180deg, #f6f9fb, #fff); } .gp-proof-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: stretch; } .gp-proof-quote { margin: 0; padding: 30px 32px; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -44px rgba(12,58,65,.45), 0 0 0 1px rgba(15,23,42,.07); } .gp-proof-quote .gp-stars { color: #f5a524; letter-spacing: 2px; font-size: 18px; } .gp-proof-quote blockquote { margin: 12px 0 20px; font-size: 19px; line-height: 1.6; color: #1f2937; } .gp-proof-quote figcaption { display: flex; align-items: center; gap: 12px; } .gp-proof-quote img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .gp-proof-quote figcaption b { display: block; color: #0f172a; } .gp-proof-quote figcaption span { font-size: 14px; color: #6b7280; } .gp-proof-side { display: flex; flex-direction: column; gap: 14px; } .gp-proof-checks { flex: 1; margin: 0; padding: 24px 26px; list-style: none; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07); } .gp-proof-checks li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 16px; color: #1f2937; } .gp-proof-checks li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: #dcf5e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%2315803d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; } .gp-proof-checks a { color: #0e7490; } .gp-proof-compare { padding: 18px 22px; border-radius: 20px; background: #0f2f38; } .gp-proof-compare b { display: block; margin-bottom: 10px; color: #fff; } .gp-proof-compare nav { display: flex; flex-wrap: wrap; gap: 8px; } .gp-proof-compare a { padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 14px; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .gp-proof-compare a:hover { background: rgba(255,255,255,.18); } @media (max-width: 900px) { .gp-proof-grid { grid-template-columns: 1fr; } } /* Integrations hub: sources → GrowPanel → your tools */ .gp-flow { position: relative; width: 100%; height: 100%; font-family: 'Public Sans', system-ui, sans-serif; } .gp-flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .gp-flow-lines .base { fill: none; stroke: #d7e1e7; stroke-width: 1.4; } .gp-flow-lines .pulse { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 6 260; animation: gpFlowDash 3.2s linear infinite; } .gp-flow-lines .pulse.in { stroke: #0e7490; } .gp-flow-lines .pulse.out { stroke: #15803d; animation-duration: 2.8s; } .gp-flow-lines .pulse.back { stroke: #ff7a59; animation-duration: 3.6s; animation-delay: -1.2s; } @keyframes gpFlowDash { from { stroke-dashoffset: 266; } to { stroke-dashoffset: 0; } } .gp-flow-node { position: absolute; display: flex; align-items: center; gap: 10px; width: 170px; height: 44px; padding: 0 12px 0 5px; border-radius: 12px; background: #fff; text-decoration: none; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 0 0 1px rgba(15,23,42,.08); transition: box-shadow .25s ease, transform .25s ease; } .gp-flow-node:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(12,58,65,.45), 0 0 0 1px rgba(14,116,144,.45); } .gp-flow-logo { display: flex; width: 34px; height: 34px; flex: none; align-items: center; justify-content: center; border-radius: 9px; padding: 6px; } .gp-flow-logo svg { width: 100%; height: 100%; } .gp-flow-node b { font-size: 14px; font-weight: 600; color: #0f172a; white-space: nowrap; } .gp-flow-col-label { position: absolute; top: -26px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #64748b; } .gp-flow-hub { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 164px; height: 104px; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -30px rgba(12,58,65,.55), 0 0 0 1px rgba(15,23,42,.08), 0 0 0 8px rgba(14,116,144,.06); } .gp-flow-hub b { font-size: 16px; color: #0f172a; } .gp-flow-hub span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #15803d; } .gp-flow-hub span i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); animation: gpBlink 2s ease-in-out infinite; } .gp-flow-mock { max-width: 1000px; margin: 42px auto 0; } @media (prefers-reduced-motion: reduce) { .gp-flow-lines .pulse { animation: none; stroke-dasharray: none; opacity: .35; } } .gp-int-chips { position: sticky; top: 72px; z-index: 20; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 16px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(15,23,42,.06); } .gp-int-chips a { padding: 7px 14px; border-radius: 999px; background: #fff; color: #0f172a; font-size: 14.5px; font-weight: 500; text-decoration: none; box-shadow: 0 0 0 1px rgba(15,23,42,.1); transition: box-shadow .2s ease, color .2s ease; } .gp-int-chips a:hover { color: #0e7490; box-shadow: 0 0 0 1px #0e7490; } [id^="int-"] { scroll-margin-top: 140px; } @keyframes gpBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @keyframes gpSpin { to { transform: rotate(360deg); } } .gp-int-card .w-12 > svg, .gp-int-card .w-12 > img { width: 100%; height: 100%; } /* Calculators: hand-off under the result */ .gp-tool-handoff { display: flex; gap: 20px; align-items: flex-start; margin-top: 18px; padding: 22px 24px; border-radius: 20px; background: linear-gradient(135deg, #0c3f47, #0e5c63 55%, #13706c); color: #d7ebef; box-shadow: 0 30px 60px -44px rgba(12,58,65,.6); } .gp-tool-handoff-viz svg { width: 110px; height: 44px; margin-top: 4px; } .gp-tool-handoff b { display: block; font-size: 18px; color: #fff; } .gp-tool-handoff p { margin: 6px 0 14px; font-size: 15px; line-height: 1.6; color: #bfe0e4; } .gp-tool-handoff-links { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 640px) { .gp-tool-handoff { flex-direction: column; } } /* Contact page */ .gp-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gp-contact-card { display: flex; flex-direction: column; padding: 24px; border-radius: 22px; background: #fff; text-decoration: none; box-shadow: 0 0 0 1px rgba(15,23,42,.07); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; } .gp-contact-card.is-visible:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -30px rgba(12,58,65,.5), 0 0 0 1px rgba(14,116,144,.35); } .gp-contact-card .gp-role-ico { margin-bottom: 14px; } .gp-contact-card b { font-size: 17px; color: #0f172a; } .gp-contact-card p { flex: 1; margin: 6px 0 14px; font-size: 15px; line-height: 1.55; color: #4b5563; } .gp-contact-card em { font-style: normal; font-weight: 600; color: #0e7490; } .gp-contact-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; margin-top: 16px; } .gp-contact-panel { padding: 28px; border-radius: 22px; background: linear-gradient(135deg, #0c3f47, #0e5c63 55%, #13706c); color: #d7ebef; } .gp-contact-panel h2, .gp-contact-help h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; } .gp-contact-panel h2 { color: #fff; } .gp-contact-help h2 { color: #0f172a; } .gp-contact-panel p { margin: 0 0 18px; font-size: 16px; line-height: 1.65; color: #bfe0e4; } .gp-contact-ctas { display: flex; flex-wrap: wrap; gap: 10px; } .gp-contact-panel .gp-trust-row { justify-content: flex-start; color: #d7ebef; font-size: 14px; } .gp-contact-help { padding: 28px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.07); } .gp-contact-help p { margin: 0 0 10px; font-size: 15.5px; color: #4b5563; } .gp-contact-help ul { margin: 0 0 18px; padding-left: 18px; list-style: disc; } .gp-contact-help li { margin: 4px 0; font-size: 15.5px; } .gp-contact-help a { color: #0e7490; } .gp-contact-company { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid #eef0f3; font-size: 14px; color: #6b7280; } .gp-contact-company b { color: #0f172a; } @media (max-width: 900px) { .gp-contact-grid, .gp-contact-split { grid-template-columns: 1fr; } } /* SaaS Academy index */ .gp-acad-search { position: relative; max-width: 680px; margin: 30px auto 0; } .gp-acad-search svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: #64748b; } .gp-acad-search input { width: 100%; height: 58px; padding: 0 22px 0 52px; border-radius: 999px; border: 0; background: #fff; font-size: 18px; color: #0f172a; box-shadow: 0 20px 40px -28px rgba(12,58,65,.5), 0 0 0 1px rgba(15,23,42,.1); outline: none; transition: box-shadow .2s ease; } .gp-acad-search input:focus { box-shadow: 0 20px 40px -28px rgba(12,58,65,.5), 0 0 0 2px #0e7490; } .gp-acad-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; } .gp-acad-chips button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: #fff; color: #0f172a; font-size: 14.5px; font-weight: 500; cursor: pointer; box-shadow: 0 0 0 1px rgba(15,23,42,.1); transition: box-shadow .2s ease, background .2s ease, color .2s ease; } .gp-acad-chips button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .gp-acad-chips button span { font-size: 12px; color: #94a3b8; } .gp-acad-chips button:hover { box-shadow: 0 0 0 1px #0e7490; } .gp-acad-chips button.on { background: #0f2f38; color: #fff; box-shadow: none; } .gp-acad-chips button.on span { color: #9fc9d0; } .gp-acad-h2 { margin: 0 0 14px; font-size: 22px; font-weight: 700; color: #0f172a; } .gp-acad-start { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .gp-acad-start-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 18px; text-decoration: none; background: linear-gradient(160deg, #0c3f47, #13706c); color: #d7ebef; box-shadow: 0 24px 44px -34px rgba(12,58,65,.7); transition: transform .25s ease, box-shadow .25s ease; } .gp-acad-start-card:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -30px rgba(12,58,65,.75); } .gp-acad-start-card b { font-size: 22px; color: #fff; } .gp-acad-start-card span { font-size: 14px; color: #bfe0e4; } .gp-acad-start-card code { margin-top: 8px; font-size: 11.5px; color: #9fe1c8; background: none; white-space: normal; } .gp-acad-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; } .gp-acad-letters a { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; background: #fff; color: #334155; font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: 0 0 0 1px rgba(15,23,42,.08); transition: background .2s ease, color .2s ease; } .gp-acad-letters a:hover { background: #0e7490; color: #fff; } .gp-acad-letter { margin-bottom: 34px; scroll-margin-top: 100px; } .gp-acad-letter > h2 { margin: 0 0 12px; font-size: 24px; font-weight: 700; color: #0f172a; } .gp-acad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; } .gp-acad-card { display: flex; flex-direction: column; height: 100%; padding: 18px 20px; border-radius: 18px; background: #fff; text-decoration: none; box-shadow: 0 0 0 1px rgba(15,23,42,.07); transition: box-shadow .25s ease, transform .25s ease; } .gp-acad-card:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -30px rgba(12,58,65,.5), 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); } .gp-acad-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--c); } .gp-acad-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); } .gp-acad-card b { margin-top: 8px; font-size: 17px; color: #0f172a; } .gp-acad-card p { flex: 1; margin: 6px 0 12px; font-size: 14px; line-height: 1.55; color: #4b5563; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .gp-acad-read { font-size: 14px; font-weight: 500; color: #0e7490; } .gp-acad-empty { padding: 24px; border-radius: 16px; background: #fff; text-align: center; color: #4b5563; box-shadow: 0 0 0 1px rgba(15,23,42,.07); } .gp-acad-empty a { color: #0e7490; } [hidden].academy-item, .academy-letter[hidden], #academy-start[hidden] { display: none !important; } @media (max-width: 1100px) { .gp-acad-start { grid-template-columns: repeat(3, 1fr); } .gp-acad-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .gp-acad-start { grid-template-columns: 1fr 1fr; } .gp-acad-grid { grid-template-columns: 1fr; } .gp-acad-search input { height: 52px; font-size: 16px; } } .gp-gb-menu .gp-gb-div { display: block; margin: 4px 0 2px; padding: 6px 9px 2px; border-top: 1px solid #eef0f3; font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; } .gp-gb-menu span svg { display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; color: #64748b; } /* Phone "camera" for wide scenes (see initScale): edge to edge, clipped, rounded */ @media (max-width: 699px) { .gp-mock.gp-cam { width: calc(100vw - 20px) !important; max-width: none !important; margin-left: calc(50% - 50vw + 10px) !important; margin-right: 0 !important; overflow: hidden; border-radius: 14px; box-shadow: 0 30px 60px -36px rgba(12,58,65,.45), 0 0 0 1px rgba(15,23,42,.08); background: #f3f5f7; } .gp-mock.gp-cam .gp-mock-inner { transform-origin: 0 0; will-change: transform; } .gp-mock.gp-cam .gp-app, .gp-mock.gp-cam .gp-iw { border-radius: 0; box-shadow: none; } }