/* CryptoPayr — Certifications & compliance hub (/certifications). Self-contained layer so the page never depends on purged Tailwind utilities. Flat aesthetic, single green accent (var(--grn)), hairline borders — matches landing.css. Theme-aware via the .dark class on . */ .cth-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; } /* ── Hero ─────────────────────────────────────────────────────────── */ .cth-hero { text-align: center; padding: 72px 20px 44px; } .cth-hero-inner { max-width: 720px; margin: 0 auto; } .cth-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 6px 13px; border-radius: 999px; color: var(--grn); background: var(--grn-tint); border: 1px solid rgba(8,160,90,.22); } .dark .cth-eyebrow { border-color: rgba(22,196,124,.25); } .cth-title { margin: 22px 0 0; font-size: clamp(32px, 5vw, 50px); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; color: var(--ink); } .cth-title em { font-style: normal; color: var(--grn); } .cth-lead { margin: 18px auto 0; max-width: 620px; font-size: 17px; line-height: 1.6; color: #55606f; } .dark .cth-lead { color: #9aa6b6; } .cth-hero-actions { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ── Buttons ─────────────────────────────────────────────────────── */ .cth-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; line-height: 1; padding: 13px 22px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; } .cth-btn-primary { background: var(--grn); color: #fff; } .cth-btn-primary:hover { background: var(--grn-600); } .cth-btn-primary:active { transform: translateY(1px); } .cth-btn-ghost { background: transparent; color: var(--ink); border-color: var(--bd); } .cth-btn-ghost:hover { border-color: var(--grn); color: var(--grn); } .cth-btn svg { width: 16px; height: 16px; } /* ── Trust badges row ────────────────────────────────────────────── */ .cth-badges { margin-top: 26px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .cth-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bd); background: #fff; } .dark .cth-badge { background: var(--soft); } .cth-badge svg { width: 15px; height: 15px; } /* ── Section scaffolding ─────────────────────────────────────────── */ .cth-sec { padding: 30px 0; } .cth-sec-head { margin-bottom: 22px; } .cth-sec-head h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); } .cth-sec-head p { margin: 8px 0 0; font-size: 15px; color: #64748b; } .dark .cth-sec-head p { color: #94a3b8; } /* ── Document grid ───────────────────────────────────────────────── */ .cth-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .cth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .cth-grid { grid-template-columns: 1fr; } } .cth-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--bd); transition: border-color .15s, transform .15s, box-shadow .15s; } .dark .cth-card { background: #0f1420; } .cth-card:hover { border-color: var(--grn); transform: translateY(-3px); box-shadow: 0 16px 40px -26px rgba(8,160,90,.5); } .cth-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cth-ico { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; color: var(--grn); background: var(--grn-tint); } .cth-ico svg { width: 23px; height: 23px; } .cth-chip { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--grn); background: var(--grn-tint); padding: 5px 10px; border-radius: 999px; } .cth-name { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); font-family: 'Space Grotesk', Inter, system-ui, sans-serif; } .cth-desc { font-size: 14px; line-height: 1.6; color: #64748b; margin: 0; } .dark .cth-desc { color: #94a3b8; } .cth-card-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--bd); } .cth-rel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; } .cth-rel svg { width: 14px; height: 14px; } .cth-rel.is-auto { color: var(--grn); } .cth-rel.is-gate { color: #b0810f; } .dark .cth-rel.is-gate { color: #eab308; } .cth-req { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--grn); background: none; border: 0; cursor: pointer; padding: 4px 0; } .cth-req:hover { text-decoration: underline; } .cth-req svg { width: 14px; height: 14px; } .cth-updated { font-size: 11px; color: #94a3b8; } /* ── How it works ────────────────────────────────────────────────── */ .cth-steps { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 760px) { .cth-steps { grid-template-columns: 1fr; } } .cth-step { padding: 22px; border-radius: 16px; border: 1px solid var(--bd); background: #fff; } .dark .cth-step { background: #0f1420; } .cth-step-n { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--grn); color: #fff; font-weight: 800; font-size: 15px; } .cth-step h3 { margin: 14px 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); } .cth-step p { margin: 0; font-size: 14px; line-height: 1.6; color: #64748b; } .dark .cth-step p { color: #94a3b8; } /* ── Empty state ─────────────────────────────────────────────────── */ .cth-empty { padding: 48px 24px; text-align: center; border: 1px dashed var(--bd); border-radius: 18px; } .cth-empty strong { display: block; font-size: 16px; color: var(--ink); } .cth-empty p { margin: 6px 0 0; font-size: 14px; color: #64748b; } /* ── Success panel ───────────────────────────────────────────────── */ .cth-success { max-width: 640px; margin: 0 auto; padding: 30px; text-align: center; background: #fff; border: 1px solid var(--bd); border-radius: 20px; } .dark .cth-success { background: #0f1420; } .cth-success-ico { width: 60px; height: 60px; margin: 0 auto; border-radius: 17px; display: grid; place-items: center; color: var(--grn); background: var(--grn-tint); } .cth-success-ico svg { width: 30px; height: 30px; } .cth-success h2 { margin: 18px 0 0; font-size: 24px; font-weight: 800; color: var(--ink); } .cth-success p { margin: 12px auto 0; max-width: 460px; font-size: 15px; line-height: 1.6; color: #64748b; } .dark .cth-success p { color: #94a3b8; } /* ── Modal ───────────────────────────────────────────────────────── */ .cth-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; background: rgba(10,14,26,.55); backdrop-filter: blur(4px); } .cth-modal.is-open { display: flex; } .cth-dialog { position: relative; width: 100%; max-width: 560px; margin: auto; background: #fff; border: 1px solid var(--bd); border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(10,14,26,.55); animation: cth-pop .18s ease; } .dark .cth-dialog { background: #0f1420; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); } @keyframes cth-pop { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } } .cth-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 26px 28px 0; } .cth-dialog-head h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); } .cth-dialog-head p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #64748b; } .dark .cth-dialog-head p { color: #94a3b8; } .cth-close { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; color: var(--ink); background: var(--soft); border: 1px solid var(--bd); transition: border-color .15s, color .15s; } .cth-close:hover { border-color: var(--grn); color: var(--grn); } .cth-close svg { width: 18px; height: 18px; } .cth-dialog-body { padding: 20px 28px 28px; } /* Form rhythm inside the modal (reuses .cp-input/.cp-label/etc from landing.css) */ .cth-field { margin-bottom: 16px; } .cth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 480px) { .cth-row { grid-template-columns: 1fr; gap: 0; } .cth-row > * { margin-bottom: 16px; } } .cth-note { margin: 4px 0 0; font-size: 12px; line-height: 1.55; color: #94a3b8; } /* Native