/* Integration pages — Stripe-premium, on Crossdeck's DNA. Layers on top of /styles.css (tokens, .hero, .section, .btn, .badge, .eyebrow). Each page sets --brand (the partner colour) on ; Crossdeck's own accent stays the primary. Only integration-specific pieces live here. */ .int-body { --brand: var(--ds-accent); --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent); --brand-line: color-mix(in srgb, var(--brand) 26%, transparent); } /* ── app-icon tiles — real logos, never letters-in-a-box ─────────────────── */ .int-tile { --size: 62px; width: var(--size); height: var(--size); border-radius: calc(var(--size) * 0.26); display: grid; place-items: center; flex: 0 0 auto; box-shadow: var(--ds-shadow-md), inset 0 0 0 1px rgba(255, 255, 255, 0.14); position: relative; overflow: hidden; } .int-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), transparent 55%); pointer-events: none; } .int-tile svg { width: 62%; height: 62%; display: block; } .int-tile-cd { background: #fff; box-shadow: var(--ds-shadow-md), inset 0 0 0 1px var(--ds-border); } .int-tile-cd .int-x-mark { width: 58%; height: 58%; } .int-tile-partner { background: linear-gradient(155deg, color-mix(in srgb, var(--brand) 86%, white), var(--brand)); } .int-tile-sm { --size: 40px; border-radius: 11px; } .int-mono { color: #fff; font-weight: 700; font-size: calc(var(--size) * 0.4); letter-spacing: -0.02em; } /* ── the Crossdeck × Partner lockup ─────────────────────────────────────── */ .int-lockup { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 26px; } .int-lockup-join { width: 26px; height: 1.5px; background: var(--ds-border-strong); position: relative; flex: 0 0 auto; } .int-lockup-join::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-muted-soft); transform: translate(-50%, -50%); } /* ── hero ───────────────────────────────────────────────────────────────── */ .int-hero { padding-top: 40px; padding-bottom: 20px; } .int-hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: center; gap: 56px; max-width: var(--max-width); margin: 0 auto; } .int-hero-copy { text-align: left; } .int-hero-copy h1 { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 18px; } .int-hero-copy .hero-subhead { margin: 0 0 28px; max-width: 30em; font-size: 17px; line-height: 1.62; color: var(--ds-muted); } .int-hero-copy .hero-actions { justify-content: flex-start; } .int-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-muted); } .int-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .int-trust { display: flex; flex-wrap: wrap; gap: 18px; margin: 22px 0 0; font-size: 13px; font-weight: 550; color: var(--ds-muted); } .int-trust span { display: inline-flex; align-items: center; gap: 7px; } .int-trust svg { width: 14px; height: 14px; color: var(--ds-success); } /* ── the hero "join" visual — one record, every layer ───────────────────── */ .int-hero-visual { display: flex; justify-content: center; } .int-record { position: relative; width: 100%; max-width: 420px; margin: 0; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 20px; box-shadow: var(--ds-shadow-lg); padding: 20px 20px 22px; isolation: isolate; } .int-record-glow { position: absolute; inset: -30% -18% auto -18%; height: 70%; background: radial-gradient(60% 100% at 50% 0%, var(--brand-soft), transparent 70%); z-index: -1; pointer-events: none; } .int-record-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--ds-divider); } .int-record-title { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; } .int-record-title b { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; color: var(--ds-text); } .int-record-title em { font-style: normal; font-size: 11.5px; color: var(--ds-muted-soft); } .int-record-sync { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; color: var(--ds-success); background: var(--ds-success-soft); border-radius: 999px; padding: 4px 10px; } .int-record-sync i { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-success) 22%, transparent); } .int-record-person { display: flex; align-items: center; gap: 12px; padding: 16px 0 6px; } .int-record-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.01em; background: linear-gradient(150deg, var(--ds-accent-warm), var(--ds-accent-strong)); } .int-record-who { display: flex; flex-direction: column; line-height: 1.3; margin-right: auto; } .int-record-who b { font-size: 14.5px; font-weight: 650; color: var(--ds-text); } .int-record-who em { font-style: normal; font-size: 12px; color: var(--ds-muted); } .int-record-idchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; color: var(--ds-text-soft); background: var(--ds-surface-soft); border: 1px solid var(--ds-border); border-radius: 999px; padding: 4px 9px; } .int-record-idchip svg { width: 12px; height: 12px; color: var(--ds-muted); } .int-record-joinline { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; color: var(--ds-muted-soft); } .int-record-joinline::before, .int-record-joinline::after { content: ""; height: 1px; flex: 1; background: var(--ds-divider); } .int-record-joinline span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .int-record-joins { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .int-join { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px; background: var(--ds-surface-soft); border: 1px solid var(--ds-border); } .int-join-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ds-accent-soft); color: var(--ds-accent-strong); } .int-join-ic svg { width: 14px; height: 14px; } .int-join-lab { font-size: 12.5px; font-weight: 550; color: var(--ds-muted); } .int-join-val { font-size: 13.5px; font-weight: 700; color: var(--ds-text); letter-spacing: -0.01em; text-align: right; } .int-join-val i { font-style: normal; font-weight: 550; font-size: 11px; color: var(--ds-muted-soft); } .int-join-note { font-size: 11px; color: var(--ds-muted-soft); white-space: nowrap; } .int-join-ent .int-join-ic { background: var(--ds-success-soft); color: var(--ds-success); } .int-join-err .int-join-ic { background: var(--ds-danger-soft); color: var(--ds-danger); } .int-join-err .int-join-note { color: var(--ds-danger); font-weight: 600; } /* ── the moat line — one statement, given room ──────────────────────────── */ .int-moat-section { padding-top: 26px; padding-bottom: 26px; } .int-moat { max-width: 820px; margin: 0 auto; text-align: center; font-size: clamp(22px, 3vw, 31px); line-height: 1.34; font-weight: 560; letter-spacing: -0.02em; color: var(--ds-text-soft); text-wrap: balance; } /* ── what you get ───────────────────────────────────────────────────────── */ .int-value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 36px; max-width: var(--max-width); margin-inline: auto; } .int-value { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); padding: 26px 26px 28px; transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .int-value:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-md); border-color: var(--ds-border-strong); } .int-value-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); margin-bottom: 16px; } .int-value-ic svg { width: 18px; height: 18px; } .int-value h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ds-text); } .int-value p { font-size: 14px; line-height: 1.62; color: var(--ds-muted); margin: 0; } /* ── how it works ───────────────────────────────────────────────────────── */ .int-steps { list-style: none; padding: 0; margin: 32px auto 0; max-width: 960px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .int-step { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; position: relative; } .int-step:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: calc(32px + 14px); right: -22px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--ds-border-strong) 0 6px, transparent 6px 12px); } .int-step-n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(150deg, var(--ds-accent), var(--ds-accent-strong)); color: #fff; font-size: 14px; font-weight: 700; box-shadow: var(--ds-shadow-sm); flex: 0 0 auto; position: relative; z-index: 1; } .int-step p { font-size: 14.5px; line-height: 1.58; color: var(--ds-text-soft); margin: 0; } /* ── security band ──────────────────────────────────────────────────────── */ .int-security { max-width: 800px; margin: 0 auto; background: var(--ds-surface-soft); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 26px 30px; } .int-security-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-success); } .int-security-kicker svg { width: 15px; height: 15px; } .int-security-text { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ds-muted); } /* ── the closing CTA ────────────────────────────────────────────────────── */ .int-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; max-width: var(--max-width); margin-inline: auto; background: radial-gradient(120% 140% at 100% 0%, var(--brand-soft), transparent 60%), linear-gradient(180deg, rgba(255, 110, 69, 0.07), rgba(255, 110, 69, 0.02)); border: 1px solid var(--ds-accent-soft); border-radius: var(--ds-radius-lg); padding: 34px 36px; } .int-cta-copy { max-width: 560px; } .int-cta-copy h2 { margin: 8px 0 8px; } .int-cta-copy p { margin: 0; color: var(--ds-muted); font-size: 15px; line-height: 1.6; } .int-cta-btn { flex: 0 0 auto; } /* ── the gallery ────────────────────────────────────────────────────────── */ .int-index-hero { text-align: center; padding-bottom: 12px; } .int-index-hero .int-eyebrow { justify-content: center; } .int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; max-width: var(--max-width); margin-inline: auto; } .int-card { --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent); display: flex; flex-direction: column; gap: 13px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); padding: 24px 24px 22px; text-decoration: none; position: relative; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .int-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand); opacity: 0; transition: opacity 0.18s ease; } .int-card:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-md); border-color: var(--ds-border-strong); } .int-card:hover::before { opacity: 1; } .int-card-lockup { display: inline-flex; align-items: center; gap: 10px; } .int-card-name { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; color: var(--ds-text); } .int-card-soon { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-warning); background: var(--ds-warning-soft); border-radius: 999px; padding: 2px 8px; } .int-card-cat { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ds-muted-soft); margin-top: -6px; } .int-card-body { font-size: 13.5px; line-height: 1.56; color: var(--ds-muted); flex: 1; } .int-card-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--ds-accent-strong); } .int-card-go svg { width: 14px; height: 14px; transition: transform 0.15s ease; } .int-card:hover .int-card-go svg { transform: translateX(3px); } /* ── responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .int-hero-grid { grid-template-columns: 1fr; gap: 40px; } .int-hero-copy { text-align: center; } .int-hero-copy .hero-subhead { margin-inline: auto; } .int-lockup, .int-hero-copy .hero-actions, .int-trust { justify-content: center; } .int-eyebrow { justify-content: center; } } @media (max-width: 760px) { .int-steps { grid-template-columns: 1fr; gap: 18px; max-width: 460px; } .int-step:not(:last-child)::after { display: none; } .int-cta { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .int-value, .int-card, .int-card-go svg { transition: none; } }