/* ===== Harbinger auth skin — active only when ===== */ /* STEP-INDEPENDENT: works on the email step AND the password step. The wordmark */ /* is a card ::before banner (not a child slot); Twenty's logo / "Welcome" heading / */ /* legal are hidden by skin.js via [data-hbg-hide] (never anything with a form field).*/ html.hbg-auth body { background: #05070c url("/brand/hero.png?v=2") center / cover no-repeat fixed !important; } /* reveal the hero: transparent the app-background wrappers (structural levels 1-5) */ html.hbg-auth #root, html.hbg-auth #root > div, html.hbg-auth #root > div > div, html.hbg-auth #root > div > div > div, html.hbg-auth #root > div > div > div > div { background-color: transparent !important; } /* the card = the auth content container: white, centered, hugs content */ html.hbg-auth #root [class*="_content_"] { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 10 !important; width: 360px !important; max-width: 90vw !important; min-height: 0 !important; height: auto !important; padding: 30px 34px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background-color: #ffffff !important; border-radius: 12px !important; box-shadow: 0 18px 55px rgba(0, 0, 0, 0.30) !important; } /* Harbinger wordmark banner on top of every auth step (does not consume a slot) */ html.hbg-auth #root [class*="_content_"]::before { content: "" !important; display: block !important; width: 100% !important; height: 54px !important; flex: 0 0 auto !important; background: url("/brand/wordmark.png?v=2") center / contain no-repeat !important; margin-bottom: 12px !important; } /* children flow normally inside the card (native Twenty form styling untouched) */ html.hbg-auth #root [class*="_content_"] > div { background: transparent !important; border: none !important; position: static !important; box-shadow: none !important; width: 100% !important; margin: 0 !important; height: auto !important; } /* skin.js flags the Twenty logo block / "Welcome…" heading / legal block */ html.hbg-auth [data-hbg-hide] { display: none !important; } html.hbg-auth a[href*="twenty.com"] { display: none !important; } /* ── FIX 2026-08-04: the rules above made the auth form unusable ────────────── 1) `border:none` on every direct child div also stripped the EMAIL/PASSWORD field borders -> invisible inputs on a white card (users could not see where to type). Restore a visible field border/background. 2) skin.js only hides Twenty logo blocks that contain no form control, so on some steps Twenty logo survived NEXT TO the ::before wordmark = 2 logos. Hide any inside the auth card outright; the wordmark is a ::before, so it is unaffected. */ html.hbg-auth #root [class*="_content_"] img { display: none !important; } html.hbg-auth #root [class*="_content_"] input { border: 1px solid #d4d4d4 !important; background: #ffffff !important; border-radius: 8px !important; padding: 8px 10px !important; width: 100% !important; box-sizing: border-box !important; color: #111 !important; } html.hbg-auth #root [class*="_content_"] input:focus { border-color: #b8912f !important; outline: none !important; }