/* ── Terminal-Window Auth Design ────────────────────────────────────────── Replaces the glassmorphism login/signup restyle (commits 2d1e3a3/b86f725) site-wide. Shared by the standalone pages (account_login.html, account_signup.html) AND the nav-triggered inline modal in base.html (#rd-auth-modal). One card, three modes (login / signup / forgot), switched client-side by website/js/terminal-auth.js — never a full page navigation. Class prefix: rd-term-. Brand cyan accent #06b6d4 hardcoded (matches the pricing cards elsewhere on the site) — no multi-color theme switcher. Monospace stack loaded via Google Fonts in (see base.html / account_login.html / account_signup.html tags). ────────────────────────────────────────────────────────────────────── */ :root{ --rd-term-accent:#06b6d4; --rd-term-accent-dim:rgba(6,182,212,.2); --rd-term-bg:#0c0c0d; --rd-term-border:rgba(255,255,255,.09); --rd-term-font:'JetBrains Mono','IBM Plex Mono','Courier New',monospace; } /* Page wrapper — used only by the two standalone pages. Normal document flow (NOT position:fixed/100vh-locked) so the site header/footer stay reachable above/below via ordinary scroll — required constraint. */ .rd-term-page{ min-height:calc(100vh - 200px); display:flex;align-items:center;justify-content:center; padding:48px 16px;box-sizing:border-box; position:relative; background:radial-gradient(circle at 50% 34%, rgba(6,182,212,.14) 0%, rgba(6,182,212,0) 60%), #0a0a0a; } /* Modal overlay — mobile: full-screen dark backdrop centered card. Desktop (>=1024px): transparent backdrop, dropdown anchored top-right near the nav "Sign In"/"Create Account" links (matches the prior glassmorphism modal's positioning behavior exactly). */ .rd-term-overlay{ position:fixed;inset:0;z-index:9997; display:flex;align-items:center;justify-content:center; padding:16px;background:rgba(0,0,0,.75); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); box-sizing:border-box; } .rd-term-overlay.hidden{display:none} @media (min-width:1024px){ .rd-term-overlay{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;align-items:flex-start;justify-content:flex-end;padding:70px 24px 16px 16px} } /* Mobile stays 320px single-column (iOS-zoom-safe, no horizontal overflow). On wider viewports the card grows so the (now 6-field) signup form can lay out two-up and read shorter/wider instead of a cramped tall stack. Desktop dropdown parity: at >=1024px the overlay anchors top-right with 24px gutter, so 480px + 24px stays comfortably on-screen. */ .rd-term-wrap{width:100%;max-width:320px;box-sizing:border-box;position:relative} @media (min-width:600px){ .rd-term-wrap{max-width:440px} } @media (min-width:1024px){ .rd-term-wrap{max-width:480px} } /* ── The terminal card itself ── */ .rd-term-card{ width:100%; background:var(--rd-term-bg); border:1px solid var(--rd-term-border); border-radius:10px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); position:relative;overflow:hidden; box-sizing:border-box; font-family:var(--rd-term-font); color:#eaeaea; max-height:calc(100vh - 32px);overflow-y:auto; } .rd-term-card *{box-sizing:border-box} @media (min-width:1024px){ .rd-term-card{animation:rdTermDropIn .18s ease-out} } @keyframes rdTermDropIn{ from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} } .rd-term-close{ position:absolute;top:6px;right:8px;z-index:3;background:none;border:none; color:#5c5c5c;font-size:22px;line-height:1;cursor:pointer;padding:4px; min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center; } .rd-term-close:hover{color:#eaeaea} /* macOS-style title bar */ .rd-term-titlebar{ display:flex;align-items:center;gap:6px; padding:10px 12px;background:#111112;border-bottom:1px solid var(--rd-term-border); position:relative; } .rd-term-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0} .rd-term-dot-red{background:#ff5f57} .rd-term-dot-yellow{background:#febc2e} .rd-term-dot-green{background:#28c840} .rd-term-titlebar-text{ position:absolute;left:0;right:0;text-align:center; font-size:11px;color:#6f6f6f;pointer-events:none; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 70px; } /* CRT scanline overlay — decorative polish, very low opacity */ .rd-term-scanlines{ position:absolute;inset:0;pointer-events:none;z-index:2; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 3px); mix-blend-mode:overlay; opacity:.5; } .rd-term-body{padding:15px 18px 16px;position:relative;z-index:1} @media (min-width:480px){ .rd-term-body{padding:16px 20px 16px} } @media (min-width:768px){ .rd-term-body{padding:18px 24px 18px} } .rd-term-breadcrumb{margin:0 0 8px;font-size:11px;color:#5c5c5c;letter-spacing:.2px} .rd-term-accent{color:var(--rd-term-accent)} .rd-term-title{margin:0 0 4px;font-size:19px;font-weight:700;color:#eaeaea;line-height:1.2} @media (min-width:480px){ .rd-term-title{font-size:21px} } .rd-term-subtitle{margin:0 0 11px;font-size:11px;color:#6f6f6f;font-family:var(--rd-term-font)} .rd-term-form{display:flex;flex-direction:column;gap:9px} .rd-term-form[hidden]{display:none} .rd-term-row{display:flex;gap:8px} .rd-term-row .rd-term-field{flex:1;min-width:0} /* ── Signup two-up grid (desktop/tablet only) ────────────────────────────── The signup form carries 6 fields; stacked single-column it renders very tall on a PC. From 600px up we switch JUST the signup form to a 2-col grid so it reads wider + shorter. Mobile (<600px) is untouched: the form stays a flex column in natural DOM order (no `order` set below that breakpoint), so the 320px layout / tab order is exactly as before. The DOM order is First+Last(row), Business, Email, Phone, Password, Confirm. We want the VISUAL pairing Business|Phone and Password|Confirm with Email full-width between them, so `order` reflows the auto-placed items into: [ First | Last ] (full-width .rd-term-row, its own internal flex 2-up) [ Business | Phone ] [ Email full-width ] [ Password | Confirm ] [ error / log / submit — each full-width ] Login form is deliberately excluded — 2 fields read fine single-column. Confirm-password + show/hide toggles are pure JS on the same inputs; this is a visual reflow only, so match-validation keeps working untouched. */ @media (min-width:600px){ /* :not([hidden]) guard is required — without it this display:grid would win over the earlier `.rd-term-form[hidden]{display:none}` (equal specificity, later source order) and reveal the signup form on the login page / the login-default modal where it must stay hidden. */ .rd-term-form[data-term-form="signup"]:not([hidden]){ display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; align-items:start; } /* full-width rows span both columns */ .rd-term-form[data-term-form="signup"] > .rd-term-row, .rd-term-form[data-term-form="signup"] > .rd-term-field:has(#rd-term-email-signup), .rd-term-form[data-term-form="signup"] > .rd-term-field-error, .rd-term-form[data-term-form="signup"] > .rd-term-log, .rd-term-form[data-term-form="signup"] > .rd-term-submit{ grid-column:1 / -1 } /* order reflow so Business pairs with Phone and Password with Confirm */ .rd-term-form[data-term-form="signup"] > .rd-term-row{order:1} .rd-term-form[data-term-form="signup"] > .rd-term-field:has(#rd-term-business-signup){order:2} .rd-term-form[data-term-form="signup"] > .rd-term-field:has(#rd-term-phone-signup){order:3} .rd-term-form[data-term-form="signup"] > .rd-term-field:has(#rd-term-email-signup){order:4} .rd-term-form[data-term-form="signup"] > .rd-term-field:has(#rd-term-password-signup){order:5} .rd-term-form[data-term-form="signup"] > .rd-term-field:has(#rd-term-confirm-signup){order:6} .rd-term-form[data-term-form="signup"] > .rd-term-field-error{order:7} .rd-term-form[data-term-form="signup"] > .rd-term-log{order:8} .rd-term-form[data-term-form="signup"] > .rd-term-submit{order:9} /* keep the two paired input rows aligned even if the BUSINESS NAME label (with its "(optional)" hint) wraps to a second line on narrower columns */ .rd-term-form[data-term-form="signup"] .rd-term-label-row{min-height:16px} } .rd-term-field{display:flex;flex-direction:column} .rd-term-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px} .rd-term-label{ display:block;font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase; color:#7d7d7d; } .rd-term-label .rd-term-accent{margin-right:4px} /* Optional-field hint on the BUSINESS NAME label — visually de-emphasized so it reads as "not required" without breaking the terminal label rhythm. */ .rd-term-optional{color:#565656;text-transform:none;letter-spacing:.2px;font-weight:400} .rd-term-toggle-pw{ background:none;border:none;color:#6f6f6f;font-family:var(--rd-term-font); font-size:11px;letter-spacing:.5px;cursor:pointer;padding:4px 4px; min-height:44px;display:inline-flex;align-items:center; } .rd-term-toggle-pw:hover{color:var(--rd-term-accent)} .rd-term-field input{ width:100%;background:#111112;color:#eaeaea; border:1px solid var(--rd-term-border);border-radius:6px; /* font-size MUST stay 16px: anything smaller triggers iOS Safari auto-zoom on focus (documented ios-zoom-trigger pattern). Height trimmed via padding only, and min-height held at 44px to preserve the touch-target floor. */ padding:9px 12px;font-size:16px;font-family:var(--rd-term-font); min-height:44px;outline:none;caret-color:var(--rd-term-accent); box-shadow:0 0 0 0 transparent; transition:box-shadow .15s ease,border-color .15s ease; } .rd-term-field input::placeholder{color:#4a4a4a} .rd-term-field input:focus{border-color:var(--rd-term-accent);box-shadow:0 0 0 3px var(--rd-term-accent-dim)} .rd-term-field-error{ display:none;margin-top:6px;font-size:12px;color:#f87171; font-family:var(--rd-term-font); } .rd-term-field-error.rd-term-field-error--visible{display:block} .rd-term-field-error.rd-term-field-error--visible::before{content:"\2717 "} /* Top-of-card fallback banner (non-JS progressive enhancement + shared style) */ .rd-term-error{margin-bottom:16px} .rd-term-forgot-row{text-align:right;margin-top:-4px} .rd-term-forgot-row a{ color:#5c5c5c;text-decoration:none;font-size:11px;font-family:var(--rd-term-font); min-height:44px;display:inline-flex;align-items:center;padding:2px 2px; transition:color .15s ease; } .rd-term-forgot-row a:hover{color:var(--rd-term-accent)} .rd-term-submit{ display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:2px; background:var(--rd-term-accent);color:#07171b;border:none;border-radius:6px; font-family:var(--rd-term-font);font-weight:700;font-size:12px;letter-spacing:1.5px; text-transform:uppercase;cursor:pointer;transition:filter .15s ease,box-shadow .15s ease; } .rd-term-submit:hover{filter:brightness(1.12);box-shadow:0 0 24px rgba(6,182,212,.35)} .rd-term-submit:disabled{opacity:.6;cursor:not-allowed;filter:none;box-shadow:none} /* Decorative staged log-line block, shown only while a request is pending */ .rd-term-log{ margin-top:2px;padding:10px 12px;background:#111112;border:1px solid var(--rd-term-border); border-radius:6px;font-size:12px;color:#8f8f8f;line-height:1.7;font-family:var(--rd-term-font); } .rd-term-log[hidden]{display:none} .rd-term-log .rd-term-cursor{display:inline-block;width:7px;height:13px;background:var(--rd-term-accent);vertical-align:middle;animation:rdTermBlink 1s steps(1) infinite} @keyframes rdTermBlink{ 50%{opacity:0} } .rd-term-success{ margin-top:2px;padding:12px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.3); color:#9fe3f0;font-size:12px;line-height:1.6;font-family:var(--rd-term-font);border-radius:6px; } .rd-term-success[hidden]{display:none} .rd-term-divider{display:flex;align-items:center;gap:10px;margin:12px 0 10px} .rd-term-divider[hidden]{display:none} .rd-term-divider span{flex:1;height:1px;background:var(--rd-term-border)} .rd-term-divider p{margin:0;font-size:11px;color:#5c5c5c;letter-spacing:1.5px} .rd-term-google{ display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px; background:#111112;border:1px solid var(--rd-term-border);border-radius:6px;color:#d8d8d8; font-family:var(--rd-term-font);font-size:12px;text-decoration:none; transition:border-color .15s ease; } .rd-term-google[hidden]{display:none} .rd-term-google:hover{border-color:var(--rd-term-accent)} .rd-term-google svg{width:18px;height:18px;flex-shrink:0} .rd-term-footer{ margin-top:12px;padding-top:10px;border-top:1px solid var(--rd-term-border); text-align:center;font-size:12px;color:#6f6f6f;font-family:var(--rd-term-font); } .rd-term-footer a{color:var(--rd-term-accent);text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center;padding:2px 4px} .rd-term-footer a:hover{color:#eaeaea} @media (min-width:1024px){ /* Desktop dropdown parity with prior modal: tighten vertical rhythm slightly */ .rd-term-body{padding:18px 22px 16px} .rd-term-form{gap:9px} .rd-term-divider{margin:12px 0 9px} .rd-term-footer{margin-top:10px;padding-top:9px} }