/* ============================================================================ Sanam — ACCOUNT + ONBOARDING + REGISTER skin (Gate 6, self-serve). Loaded AFTER platform.css (and, on the authed surfaces, AFTER operator_dusk.css) so it adds the small set of components the three Gate-6 self-serve surfaces need that the shared shell did not yet have: the registration type chooser, the self-serve onboarding STEPPER, and the "My Account" TABS. Everything is scoped to these surfaces (the `.rg-*`, `.ob6-*`, `.acc-*` namespaces) so it never touches another persona. Dusk discipline: the authed surfaces (account + onboarding) carry and inherit the Dusk tokens, the saffron focus ring, the reduced-motion guard, color-scheme:dark and the RTL Arabic stack from operator_dusk.css. The register page is PUBLIC → it keeps the warm F2 ground. Logical properties throughout (one sheet, LTR + RTL). ≥44px targets. AA. ========================================================================== */ /* ========================================================================== PUBLIC REGISTER (F2 light ground — register.html, no body.dusk) ========================================================================== */ .rg-wrap { max-width: 560px; margin: 0 auto; padding: 28px 0 56px; } .rg-wrap h1 { font-size: 1.9rem; margin: 0 0 6px; } .rg-wrap .lead { font-size: 1.05rem; margin: 0 0 20px; } /* NOTE: the shared "Step N of M" progress bar (.sn-progress*) now lives in platform.css (S.progressBar is used by surfaces that load ONLY platform.css — the concierge onboarding — as well as the account.css surfaces). The Dusk override also lives there. The legacy .rg-progress* / inline copies are gone. */ .rg-types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rg-type { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: start; padding: 16px; cursor: pointer; background: var(--cream-raised); border: 1px solid var(--sand-line); border-radius: var(--r-card); min-height: 44px; transition: border-color .15s, box-shadow .15s, background .15s; } .rg-type:hover { border-color: var(--copper); } .rg-type.on { border-color: var(--copper); background: var(--copper-tint); box-shadow: var(--ring); } .rg-type svg { width: 24px; height: 24px; stroke: var(--copper-press); } .rg-type-h { font-family: "Marcellus", serif; font-size: 1.1rem; color: var(--charcoal); } .rg-type-s { font-size: .84rem; line-height: 1.35; } .rg-submit { width: 100%; justify-content: center; margin-top: 4px; min-height: 48px; } .rg-skip { width: 100%; justify-content: center; margin-top: 10px; min-height: 44px; } .rg-honesty { margin-top: 20px; } .rg-foot { margin-top: 14px; display: flex; align-items: center; gap: 6px; } .rg-foot svg { width: 16px; height: 16px; } .rg-handle { justify-content: center; } #rg-error:not(:empty), #ob6-error:not(:empty) { margin-top: 12px; } .rg-done { text-align: center; } .rg-done h1 { margin-top: 8px; } .rg-done .lead { margin-inline: auto; } .rg-done-mark { width: 64px; height: 64px; margin: 0 auto 4px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--ok-soft, #E4EFE0); color: var(--ok, #5C7B4A); } .rg-done-mark svg { width: 34px; height: 34px; stroke: currentColor; } .rg-next { text-align: start; margin: 18px 0; } .rg-next-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; } .rg-next-row + .rg-next-row { border-top: 1px solid var(--sand-line); } .rg-next-step { flex: none; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--copper-tint); color: var(--copper-press); font-weight: 700; font-size: .9rem; } @media (max-width: 560px) { .rg-types { grid-template-columns: 1fr; } } /* ========================================================================== SHARED — the self-serve onboarding STEPPER (authed, Dusk) ========================================================================== */ .ob6-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: ob6; } .ob6-step { display: flex; align-items: center; gap: 10px; flex: 1 1 150px; padding: 12px 14px; border-radius: var(--r-card); background: var(--cream-raised); border: 1px solid var(--sand-line); } .ob6-step .ob6-dot { flex: none; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; background: var(--cream-sunk); color: var(--ink-2); border: 1px solid var(--ink-line); } .ob6-step .ob6-dot svg { width: 16px; height: 16px; } .ob6-step.done .ob6-dot { background: var(--copper); color: #fff; border-color: var(--copper); } .ob6-step.current { border-color: var(--copper); box-shadow: var(--ring); } .ob6-step.current .ob6-dot { background: var(--copper-tint); color: var(--copper-press); border-color: var(--copper); } .ob6-step-name { font-size: .9rem; font-weight: 500; } /* CLIENT-SIDE view navigation: the stepper steps are clickable to REVIEW a past step (view-only — never a backend state change). They get a button affordance (pointer + hover lift + a visible keyboard focus ring) and a copper "viewing" accent marking which step's panel is on screen. */ .ob6-step[role="button"] { cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .05s ease; } .ob6-step[role="button"]:hover { border-color: var(--copper); } .ob6-step[role="button"]:active { transform: translateY(1px); } .ob6-step[role="button"]:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; } .ob6-step.viewing { border-color: var(--copper); box-shadow: var(--ring); } .ob6-step.viewing .ob6-step-name { color: var(--copper-press); font-weight: 600; } /* the view-navigation row on the task panel (Back / Back-to-current) */ .ob6-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .ob6-nav:empty { display: none; } .ob6-task.reviewing { border-color: var(--copper); } .ob6-reviewing { margin: 0 0 14px; } .ob6-task { margin: 8px 0 18px; } .ob6-gate { margin: 18px 0; } .ob6-gate-reasons { list-style: none; margin: 8px 0 0; padding: 0; } .ob6-gate-reasons li { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: .9rem; } .ob6-gate-reasons li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; } .ob6-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } /* Dusk overrides — the stepper + register-style cards on the dark ground */ body.dusk .ob6-step { background: var(--d-card); border-color: var(--d-line); } body.dusk .ob6-step .ob6-dot { background: var(--d-card-3); color: var(--d-ink); border-color: var(--d-line-2); } body.dusk .ob6-step.done .ob6-dot { background: var(--d-copper); color: #1A130D; border-color: var(--d-copper); } body.dusk .ob6-step.current { border-color: var(--d-copper); } body.dusk .ob6-step.current .ob6-dot { background: #3B2B1C; color: var(--d-saff); border-color: var(--d-copper); } body.dusk .ob6-step-name { color: var(--d-cream); } /* Dusk: the clickable/view-navigation accents (copper on the dark ground) */ body.dusk .ob6-step[role="button"]:hover { border-color: var(--d-copper); } body.dusk .ob6-step[role="button"]:focus-visible { outline-color: var(--d-saff); } body.dusk .ob6-step.viewing { border-color: var(--d-copper); } body.dusk .ob6-step.viewing .ob6-step-name { color: var(--d-saff); } body.dusk .ob6-task.reviewing { border-color: var(--d-copper); } /* loss/blocked reasons stay in OUD amber on Dusk, never red (paired with the alert icon + the word, so colour is never the sole signal). */ body.dusk .ob6-gate-reasons li { color: var(--d-loss); } body.dusk .ob6-gate-reasons li svg { stroke: var(--d-loss); } /* ========================================================================== MY ACCOUNT — the TABS (authed, Dusk) ========================================================================== */ .acc-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 22px; border-bottom: 1px solid var(--sand-line); padding-bottom: 0; } .acc-tab { appearance: none; background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; min-height: 44px; color: var(--ink-2); font: inherit; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; } .acc-tab svg { width: 18px; height: 18px; } .acc-tab:hover { color: var(--charcoal); } .acc-tab.on { color: var(--copper-press); border-bottom-color: var(--copper); } .acc-tab.on svg { stroke: var(--copper-press); } .acc-panel { animation: acc-fade .2s ease; } @keyframes acc-fade { from { opacity: 0; } to { opacity: 1; } } .acc-readonly-note { margin-bottom: 16px; } .acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .acc-grid .field { grid-column: auto; } .acc-grid .field.full { grid-column: 1 / -1; } @media (max-width: 640px) { .acc-grid { grid-template-columns: 1fr; } } /* the team / compliance / member rows */ .acc-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--sand-line); } .acc-row:first-child { border-top: 0; } .acc-row .acc-row-main { flex: 1 1 200px; min-width: 0; } .acc-row .acc-row-main strong { display: block; } .acc-row .acc-row-main .faint { font-size: .84rem; } .acc-row .acc-row-actions { display: flex; align-items: center; gap: 8px; } .acc-row select { min-height: 44px; } /* AA touch target (Gate-6 uplift): the account row controls — the Team "Remove" (.acc-rm = .btn-sm) and the global .btn-sm inside an account row — bumped to ≥44px (the Dusk distribution override only covered distribution .btn-sm; the account remove/destructive control was at 36px on the most consequential Team action). Scoped to .acc-* so the global .btn-sm is untouched elsewhere. */ .acc-rm, .acc-row .btn-sm { min-height: 44px; } /* AA touch target: the notification toggle. The native checkbox box was ~16px; we grow the control + give the whole row label a ≥44px hit area so the box itself (not just the row text) meets 2.5.8. The accent colour ties it to copper. */ .acc-pref-box { width: 22px; height: 22px; min-width: 22px; cursor: pointer; accent-color: var(--copper-press); } .acc-pref-box:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 4px; } .acc-row .acc-row-main label { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; } .acc-iban-mask { font-family: "Hanken Grotesk", sans-serif; letter-spacing: .04em; } /* Dusk overrides for the tabs + grids + rows */ body.dusk .acc-tabs { border-bottom-color: var(--d-line); } body.dusk .acc-tab { color: var(--d-ink); } body.dusk .acc-tab:hover { color: var(--d-cream); } body.dusk .acc-tab.on { color: var(--d-saff); border-bottom-color: var(--d-copper); } body.dusk .acc-tab.on svg { stroke: var(--d-saff); } body.dusk .acc-row { border-top-color: var(--d-line); } body.dusk .acc-row:first-child { border-top: 0; } /* the destructive (remove member) control uses the OUD loss colour on Dusk */ body.dusk .acc-rm { color: var(--d-loss); } body.dusk .acc-rm svg { stroke: var(--d-loss); } /* ========================================================================== REGISTER — terms acceptance (Gate-6 uplift A3, the legal blocker) ========================================================================== */ /* the required "I accept the Terms & commission disclosure" row. The box is ≥24px (AA touch target), the whole label is the hit-area, and the field can show the .err state when submit is attempted unchecked. F2 light ground (register). */ .rg-terms { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 4px; padding: 12px; border: 1px solid var(--sand-line); border-radius: var(--r-btn); background: var(--cream-raised); } .rg-terms input[type="checkbox"] { width: 24px; height: 24px; min-width: 24px; margin-top: 1px; cursor: pointer; accent-color: var(--copper-press); } .rg-terms input[type="checkbox"]:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 4px; } .rg-terms label { font-size: .9rem; line-height: 1.4; cursor: pointer; } .rg-terms a { color: var(--copper-press); text-decoration: underline; } .rg-terms.err { border-color: var(--alarm); } /* ========================================================================== ONBOARDING (Dusk) — first-listing step (pool + the grounded AI listing builder) ========================================================================== */ .ob6-firstlisting { margin: 8px 0 18px; } .ob6-firstlisting .field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--ink-line); border-radius: var(--r-btn); background: var(--cream-raised); color: var(--charcoal); font: inherit; } .ob6-pools { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; } .ob6-pool-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--sand-line); border-radius: var(--r-btn); background: var(--cream-raised); } .ob6-pool-row strong { flex: 1 1 auto; min-width: 0; } body.dusk .ob6-firstlisting .field textarea { background: var(--d-card); border-color: var(--d-line); color: var(--d-cream); } body.dusk .ob6-pool-row { background: var(--d-card); border-color: var(--d-line); } .ob6-ai-out { margin-top: 12px; } .ob6-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .ob6-ai-grid { grid-template-columns: 1fr; } } /* ========================================================================== ONBOARDING (Dusk) — reseller commercial-status banner (Gate-6 uplift A2) ========================================================================== */ /* the honest "your wholesale terms are being set up" banner. It is amber (OUD on Dusk), never a green/success tint — it must never imply the reseller can transact when it cannot. Paired with the lock icon + the word, so colour is never the sole signal. */ .ob6-commercial { margin: 0 0 18px; } .ob6-commercial .ob6-commercial-cta { margin-top: 12px; } body.dusk .ob6-commercial.pending { background: #3B2B1C; border-color: var(--d-copper); color: var(--d-loss); } body.dusk .ob6-commercial.pending svg { stroke: var(--d-loss); } /* ========================================================================== ACCOUNT (Dusk) — verification-state pill + cancellation policy (A4 / B1) ========================================================================== */ .acc-verif-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; } .acc-cancel { margin-top: 4px; } .acc-cancel textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--ink-line); border-radius: var(--r-btn); background: var(--cream-raised); color: var(--charcoal); font: inherit; min-height: 88px; } body.dusk .acc-cancel textarea { background: var(--d-card); border-color: var(--d-line); color: var(--d-cream); } /* ---- A2: STRUCTURED cancellation policy (preset cards + refund-step rows) ---- */ /* the captured read-back rows (master + each per-experience override) */ .acc-cancel-current { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .acc-cancel-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .92rem; } .acc-cancel-row .faint { display: inline-flex; align-items: center; gap: 5px; } /* the preset chooser: 3 recommended cards + a Custom card, real radio buttons */ .cancel-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .cancel-preset { display: flex; flex-direction: column; gap: 4px; text-align: start; cursor: pointer; background: var(--cream-raised); border: 1px solid var(--ink-line); border-radius: var(--r-btn); padding: 12px 13px; color: var(--charcoal); font: inherit; } .cancel-preset:hover { border-color: var(--copper); } .cancel-preset.on { border-color: var(--copper-press); box-shadow: inset 0 0 0 1px var(--copper); background: var(--copper-tint); } .cancel-preset .cp-name { font-weight: 700; } .cancel-preset .cp-sum { font-size: .8rem; color: var(--ink-3); line-height: 1.45; } /* the ordered refund-step rows (pct + hours-before + remove) */ .cancel-step-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .cancel-step-row .field { margin: 0; flex: 1 1 110px; } .cancel-step-row .cancel-step-rm { flex: none; } .cancel-editor { padding: 16px; } body.dusk .cancel-preset { background: var(--d-card); border-color: var(--d-line); color: var(--d-cream); } body.dusk .cancel-preset.on { background: rgba(193,123,74,.18); border-color: var(--d-copper); } body.dusk .cancel-preset .cp-sum { color: var(--d-ink-3, #b7a999); } /* ---- B1: VAT-inclusive confirm control (onboarding + account) -------------- */ .vat-incl-card { margin: 0 0 18px; } .vat-incl-ack { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; } .vat-incl-ack input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex: none; } .vat-incl-state { display: inline-flex; align-items: center; gap: 6px; } /* ========================================================================== ACCEPT-INVITE — the public accept page (its own pre-auth F2 shell) ========================================================================== */ .inv-wrap { max-width: 480px; margin: 0 auto; padding: 28px 0 56px; } .inv-wrap h1 { font-size: 1.8rem; margin: 0 0 6px; } .inv-wrap .lead { font-size: 1.02rem; margin: 0 0 20px; } .inv-submit { width: 100%; justify-content: center; margin-top: 4px; min-height: 48px; } .inv-foot { margin-top: 14px; display: flex; align-items: center; gap: 6px; } .inv-foot svg { width: 16px; height: 16px; } #inv-error:not(:empty) { margin-top: 12px; } /* ============================================================================ FIRST-RUN JOURNEY (operator) — the guided pool → full publish → platform intro → GYG distribution flow (buildlog 87). Scoped to the .ob6-* namespace; Dusk via the body.dusk variants. Logical CSS (one sheet, LTR + RTL). ========================================================================== */ /* the numbered journey steps inside the first-listing task */ .ob6-jstep { display: flex; gap: 14px; padding: 16px 0; border-block-start: 1px solid var(--sand-line); } .ob6-jstep:first-child { border-block-start: 0; padding-block-start: 4px; } .ob6-jnum { flex: none; inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .92rem; background: var(--copper-tint, #F3E3CC); color: var(--copper-press, #B87333); border: 1px solid var(--copper, #CC9248); } .ob6-jbody { flex: 1 1 auto; min-width: 0; } .ob6-pubform .field { margin-block: 10px; } .ob6-pubform textarea, .ob6-pubform input, .ob6-pubform select { font: inherit; } body.dusk .ob6-jstep { border-block-start-color: var(--d-line); } body.dusk .ob6-jnum { background: #3B2B1C; color: var(--d-saff); border-color: var(--d-copper); } body.dusk .ob6-pubform input, body.dusk .ob6-pubform textarea, body.dusk .ob6-pubform select { background: var(--d-card); border-color: var(--d-line); color: var(--d-cream); } /* the platform-intro cards */ .ob6-intro { margin-top: 18px; } .ob6-intro-card { transition: transform .15s ease, box-shadow .15s ease; } .ob6-intro-card:hover { transform: translateY(-2px); box-shadow: var(--d-shadow, 0 12px 28px rgba(0,0,0,.35)); } body.dusk .ob6-intro-card { background: var(--d-card); border-color: var(--d-line); } /* the guided GYG distribution checklist */ .ob6-gyg h3 { font-size: .98rem; } .ob6-gyg-list { list-style: none; margin: 4px 0 0; padding: 0; } .ob6-gyg-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: .92rem; } .ob6-gyg-n { flex: none; inline-size: 22px; block-size: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .76rem; font-weight: 700; background: var(--cream-sunk, #efe6d8); color: var(--ink-2, #6b5a45); } .ob6-gyg-t { flex: 1 1 auto; min-width: 0; line-height: 1.5; } body.dusk .ob6-gyg-n { background: #2B2017; color: var(--d-tan); } /* reduced-motion: still the only animations this sheet adds. */ @media (prefers-reduced-motion: reduce) { .sn-progress-fill { transition: none; } .acc-panel { animation: none; } .rg-type { transition: none; } .ob6-intro-card { transition: none; } } /* ============================================================================ M1 — "THE JOURNEY" applied to OPERATOR ONBOARDING (presentation-only). Token-swap to the 8-token land palette; the motifs ride journey.css (loaded before this sheet). Scoped to .ob6-* / body.dusk. Logical CSS (LTR + RTL), copper does the work, Sea/Green only as -lit text, AA on the dark ground, reduced-motion + forced-colors fallbacks at the foot. ============================================================================ */ /* ---- the arrival HERO (the page-head as a Journey band) -------------------- */ /* the ridge sits BEHIND the editorial content; the .scrim (journey.css) keeps the greeting AA-legible over the art. The hero bleeds to the content edges like the home's .dusk-hero, but keeps the calmer onboarding rhythm. */ body.dusk .page-head.ob6-hero { position: relative; overflow: hidden; display: block; margin: -26px -36px 22px; padding: 34px 36px 44px; border-block-end: 1px solid var(--d-line); background: radial-gradient(120% 90% at 82% -10%, rgba(200,133,10,.10), transparent 60%), linear-gradient(180deg, var(--d-bg2) 0%, var(--d-bg) 100%); } body.dusk .page-head.ob6-hero .j-ridge { z-index: 0; opacity: .5; } body.dusk .page-head.ob6-hero .hero-inner { position: relative; z-index: 2; } body.dusk .page-head.ob6-hero .ob6-hero-top { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; } body.dusk .page-head.ob6-hero .titles { flex: 1 1 360px; min-width: 0; } /* DAWN kicker — Farasan Sea as -lit text (AA), the resting ✦ leading it */ body.dusk .page-head.ob6-hero .kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--d-sea-lit); } body.dusk .page-head.ob6-hero .kicker .nstar { width: 15px; height: 15px; color: var(--d-saff); flex: none; } body.dusk .page-head.ob6-hero h1.j-display { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.08; margin: 12px 0 0; color: var(--d-cream); } [dir="rtl"] body.dusk .page-head.ob6-hero h1.j-display { font-family: "Noto Naskh Arabic", "Amiri", serif; } body.dusk .page-head.ob6-hero .sub { color: var(--d-tan); margin-top: 10px; max-width: 60ch; } /* the quiet "Save & continue later" exit, top-end of the hero */ .ob6-saveexit { display: inline-flex; align-items: center; gap: 7px; margin-inline-start: auto; flex: none; padding: 9px 13px; min-height: 40px; border-radius: var(--r-btn, 12px); font-size: .9rem; font-weight: 500; text-decoration: none; } .ob6-saveexit svg { width: 17px; height: 17px; } body.dusk .ob6-saveexit { color: var(--d-tan); border: 1px solid var(--d-line); background: rgba(46,34,24,.5); } body.dusk .ob6-saveexit:hover { color: var(--d-cream); border-color: var(--d-copper); } body.dusk .ob6-saveexit:focus-visible { outline: 2px solid var(--d-saff); outline-offset: 2px; } /* ---- the stepper as "the path" — a faint copper trail between steps -------- */ /* a hairline reading as the trail; the steps are the waypoints. Kept subtle so it never competes with the current/viewing accents (already copper/saffron). */ body.dusk .ob6-steps { position: relative; align-items: stretch; } body.dusk .ob6-step { position: relative; } body.dusk .ob6-step::after { content: ""; position: absolute; inset-inline-start: 100%; inset-block-start: 50%; inline-size: 8px; block-size: 1px; background: var(--d-copper-2); opacity: .5; } body.dusk .ob6-step:last-child::after { display: none; } /* current = saffron ring (already copper border); viewing keeps the copper ring */ body.dusk .ob6-step.current { box-shadow: 0 0 0 2px var(--d-saff); } @media (max-width: 720px) { body.dusk .ob6-step::after { display: none; } } /* ---- the intake ARRIVAL panel (the welcome — THE-LAND-OPENS resolves here) -- */ body.dusk .ob6-arrival { position: relative; overflow: hidden; background: radial-gradient(120% 100% at 88% 0%, rgba(184,115,51,.12), transparent 62%), var(--d-card); border-color: var(--d-copper-2); padding: clamp(22px, 3vw, 34px); } body.dusk .ob6-arrival-inner .kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--d-sea-lit); } body.dusk .ob6-arrival-inner .kicker .nstar { width: 15px; height: 15px; color: var(--d-saff); flex: none; } body.dusk .ob6-arrival-greet { font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.1; margin: 12px 0 0; color: var(--d-cream); max-width: 24ch; } [dir="rtl"] body.dusk .ob6-arrival-greet { font-family: "Noto Naskh Arabic", "Amiri", serif; } body.dusk .ob6-arrival-line { color: var(--d-tan); margin-top: 12px; max-width: 52ch; line-height: 1.6; } .ob6-begin { min-height: 46px; } /* ---- the AI ✦ resting mark on the draft step ------------------------------ */ body.dusk .ob6-ai-star { display: inline-flex; width: 18px; height: 18px; color: var(--d-saff); vertical-align: -3px; } /* ---- the go-live GATE reasons as LAUNCHERS (numbers-are-launchers) --------- */ .ob6-gate-reason { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: .92rem; } .ob6-gate-reason + .ob6-gate-reason { border-block-start: 1px solid var(--sand-line); } .ob6-gate-reason > svg { width: 16px; height: 16px; flex: none; } .ob6-gate-reason-t { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px; } .ob6-gate-reason-t svg { width: 16px; height: 16px; flex: none; } .ob6-gate-go { display: inline-flex; align-items: center; gap: 5px; flex: none; font-weight: 600; font-size: .86rem; } .ob6-gate-go svg { width: 15px; height: 15px; } .ob6-gate-waits { flex: none; font-size: .82rem; } /* a launcher row is a real button affordance (pointer + hover + keyboard focus) */ .ob6-launch { cursor: pointer; padding-inline: 12px; margin-inline: -12px; border-radius: var(--r-btn, 12px); transition: background .15s ease; } body.dusk .ob6-gate-reason + .ob6-gate-reason { border-block-start-color: var(--d-line); } /* the reason text stays oud-amber (loss, never red); the "Go fix this" is copper */ body.dusk .ob6-gate-reason-t { color: var(--d-loss); } body.dusk .ob6-gate-reason-t svg { stroke: var(--d-loss); } body.dusk .ob6-launch .ob6-gate-go { color: var(--d-copper-lit); } body.dusk .ob6-launch:hover { background: rgba(184,115,51,.12); } body.dusk .ob6-launch:focus-visible { outline: 2px solid var(--d-saff); outline-offset: 2px; } body.dusk .ob6-gate-waits { color: var(--d-ink); } /* ---- RTL: the BACK-pointing chevron mirrors so "Back" points the way back -- */ /* the icon points left (LTR default in the path); under RTL we flip it so it points right — i.e. always "backward" in the reading direction. */ [dir="rtl"] .ob6-back-ico { transform: scaleX(-1); } /* ---- responsive — the hero + arrival hold on phone and big screen --------- */ @media (max-width: 860px) { body.dusk .page-head.ob6-hero { margin-inline: -16px; padding-inline: 16px; } .ob6-saveexit { margin-inline-start: 0; } } @media (max-width: 560px) { body.dusk .page-head.ob6-hero .ob6-hero-top { gap: 10px; } .ob6-gate-reason { flex-wrap: wrap; } } /* reduced-motion: the only transition above is the launcher hover — still it. */ @media (prefers-reduced-motion: reduce) { .ob6-launch { transition: none; } } /* forced-colors: drop the decorative hero washes + the trail; keep structure. */ @media (forced-colors: active) { body.dusk .page-head.ob6-hero { background: Canvas; } body.dusk .ob6-step::after { display: none; } body.dusk .ob6-arrival { background: Canvas; } }