/** * clerk_login — Eve-branded custom sign-in, pixel-aligned to the approved design. * Barlow Condensed 800 (uppercase) + Source Sans 3. Self-contained: defines its * own tokens (no shared theme-variables.css dependency). ONE theme at a time, * keyed off :root[data-theme]. Default (no attribute) follows the system * preference via @media (prefers-color-scheme); login.js stamps data-theme on * from localStorage('theme') / . * Dark: white text + electric #50FB60. Light: jungle text + deep-green #04794E. * The RHS form is our OWN markup wired to Clerk's custom-flow API (no widget). */ /* Self-hosted brand fonts — served from assets_base/fonts/ (paths are relative to this stylesheet's URL, {prefix}/login/assets/login.css). No external request. font-display:OPTIONAL (not swap) is the cold-cache height-stability guard. Both faces are -ed in , so on a warm cache — and on most cold ones — they're ready within optional's short block period and paint from the very first frame. When a cold+slow load misses that window, the page renders once in the metric fallback ('Arial Narrow' / system-ui) and NEVER swaps for that pageview: no late webfont substitution means no reflow. This is what keeps `.stage` the SAME height from first paint through load — the earlier swap could re-wrap `.support`/`.pcap` and change block heights (fixed line-heights alone can't stop wrap-count changes, and the platform-variable fallbacks make per-font metric overrides unreliable, so optional is the robust choice). Trade-off: a rare slow cold load shows the fallback face; preload makes that uncommon and it self-corrects on the next (now-cached) view. */ @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:optional;src:url(fonts/barlow-condensed-800.woff2) format('woff2');} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:optional;src:url(fonts/source-sans-3.woff2) format('woff2');} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:optional;src:url(fonts/source-sans-3.woff2) format('woff2');} :root{ --electric:#50FB60;--electric-ink:#0E2B2E; --mat-a:#0A1416;--mat-b:#08100E;--stage:#0E2B2E;--stage-border:rgba(255,255,255,.08);--divider:rgba(255,255,255,.07); --ink:#FFFFFF;--ink-muted:#9FB6B0;--ink-faint:rgba(159,182,176,.55);--key:#50FB60; --field-bg:rgba(255,255,255,.05);--field-border:rgba(255,255,255,.15);--field-hover:rgba(80,251,96,.5);--line:rgba(255,255,255,.12); --dot:rgba(255,255,255,.05);--glow:rgba(80,251,96,.10); --chrome-bg:rgba(255,255,255,.08);--chrome-border:rgba(255,255,255,.14);--chrome-ink:#dfe9d6; } @media (prefers-color-scheme: light){:root{ --mat-a:#E7EEE9;--mat-b:#DCE6DF;--stage:#FFFFFF;--stage-border:#E2E8E7;--divider:#ECF0ED; --ink:#0E2B2E;--ink-muted:#5E7A77;--ink-faint:#9DB3B0;--key:#04794E; --field-bg:#FFFFFF;--field-border:#CBD5D4;--field-hover:rgba(4,121,78,.5);--line:#E2E8E7; --dot:rgba(14,43,46,.05);--glow:rgba(4,121,78,.05);--chrome-bg:rgba(14,43,46,.05);--chrome-border:rgba(14,43,46,.12);--chrome-ink:#3C5450; }} :root[data-theme="dark"]{--mat-a:#0A1416;--mat-b:#08100E;--stage:#0E2B2E;--stage-border:rgba(255,255,255,.08);--divider:rgba(255,255,255,.07);--ink:#FFFFFF;--ink-muted:#9FB6B0;--ink-faint:rgba(159,182,176,.55);--key:#50FB60;--field-bg:rgba(255,255,255,.05);--field-border:rgba(255,255,255,.15);--field-hover:rgba(80,251,96,.5);--line:rgba(255,255,255,.12);--dot:rgba(255,255,255,.05);--glow:rgba(80,251,96,.10);--chrome-bg:rgba(255,255,255,.08);--chrome-border:rgba(255,255,255,.14);--chrome-ink:#dfe9d6;} :root[data-theme="light"]{--mat-a:#E7EEE9;--mat-b:#DCE6DF;--stage:#FFFFFF;--stage-border:#E2E8E7;--divider:#ECF0ED;--ink:#0E2B2E;--ink-muted:#5E7A77;--ink-faint:#9DB3B0;--key:#04794E;--field-bg:#FFFFFF;--field-border:#CBD5D4;--field-hover:rgba(4,121,78,.5);--line:#E2E8E7;--dot:rgba(14,43,46,.05);--glow:rgba(4,121,78,.05);--chrome-bg:rgba(14,43,46,.05);--chrome-border:rgba(14,43,46,.12);--chrome-ink:#3C5450;} *{box-sizing:border-box;}html,body{height:100%;} body{margin:0;min-height:100vh;color:var(--ink);font-family:'Source Sans 3',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased; background:radial-gradient(60% 50% at 50% 40%,var(--glow),transparent 62%),linear-gradient(160deg,var(--mat-a),var(--mat-b));} /* Centering lives on .page, NOT : clerk-js appends nodes to after load (dev-mode badge, component/CAPTCHA root). If were the centering grid, that extra child turns 1 row into 2 and the stage re-centres ~36px up on reveal. A wrapper that holds only the stage/solo is immune to body siblings. */ .page{min-height:100vh;display:grid;place-items:center;padding:clamp(26px,6.2vmin,84px);} body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(var(--dot) 1.2px,transparent 1.2px);background-size:32px 32px;-webkit-mask-image:radial-gradient(90% 90% at 50% 50%,#000,transparent 92%);mask-image:radial-gradient(90% 90% at 50% 50%,#000,transparent 92%);} .condensed{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;line-height:1;} .tag{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.26em;font-size:13px;line-height:1;} .g{color:var(--key);} /* framed picture (persona splits) */ .stage{position:relative;width:100%;max-width:1200px;min-height:min(660px,calc(100vh - clamp(52px,12.4vmin,168px)));display:grid;grid-template-columns:1fr 1fr;background:var(--stage);border:1px solid var(--stage-border);border-radius:24px;overflow:hidden;box-shadow:0 40px 100px -50px rgba(0,0,0,.7);} @media (max-width:900px){.stage{grid-template-columns:1fr;min-height:0;}} .brand{display:flex;align-items:center;padding:clamp(34px,3.6vw,60px);} .pitch{display:flex;flex-direction:column;gap:22px;width:100%;max-width:500px;} .brand-logo{color:var(--ink);margin-bottom:12px;}.brand-logo svg{height:32px;width:auto;display:block;} .eyebrow{color:var(--key);} .headline{margin:0;display:flex;flex-direction:column;font-size:clamp(38px,3.9vw,56px);letter-spacing:-.01em;line-height:.96;} .headline .line{display:block;} .support{margin:0;max-width:31rem;color:var(--ink-muted);font-size:16px;line-height:1.55;text-wrap:balance;} .lifecycle{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:clamp(17px,1.5vw,21px);margin-top:2px;} .lifecycle .step{color:var(--ink);}.lifecycle .arw{color:var(--key);display:inline-flex;align-items:center;}.lifecycle .arw svg{width:22px;height:16px;} .auth-stage{display:flex;align-items:center;justify-content:center;padding:clamp(34px,3.4vw,56px);border-left:1px solid var(--divider);} @media (max-width:900px){.auth-stage{border-left:none;border-top:1px solid var(--divider);}} /* ===== Mobile (≤768px): framed split personas degrade to the SIMPLE centred card. The brand pitch + lifecycle + proof is a DESKTOP-ONLY enhancement; on a phone the split overflows and gets clipped by .stage{overflow:hidden}, so we hide it and present exactly the minimal/solo shape — the Eve logo above a self-contained sign-in card on the page gradient. No horizontal overflow at 320–430px, both themes. (768–900px keeps the stacked framed layout above; this block must follow it so its `border` shorthand wins over that border-top.) === */ @media (max-width:768px){ .stage{ display:flex;flex-direction:column;align-items:center;gap:24px; width:100%;max-width:400px;min-height:0; background:none;border:0;border-radius:0;box-shadow:none;overflow:visible; } /* Brand collapses to just the centred Eve logo — its only mobile survivor. */ .brand{width:100%;padding:0;justify-content:center;} .pitch{align-items:center;gap:0;max-width:none;} .brand-logo{margin:0;} .brand-logo svg{height:40px;} /* match .solo-brand */ .eyebrow,.headline,.support,.lifecycle,.proofcred{display:none;} /* The sign-in panel becomes the solo card: self-contained, no split divider. */ .auth-stage{ width:100%;padding:34px;border:1px solid var(--stage-border);border-radius:20px; background:var(--stage);box-shadow:0 40px 100px -50px rgba(0,0,0,.65); } .auth-stage .form{max-width:none;} } /* centred solo */ .solo{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:400px;} .solo-brand{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ink);} .solo-brand svg{height:40px;width:auto;display:block;} .badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--field-bg);border:1px solid var(--field-border);color:var(--ink-muted);letter-spacing:.2em;} .badge b{color:var(--key);font-weight:800;} .card{width:100%;background:var(--stage);border:1px solid var(--stage-border);border-radius:20px;padding:34px;box-shadow:0 40px 100px -50px rgba(0,0,0,.65);} /* shared form */ .form{width:100%;max-width:320px;display:flex;flex-direction:column;gap:15px;} .card .form{max-width:none;} .form-head{text-align:center;display:flex;flex-direction:column;gap:6px;margin-bottom:4px;} .form-head h1{margin:0;font-size:26px;letter-spacing:.02em;} .form-head p{margin:0;color:var(--ink-muted);font-size:14.5px;} .oauth{display:flex;flex-direction:column;gap:10px;} /* Loading state: a centred spinner overlays the sign-in controls while Clerk loads and social providers are resolved. The controls stay laid out but visibility:hidden (NOT display:none), so .signin-body reserves the final content height — the card is the SAME size loading vs ready (no resize/jump in the common b2b Google+Microsoft+email case). login.js drops .is-loading to reveal the fully-resolved form in one step. */ .signin-body{position:relative;display:flex;flex-direction:column;gap:15px;} .form-loading{display:none;} .form.is-loading .form-loading{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;} .form.is-loading .signin-body>*:not(.form-loading){visibility:hidden;} .spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--field-border);border-top-color:var(--electric);animation:eve-spin .7s linear infinite;} @keyframes eve-spin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion: reduce){.spinner{animation-duration:1.4s;}} /* Redirecting veil: opaque full-page cover shown on a social-provider click so the page never flashes the proof panel during Clerk's async redirect window. Uses the page background so it reads as a clean "handing off" state, not a modal. */ .redirect-veil{position:fixed;inset:0;z-index:1000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg,var(--stage));color:var(--ink);} .redirect-veil:not([hidden]){display:flex;} .redirect-veil-msg{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:16px;color:var(--ink-muted,var(--ink));} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .oauth button{font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 16px;border-radius:999px;cursor:pointer;background:var(--field-bg);border:1px solid var(--field-border);transition:border-color .16s,transform .1s;} .oauth button:hover{border-color:var(--field-hover);}.oauth button:active{transform:translateY(1px);} .oauth button svg{width:18px;height:18px;display:block;} /* Social-set gating: audience picks the b2b (Google+Microsoft) or b2c (Google+Apple) set; login.js additionally hides any provider not enabled on the Clerk instance, and sets body[data-social="off"] when none remain. */ .oauth .b2b-only,.oauth .b2c-only{display:none;} body[data-audience="b2b"] .oauth .b2b-only{display:flex;} body[data-audience="b2c"] .oauth .b2c-only{display:flex;} .oauth button[hidden]{display:none;} body[data-social="off"] .oauth,body[data-social="off"] .divider{display:none;} .divider{display:flex;align-items:center;gap:14px;color:var(--ink-faint);} .divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--line);} .divider span{letter-spacing:.3em;font-size:11px;} .field{display:flex;flex-direction:column;gap:8px;} .field[hidden]{display:none;} .field label{color:var(--ink-muted);letter-spacing:.24em;font-size:11px;} .field input{font-family:inherit;font-size:15px;color:var(--ink);padding:11px 14px;border-radius:8px;background:var(--field-bg);border:1px solid var(--field-border);} .field input::placeholder{color:var(--ink-faint);} .field input:focus{outline:none;border-color:var(--field-hover);box-shadow:0 0 0 3px rgba(80,251,96,.16);} .btn-primary{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:17px;color:var(--electric-ink);background:var(--electric);border:1px solid var(--electric);border-radius:999px;padding:13px 18px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:filter .16s,transform .1s;} .btn-primary svg{width:16px;height:16px;}.btn-primary:hover{filter:brightness(1.06);}.btn-primary:active{transform:translateY(1px);} .btn-primary[disabled]{opacity:.6;cursor:default;} /* Passkey / Face ID — subtle secondary action beneath the primary CTA. Only surfaced by login.js when the Clerk instance has passkeys enabled and the browser supports WebAuthn; `hidden` (display:none) until then. */ .btn-passkey{font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-muted);background:transparent;border:0;border-radius:999px;padding:4px 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin:-4px auto 0;transition:color .16s;} .btn-passkey svg{width:16px;height:16px;display:block;color:var(--key);} .btn-passkey:hover{color:var(--ink);} .btn-passkey[hidden]{display:none;} .consent{display:flex;align-items:flex-start;gap:9px;cursor:pointer;color:var(--ink-muted);font-size:12.5px;line-height:1.4;text-align:left;} .consent input{position:absolute;opacity:0;width:0;height:0;} .consent .cbox{flex:0 0 auto;width:17px;height:17px;border-radius:5px;border:1px solid var(--field-border);background:var(--field-bg);margin-top:1px;position:relative;transition:.15s;} .consent input:checked + .cbox{background:var(--electric);border-color:var(--electric);} .consent input:checked + .cbox::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid var(--electric-ink);border-width:0 2px 2px 0;transform:rotate(45deg);} .consent input:focus + .cbox{box-shadow:0 0 0 3px rgba(80,251,96,.2);} .consent a{color:var(--key);text-decoration:none;}.consent a:hover{text-decoration:underline;}.consent.needs{color:#ff9a9a;}.consent.needs .cbox{border-color:#ff8080;box-shadow:0 0 0 3px rgba(255,120,120,.2);} .alt{margin:0;text-align:center;color:var(--ink-muted);font-size:14px;} .alt a{color:var(--key);text-decoration:none;font-weight:600;}.alt a:hover{text-decoration:underline;} /* audience gates the invite/create-account line, mirroring the oauth set. */ .alt .aud-b2b,.alt .aud-b2c{display:none;} body[data-audience="b2b"] .alt .aud-b2b{display:inline;} body[data-audience="b2c"] .alt .aud-b2c{display:inline;} .foot{display:flex;flex-direction:column;gap:9px;align-items:center;margin-top:2px;} .secured{display:flex;align-items:center;gap:7px;color:var(--ink-faint);font-size:12.5px;}.secured svg{width:13px;height:13px;} .legal{margin:0;text-align:center;color:var(--ink-faint);font-size:12px;line-height:1.5;} .legal a{color:var(--ink-muted);text-decoration:none;border-bottom:1px solid var(--line);}.legal a:hover{color:var(--ink);} /* inline error banner (bridge failure) + hard fallback (clerk-js unavailable) */ .signin-error{background:rgba(255,120,120,.12);border:1px solid rgba(255,120,120,.4);color:#ff9a9a;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.4;} :root[data-theme="light"] .signin-error{color:#b42318;background:rgba(180,35,24,.06);border-color:rgba(180,35,24,.3);} .clerk-fallback{background:var(--field-bg);border:1px solid var(--stage-border);border-radius:14px;padding:16px;text-align:center;color:var(--ink-muted);} .clerk-fallback-msg{margin:0;font-size:14px;line-height:1.5;} /* ===== Proof / credibility layer (persona.proof) ===== Every element here is static server-rendered content sized from first paint, so it never reflows. Numbers + marquee names use fixed line-heights, so a late webfont swap changes glyph width only — never the block's height (no shift). The marquee animates via transform (translateX), which never affects layout. */ .proofcred{display:flex;flex-direction:column;margin-top:4px;} .proofcred-eve{gap:20px;} .proofcred-partner{gap:14px;} .proofcred-driver{gap:18px;} .pstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 30px;padding-top:20px;border-top:1px solid var(--divider);} .pstat{display:flex;flex-direction:column;gap:3px;} .pstat .n{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(28px,2.7vw,36px);line-height:.95;color:var(--key);letter-spacing:.005em;font-variant-numeric:tabular-nums;} .pstat .l{font-size:12px;color:var(--ink-muted);letter-spacing:.01em;line-height:1.25;} .pmarq{display:flex;flex-direction:column;gap:12px;padding-top:18px;border-top:1px solid var(--divider);} .pmarq-label{color:var(--key);} .pmarq-track{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 90%,transparent);} .pmarq .tick{display:flex;width:max-content;animation:eve-proof-marquee 30s linear infinite;} .pmarq .grp{display:flex;align-items:center;gap:22px;padding-right:22px;} .pname{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:14px;line-height:1;color:var(--ink);opacity:.6;white-space:nowrap;} .pdot{color:var(--key);opacity:.5;font-size:12px;} .pmarq:hover .tick{animation-play-state:paused;} @keyframes eve-proof-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} .pcap{margin:0;font-size:13px;color:var(--ink-muted);line-height:1.45;} @media (prefers-reduced-motion:reduce){ .pmarq .tick{animation:none!important;flex-wrap:wrap;} .pmarq-track{-webkit-mask-image:none;mask-image:none;} .pmarq .grp:last-child{display:none;} .pmarq .grp{flex-wrap:wrap;gap:14px;} } /* chrome (theme toggle) */ .chrome{position:fixed;top:16px;right:16px;z-index:6;display:flex;gap:10px;align-items:center;} .toggle{width:34px;height:34px;border-radius:999px;cursor:pointer;display:grid;place-items:center;background:var(--chrome-bg);border:1px solid var(--chrome-border);color:var(--ink);} .toggle svg{width:16px;height:16px;}.toggle .sun{display:none;} :root[data-theme="light"] .toggle .moon{display:none;}:root[data-theme="light"] .toggle .sun{display:block;} :root[data-theme="dark"] .toggle .moon{display:block;}:root[data-theme="dark"] .toggle .sun{display:none;} /* ── Embedded Clerk component ────────────────────────────────────── * The RHS mounts Clerk's STANDARD (index.js → Clerk.mountSignIn). * These rules fit it into our branded panel: reset Clerk's card chrome and * mirror our own control styles (source: the .oauth/.field/.btn-primary rules * above) onto Clerk's elements. Class names are mapped in index.js * appearance.elements (CSP-safe: styling lives here, not inline). !important * beats Clerk's own .cl-* rules on the same node. */ .clerk-embed{width:100%;} .clerk-embed > .spinner{display:block;margin:40px auto;} .cl-embed-root{width:100%!important;} .cl-embed-card{width:100%!important;background:transparent!important;box-shadow:none!important;border:none!important;padding:0!important;margin:0!important;} .cl-embed-hide{display:none!important;} .clerk-embed .cl-card,.clerk-embed .cl-cardBox,.clerk-embed .cl-main{box-shadow:none!important;background:transparent!important;border:none!important;} .cl-social{font-family:inherit!important;font-size:15px!important;font-weight:600!important;color:var(--ink)!important;background:var(--field-bg)!important;border:1px solid var(--field-border)!important;border-radius:999px!important;padding:11px 16px!important;box-shadow:none!important;transition:border-color .16s!important;} .cl-social:hover{border-color:var(--field-hover)!important;} .cl-divline{background:var(--line)!important;} .cl-divtext{color:var(--ink-faint)!important;letter-spacing:.3em!important;font-size:11px!important;} .cl-input{font-family:inherit!important;font-size:15px!important;color:var(--ink)!important;background:var(--field-bg)!important;border:1px solid var(--field-border)!important;border-radius:8px!important;padding:11px 14px!important;box-shadow:none!important;} .cl-input:focus{outline:none!important;border-color:var(--field-hover)!important;box-shadow:0 0 0 3px rgba(80,251,96,.16)!important;} .cl-primary{font-family:'Barlow Condensed','Arial Narrow',sans-serif!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.14em!important;font-size:17px!important;color:var(--electric-ink)!important;background:var(--electric)!important;border:1px solid var(--electric)!important;border-radius:999px!important;padding:13px 18px!important;box-shadow:none!important;} .cl-primary:hover{filter:brightness(1.06)!important;} /* Already-signed-in choice panel (shown instead of a silent auto-bridge). */ .signedin{display:flex;flex-direction:column;gap:14px;width:100%;align-items:stretch;} .signedin-lead{color:var(--ink-muted);font-size:14px;line-height:1.5;margin:4px 0 2px;} .signedin-lead strong{color:var(--ink);} /* Request-access form: textarea matches the text inputs; branded success banner. */ .field textarea{font-family:inherit;font-size:15px;color:var(--ink);padding:11px 14px;border-radius:8px;background:var(--field-bg);border:1px solid var(--field-border);width:100%;box-sizing:border-box;resize:vertical;min-height:80px;} .field textarea:focus{outline:none;border-color:var(--field-hover);box-shadow:0 0 0 3px rgba(80,251,96,.16);} .field select{font-family:inherit;font-size:15px;color:var(--ink);padding:11px 14px;border-radius:8px;background:var(--field-bg);border:1px solid var(--field-border);width:100%;box-sizing:border-box;cursor:pointer;} .field select:focus{outline:none;border-color:var(--field-hover);box-shadow:0 0 0 3px rgba(80,251,96,.16);} .ra-success{background:var(--glow);border:1px solid var(--field-border);border-radius:10px;padding:12px 14px;} .ra-success-msg{color:var(--ink);font-size:14px;line-height:1.5;margin:0;}