/* ============================================================================ 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; } /* #44: the per-step granular detail — how many real ladder gates this step is still waiting on. Quiet (it is detail under the stage name, never the headline) and derived from the SAME ladder the tour reads, so it can never contradict it. */ .ob6-step-left { display: block; font-size: .74rem; font-weight: 500; color: var(--ink-3, var(--ink-2)); margin-top: 2px; } /* 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); } body.dusk .ob6-step-left { color: var(--d-ink-2, var(--d-ink)); } /* 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; } }