/* =================================================================== Auth pages (portal login) — shares the home page's light, modern look. The active portal's accent is passed in as the --portal CSS variable (set inline on ), so one stylesheet themes all three portals. =================================================================== */ :root { --portal: #16a34a; --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; } * { box-sizing: border-box; } body.auth-page { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--ink); background: radial-gradient(700px 340px at 12% -10%, color-mix(in srgb, var(--portal) 18%, transparent), transparent 70%), radial-gradient(700px 340px at 100% 110%, color-mix(in srgb, var(--portal) 14%, transparent), transparent 70%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); } /* Home link / logo top-left */ .auth-home { position: fixed; top: 1.25rem; inset-inline-start: 1.5rem; display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); font-weight: 700; } .auth-home .logo { width: 38px; height: 38px; border-radius: 10px; overflow: hidden; display: inline-flex; flex-shrink: 0; } .auth-home .logo img { width: 100%; height: 100%; display: block; } .auth-card { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 940px; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 35px 70px -30px rgba(15, 23, 42, 0.45); } /* ---- Brand panel ---- */ .auth-brand { padding: 3rem 2.75rem; color: #fff; position: relative; overflow: hidden; background: linear-gradient(150deg, var(--portal) 0%, color-mix(in srgb, var(--portal) 72%, #000) 100%); display: flex; flex-direction: column; justify-content: center; } .auth-brand::before { content: ""; position: absolute; top: -40%; inset-inline-end: -30%; width: 80%; height: 80%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%); } .auth-brand-icon { width: 76px; height: 76px; border-radius: 20px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 2.3rem; margin-bottom: 1.5rem; position: relative; } .auth-brand h1 { font-size: 1.9rem; font-weight: 800; margin: 0 0 0.5rem; position: relative; } .auth-brand p { opacity: 0.92; line-height: 1.6; margin: 0; position: relative; } .auth-features { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.25); position: relative; } .auth-feature { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; font-size: 0.92rem; } .auth-feature i { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; } /* ---- Form panel ---- */ .auth-form { padding: 3rem 2.75rem; display: flex; flex-direction: column; justify-content: center; } .auth-form-head { margin-bottom: 1.75rem; } .auth-form-head h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.35rem; } .auth-form-head p { color: var(--muted); margin: 0; font-size: 0.95rem; } .auth-label { font-weight: 600; color: #334155; margin-bottom: 0.4rem; display: block; font-size: 0.85rem; } .auth-field { margin-bottom: 1.1rem; } .auth-input-wrap { position: relative; } .auth-input-wrap .ico { position: absolute; inset-inline-start: 0.95rem; top: 50%; transform: translateY(-50%); color: #94a3b8; } .auth-input { width: 100%; padding: 0.8rem 1rem 0.8rem 2.7rem; border: 1.5px solid var(--line); border-radius: 11px; font-size: 0.98rem; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .auth-input:focus { outline: none; border-color: var(--portal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--portal) 16%, transparent); } [dir="rtl"] .auth-input { padding: 0.8rem 2.7rem 0.8rem 1rem; } .auth-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #475569; margin-bottom: 0.5rem; } .auth-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--portal); cursor: pointer; } .auth-btn { width: 100%; margin-top: 0.75rem; padding: 0.9rem; border: none; border-radius: 11px; cursor: pointer; color: #fff; font-size: 1rem; font-weight: 700; background: linear-gradient(135deg, var(--portal), color-mix(in srgb, var(--portal) 75%, #000)); transition: transform 0.15s ease, box-shadow 0.15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } .auth-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--portal) 70%, transparent); } .auth-alert { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 0.85rem 1rem; border-radius: 11px; margin-bottom: 1.1rem; font-size: 0.875rem; } .auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0 1rem; color: #94a3b8; font-size: 0.8rem; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .auth-switch { text-align: center; } .auth-switch a { color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 600; } .auth-switch a:hover { color: var(--portal); } .auth-register { text-align: center; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); } .auth-register a { color: var(--portal); text-decoration: none; font-weight: 700; } /* ---- Register extras (reused on the sign-up page) ---- */ .auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } .auth-select { width: 100%; padding: 0.8rem 2.7rem; border: 1.5px solid var(--line); border-radius: 11px; font-size: 0.98rem; background-color: #fff; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1.1rem; transition: border-color 0.18s ease, box-shadow 0.18s ease; } [dir="rtl"] .auth-select { background-position: left 0.9rem center; } .auth-select:focus { outline: none; border-color: var(--portal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--portal) 16%, transparent); } /* Business-type selector tiles (sign-up) */ .type-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } .type-tile { position: relative; cursor: pointer; margin: 0; } .type-tile input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .type-tile-inner { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 0.95rem 0.5rem; text-align: center; border: 1.5px solid var(--line); border-radius: 13px; background: #fff; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .type-tile-inner i { font-size: 1.55rem; } .type-tile-name { font-size: 0.82rem; font-weight: 700; color: #334155; } .type-tile:hover .type-tile-inner { transform: translateY(-2px); } .tt-farmer .type-tile-inner i { color: #16a34a; } .tt-buyer .type-tile-inner i { color: #2563eb; } .tt-pest .type-tile-inner i { color: #ea580c; } .tt-farmer input:checked + .type-tile-inner { border-color: #16a34a; background: rgba(22,163,74,0.08); box-shadow: 0 0 0 3px rgba(22,163,74,0.15); } .tt-buyer input:checked + .type-tile-inner { border-color: #2563eb; background: rgba(37,99,235,0.08); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } .tt-pest input:checked + .type-tile-inner { border-color: #ea580c; background: rgba(234,88,12,0.08); box-shadow: 0 0 0 3px rgba(234,88,12,0.15); } .type-tile input:focus-visible + .type-tile-inner { outline: 2px solid var(--portal); outline-offset: 2px; } .auth-pwd-toggle { position: absolute; inset-inline-end: 0.85rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: #94a3b8; cursor: pointer; } .pwd-criteria { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.75rem; margin: 0.55rem 0 0; padding: 0.7rem 0.85rem; background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; } .pwd-criteria li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: #64748b; transition: color 0.2s ease; } .pwd-criteria li i { font-size: 0.8rem; flex-shrink: 0; } .pwd-criteria li.met { color: #16a34a; } .pwd-match { font-size: 0.74rem; margin-top: 0.35rem; display: block; min-height: 1rem; } .pwd-match.ok { color: #16a34a; } .pwd-match.no { color: #dc2626; } .auth-validation { color: #dc2626; font-size: 0.74rem; margin-top: 0.25rem; display: block; } .auth-foot { text-align: center; margin-top: 1.4rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); } .auth-foot a { color: var(--portal); font-weight: 600; text-decoration: none; } .auth-foot .sep { color: var(--line); margin: 0 0.55rem; } /* Trial highlight in the brand panel */ .auth-trial { margin-top: 1.75rem; padding: 0.9rem 1.1rem; border-radius: 12px; background: rgba(255,255,255,0.15); position: relative; display: flex; align-items: center; gap: 0.7rem; } .auth-trial i { font-size: 1.4rem; } .auth-trial strong { display: block; font-size: 0.95rem; } .auth-trial span { font-size: 0.8rem; opacity: 0.9; } /* ---- Tablet & mobile ---- */ @media (max-width: 820px) { /* Stack the home link above the (now single-column) card. */ body.auth-page { flex-direction: column; justify-content: flex-start; padding: 1.25rem; } .auth-home { position: static; margin: 0 0 1.25rem; align-self: center; } .auth-card { grid-template-columns: 1fr; max-width: 520px; width: 100%; } .auth-brand { padding: 2rem; } /* Show a compact brand strip on mobile; hide the long feature list. */ .auth-features { display: none; } } @media (max-width: 480px) { body.auth-page { padding: 0.9rem; } .auth-brand { padding: 1.5rem; } .auth-brand h1 { font-size: 1.55rem; } .auth-brand-icon { width: 60px; height: 60px; font-size: 1.9rem; margin-bottom: 1rem; } .auth-trial { margin-top: 1.25rem; } .auth-form { padding: 1.6rem 1.35rem; } .auth-row { grid-template-columns: 1fr; } .pwd-criteria { grid-template-columns: 1fr; } /* Keep the 3 business-type tiles in one compact row, just smaller. */ .type-tiles { gap: 0.45rem; } .type-tile-inner { padding: 0.7rem 0.35rem; } .type-tile-inner i { font-size: 1.3rem; } .type-tile-name { font-size: 0.72rem; } }