/* ───────────────────────────────────────────────────────────────────────────── ourrights.ai — the public pages (front page, login, sign-up, first password). One place for the form design, because three copies of it is how a select and an input end up different heights on a phone (22-09-2026). The rules that keep it tight: - every field is the same box: same height, same border, same radius - 16px font on inputs, or iOS zooms the page when the keyboard opens - appearance:none on select, or the phone draws its own control ───────────────────────────────────────────────────────────────────────────── */ :root { --gron: #3F5B3C; --lysgron: #7D8F69; --sand: #F7F6F1; --blaek: #22301F; --linje: #DCDFD3; --felt: #C9CFBE; } /* ── Card pages (login, opret, første kode) ───────────────────────────────── */ /* The wrapper carries the look, not : the admin pages are MudBlazor and must keep their own. */ .or-wrap { position: fixed; inset: 0; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 28px 16px; box-sizing: border-box; background: var(--sand); color: var(--blaek); font-family: Raleway, "Segoe UI", system-ui, sans-serif; line-height: 1.55; -webkit-text-size-adjust: 100%; } .or-wrap a { color: inherit; text-decoration: none; } .or-card { background: #fff; border: 1px solid var(--linje); border-radius: 14px; padding: 32px; width: min(460px, 100%); box-sizing: border-box; box-shadow: 0 2px 16px rgba(63, 91, 60, .07); } .or-card h1 { color: var(--gron); margin: 6px 0 6px; font-size: 26px; line-height: 1.2; } .or-card .tag { color: #6b7561; font-size: 15px; margin: 0 0 22px; } .or-card .tilbage { font-size: 14px; color: #6b7561; } /* ── Fields: one box, whatever kind it is ─────────────────────────────────── */ .or-felt { display: block; margin-top: 16px; } .or-felt > span { display: block; font-size: 13px; color: var(--gron); margin-bottom: 6px; } .or-card input[type="text"], .or-card input[type="email"], .or-card input[type="password"], .or-card select, .or-card textarea { width: 100%; box-sizing: border-box; min-height: 50px; padding: 13px 14px; border: 1px solid var(--felt); border-radius: 8px; background: #fff; color: var(--blaek); font-family: inherit; font-size: 16px; /* under 16px and iOS zooms in when the field is tapped */ line-height: 1.3; appearance: none; -webkit-appearance: none; } .or-card textarea { min-height: 96px; resize: vertical; } /* The select needs its own arrow once the native one is gone */ .or-card select { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F5B3C' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; } .or-card input:focus, .or-card select:focus, .or-card textarea:focus { outline: none; border-color: var(--gron); box-shadow: 0 0 0 3px rgba(63, 91, 60, .12); } .or-card button { margin-top: 24px; width: 100%; min-height: 50px; padding: 13px 18px; background: var(--gron); color: #fff; border: 0; border-radius: 8px; font-family: inherit; font-size: 16px; cursor: pointer; } .or-card button:hover { background: #354d33; } /* ── Checkboxes (tro og love) ─────────────────────────────────────────────── */ .or-afkryds { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #3d4a39; margin-top: 18px; } .or-afkryds input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--gron); } /* ── Messages ─────────────────────────────────────────────────────────────── */ .or-ok, .or-fejl { padding: 11px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 4px; } .or-ok { background: #EAF2E6; border: 1px solid #BFD4B4; color: var(--gron); } .or-fejl { background: #FBE9E7; border: 1px solid #F0C3BB; color: #8C2F20; } @media (max-width: 520px) { .or-card { padding: 24px 20px; border-radius: 12px; } .or-card h1 { font-size: 23px; } }