/* ─── Base variables ─────────────────────────────────────────── */ :root { --bg: #0b0f16; --card: #111826; --text: #e8eefc; --muted: #a7b3d3; --accent: #6aa5ff; --border: rgba(255,255,255,0.08); --border-hover: rgba(255,255,255,0.18); } * { box-sizing: border-box; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background: radial-gradient(1100px 500px at 10% 0%, rgba(106,165,255,.20), transparent 60%), var(--bg); color: var(--text); } /* ─── Page layout ────────────────────────────────────────────── */ .container { max-width: 760px; padding: 48px 16px; margin: 0 auto; } h1 { margin: 0 0 10px; font-size: 34px; } .sub { margin: 0 0 20px; color: var(--muted); } .card { background: rgba(17,24,38,0.8); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); } .actions { display: flex; gap: 10px; margin-top: 12px; } button, a.secondary { appearance: none; border: 1px solid var(--border-hover); background: rgba(106,165,255,0.15); color: var(--text); padding: 10px 14px; border-radius: 12px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: border-color .15s, background .15s; } button:hover, a.secondary:hover { border-color: rgba(255,255,255,0.32); background: rgba(106,165,255,0.25); } button.secondary, a.secondary { background: rgba(255,255,255,0.06); } .status { margin: 12px 0 0; padding: 12px; background: rgba(0,0,0,0.3); border-radius: 12px; border: 1px solid var(--border); color: var(--muted); overflow-x: auto; font-size: 13px; } .joke { font-size: 22px; line-height: 1.35; margin: 0; } /* ─── SDK modal overlay ──────────────────────────────────────── */ /* * The @concordium/verification-web-ui SDK appends modal divs directly * to as static block elements. We intercept them with CSS to render * them as centred fixed overlays with a blurred backdrop. * * Targeted IDs: #landing-modal, #scan-modal, #returning-user-modal, * #processing-modal * We use :has(.desktop--modal-overlay) so styles only kick in once the SDK * has actually injected content (empty divs stay invisible). */ #landing-modal:has(.desktop--modal-container), #scan-modal:has(.desktop--modal-container), #returning-user-modal:has(.desktop--modal-container), #processing-modal:has(.desktop--modal-container) { position: fixed !important; inset: 0 !important; z-index: 9000 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(5, 8, 15, 0.80) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; padding: 16px !important; width: 100% !important; height: 100% !important; } /* When the SDK does inject a .desktop--modal-overlay wrapper, make it pass-through */ .desktop--modal-overlay { display: contents !important; } /* The card that holds the actual content */ .desktop--modal-container { background: linear-gradient(160deg, #16202e 0%, #0e1520 100%) !important; border: 1px solid rgba(106,165,255,0.20) !important; border-radius: 24px !important; padding: 36px 32px !important; max-width: 460px !important; width: 100% !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 24px 64px rgba(0,0,0,0.55), 0 0 80px rgba(106,165,255,0.06) !important; animation: sdk-modal-in .22s cubic-bezier(.16,1,.3,1) !important; position: relative !important; } @keyframes sdk-modal-in { from { opacity: 0; transform: scale(0.94) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Inner body — reset width so it doesn't stretch */ .desktop--modal-body { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; } /* ─── SDK element overrides ──────────────────────────────────── */ /* Logo / header icon area */ .desktop--modal-body > svg, .desktop--modal-body > img, .desktop--modal-body > div:first-child > svg, .desktop--modal-body > div:first-child > img { width: 52px !important; height: 52px !important; margin-bottom: 4px !important; } /* Title */ .desktop--landing-title, .desktop--scan-title, .desktop--processing-title, .desktop--returning-title { color: #e8eefc !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 !important; } /* Description text */ .desktop--landing-description, .desktop--scan-description, .desktop--processing-description, .desktop--returning-description { color: #a7b3d3 !important; font-size: 14px !important; line-height: 1.55 !important; margin: 0 !important; } /* Primary CTA button */ .desktop--primary-button, #start-verification-btn { background: linear-gradient(135deg, #3b7fe8, #5a9eff) !important; border: none !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; padding: 13px 22px !important; border-radius: 14px !important; cursor: pointer !important; transition: opacity .15s, transform .15s !important; width: 100% !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } .desktop--primary-button:hover, #start-verification-btn:hover { opacity: .9 !important; transform: translateY(-1px) !important; } /* Download / secondary link text */ .desktop--download-text, .desktop--secondary-text { color: #7a90b8 !important; font-size: 13px !important; margin: 0 !important; } .desktop--download-text a, .desktop--secondary-text a { color: var(--accent) !important; text-decoration: none !important; } .desktop--download-text a:hover, .desktop--secondary-text a:hover { text-decoration: underline !important; } /* QR code container */ .desktop--qr-container, [class*="qr"] canvas, [class*="qr"] img, [class*="qr"] svg { border-radius: 14px !important; background: #fff !important; padding: 12px !important; display: block !important; margin: 0 auto !important; max-width: 220px !important; } /* Back button */ .desktop--back-button, [class*="back-btn"], [id*="back-btn"] { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #a7b3d3 !important; border-radius: 10px !important; padding: 8px 14px !important; font-size: 13px !important; cursor: pointer !important; } /* Success / error state icons */ [class*="success"] svg, [class*="error"] svg { width: 56px !important; height: 56px !important; } /* Processing spinner or lock icon */ [class*="processing"] svg, [class*="lock"] svg { width: 48px !important; height: 48px !important; } /* Outline / secondary button (e.g. Disconnect) */ .desktop--outline-button, #disconnect-btn, #continue-btn { background: transparent !important; border: 1px solid rgba(106,165,255,0.35) !important; color: var(--accent) !important; font-size: 14px !important; font-weight: 500 !important; padding: 11px 20px !important; border-radius: 14px !important; cursor: pointer !important; width: 100% !important; text-align: center !important; transition: background .15s, border-color .15s !important; } .desktop--outline-button:hover, #disconnect-btn:hover, #continue-btn:hover { background: rgba(106,165,255,0.10) !important; border-color: rgba(106,165,255,0.55) !important; }