/* ============================================================================ Sanam — "THE JOURNEY" shared motif sheet (presentation-only). The reusable brand motifs of The Journey, loaded AFTER base_dusk.css and BEFORE the persona sheet (e.g. operator_dusk.css) so a surface can opt into the signature without re-implementing it. PIECE 1 wires it onto the operator Home; surfaces 2–5 (cockpit / reseller / onboarding / Ministry) reuse it so each is a restyle, not a rebuild. What lives here (canon §13): 1. THE SEA→PEAKS RIDGE — the journey across Saudi in one line (Farasan teal → oud/copper dune+hump → saffron Aseer crest + the Northern Star). A hero backdrop + a footer horizon, drawn from the 8-token land palette. 2. THE NORTHERN STAR ✦ — the four-point star that marks Sanam's AI; it SHIMMERS ONLY while ``body.ai-thinking`` (at rest it is still). 3. "THE LAND OPENS" — the owned load motion: once per session, the ridge DRAWS itself and the star settles LAST. ``body.land-opens`` plays it; otherwise everything sits in its static final state. prefers-reduced- motion → never plays (static). 4. TYPE GUARDRAILS — Marcellus display (sentence-case), Hanken tabular numbers (never jitter), Naskh Arabic. 5. ``.scrim`` — the legibility wash for text over imagery + a card-art bottom gradient. Design law: a re-skin is a token swap — every colour here reads a --d-* token (base_dusk.css owns the values), logical CSS properties (LTR + RTL), copper does the work, Sea/Green never as small text (use the -lit tokens), AA on the dark ground, prefers-reduced-motion + forced-colors respected. Scoped to ``body.dusk`` so the warm public faces are never touched. ========================================================================== */ /* ---- tabular numbers — the working numbers never jitter --------------------- */ body.dusk .num, body.dusk .tabular, body.dusk .count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -.01em; } /* an LTR-isolated number reads correctly inside an Arabic sentence */ body.dusk .ltr-num { unicode-bidi: isolate; direction: ltr; } /* ---- type guardrails — Marcellus display, sentence-case (no shouting caps) -- */ body.dusk .j-display { font-family: "Marcellus", Georgia, serif; font-weight: 400; letter-spacing: -.005em; line-height: 1.08; } /* ============================================================================ THE NORTHERN STAR ✦ (the AI mark) — still at rest, shimmers only when the assistant is thinking (body.ai-thinking). The shimmer is GPU-cheap + guarded. ============================================================================ */ body.dusk .nstar { color: var(--d-saff); } body.dusk .nstar svg, body.dusk svg.nstar { display: block; filter: drop-shadow(0 0 6px rgba(200,133,10,.45)); } /* the ✦ shimmers ONLY while Sanam is "thinking" */ body.dusk.ai-thinking .nstar svg, body.dusk.ai-thinking svg.nstar, body.dusk.ai-thinking .j-star-mark svg, body.dusk.ai-thinking .star-bullet { animation: jStarShimmer 1.1s ease-in-out infinite; } @keyframes jStarShimmer { 0%, 100% { opacity: .68; transform: scale(1); filter: drop-shadow(0 0 4px rgba(230,174,69,.4)); } 50% { opacity: 1; transform: scale(1.12); filter: drop-shadow(0 0 9px rgba(230,174,69,.85)); } } /* ============================================================================ THE SEA→PEAKS RIDGE — the brand horizon. A quiet hero backdrop (top) + a footer horizon (foot) carrying the eye out. The SVG strokes carry the land gradient inline; these rules only place + soften the art. ============================================================================ */ body.dusk .j-ridge { position: absolute; inset-inline: 0; inset-block-end: -2px; z-index: 0; pointer-events: none; overflow: hidden; height: clamp(140px, 20vw, 280px); opacity: .6; } body.dusk .j-ridge svg { width: 100%; height: 100%; display: block; } /* the footer horizon: low + soft, NOT a hard full-width divider */ body.dusk .j-ridge-foot { position: relative; height: clamp(110px, 13vw, 190px); margin-top: 6px; overflow: hidden; z-index: 1; pointer-events: none; } body.dusk .j-ridge-foot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* ============================================================================ "THE LAND OPENS" — the owned load motion. ``body.land-opens`` plays it once; otherwise every path/fill/star is at its drawn/settled final state (static). ============================================================================ */ body.dusk .draw-path { stroke-dasharray: var(--len, 2000); stroke-dashoffset: 0; } /* default = drawn */ body.dusk .draw-fill { opacity: 1; } /* default = present */ body.dusk .draw-star { opacity: 1; transform: scale(1); transform-origin: center; } /* default = settled */ body.dusk.land-opens .draw-path { stroke-dashoffset: var(--len, 2000); animation: jLandDraw .9s cubic-bezier(.22,.7,.18,1) forwards; animation-delay: var(--draw-delay, 0s); } body.dusk.land-opens .draw-fill { opacity: 0; animation: jLandFill .8s ease-out forwards; animation-delay: var(--fill-delay, .35s); } body.dusk.land-opens .draw-star { opacity: 0; transform: scale(.4); animation: jStarSettle .6s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: var(--star-delay, .95s); /* the star settles LAST */ } @keyframes jLandDraw { to { stroke-dashoffset: 0; } } @keyframes jLandFill { from { opacity: 0; } to { opacity: 1; } } @keyframes jStarSettle { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } } /* ============================================================================ THE HORIZON BREATHES AT REST (UI/UX Round 1, the headline lift). ---------------------------------------------------------------------------- Once "THE LAND OPENS" has drawn the ridge it used to FREEZE — the surface went dead. Here the already-drawn ridge keeps a very slow, GPU-cheap IDLE breath: a tiny vertical drift (~2-3px) + a faint opacity shimmer on the two ridge lines, on a long ~9-11s loop, slightly offset so the front + back crests don't move in lockstep (a living horizon, not a metronome). It is a SHARED SVG (S.journeyRidge), so EVERY Dusk hero + footer horizon breathes at once. Transform/opacity only (compositor-cheap, no layout/paint), so the cost is near-zero even with several on screen. GATED behind prefers-reduced-motion: no-preference — a reduced-motion user never gets the breath (belt-and-braces with the @media reduce freeze below). The breath rides the ridge LINES (.draw-path / the foot path), never the star (the ✦ has its own ai-thinking shimmer) and never the fill (kept solid). */ @media (prefers-reduced-motion: no-preference) { body.dusk .j-ridge .draw-path, body.dusk .j-ridge-foot path:not(.draw-star) { animation: jHorizonBreath 9.5s ease-in-out infinite; will-change: transform, opacity; } /* the back crest breathes a touch slower + offset, so the two lines drift independently (the living-horizon feel, not a single rigid wave). */ body.dusk .j-ridge svg .back, body.dusk .j-ridge-foot svg .back { animation-duration: 11.5s; animation-delay: -3.2s; } } /* the breath: a tiny lift + a faint opacity swell, returning to rest. The translate amplitude is intentionally small (2.5px) so it reads as "alive", never as drifting/jitter; the working numbers + chrome are untouched. */ @keyframes jHorizonBreath { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .7; } 50% { transform: translate3d(0, -2.5px, 0); opacity: .82; } } /* ============================================================================ THE SHARED DRAFTING STATE — DUSK FACE (UI/UX Round 1, #5). The Dusk override for S.draftingState's .draft-state, so the "AI is composing" state reads with the copper/oud finish on the dark ground (matches the reseller builder's original .rb-drafting). The F2 light face lives in platform.css. ============================================================================ */ body.dusk .draft-state { background: var(--d-card-3); border: 1px solid var(--d-line); } body.dusk .draft-state .rb-drafting-spark, body.dusk .draft-state .draft-spark { background: radial-gradient(circle at 36% 30%, rgba(204,146,72,.32), rgba(184,115,51,.14)); border: 1px solid rgba(204,146,72,.4); } body.dusk .draft-state .rb-drafting-spark svg, body.dusk .draft-state .draft-spark svg { stroke: var(--d-saff); } body.dusk .draft-state .rb-drafting-msg, body.dusk .draft-state .draft-msg { color: var(--d-tan); } @media (prefers-reduced-motion: reduce) { .draft-state .rb-drafting-spark svg, .draft-state .draft-spark svg { animation: none; } } /* ============================================================================ .scrim — the legibility wash for cream text over imagery / coloured art, and the card-art bottom gradient (so a kicker/title over art always clears AA). ============================================================================ */ body.dusk .scrim { position: relative; } body.dusk .scrim::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 38%, rgba(22,16,9,.34) 70%, rgba(22,16,9,.62) 100%); } body.dusk .scrim > * { position: relative; z-index: 1; } /* a card's art tile gets a warm copper-grounded foot so a label below the art reads */ body.dusk .j-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 40%, rgba(26,19,13,.34) 72%, rgba(184,115,51,.16) 100%); } /* ============================================================================ prefers-reduced-motion — freeze to the static final state (the draw never plays, the star never shimmers, numbers never animate). Belt-and-braces with the JS, which also omits the play class + the SMIL when motion is reduced. ============================================================================ */ @media (prefers-reduced-motion: reduce) { body.dusk .draw-path { stroke-dashoffset: 0 !important; } body.dusk .draw-fill { opacity: 1 !important; } body.dusk .draw-star { opacity: 1 !important; transform: scale(1) !important; } body.dusk.ai-thinking .nstar svg, body.dusk.ai-thinking svg.nstar, body.dusk.ai-thinking .j-star-mark svg, body.dusk.ai-thinking .star-bullet { animation: none !important; } } /* ============================================================================ forced-colors — drop the decorative art + glows; keep structure legible. ============================================================================ */ @media (forced-colors: active) { body.dusk .j-ridge, body.dusk .j-ridge-foot { display: none; } body.dusk .scrim::after, body.dusk .j-art::after { display: none; } } /* ============================================================================ THE JOURNEY — the GENERIC, PERSONA-AGNOSTIC v4 FINISH (the "look"). This block is the SINGLE SOURCE of the shared v4 finish used across EVERY Dusk surface (operator · cockpit · reseller · Ministry). It was lifted out of operator_dusk.css (which only ever scoped it to body.dusk, never operator-only) so the other portals get the IDENTICAL finish by simply -ing this sheet AFTER base_dusk.css — no per-portal re-implementation, no drift, no double- application conflict. operator_dusk.css now keeps ONLY operator-specific finish (.alert-row, .pool-card, .dusk-hero, .copilot, the home zones, distribution…). What "the finish" is (canon §13 / v4): · the WARM GLASSY PILL buttons (.btn = translucent oud pill; .btn-primary = the bright vertical copper press→lit gradient, dark ink @ AA); · the layered CARD (the oud card gradient, the canon 16px radius, the deep shadow + the inset cream hairline); · the copper DAWN-GLOW radial fill on the working KPI chip (.kpi); · the NAJDI NOTCH crest on any card that carries a header; · the page-head copper ACCENT bar (the leading-accent rhythm). Design law: a re-skin is a token swap — every colour reads a --d-* token (base_dusk.css owns the values), logical CSS (LTR + RTL), copper does the work, negatives stay Oud, AA on the dark ground. Scoped to body.dusk only. ============================================================================ */ /* ---- the WARM GLASSY PILL buttons ------------------------------------------- V4 FIDELITY B2/A3 — the secondary button is a WARM translucent oud pill (NOT a cold grey wash): rgba(46,34,24,.5) + a warm border, pill radius, weight 700. */ body.dusk .btn { background: rgba(46,34,24,.5); color: var(--d-cream); border-color: var(--d-line-3); border-radius: 999px; font-weight: 700; } body.dusk .btn svg { stroke: var(--d-saff); } body.dusk .btn:hover { background: rgba(46,34,24,.82); border-color: var(--d-copper-lit); } /* V4 FIDELITY B1 — the primary button raised into light: the BRIGHT VERTICAL copper press→lit gradient (luminous), pill radius, weight 700, dark ink (#1A130D ≥ 4.85:1 AA — never white). */ body.dusk .btn-primary { background: linear-gradient(180deg, var(--d-copper-press), var(--d-copper-lit)); border-color: var(--d-copper-lit); color: #1A130D; font-weight: 700; box-shadow: 0 6px 15px rgba(184,115,51,.28); } body.dusk .btn-primary svg { stroke: #1A130D; } body.dusk .btn-primary:hover { background: linear-gradient(180deg, #F2C079, var(--d-copper-press)); border-color: var(--d-copper-press); box-shadow: 0 9px 22px rgba(184,115,51,.45); } body.dusk .btn-sm { background: rgba(46,34,24,.5); border-radius: 999px; } /* REQ-018 P1-4 (root-cause, mirrored from operator_dusk.css): a small PRIMARY button must stay a primary — `.btn-sm` otherwise paints the dark oud fill under the `.btn-primary` dark ink, hiding the label. Restore the copper gradient so the label reads AA on EVERY `.btn-primary.btn-sm`. */ body.dusk .btn-primary.btn-sm { background: linear-gradient(180deg, var(--d-copper-press), var(--d-copper-lit)); color: #1A130D; } body.dusk .btn-primary.btn-sm svg { stroke: #1A130D; } body.dusk .btn-primary.btn-sm:hover { background: linear-gradient(180deg, #F2C079, var(--d-copper-press)); } /* ---- the layered CARD ------------------------------------------------------- V4 FIDELITY A2/A6 — the oud card gradient, the canon 16px radius, the deep shadow + the inset cream hairline (no backdrop blur; v4's "glass" is layered translucent fills). */ body.dusk .card { background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); border: 1px solid var(--d-line); border-radius: 16px; box-shadow: var(--d-shadow), inset 0 1px 0 rgba(244,237,226,.05); } body.dusk .card.sunk { background: #241A12; box-shadow: none; } body.dusk .card h3 a { color: var(--d-star-lit); } /* ---- the copper DAWN-GLOW working KPI chip ---------------------------------- the small breakdown KPI chip (earnings recon, pricing net-breakdown, cockpit / MT bands): a copper dawn-glow radial over the oud card gradient + the canon 16px radius, so the small stat chips match the big .stat-tile language. */ body.dusk .kpi { background: radial-gradient(130% 120% at 8% 0%, rgba(184,115,51,.09), transparent 60%), linear-gradient(180deg, var(--d-card), var(--d-card-3)); border: 1px solid var(--d-line); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(244,237,226,.04); } /* ---- the NAJDI NOTCH crest -------------------------------------------------- a dawn-lit shoulder dome on the top edge of any card that carries a header (.section-title or an

/

first child). The home's .stat-tile/.pool-card carry their own crest; this generalizes it to the working header cards. */ body.dusk .card { position: relative; } body.dusk .card:has(> .section-title)::before, body.dusk .card:has(> h2:first-child)::before, body.dusk .card:has(> h3:first-child)::before { content: ""; position: absolute; inset-inline: 22px; inset-block-start: -1px; height: 13px; border-radius: 0 0 60% 60% / 0 0 100% 100%; background: linear-gradient(180deg, rgba(184,115,51,.16), transparent); pointer-events: none; z-index: 1; } /* keep the card's own content above the crest layer */ body.dusk .card:has(> .section-title) > *, body.dusk .card:has(> h2:first-child) > *, body.dusk .card:has(> h3:first-child) > * { position: relative; z-index: 2; } /* ---- the page-head copper ACCENT bar ---------------------------------------- the leading-accent rhythm on every Dusk sub-screen H1 band. */ body.dusk .page-head { position: relative; padding-inline-start: 16px; } body.dusk .page-head::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 0; inline-size: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--d-star-lit), var(--d-copper)); } /* ---- the UNIVERSAL hover-lift — the DUSK copper-tinted glow face ------------- The F2 (light) hover-lift on every CLICKABLE card/row/tile lives in platform.css; here is the Dusk override that adds the warm copper border + the soft copper-tinted glow (the SAME glow .persona-card:hover wears in operator_dusk.css), so a clickable working surface lifts with a quiet dawn-glow on the dark ground. Scoped to clickable ONLY (an /