/* ========================================================== INTEGRATION PAGES — shared layout styles Used by every /integrations/*.html page. Page-specific brand colour is set per page via the --brand* custom properties on the (default below is iamproperty emerald). Base styles (gradient, buttons, footer, hero-* animation classes) come from css/main.css + css/hero-animation.css, which every integration page also links. ========================================================== */ :root, body { --brand: #059669; /* primary brand accent */ --brand-deep: #047857; /* darker shade for hover/active */ --brand-soft: #ecfdf5; /* tint for chips / panels */ --brand-ring: rgba(5, 150, 105, 0.12); } /* ---------- Co-brand lockup (Askpilot + partner) ---------- */ .intg-lockup { display: inline-flex; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 9999px; border: 1px solid rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); } .intg-lockup img { height: 22px; width: auto; display: block; } .intg-lockup-x { color: #9ca3af; flex-shrink: 0; } .intg-lockup-x svg { width: 14px; height: 14px; display: block; } @media (min-width: 640px) { .intg-lockup img { height: 26px; } } /* ---------- Co-brand variant of the hero-audience-tag pill ---------- Reuses the homepage .hero-audience-tag shell but swaps the icon-tile + text label for two real brand logos with an × between them. */ .hero-audience-tag-cobrand { gap: 10px; } .hero-audience-tag-cobrand .hero-cobrand-logo { height: 18px; width: auto; display: block; } /* Partner wordmarks read smaller than the Askpilot logo at the same pixel height — bump the partner logo a touch so the lockup looks balanced. */ .hero-audience-tag-cobrand .hero-cobrand-logo-lg { height: 26px; } /* The CallSwitch One wordmark SVG has built-in vertical padding (the ™ sits above the cap height), so an equal CSS height renders the visible letterforms ~25% shorter than the Askpilot logo. Bump it up so the optical sizes match. */ /* The CallSwitch One SVG is bottom-heavy — the ™ above the cap height pushes the visible letterforms low within the box. Nudge it up so it sits optically centred next to the Askpilot logo. */ .hero-audience-tag-cobrand .hero-cobrand-logo-callswitch { height: 16px; transform: translateY(-1px); } @media (min-width: 640px) { .hero-audience-tag-cobrand .hero-cobrand-logo { height: 20px; } .hero-audience-tag-cobrand .hero-cobrand-logo-lg { height: 28px; } .hero-audience-tag-cobrand .hero-cobrand-logo-callswitch { height: 16px; } } .hero-audience-tag-cobrand .hero-cobrand-x { color: #9ca3af; display: inline-flex; align-items: center; flex-shrink: 0; } .hero-audience-tag-cobrand .hero-cobrand-x svg { width: 12px; height: 12px; display: block; } /* ---------- "Featured integration" badge ---------- */ .intg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 9999px; background: var(--brand); color: #ffffff; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 2px 8px -2px var(--brand-ring); } .intg-badge svg { width: 12px; height: 12px; } /* ---------- Section kicker (uppercase eyebrow) ---------- */ .intg-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); } /* ---------- Value blocks (3-up icon grid) ---------- */ .intg-value-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: #e5e7eb; border: 1px solid #e5e7eb; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px -25px rgba(15, 23, 42, 0.18); } @media (min-width: 768px) { .intg-value-grid { grid-template-columns: repeat(3, 1fr); } } .intg-value { background: #ffffff; padding: 28px 26px 30px; display: flex; flex-direction: column; } .intg-value-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; } .intg-value-icon svg { width: 24px; height: 24px; } .intg-value-title { font-size: 26px; font-weight: 600; color: #0f172a; letter-spacing: -0.01em; line-height: 1.3; } .intg-value-desc { margin-top: 8px; font-size: 16px; line-height: 1.625; font-weight: 300; color: #4b5563; } @media (min-width: 640px) { .intg-value-desc { font-size: 18px; } } /* ---------- "How it works" — alternating step rows ---------- */ .intg-step { display: flex; flex-direction: column; gap: 28px; } @media (min-width: 1024px) { .intg-step { flex-direction: row; align-items: center; gap: 64px; } .intg-step.is-reversed { flex-direction: row-reverse; } } .intg-step-copy { flex: 1; min-width: 0; } .intg-step-visual { flex: 1; min-width: 0; border-radius: 20px; overflow: hidden; border: 1px solid #e5e7eb; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 20px 50px -25px rgba(15, 23, 42, 0.16); /* Holds a placeholder graphic until real screenshots ship. */ min-height: 280px; display: flex; align-items: center; justify-content: center; padding: 32px; } .intg-step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; border: 1px solid var(--brand); color: var(--brand); font-size: 15px; font-weight: 600; margin-bottom: 16px; } .intg-step-title { font-size: 24px; font-weight: 500; color: #0f172a; letter-spacing: -0.01em; line-height: 1.25; } @media (min-width: 640px) { .intg-step-title { font-size: 30px; } } .intg-step-desc { margin-top: 12px; font-size: 17px; line-height: 1.6; font-weight: 300; color: #4b5563; } /* ---------- Placeholder graphic inside step visuals ---------- A clean, on-brand "image coming" panel — icon + label — so the page looks intentional before real screenshots are exported. */ .intg-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #94a3b8; text-align: center; } .intg-placeholder-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; } .intg-placeholder-icon svg { width: 22px; height: 22px; } .intg-placeholder-label { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; } /* ---------- Featured-partner strip ---------- */ .intg-partner-strip { border-radius: 24px; border: 1px solid #e5e7eb; background: linear-gradient(135deg, var(--brand-soft) 0%, #f0fdfa 60%, #ffffff 100%); padding: 36px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } @media (min-width: 768px) { .intg-partner-strip { flex-direction: row; text-align: left; gap: 28px; padding: 40px 44px; } } .intg-partner-logo { width: 96px; height: 96px; flex-shrink: 0; } .intg-partner-logo img { width: 100%; height: 100%; object-fit: contain; } .intg-partner-stat { font-size: 34px; font-weight: 600; color: #0f172a; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .intg-partner-stat span { color: var(--brand); } /* ---------- Brand-coloured primary button ---------- */ .intg-btn-brand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand); color: #ffffff; font-weight: 500; border-radius: 1rem; padding: 0.6rem 1.4rem; font-size: 1rem; transition: background-color 0.18s ease; } .intg-btn-brand:hover { background: var(--brand-deep); } .intg-btn-brand:focus { outline: none; box-shadow: 0 0 0 4px var(--brand-ring); } /* ---------- FAQ accordion (

) ---------- Hide the native disclosure triangle so only the custom +/x icon shows. */ .faq-accordion summary::-webkit-details-marker { display: none; } .faq-accordion summary { list-style: none; } details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; }