/* ============================================================================ Sanam — PUBLIC PRE-LOGIN "Dusk" re-skin (login + register + invite ONLY). The founder caught the live LOGIN rendering light/cream — OFF-BRAND against the Dusk hub + operator portal. These three PUBLIC pages (login.html / register.html / invite.html) now carry and load operator_dusk.css (the shared Dusk token block + the saffron focus ring + the RTL Noto Naskh stack + color-scheme:dark + the reduced-motion guard) — exactly like the operator portal, the cockpit and the MT console. operator_dusk.css already re-skins every SHARED component these pages use on the dark ground (.card, .field, .btn/.btn-primary, .honesty, .locale-toggle, .brand-text/.hump, links, the toast, the saffron focus ring). account.css's .rg-* / .inv-* register/invite components were authored for the F2 cream ground, so this sheet — loaded AFTER operator_dusk.css AND account.css — overrides ONLY: 1. the PUBLIC LANDING CHROME (.landing / .landing-top / the public .content) which operator_dusk.css does not touch (it skins the authed .sidebar/.topbar app shell, not the public landing front door); and 2. the .rg-* / .inv-* self-serve components account.css left on cream. Design law kept: scoped under body.dusk (a re-skin = a token swap, no :root drift, no leak to any other persona); logical CSS properties throughout (one sheet, LTR + RTL); copper does the work; the loss/error stays amber on Dusk; WCAG-AA on the dark ground; >=44px targets inherited from the shared shell. ========================================================================== */ /* ---- the public LANDING chrome on the dark ground --------------------------- */ /* a warm radial copper/saffron glow over the oud ground — the same "alive, quiet-premium" feel as the Dusk hub + operator hero (reduced-motion safe; it is a static gradient, no animation). */ body.dusk .landing { background: radial-gradient(1100px 460px at 12% -12%, rgba(204,146,72,.16), transparent 60%), radial-gradient(820px 360px at 92% -8%, rgba(230,174,69,.08), transparent 55%), linear-gradient(180deg, #1F160E, var(--d-bg)); min-height: 100vh; } body.dusk .landing-top { border-bottom: 1px solid var(--d-line); background: rgba(31,22,14,.55); backdrop-filter: blur(6px); } /* the top-bar "New here? / Already registered?" pill reads as the Dusk portal switch (operator_dusk.css already styles .nav-portal-switch; the public top-bar instance is an inline anchor, so make sure it is comfortably tappable + warm). */ body.dusk .landing-top .nav-portal-switch { display: inline-flex; align-items: center; min-height: 40px; color: var(--d-tan); border-color: var(--d-line-2); } body.dusk .landing-top .nav-portal-switch:hover { color: var(--d-cream); border-color: var(--d-copper); background: #2F2216; } /* the public .content wrapper is the centred funnel column on these pages (it is NOT the authed scrolling content region) — let it breathe + centre. */ body.dusk .landing .content { max-width: 100%; width: 100%; margin: 0 auto; padding: 32px 24px 72px; position: relative; z-index: 1; } /* the skip-link reads on the dark ground (the shared copper-press chip is fine, but give it the copper border for consistency with the Dusk controls). */ body.dusk .skip-link { background: var(--d-copper-2); color: #1A130D; } /* ---- typography on the pre-login pages -------------------------------------- */ body.dusk .rg-wrap h1, body.dusk .inv-wrap h1 { color: var(--d-cream); } body.dusk .rg-wrap .lead, body.dusk .inv-wrap .lead { color: var(--d-tan); } /* .muted/.faint already mapped by operator_dusk.css; keep the lead readable. */ /* ============================================================================ LOGIN — "The Journey" sign-in front door (POLISH 2026-06-23, founder catch). The login funnel column gets the SAME signature as the operator/cockpit pages: a DAWN hero band (the sea→peaks ridge + the resting Northern-Star ✦ + the editorial Marcellus greeting) sitting above a GLASSY translucent auth card. Scoped to body.dusk; logical CSS (LTR + RTL); copper does the work; AA on the oud ground. The paper_desert.css day variant restyles these on the sand ground. The auth fields/IDs/endpoints are untouched — this is skin + layout only. ============================================================================ */ body.dusk .lg-wrap { max-width: 520px; margin: 0 auto; padding: 8px 0 24px; } /* the DAWN hero band — the ridge rides behind, the .scrim keeps the headline AA. GHOST-PANEL FIX: round ONLY the top corners. The card overlaps the hero foot by -34px; a fully-rounded (22px) hero left its rounded BOTTOM corners + faint edge peeking out around the card's top — reading as a faint DUPLICATE card outline behind the form. Squaring the bottom corners tucks the hero flush under the card so only ONE card silhouette shows. (The day theme mirrors this below.) */ body.dusk .lg-hero { position: relative; overflow: hidden; margin: 0 0 -34px; padding: 36px 30px 56px; border-radius: 22px 22px 0 0; background: radial-gradient(120% 120% at 18% -20%, rgba(204,146,72,.20), transparent 60%), radial-gradient(90% 90% at 92% -10%, rgba(230,174,69,.10), transparent 55%), radial-gradient(120% 120% at 78% 4%, rgba(62,111,116,.10), transparent 62%); } /* the sea→peaks ridge sits BEHIND the editorial content (journey.css places it) */ body.dusk .lg-hero .j-ridge { z-index: 0; opacity: .55; } body.dusk .lg-hero .lg-hero-inner { position: relative; z-index: 2; text-align: center; } /* the scrim wash is anchored to the foot so the headline always clears AA */ body.dusk .lg-hero.scrim::after { background: linear-gradient(180deg, transparent 40%, rgba(22,16,9,.22) 78%, rgba(22,16,9,.40) 100%); } /* the DAWN kicker — Farasan-sea as -lit text, the resting ✦ leading it */ body.dusk .lg-hero .kicker { display: inline-flex; align-items: center; gap: 9px; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--d-sea-lit); } body.dusk .lg-hero .kicker .nstar { width: 15px; height: 15px; color: var(--d-saff); flex: none; } body.dusk .lg-hero .lg-display { font-size: clamp(1.8rem, 4.2vw, 2.5rem); line-height: 1.08; margin: 12px 0 0; color: var(--d-cream); } [dir="rtl"] body.dusk .lg-hero .lg-display { font-family: "Noto Naskh Arabic", "Amiri", serif; } body.dusk .lg-hero .lg-lead { margin: 10px 0 0; color: var(--d-tan); font-size: 1.02rem; } /* the GLASSY auth card — a warm translucent oud pane lifting over the hero foot, the copper/saffron hairline + dawn-glow, the canon radius + deep shadow. The .rg-card / .card shared overrides still apply; .lg-card adds the glass finish. */ body.dusk .lg-card { position: relative; z-index: 3; padding: 26px 26px 22px; background: radial-gradient(130% 90% at 8% 0%, rgba(204,146,72,.12), transparent 58%), linear-gradient(180deg, rgba(46,34,22,.72), rgba(32,23,14,.80)); border: 1px solid rgba(184,115,51,.34); border-radius: 18px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 28px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(244,237,226,.07); } /* GHOST-PANEL FIX: the "dawn-lit notch crest" ::before was inset 26px from the card sides with a strong copper gradient, so it rendered as a SECOND rounded outline nested just inside the card's own top border — the faint "duplicate card outline" the panel flagged. Removed: the card's own copper border + the inset top-edge highlight (box-shadow inset 0 1px 0) already give the top its sheen, so a single, clean card outline remains (no twin arc). */ body.dusk .lg-card > * { position: relative; z-index: 2; } body.dusk .lg-card .rg-foot { margin-top: 14px; } @media (max-width: 560px) { body.dusk .lg-hero { padding: 28px 18px 48px; margin-bottom: -28px; } } /* forced-colors: drop the decorative washes; the card border keeps shape */ @media (forced-colors: active) { body.dusk .lg-hero, body.dusk .lg-card { background: Canvas; } body.dusk .lg-card { border: 1px solid; } } /* ---- REGISTER — the business-type chooser cards ----------------------------- */ body.dusk .rg-type { background: linear-gradient(180deg, rgba(48,35,23,.92), rgba(42,31,21,.92)); border: 1px solid var(--d-line-2); color: var(--d-cream); } body.dusk .rg-type:hover { border-color: var(--d-copper); } body.dusk .rg-type.on { border-color: var(--d-copper); background: #3B2B1C; box-shadow: 0 0 0 1px var(--d-copper), 0 0 26px rgba(204,146,72,.16); } body.dusk .rg-type svg { stroke: var(--d-copper); } body.dusk .rg-type-h { color: var(--d-cream); } body.dusk .rg-type-s { color: var(--d-ink); } /* ---- REGISTER — the required Terms / commission acceptance row -------------- */ body.dusk .rg-terms { background: #2B2017; border: 1px solid var(--d-line-2); } body.dusk .rg-terms label { color: var(--d-ink-2); } body.dusk .rg-terms a { color: var(--d-saff); text-decoration: underline; } body.dusk .rg-terms input[type="checkbox"] { accent-color: var(--d-copper); } /* the unchecked-Terms error: amber on Dusk (the loss/block law), never red. */ body.dusk .rg-terms.err { border-color: var(--d-loss); } /* ---- REGISTER/INVITE — the "you're done" confirmation card ------------------ */ body.dusk .rg-done-mark { background: #2C3326; color: var(--d-green); } body.dusk .rg-done-mark svg { stroke: var(--d-green); } body.dusk .rg-next { /* inherits the Dusk .card override; keep the rows legible */ } body.dusk .rg-next-row + .rg-next-row { border-top-color: var(--d-line); } body.dusk .rg-next-step { background: #3B2B1C; color: var(--d-saff); } /* the "Skip for now" secondary on the verify step (a plain .btn — already Dusk). */ body.dusk .rg-skip { color: var(--d-cream); } /* the register "Back" link on the verify step (.store-back) on the dark ground. */ body.dusk .store-back { color: var(--d-saff); } body.dusk .store-back svg { stroke: var(--d-saff); } /* ---- the dev-code / honesty notes — already Dusk (operator_dusk .honesty) ---- */ /* ---- error region: the field-err alarm text reads on the dark ground -------- */ /* .field-err uses --alarm (a genuine red) for the technical/validation message — it is paired with the alert ICON + the words, so it never reads as a brand "loss". Lighten it one step so it clears AA on the oud ground. */ body.dusk .field-err { color: #E7A18C; } body.dusk .field-err svg { stroke: #E7A18C; } /* ---- responsive: the funnel column stays comfortable on small screens ------- */ @media (max-width: 560px) { body.dusk .landing .content { padding: 22px 16px 56px; } }