/* ============================================================================
registry-auth.css — PAGE-SPECIFIC layout for the four authentication pages.
Owner: RD-auth-pages.
Pages: login-page.html, signup-page.html, forgot-password.html,
reset-password.html.
SCOPE RULE (same as registry-claim.css): everything that is part of the
design SYSTEM lives in registry.css — tokens, .rg-btn, .rg-field,
.rg-field__label, .rg-field__input, .rg-form, .rg-nav, .rg-done__medal,
.rg-skip, .rg-sr. This file adds ONLY what these four pages need and no
other page has: the centred credential column, the reveal control that sits
on an underline field, the password-rules list, the notice block, the
remember-me box, and the post-submit veil.
Every value is a --rg-* token. No border-radius is introduced anywhere:
registry.css zeroes radius at specificity 0 under .rg-root and names the
only sanctioned circles, and this file adds none. Every directional
property is LOGICAL (inline-start/end, padding-inline) so one rule serves
both LTR and the RTL mirror i18n.js switches on .
NOTE: no apostrophes in comments in this file, matching registry.css. The
asset gate reads strings and comments in one pass and the convention costs
nothing.
========================================================================== */
/* ---------------------------------------------------------------------------
1. PAGE FRAME
The auth pages are one short column on a full-viewport ground, so the frame
is a flex column: nav, a main that takes the slack and centres its child,
then a hairline footer. 100dvh is declared after 100vh so a browser without
it keeps the fallback rather than dropping the rule.
------------------------------------------------------------------------ */
.rga-page {
position: relative;
z-index: 1;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.rga-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 56px var(--rg-gutter) 72px;
position: relative;
}
.rga-shell {
width: 100%;
max-width: 452px;
position: relative;
}
/* Wider column for the reset page, which carries the rules list beside two
fields and reads cramped at 452px. */
.rga-shell--wide { max-width: 496px; }
/* Decorative warmth behind the card. Purely presentational: it carries no
information, so it is aria-hidden in the markup and inert to the pointer. */
.rga-glow {
position: absolute;
inset-inline-start: 50%;
top: -120px;
width: 520px;
height: 320px;
max-width: 100%;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(var(--rg-gold-rgb), 0.09), transparent 68%);
pointer-events: none;
z-index: 0;
}
/* ---------------------------------------------------------------------------
2. HEAD — the mark, the bilingual kicker, the title
The kicker is TWO elements, never one: i18n writes through textContent, so
a nested span inside a translated node is destroyed on every language
switch. Same reason the Arabic accent beside a field label is its own span.
------------------------------------------------------------------------ */
.rga-head {
position: relative;
z-index: 1;
text-align: center;
margin-bottom: 34px;
}
.rga-mark {
font-family: var(--rg-serif);
font-size: 44px;
line-height: 1;
color: var(--rg-gold);
display: block;
margin-bottom: 20px;
}
.rga-kicker {
display: flex;
align-items: baseline;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.rga-kicker__ar {
font-family: var(--rg-arabic);
font-size: 14px;
color: var(--rg-gold-dim);
}
.rga-kicker__sep { color: var(--rg-gold-dim); }
.rga-title {
margin: 14px 0 0;
font-family: var(--rg-serif);
font-weight: 400;
font-size: var(--rg-h3);
line-height: 1.12;
color: var(--rg-ivory);
text-wrap: balance;
}
.rga-lede {
margin: 14px auto 0;
max-width: 380px;
}
/* ---------------------------------------------------------------------------
3. THE CARD
A panel, not a floating chip: flat surface, hairline border, a brighter
rung on the top edge so the column reads as one object against the swarm.
------------------------------------------------------------------------ */
.rga-card {
position: relative;
z-index: 1;
background: var(--rg-surface-2);
border: 1px solid var(--rg-line-2);
border-top-color: var(--rg-line-hi);
padding: 38px 36px 34px;
}
/* ---------------------------------------------------------------------------
4. FIELDS
The underline field itself is .rg-field__input from registry.css. What is
added here is only what a credential form needs on top of it.
------------------------------------------------------------------------ */
/* A label that carries an Arabic accent beside the translated English word.
The English half keeps its data-i18n; the Arabic half is a sibling so
I18n.apply() cannot overwrite it. */
.rga-label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.rga-label__ar {
font-family: var(--rg-arabic);
font-size: 12px;
letter-spacing: 0;
text-transform: none;
color: var(--rg-gold-dim);
}
/* The reveal control sits ON the underline, so the field needs a positioning
context and the input needs room at its trailing edge. */
.rga-wrap { position: relative; }
.rga-input--reveal { padding-inline-end: 58px; }
.rga-reveal {
position: absolute;
inset-inline-end: 0;
bottom: 11px;
background: transparent;
border: none;
padding: 4px 2px;
font-family: inherit;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rg-gold-dim);
cursor: pointer;
transition: color var(--rg-t-fast);
}
.rga-reveal:hover,
.rga-reveal:focus-visible { color: var(--rg-gold); }
/* Autofill. Chrome paints its own opaque background over an autofilled input,
which on this ground puts near-black text on near-white and loses the
underline entirely. Scoped to this card so no other page is restyled.
Deliberately NOT done with the long-transition hack: the reduced-motion
block in registry.css forces transition-duration to 0.001ms, which would
defeat it and let the autofill wash back in for exactly the readers least
able to cope with it. */
.rga-card .rg-field__input:-webkit-autofill,
.rga-card .rg-field__input:-webkit-autofill:hover,
.rga-card .rg-field__input:-webkit-autofill:focus,
.rga-card .rg-field__input:-webkit-autofill:active {
-webkit-text-fill-color: var(--rg-ivory);
-webkit-box-shadow: 0 0 0 1000px var(--rg-surface-2) inset;
box-shadow: 0 0 0 1000px var(--rg-surface-2) inset;
caret-color: var(--rg-ivory);
}
/* Per-field error. Empty means no error, so it collapses rather than holding
a gap that makes the form jump when a message arrives. */
.rga-err {
display: block;
margin-top: 8px;
font-size: 12px;
line-height: 1.5;
color: var(--rg-danger);
}
.rga-err:empty { display: none; }
/* ---------------------------------------------------------------------------
5. PASSWORD RULES
These are the SERVER rule, verbatim in meaning: at least 8 characters, at
least one number, 72 bytes or fewer. They are referenced by the password
input via aria-describedby, so a screen reader hears them on focus. The
per-rule mark is decorative reinforcement only and is aria-hidden: the
authoritative spoken state is the field error, which is a live region.
------------------------------------------------------------------------ */
.rga-rules {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: grid;
gap: 6px;
}
.rga-rule {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
font-size: 11.5px;
letter-spacing: 0.06em;
color: var(--rg-muted);
transition: color var(--rg-t-fast);
}
/* The live password-match line on the reset page wears .rga-rule so it turns
the same green on the same rule, but it is a outside the
and needs
its own room. Without the margin: 0 above it would also inherit the UA
paragraph margin, which is 1em and much too loud here. */
.rga-rule--match { margin-top: 10px; }
.rga-rule--match:empty { display: none; }
.rga-rule__mark {
flex: none;
width: 6px;
height: 6px;
background: var(--rg-dim);
transition: background var(--rg-t-fast);
}
.rga-rule.is-met { color: var(--rg-ok); }
.rga-rule.is-met .rga-rule__mark { background: var(--rg-ok); }
/* ---------------------------------------------------------------------------
6. META ROW — remember me + forgot password
------------------------------------------------------------------------ */
.rga-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.rga-check {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--rg-warm);
}
/* The real checkbox, restyled rather than replaced, so it keeps its role, its
keyboard behaviour and its focus ring. */
.rga-check__box {
-webkit-appearance: none;
appearance: none;
flex: none;
width: 15px;
height: 15px;
margin: 0;
border: 1px solid var(--rg-line-hi);
background: transparent;
display: grid;
place-items: center;
cursor: pointer;
transition: border-color var(--rg-t-fast);
}
.rga-check__box::after {
content: "";
width: 7px;
height: 7px;
background: var(--rg-gold);
transform: scale(0);
transition: transform var(--rg-t-fast);
}
.rga-check__box:hover { border-color: var(--rg-gold); }
.rga-check__box:checked { border-color: var(--rg-gold); }
.rga-check__box:checked::after { transform: scale(1); }
/* The honest replacement for a remember-me control. The session this stack
issues is a stateless one-year JWT with no server-side store, so there is
no shorter session for a checkbox to select and unchecking one would have
changed nothing. State what actually happens instead. */
.rga-note {
margin: 0;
max-width: 230px;
font-size: 11.5px;
line-height: 1.6;
color: var(--rg-muted);
}
.rga-link {
font-size: 12px;
letter-spacing: 0.04em;
color: var(--rg-gold);
}
.rga-link:hover,
.rga-link:focus-visible { color: var(--rg-ivory); }
/* Terms consent — same box, but the copy wraps, so it aligns to the top. */
.rga-consent {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 12.5px;
line-height: 1.65;
color: var(--rg-warm);
}
.rga-consent .rga-check__box { margin-top: 3px; }
/* ---------------------------------------------------------------------------
7. NOTICES — the form-level message region
One block, three tones. Empty collapses, so the reserved space never sits
there as an unexplained gap.
------------------------------------------------------------------------ */
.rga-notice {
display: block;
border-inline-start: 2px solid var(--rg-gold);
background: rgba(var(--rg-gold-rgb), 0.05);
padding: 12px 16px;
font-size: 13px;
line-height: 1.6;
color: var(--rg-ivory);
}
.rga-notice:empty { display: none; }
.rga-notice--err {
border-inline-start-color: var(--rg-danger);
background: rgba(var(--rg-danger-rgb), 0.06);
color: var(--rg-danger);
}
.rga-notice--ok {
border-inline-start-color: var(--rg-ok);
background: rgba(var(--rg-ok-rgb), 0.06);
color: var(--rg-ok);
}
.rga-notice__title {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
margin-bottom: 6px;
}
.rga-notice__link {
display: inline-block;
margin-top: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rg-gold);
}
/* Spacing is owned by the slot, not by a margin on whatever sits above it, so
a slot with nothing showing really does take zero room.
TWO selectors on purpose. The login and sign-up pages BUILD their notice, so
the slot is genuinely empty until there is something to say and :empty is
enough. The recovery pages DECLARE both notices up front and toggle
[hidden], so the slot is never empty and :empty would leave a permanent
22px hole; :has() asks the question that actually matters — is anything in
here showing. A browser without :has() drops the second rule as invalid and
keeps the first, which is the behaviour those pages had before. */
.rga-notice-slot:not(:empty) { margin-bottom: 22px; }
.rga-notice-slot:not(:has(> :not([hidden]))) { margin-bottom: 0; }
/* ---------------------------------------------------------------------------
8. FOOT OF THE CARD — the crossing link between login and signup
------------------------------------------------------------------------ */
.rga-alt {
margin-top: 30px;
padding-top: 22px;
border-top: 1px solid var(--rg-line-row-2);
text-align: center;
font-size: 13px;
color: var(--rg-warm);
}
.rga-alt__link {
margin-inline-start: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rg-gold);
}
.rga-alt__link:hover,
.rga-alt__link:focus-visible { color: var(--rg-ivory); }
/* Quiet back link under the card. */
.rga-back {
display: block;
margin-top: 26px;
text-align: center;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--rg-warm);
transition: color var(--rg-t-fast);
}
.rga-back:hover,
.rga-back:focus-visible { color: var(--rg-ivory); }
/* ---------------------------------------------------------------------------
9. TERMINAL PANELS — the states that replace the form rather than sit under
it: reset link dead, reset done. Centred, no form controls inside.
------------------------------------------------------------------------ */
.rga-panel { text-align: center; }
.rga-panel__title {
margin: 22px 0 0;
font-family: var(--rg-serif);
font-weight: 400;
font-size: var(--rg-h4);
color: var(--rg-ivory);
}
.rga-panel--bad .rga-panel__title { color: var(--rg-danger); }
.rga-panel__body { margin: 12px auto 0; max-width: 320px; }
.rga-panel__act {
margin-top: 26px;
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* The dim twin of .rg-done__medal, for a state that is not a success. */
.rga-panel--bad .rg-done__medal {
border-color: rgba(var(--rg-danger-rgb), 0.5);
color: var(--rg-danger);
}
/* ---------------------------------------------------------------------------
10. THE VEIL — shown between a successful submit and the navigation
display:none while idle on purpose. A fixed full-viewport layer left in the
tree at opacity 0 still composites on first paint, which is the cost this
design cannot pay on a page whose whole point is to be fast.
--rg-nav-bg is reused deliberately: it is the token for a blurred ink
surface, which is exactly what this is, and reusing it keeps the veil in
step with the nav if the tint is ever retuned.
------------------------------------------------------------------------ */
.rga-veil {
display: none;
position: fixed;
inset: 0;
z-index: 200;
place-items: center;
padding: var(--rg-gutter);
text-align: center;
background: var(--rg-nav-bg);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
opacity: 0;
pointer-events: none;
transition: opacity var(--rg-t-slow);
}
.rga-veil.is-open {
display: grid;
opacity: 1;
pointer-events: auto;
}
.rga-veil__title {
margin: 26px 0 0;
font-family: var(--rg-serif);
font-weight: 400;
font-size: var(--rg-h4);
color: var(--rg-ivory);
}
.rga-veil__body { margin: 10px auto 0; max-width: 320px; }
/* The mark breathes while we are waiting and settles when we are done. The
circle itself is .rg-done__medal, which registry.css already sanctions as a
radius exception; nothing here opts a new element into a rounded corner. */
.rga-veil__medal { animation: rga-breathe 1.6s ease-in-out infinite; }
.rga-veil.is-done .rga-veil__medal {
animation: none;
border-color: var(--rg-gold);
color: var(--rg-gold-hi);
}
@keyframes rga-breathe {
0%, 100% { opacity: 0.45; }
50% { opacity: 1; }
}
/* ---------------------------------------------------------------------------
11. FOOTER
------------------------------------------------------------------------ */
.rga-foot {
border-top: 1px solid var(--rg-line);
padding: 22px var(--rg-gutter);
text-align: center;
font-size: 11.5px;
line-height: 1.7;
color: var(--rg-warm);
}
/* ---------------------------------------------------------------------------
12. NO-SCRIPT
These forms are submitted by fetch and have no server action, so with
scripting off there is nothing to submit to. Say so instead of leaving a
form that silently does nothing.
------------------------------------------------------------------------ */
.rga-noscript {
margin: 0 0 22px;
border-inline-start: 2px solid var(--rg-gold);
background: rgba(var(--rg-gold-rgb), 0.05);
padding: 12px 16px;
font-size: 13px;
line-height: 1.6;
color: var(--rg-ivory);
}
/* ---------------------------------------------------------------------------
13. RESPONSIVE
The gutter and the type scale step down in registry.css at 900 and 560; all
that is needed here is to stop the card padding from eating the column.
------------------------------------------------------------------------ */
@media (max-width: 560px) {
.rga-main { padding-top: 34px; padding-bottom: 48px; }
.rga-card { padding: 28px 22px 26px; }
.rga-mark { font-size: 36px; margin-bottom: 14px; }
.rga-head { margin-bottom: 26px; }
.rga-meta { gap: 12px; }
.rga-glow { top: -80px; height: 240px; }
}
/* ---------------------------------------------------------------------------
14. REDUCED MOTION
The canvas freezes itself to one static frame in registry-bg.js and
registry-decode.js no-ops; registry.css neutralises transitions globally.
This kills the one animation this file introduces, explicitly, so it does
not survive on the strength of a keyframe name.
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.rga-veil__medal { animation: none; opacity: 1; }
.rga-check__box::after { transition: none; }
}
/* ---------------------------------------------------------------------------
15. PRINT — nobody prints a login form, but if they do, do not hand them a
sheet of ink. registry.css already drops .rg-bg and .rg-nav.
------------------------------------------------------------------------ */
@media print {
.rga-glow,
.rga-veil,
.rga-reveal { display: none !important; }
.rga-card { border-color: #999; }
}