/* ========================================================================= RTL Landing — auth + account + pricing-grid additions for v2.2.0 Loaded after styles.css (so the var tokens are available). Scoped to the 5 pages that need it: login, signup, account, org-admin, index. ========================================================================= */ /* ---------- Auth page wrapper ---------- */ .auth-page { padding-block: var(--space-12) var(--space-20); } .auth-header { text-align: center; margin-bottom: var(--space-8); } .auth-header h1 { margin-bottom: var(--space-3); } .auth-header p { color: var(--color-text-muted); margin: 0; } /* ---------- Auth form layout ---------- */ .auth-form { max-width: 420px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm); } .auth-form-inline { display: flex; flex-direction: row; align-items: flex-end; gap: var(--space-3); max-width: 600px; background: transparent; border: 0; padding: 0; box-shadow: none; } .auth-form-inline .auth-field { flex: 1; } @media (max-width: 560px) { .auth-form-inline { flex-direction: column; align-items: stretch; } } .auth-field { display: flex; flex-direction: column; gap: var(--space-1); } .auth-field span:first-child { font-weight: 600; font-size: 0.9375rem; color: var(--color-text); } .auth-field input { width: 100%; padding: var(--space-3); font-size: 1rem; font-family: inherit; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); min-height: 44px; } /* Inputs that contain pure data (email, password, URL, phone, number) are always logically LTR — they don't take Hebrew or Arabic content. Forcing dir:ltr + text-align:left here prevents the BiDi mess where typing "1.a2" on an RTL page renders visually as "a2.1" because the input inherits the RTL paragraph direction from . */ .auth-field input[type="email"], .auth-field input[type="password"], .auth-field input[type="url"], .auth-field input[type="tel"], .auth-field input[type="number"] { direction: ltr; text-align: left; } .auth-field input:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; border-color: var(--color-brand); } .auth-field small { color: var(--color-text-muted); font-size: 0.8125rem; margin-top: var(--space-1); } .auth-checkbox { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.9375rem; color: var(--color-text); cursor: pointer; } .auth-checkbox input { margin-top: 0.25em; } .auth-checkbox a { color: var(--color-brand); } .auth-divider { position: relative; text-align: center; color: var(--color-text-muted); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; margin-block: var(--space-2); } .auth-divider::before, .auth-divider::after { content: ""; position: absolute; top: 50%; width: calc(50% - 2.5em); height: 1px; background: var(--color-border); } .auth-divider::before { inset-inline-start: 0; } .auth-divider::after { inset-inline-end: 0; } .auth-divider span { background: var(--color-bg); padding-inline: var(--space-3); position: relative; } .auth-error { background: color-mix(in srgb, #dc2626 10%, transparent); color: #dc2626; border-radius: var(--radius); padding: var(--space-3) var(--space-4); font-size: 0.9375rem; line-height: 1.5; margin: 0; } :root[data-theme="dark"] .auth-error { color: #fca5a5; } .auth-message { background: color-mix(in srgb, #16a34a 10%, transparent); color: #15803d; border-radius: var(--radius); padding: var(--space-3) var(--space-4); font-size: 0.9375rem; margin: 0; } :root[data-theme="dark"] .auth-message { color: #86efac; } .auth-loading { text-align: center; color: var(--color-text-muted); padding: var(--space-12) 0; font-size: 1rem; } .auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); font-size: 0.9375rem; } .auth-links a { color: var(--color-text-muted); text-decoration: none; } .auth-links a:hover { color: var(--color-brand); text-decoration: underline; } .auth-actions { display: flex; flex-direction: column; gap: var(--space-3); max-width: 420px; margin-inline: auto; margin-top: var(--space-6); } /* ---------- Buttons added in v2.2.0 ---------- */ .btn-google { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); position: relative; padding-inline-start: var(--space-10); } .btn-google:hover { background: var(--color-surface-2); color: var(--color-text); } .btn-google::before { content: ""; position: absolute; inset-inline-start: var(--space-4); top: 50%; width: 18px; height: 18px; transform: translateY(-50%); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; } /* Used on the account page for "Log out" — text-only, low-emphasis. */ .btn-link { background: transparent; border-color: transparent; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; min-height: 36px; padding: var(--space-2) var(--space-3); } .btn-link:hover { color: var(--color-text); background: transparent; } /* ---------- Pricing grid (2 cards on home page) ---------- */ .price-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 920px; margin-inline: auto; margin-bottom: var(--space-6); } /* In a grid context, drop the centered max-width that the single-card layout used. Each card fills its grid cell. */ .price-grid .price-card { max-width: none; margin-inline: 0; } .price-card-title { font-size: 1.125rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-3); } /* Team card — slightly less prominent than the primary "Individual" card. */ .price-card-team { border-color: var(--color-border); box-shadow: var(--shadow-sm); } .price-period { font-size: 0.5em; color: var(--color-text-muted); font-weight: 600; margin-inline-start: 0.15em; } .price-features { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-6); text-align: start; display: flex; flex-direction: column; gap: var(--space-2); } .price-features li { position: relative; padding-inline-start: var(--space-6); color: var(--color-text); font-size: 0.95rem; line-height: 1.45; } .price-features li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--color-brand); font-weight: 700; } /* ---------- Account page ---------- */ .account-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-6); padding: var(--space-5) var(--space-6); background: var(--color-surface); border-inline-start: 4px solid var(--color-brand); border-radius: var(--radius); font-size: 0.9375rem; max-width: 520px; margin-inline: auto; } .account-meta dt { margin: 0; font-weight: 600; color: var(--color-text-muted); } .account-meta dd { margin: 0; color: var(--color-text); word-break: break-word; } @media (max-width: 540px) { .account-meta { grid-template-columns: 1fr; gap: 0; padding: var(--space-4); } .account-meta dt { margin-top: var(--space-3); } .account-meta dt:first-child { margin-top: 0; } } /* ---------- Org admin members table ---------- */ .org-members-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin-top: var(--space-3); } .org-members-table thead { background: var(--color-surface); } .org-members-table th, .org-members-table td { padding: var(--space-3) var(--space-4); text-align: start; border-bottom: 1px solid var(--color-border); } .org-members-table th { font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .org-members-table tbody tr:hover { background: var(--color-surface); } @media (max-width: 600px) { .org-members-table { display: block; overflow-x: auto; white-space: nowrap; } }