/* ============================================================================ Sanam OPERATOR portal — "Dusk" re-skin (operator pages ONLY). Approved target: 08-shared/cto-mvp-program/ux/operator_v2/mockups/ dashboard_dusk_v2.html. This sheet is loaded AFTER platform.css on the OPERATOR (supplier) surfaces only — every operator template carries , so these overrides scope to the operator portal and NEVER touch the buyer storefront, the MT view, the Sanam cockpit, or the shared :root token contract platform.css owns (the other personas keep F2). The Dusk system (from the mockup): * dark charcoal/oud ground (--d-bg #1A130D) + copper #CC9248 / saffron #E6AE45 glow; warm depth, faint grain. * Marcellus (display) + Hanken Grotesk (UI) + Noto Naskh Arabic (Arabic). * layered cards with a copper top-accent + hover lift; the breathing "needs attention" dot; count-up KPI numbers (driven by the JS). * the LIVING horizon (two SMIL SVG paths) + the seal watermark in the Home hero (emitted by supplier_home.js). * prefers-reduced-motion guard; AA contrast on the dark ground. Design law kept: tokens here are a SCOPED override block (a re-skin = a token swap), logical CSS properties throughout (one sheet, LTR + RTL), copper does the work, negatives stay in Oud, numbers never jitter. ========================================================================== */ /* ---- the Dusk palette, scoped to the operator surface ----------------------- */ body.dusk { --d-bg: #161009; --d-bg2: #1A130D; --d-panel: #241A12; --d-card: #2E2218; --d-card-2: #352719; --d-card-3: #291E14; --d-line: #3A2B1E; --d-line-2: #4A3727; --d-line-3: #58402A; /* body text rides toward cream at AA on the deeper oud ground. */ --d-cream: #F4EDE2; --d-tan: #D2BB9B; --d-ink: #BDA384; --d-ink-2: #C8AC8C; /* ===== THE JOURNEY · the 8-token LAND palette (canon §13) — scoped copy ===== Mirrors base_dusk.css :root (the always-present source); kept here for the body.dusk back-compat scope. A re-skin is a TOKEN SWAP: same NAMES, the VALUES move to the land palette. Copper LEADS; Saffron is the Northern Star / focus ring / "needs you"; Sea + Green are FILL (use the `-lit` siblings as small TEXT on the dark ground — AA). */ --d-copper: #B87333; /* Dallah Copper — lead, ridge, primary actions */ --d-copper-2: #9A6638; /* copper depth (dividers, pressed) */ --d-copper-press: #E8B068; /* copper pressed bright */ --d-copper-lit: #CC9248; /* copper raised into light — copper TEXT (AA) */ --d-saff: #C8850A; /* Saffron / Northern Star ✦ / focus ring / "needs you" */ --d-star-lit: #E6AE45; /* saffron raised into light (text/glow, AA) */ --d-green: #6F8260; /* Asir Green — healthy / on-track (FILL) */ --d-green-lit: #9DB389; /* asir green raised for TEXT on dark (AA) */ --d-sea: #3E6F74; /* Farasan Sea — cool / informational (FILL) */ --d-sea-lit: #5E9AA0; /* farasan sea raised for TEXT on dark (AA) */ --d-oud: #7A4B2E; /* Oud — deep warm structure, dividers, depth */ --d-tan-warm: #C4A882; /* Camel Tan — warm neutral surfaces, hairlines */ /* the landed-loss amber — negatives stay in OUD, never red. ONE canonical source for the loss colour across every Dusk sheet (cockpit num-loss, operator loss pill, reseller remove glyph). A re-skin = a token swap. */ --d-loss: #E0A07A; --d-shadow: 0 18px 40px rgba(0,0,0,.42); --d-shadow-2: 0 30px 56px rgba(0,0,0,.5); background: var(--d-bg); color: var(--d-cream); -webkit-font-smoothing: antialiased; /* flip the NATIVE form chrome to dark mode: without this the date-picker indicator + number spinners render dark-on-dark (invisible) on the real write screens (the reservation form's Date / Guests / runs / price). */ color-scheme: dark; } /* very faint grain for warmth/depth (matches the mockup body::before) */ body.dusk::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .4; mix-blend-mode: overlay; background-image: radial-gradient(rgba(230,174,69,.05) 1px, transparent 1px); background-size: 3px 3px; } body.dusk ::selection { background: #CC924855; } /* ============================================================================ §14 — THE TOP NAV (operator surface). The shell ships BOTH the left sidebar (kept in the DOM for active-nav re-highlight + the mobile drawer + the role- gate wiring + the build's tests) AND a sticky TOP bar of dropdown categories. On the operator (body.dusk) surface we HIDE the sidebar, collapse the app grid to a single column, and let the TOP bar be the nav (the founder's §14 decision). Scoped to body.dusk so the other personas are untouched (they keep the sidebar until their own categories are added). ============================================================================ */ body.dusk .app { grid-template-columns: 1fr; } /* no sidebar column on operator */ body.dusk .sidebar { display: none; } /* the TOP bar replaces it */ /* the sticky top bar — frozen on scroll; content scrolls beneath it */ body.dusk .topnav { position: sticky; inset-block-start: 0; z-index: 40; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 22px); padding: 10px clamp(14px, 2.2vw, 30px); background: rgba(26,19,13,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--d-line); } /* the brand lockup (logo links home) */ body.dusk .topnav-brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; } @media (max-width: 920px) { body.dusk .topnav-brand .sl-words { display: none; } } /* ========================================================================== THE SANAM WORDMARK LOCKUP (2026-07-01) — the ONE reusable brand signature. A refined four-point Northern-Star mark (copper→saffron gradient fill, an inner facet stroke) + the bilingual wordmark: سَنام (Naskh, copper) · Sanam (Marcellus, ink). Structure lives here (dusk colours); the day-theme colour override lives in paper_desert.css. RTL: the Arabic naturally leads (it is first in source + flex follows dir). AA in both grounds. Used by: the shell top-nav (.sanam-lockup--nav), the sign-in card + operator home (--hero). ========================================================================== */ .sanam-lockup { display: inline-flex; align-items: center; gap: 9px; line-height: 1; white-space: nowrap; vertical-align: middle; } .sanam-lockup .sl-mark { display: inline-flex; flex: none; } .sanam-lockup .sanam-mark { width: 1.05em; height: 1.05em; overflow: visible; color: var(--d-saff); } .sanam-lockup .sanam-mark .sm-star { fill: currentColor; } .sanam-lockup .sanam-mark .sm-facet { stroke: var(--d-cream); stroke-width: .9; } .sanam-lockup .sl-words { display: inline-flex; align-items: baseline; gap: .38em; } .sanam-lockup .sl-ar { font-family: "Noto Naskh Arabic", "Amiri", serif; font-weight: 500; color: var(--d-copper-lit); letter-spacing: 0; } .sanam-lockup .sl-en { font-family: "Marcellus", serif; font-weight: 400; color: var(--d-cream); letter-spacing: .01em; } /* a hairline copper dot separates the two words (a small crafted flourish). */ .sanam-lockup .sl-words::before { content: ""; align-self: center; width: 3px; height: 3px; border-radius: 50%; background: var(--d-copper); opacity: .8; margin-inline: .16em; order: 1; flex: none; } .sanam-lockup .sl-ar { order: 0; } .sanam-lockup .sl-en { order: 2; } /* RTL: the Arabic still leads (order 0), the Latin trails — reads naturally. */ /* size variants */ .sanam-lockup--nav { font-size: 1.06rem; } .sanam-lockup--nav .sanam-mark { color: var(--d-saff); } .sanam-lockup--hero { font-size: 1.45rem; gap: 11px; } .sanam-lockup--hero .sanam-mark { color: var(--d-saff); width: 1.15em; height: 1.15em; } /* dusk mark: saffron star with a copper-lit facet so it reads crafted on dark. */ body.dusk .sanam-lockup .sanam-mark { color: var(--d-saff); } body.dusk .sanam-lockup .sanam-mark .sm-star { fill: currentColor; } body.dusk .sanam-lockup .sanam-mark .sm-facet { stroke: var(--d-copper-lit); opacity: .7; } body.dusk .sanam-lockup .sl-en { color: var(--d-cream); } body.dusk .sanam-lockup .sl-ar { color: var(--d-copper-lit); } /* the lockup on a hero brand line gets its OWN line (block flex) + breathing room below it, so the kicker/greeting that follows drops beneath it rather than running inline with the wordmark. Operator home = start-aligned; the sign-in hero is centred (its .lg-hero-inner is text-align:center). */ .hero-brand { display: flex; justify-content: flex-start; text-decoration: none; margin-bottom: 10px; } [dir="rtl"] .hero-brand { justify-content: flex-end; } .lg-brand { display: flex; justify-content: center; text-decoration: none; margin-bottom: 14px; } /* the category row (band of dropdown buttons). A3 (2026-07-02): the 9-item IA nav (Home·Assets·Listings·Calendar·Bookings·Trip· Sell·Money·Account) outgrew the bar → the cats painted ON TOP of the right cluster (garbled "Ask S[an]a[ccount]") in the 761–1440px+ band. Fix WITHOUT clipping the cats box (clipping would cut off the absolute .topnav-menu dropdowns): the cats keep ``overflow:visible`` so dropdowns show, but (a) the spacing/padding condense responsively (the tiers below) so on 1280/1366/1440 everything genuinely FITS, and (b) .topnav-right is a SOLID, higher-z reserved slot (below) so it can never be painted-under/garbled even in an extreme edge case. min-width:0 lets the row shrink. */ body.dusk .topnav-cats { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: visible; } body.dusk .topnav-home, body.dusk .topnav-cat { display: inline-flex; align-items: center; gap: 8px; flex: none; font: inherit; font-size: .92rem; font-weight: 600; color: var(--d-tan); background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 9px 14px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color .2s, background .2s, border-color .2s; } body.dusk .topnav-home svg, body.dusk .topnav-cat svg { width: 17px; height: 17px; stroke: currentColor; flex: none; } body.dusk .topnav-home:hover, body.dusk .topnav-cat:hover { color: var(--d-cream); background: rgba(184,115,51,.12); } body.dusk .topnav-home.active, body.dusk .topnav-cat.active { color: var(--d-cream); background: rgba(184,115,51,.14); } body.dusk .topnav-home.active svg, body.dusk .topnav-cat.active svg { stroke: var(--d-saff); filter: drop-shadow(0 0 6px rgba(230,174,69,.5)); } body.dusk .topnav-caret { width: 14px !important; height: 14px !important; opacity: .8; transition: transform .2s; } body.dusk .topnav-group.open .topnav-caret { transform: rotate(90deg); } body.dusk .topnav-group { position: relative; } /* the dropdown menu */ body.dusk .topnav-menu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-width: 232px; z-index: 50; padding: 8px; background: linear-gradient(180deg, #261B12, #1F160E); border: 1px solid var(--d-line-2); border-radius: 14px; box-shadow: 0 24px 54px rgba(0,0,0,.5), inset 0 1px 0 rgba(244,237,226,.05); } body.dusk .topnav-item { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: .9rem; color: var(--d-ink); text-align: start; background: transparent; border: 0; border-radius: 10px; padding: 10px 11px; cursor: pointer; text-decoration: none; transition: background .18s, color .18s; } body.dusk .topnav-item svg { width: 18px; height: 18px; stroke: var(--d-ink); flex: none; } body.dusk .topnav-item:hover { background: #2F2216; color: var(--d-cream); } body.dusk .topnav-item:hover svg { stroke: var(--d-cream); } body.dusk .topnav-item.active { background: linear-gradient(135deg, #3B2B1C, #2C2016); color: var(--d-cream); } body.dusk .topnav-item.active svg { stroke: var(--d-saff); } body.dusk .topnav-item.soon { opacity: .6; } body.dusk .topnav-item .soon-tag { margin-inline-start: auto; font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; color: var(--d-ink); background: #2B2017; border-radius: 5px; padding: 1px 5px; } /* the top-right cluster: ✦ Ask Sanam · ? Help (the account ▾ stays in the topbar). A3 (2026-07-02): a RESERVED, higher-z slot with the topnav ground behind it + a small start-side pad, so even in an extreme edge case an overflowing cat can never paint garbled UNDER "Ask Sanam" (it slides behind this opaque slot instead). The bar itself is the sticky context, so this z-index only orders siblings. */ body.dusk .topnav-right { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; position: relative; z-index: 2; padding-inline-start: 8px; background: rgba(26,19,13,.88); } body.dusk .topnav-ask { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .88rem; font-weight: 700; color: var(--d-star-lit); background: rgba(200,133,10,.13); border: 1px solid rgba(200,133,10,.4); border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; } body.dusk .topnav-ask:hover { background: rgba(200,133,10,.24); color: #EAC57E; } body.dusk .topnav-ask .topnav-ask-star { width: 16px; height: 16px; color: var(--d-saff); } body.dusk .topnav-help { /* a11y (Cursor A11Y): >=44px touch target (WCAG 2.5.5) — was 38px. */ display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--d-line-2); background: rgba(46,34,24,.5); color: var(--d-tan); text-decoration: none; transition: border-color .2s, color .2s, background .2s; } body.dusk .topnav-help:hover { border-color: var(--d-copper); color: var(--d-cream); background: rgba(46,34,24,.82); } body.dusk .topnav-help svg { width: 18px; height: 18px; stroke: currentColor; } @media (max-width: 600px) { body.dusk .topnav-ask .ui-en, body.dusk .topnav-ask .ui-ar { display: none; } } /* ---- A3 (2026-07-02): the DESKTOP-band FIT tiers ----------------------------- The 9-item operator nav + Ask-Sanam + theme + Help must FIT (no overlap, no scroll) at 1280/1366/1440. It doesn't at the comfortable base spacing, so the cats/right cluster condense progressively as width tightens. .topnav-cats already clips to its own box (so it can NEVER paint under .topnav-right); these tiers just pull everything back inside the bar so the clip is never even reached. RTL-safe (all logical props / symmetric spacing). Ordered widest→narrowest. */ /* ≤1440: trim the shell padding + cat spacing so 9 items clear the right cluster. */ @media (max-width: 1440px) { body.dusk .topnav { gap: clamp(6px, 1vw, 14px); padding-inline: clamp(12px, 1.6vw, 20px); } body.dusk .topnav-home, body.dusk .topnav-cat { padding: 8px 11px; gap: 6px; font-size: .9rem; } body.dusk .topnav-right { gap: 6px; } } /* ≤1400: the Ask-Sanam pill collapses to its ✦ star (its label is redundant next to the mark), freeing ~90px. This is what lets the full 9-item nav FIT at 1366 AND 1280 with real clearance — every destination stays a full labelled button; only the AI affordance condenses to an icon (mirrors the ≤600 rule + the report's option). */ @media (max-width: 1400px) { body.dusk .topnav-ask .ui-en, body.dusk .topnav-ask .ui-ar { display: none; } body.dusk .topnav-ask { padding: 8px; } } /* ≤1320: tighten the cat padding a touch more so 1280 clears comfortably. */ @media (max-width: 1320px) { body.dusk .topnav-home, body.dusk .topnav-cat { padding: 8px 9px; gap: 5px; font-size: .88rem; } } /* ≤1180: last desktop condense before the phone rule — the tightest cat padding. Below 760 the cats row's own overflow-scroll carries any remaining tail. */ @media (max-width: 1180px) { body.dusk .topnav-home, body.dusk .topnav-cat { padding: 8px; gap: 4px; } } /* the existing .topbar row (org-switch · locale · account ▾) sits just beneath the sticky topnav. The TOP nav (categories · ✦ Ask Sanam · ? Help) is the frozen band; the secondary topbar scrolls with the page (reachable on scroll- up) so the two sticky bars never stack on each other. On a phone the topnav cats overflow-scroll. */ @media (max-width: 760px) { body.dusk .topnav { gap: 6px; padding-inline: 14px; overflow-x: auto; } body.dusk .topnav-cats { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.dusk .topnav-cats::-webkit-scrollbar { display: none; } } /* ---- App shell (sidebar + main) --------------------------------------------- */ body.dusk .app { background: var(--d-bg); position: relative; z-index: 1; } body.dusk .sidebar { background: linear-gradient(180deg, #261B12, #1F160E); border-inline-end: 1px solid var(--d-line); } body.dusk .brand-text { color: var(--d-cream); } body.dusk .brand-text .ar { color: var(--d-copper-lit); font-family: "Noto Naskh Arabic", "Amiri", serif; } body.dusk .hump { background: var(--d-copper); box-shadow: 0 0 9px rgba(204,146,72,.45), inset 0 -2px 0 rgba(0,0,0,.25); } body.dusk .nav-section { color: var(--d-copper-lit); opacity: .8; } /* P1 nav grouping: the per-group sub-section headers in the GROUPED supplier sidebar. The first one hugs the brand; the rest get a hairline + a touch more air above so each group reads as a chapter (not a wall of 16 links). The drawer variant spans both grid columns so a header is never wedged into one cell. */ body.dusk .sidebar .nav-subsection { padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--d-line); } body.dusk .sidebar .nav-subsection:first-of-type { padding-top: 6px; margin-top: 0; border-top: 0; } body.dusk .nav-drawer-links .nav-subsection { grid-column: 1 / -1; padding-top: 12px; } body.dusk .nav-drawer-links .nav-subsection:first-of-type { padding-top: 2px; } body.dusk .nav-link { color: var(--d-ink); } body.dusk .nav-link svg { stroke: var(--d-ink); } body.dusk .nav-link:hover { background: #2F2216; color: var(--d-cream); } body.dusk .nav-link:hover svg { stroke: var(--d-cream); } body.dusk .nav-link.active { background: linear-gradient(135deg, #3B2B1C, #2C2016); color: var(--d-cream); box-shadow: inset 0 0 0 1px var(--d-line-3), 0 8px 20px rgba(0,0,0,.45); } body.dusk .nav-link.active svg { stroke: var(--d-saff); filter: drop-shadow(0 0 6px rgba(230,174,69,.55)); } body.dusk .nav-link.soon { opacity: .55; } body.dusk .nav-link .soon-tag { color: var(--d-ink); background: #2B2017; } body.dusk .nav-foot { color: var(--d-ink); border-top-color: var(--d-line); } body.dusk .nav-portal-switch { color: var(--d-tan); border-color: var(--d-line-2); } body.dusk .nav-portal-switch:hover { color: var(--d-cream); border-color: var(--d-copper); background: #2F2216; } /* ---- Top bar ---------------------------------------------------------------- */ body.dusk .main { background: var(--d-bg); } body.dusk .topbar { background: rgba(31,22,14,.82); backdrop-filter: blur(8px); border-bottom: 1px solid var(--d-line); } body.dusk .org-switch { background: #2B2017; border-color: var(--d-line-2); color: var(--d-cream); } body.dusk .org-switch select { color: var(--d-cream); } body.dusk .org-switch select option { background: #2B2017; color: var(--d-cream); } body.dusk .org-switch svg { stroke: var(--d-ink); } body.dusk .org-switch .dot { background: var(--d-green); } body.dusk .locale-toggle { border-color: var(--d-line-2); } body.dusk .locale-toggle button { background: #2B2017; color: var(--d-ink); } /* AA fix: dark ink on the copper gradient (white = 2.7:1 fail; #1A130D ≥ 4.85:1). */ body.dusk .locale-toggle button.on { background: linear-gradient(135deg, var(--d-copper), var(--d-copper-2)); color: #1A130D; } body.dusk .role-chip { background: #2B2017; border-color: var(--d-line-2); color: var(--d-tan); } body.dusk .role-chip svg { stroke: var(--d-ink); } body.dusk .avatar { background: linear-gradient(135deg, var(--d-copper), #7A4B2E); color: #1A130D; box-shadow: 0 0 14px rgba(204,146,72,.32); } /* the operate-as concierge banner + the truth strip on the dark ground */ body.dusk .operate-as { background: #3B2B1C; color: var(--d-star-lit); border-bottom: 1px solid var(--d-line-2); } body.dusk .operate-as svg, body.dusk .operate-as strong { color: var(--d-star-lit); stroke: var(--d-star-lit); } body.dusk .demo-strip { background: #20160E; color: var(--d-ink); border-bottom: 1px solid var(--d-line); } /* ---- Typography on the dark ground ------------------------------------------ */ body.dusk { font-family: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; } body.dusk h1, body.dusk h2, body.dusk h3, body.dusk h4 { color: var(--d-cream); } body.dusk .muted { color: var(--d-tan); } body.dusk .faint { color: var(--d-ink); } body.dusk a { color: var(--d-star-lit); } body.dusk .page-head .sub { color: var(--d-tan); } /* FIX (69): defensive narrow-width safety for every Dusk persona page-head (the supplier-portal sub-pages + the founder Commission Control Center share this plain .page-head). The 1.75rem Marcellus title of the longest page ("Commission Control Center") sat close to a 390px edge; let the long title + sub wrap rather than risk a clip under the shell's overflow-x guard. Additive, RTL-safe. */ @media (max-width: 440px) { body.dusk .page-head h1 { font-size: 1.45rem; overflow-wrap: anywhere; } body.dusk .page-head .sub { overflow-wrap: anywhere; } } /* RTL: dir="rtl" is set on , so the OLD self-qualified selector matched nothing and Arabic fell back to Amiri. Scope from the ancestor instead so Noto Naskh Arabic actually applies to the operator body in Arabic, and give the display headings the Arabic-correct stack too (Marcellus has no Arabic glyphs, so Naskh carries the headings in RTL). */ [dir="rtl"] body.dusk { font-family: "Noto Naskh Arabic", "Amiri", serif; } [dir="rtl"] body.dusk h1, [dir="rtl"] body.dusk h2, [dir="rtl"] body.dusk h3, [dir="rtl"] body.dusk h4, [dir="rtl"] body.dusk .dusk-hero .greet { font-family: "Noto Naskh Arabic", "Amiri", serif; } /* ---- Focus ring (A11y) ------------------------------------------------------ The shared platform focus ring is tuned for the cream F2 ground and is nearly invisible on the dark Dusk ground. Scope a high-contrast saffron ring to the operator surface: saffron #E6AE45 on the dark ground is ~6.7:1 (>= 3:1 AA for non-text/UI). Full opacity, 3px, on every keyboard-focused control. */ body.dusk :focus-visible { box-shadow: 0 0 0 3px var(--d-saff); outline: none; } /* keep the field's own copper border on focus AND show the saffron ring around it */ body.dusk .field input:focus-visible, body.dusk .field select:focus-visible { box-shadow: 0 0 0 3px var(--d-saff); } /* Wave-2 #5 (Dusk): the SOFT route-entry ring on a programmatically-focused page heading. The Dusk saffron :focus-visible ring above is the right ring for interactive controls, but on the route-focused H1/H2 it drew the same tight box that read as a selected field. Here the route-focused heading gets a quiet saffron leading accent bar + NO box (focus still announced + visible). Scoped under body.dusk + loaded after platform.css so it wins the cascade on Dusk. */ body.dusk h1.route-focus:focus-visible, body.dusk h2.route-focus:focus-visible { box-shadow: none; outline: none; border-radius: 0; position: relative; } body.dusk h1.route-focus:focus-visible::before, body.dusk h2.route-focus:focus-visible::before { content: ""; position: absolute; inset-block: 2px; inset-inline-start: -12px; inline-size: 3px; border-radius: 3px; background: var(--d-saff); } /* ---- Buttons ---------------------------------------------------------------- GENERIC FINISH — the SAME rules also live in journey.css (the single source for the portals). They are KEPT here too because the operator SUB-SCREENS (listings, calendar, pricing, …) load operator_dusk.css but NOT journey.css; removing them here would strip the finish from every operator page except Home. The values are byte-identical to journey.css, so there is no double-application conflict (same selector · same specificity · same value → identical result on any surface). */ /* V4 FIDELITY B2/A3 — the "glassy" secondary button: a WARM translucent oud pill (rgba(46,34,24,.5) + a warm border, pill radius, weight 700), NOT the old cold grey wash. "Glassy" here = warm translucent + pill, per v4 — never a cold blur. */ 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: v4's BRIGHT VERTICAL copper press→lit gradient, pill radius, weight 700, dark ink (#1A130D ≥ 4.85:1). */ 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): a small PRIMARY button must stay a primary — the generic `.btn-sm` background above otherwise paints the dark translucent oud fill UNDER the `.btn-primary` dark ink (#1A130D), rendering the label invisible (the empty-copper-pill defect on trip-lifecycle "Suggest checklist" / "Open departure" + distribution "Distribute to…"). Restore the bright copper gradient so dark ink reads AA on EVERY `.btn-primary.btn-sm`, the whole class at once. */ 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)); } /* ---- Cards / panels (GENERIC FINISH — mirrored in journey.css; see note above) */ /* V4 FIDELITY A2/A6 — the working card: the oud card gradient, the canon 16px radius, the deep shadow + the inset cream hairline (no backdrop blur). */ 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); } /* ---- Stat tiles (the count-up KPI cards) ------------------------------------ */ body.dusk .tile-row { gap: 18px; } /* V4 FIDELITY A2 — the copper DAWN-GLOW radial fill (a warm, lamp-lit lift from the top-left), NOT the flat grey-brown gradient the build had. Same v4 .kpi recipe: a copper radial over the oud card gradient + the inset cream hairline. A6: radius collapses to the canon 16px. */ body.dusk .stat-tile { background: radial-gradient(120% 90% at 12% 0%, rgba(184,115,51,.10), transparent 55%), linear-gradient(180deg, var(--d-card), var(--d-card-3)); border: 1px solid var(--d-line); border-radius: 16px; padding: 20px 22px; position: relative; overflow: hidden; box-shadow: var(--d-shadow), inset 0 1px 0 rgba(244,237,226,.05); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; } /* V4 FIDELITY A1 — "the notch": a dawn-lit DOME/shoulder crest on the tile's top edge (a soft copper gradient that fades down), NOT the old flat 2px hard line. This is the founder's "notch". inset-inline keeps it off the corners; the 60%/100% radii draw the najdi shoulder dome. */ body.dusk .stat-tile::before { content: ""; position: absolute; inset-inline: 18px; 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; } body.dusk .stat-tile:hover { transform: translateY(-6px); border-color: var(--d-line-3); box-shadow: var(--d-shadow-2), 0 0 30px rgba(204,146,72,.18); } body.dusk .stat-tile .lbl { color: var(--d-ink); font-weight: 600; display: flex; align-items: center; gap: 7px; } body.dusk .stat-tile .lbl svg { width: 15px; height: 15px; stroke: var(--d-copper); } body.dusk .stat-tile .num { color: var(--d-cream); } body.dusk .stat-tile .num small { color: var(--d-ink); font-size: 1rem; } body.dusk .stat-tile .delta { color: var(--d-green-lit); } body.dusk .stat-tile .delta.flat { color: var(--d-ink); } /* ---- Section titles --------------------------------------------------------- */ body.dusk .section-title h2 { color: var(--d-cream); } /* ---- Alerts rail / needs-attention ------------------------------------------ */ body.dusk .alert-rail { gap: 10px; } /* V4 FINISH-LIFT — the alert / booking / listing / earnings ROW reads as a warm, lamp-lit niche (v4's .att li), not a flat box: a soft copper dawn-glow radial over the oud fill + the inset cream hairline + the canon 14px radius + a calm hover lift. This is the SHARED row used across every operator sub-screen (Bookings · Listings · Earnings · Distribution lists), so the finish cascades. */ body.dusk .alert-row { background: radial-gradient(120% 120% at 0% 0%, rgba(184,115,51,.08), transparent 58%), linear-gradient(180deg, rgba(46,34,24,.62), rgba(41,30,20,.72)); border: 1px solid var(--d-line); border-radius: 14px; padding: 14px 16px; box-shadow: inset 0 1px 0 rgba(244,237,226,.04); transition: border-color .25s, background .25s, box-shadow .25s; } body.dusk .alert-row:hover { border-color: var(--d-line-3); box-shadow: inset 0 1px 0 rgba(244,237,226,.06), 0 8px 22px rgba(0,0,0,.3); } body.dusk .alert-row .head { color: var(--d-cream); } body.dusk .alert-row .meta { color: var(--d-ink); } body.dusk .alert-row svg { stroke: var(--d-copper); } body.dusk .alert-row.warn { border-inline-start: 4px solid var(--d-saff); } body.dusk .alert-row.warn svg { stroke: var(--d-saff); } body.dusk .alert-row.danger { border-inline-start: 4px solid var(--d-copper-2); } body.dusk .alert-row.danger svg { stroke: var(--d-copper-2); } body.dusk .alert-row.info { border-inline-start: 4px solid var(--d-sea); } body.dusk .alert-row.info svg { stroke: var(--d-sea); } body.dusk .calm-state { color: var(--d-tan); border-color: var(--d-line-2); } /* ============================================================================ DATE-GROUP DIVIDERS — the sticky group headers (Today · This week · Later · Past) shared by the operator BOOKINGS wall (.opbk-group-h, supplier_portal.js) and the check-in PICKER (.op-group-h, operator_checkin.js). Both mirror the run-sheet's grouped-section scan. STICKY OFFSET (the fix): the operator surface carries TWO stacked sticky bars at the top — the frozen .topnav (inset-block-start:0, z-40, §14) and the secondary .topbar (also top:0, z-10) pinned behind it, both with RUNTIME heights. Both bars outrank the page .content (position:relative; z-index:1) stacking context, so a header pinned INSIDE the content can never poke above the bars, and no rows can bleed between the bar and the label — the bars always cover the overlap. We pin the headers just under the bar with the SAME offset var the MT console uses (var(--topnav-h) · 60px fallback ≤ the real bar height, so the label snaps to the bar's underside instead of floating with rows sliding above it). Built on --d-* tokens so it auto-flips to the paper/day theme (no per-theme hex). RTL-safe: logical sizing + horizontally-symmetric margin/padding. */ body.dusk .op-group-h, body.dusk .opbk-group-h { position: sticky; inset-block-start: var(--topnav-h, 60px); z-index: 5; } /* the check-in PICKER divider (styled here in full — this class is picker-only). It sits inside a .card, so the pinned band takes the card ground. */ body.dusk .op-group-h { display: flex; align-items: baseline; gap: 8px; margin: 12px 2px 2px; padding: 7px 8px 6px; border-radius: 8px; font-weight: 700; font-size: .95rem; color: var(--d-cream); background: var(--d-card); } body.dusk .op-group-h .op-group-rule { flex: 1; block-size: 1px; background: var(--d-line-2); } /* the BOOKINGS-wall divider already carries its label + hairline inline (the flat, non-sticky pass); it sits on the page ground, so give the now-pinned band the page fill + a little padding so the rows read cleanly beneath it. The inline margin/font/colour stay (this rule sets only the un-declared properties). */ body.dusk .opbk-group-h { padding: 7px 8px 6px; border-radius: 8px; background: var(--d-bg); } /* ---- Pills / honesty vocabulary on the dark ground -------------------------- */ body.dusk .pill { color: var(--d-cream); } body.dusk .pill-ok, body.dusk .pill-real { background: #2C3326; color: var(--d-green-lit); } body.dusk .pill-warn { background: #3B2E14; color: var(--d-star-lit); } body.dusk .pill-danger { background: #3A2418; color: var(--d-loss); } /* the LOSS pill — amber/oud, never red. Named for its intent (loss = amber) so the brand law is encoded in the class, not just in a danger-override (LOW-3). */ body.dusk .pill-loss { background: #3A2418; color: var(--d-loss); } body.dusk .pill-info, body.dusk .pill-sim { background: #1F3236; color: #7FC0C6; } body.dusk .pill-neutral, body.dusk .pill-coming { background: #2B2017; color: var(--d-tan); border-color: var(--d-line-2); } body.dusk .pill-illustrative { background: #2B2017; color: var(--d-ink); border: 1px dashed var(--d-line-2); } body.dusk .pill-saffron { background: #3B2E14; color: var(--d-star-lit); } body.dusk .cobrand-badge { background: #3B2B1C; color: var(--d-copper-press); border-color: var(--d-line-3); } body.dusk .cobrand-badge svg { stroke: var(--d-copper-press); } /* ---- Forms ------------------------------------------------------------------ */ body.dusk .field > .lbl, body.dusk .field > label { color: var(--d-tan); } body.dusk .field input, body.dusk .field select { background: #20160E; border-color: var(--d-line-2); color: var(--d-cream); } body.dusk .field input:focus, body.dusk .field select:focus { border-color: var(--d-copper); } body.dusk .field-hint { color: var(--d-ink); } /* ---- Honesty note ----------------------------------------------------------- */ body.dusk .honesty { background: #1F3236; border-color: #2C4A4E; color: #9FCFD4; } body.dusk .honesty svg { stroke: #9FCFD4; } /* ---- FIX C5 · Net-30 "when your money lands" explainer + cash-in calendar ---- Built ENTIRELY on --d-* tokens so it auto-flips: Dusk uses the dark values, LIGHT (html[data-theme="day"]) picks up the paper-desert remap of the SAME token names — no per-theme literal-hex override needed (the panel's safe pattern). Read-only presentation over the existing settlement legs. */ body.dusk .net30-why { margin: 6px 0 20px; padding: 16px 18px; border-radius: 14px; background: var(--d-panel); border: 1px solid var(--d-line-2); border-inline-start: 4px solid var(--d-copper); } body.dusk .net30-why .n30-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--d-cream); font-size: 1.02rem; } body.dusk .net30-why .n30-head svg { width: 17px; height: 17px; stroke: var(--d-copper); flex: none; } body.dusk .net30-why .n30-lead { margin: 0 0 6px; color: var(--d-cream); font-size: 1.06rem; font-weight: 600; line-height: 1.45; } body.dusk .net30-why .n30-why-line { margin: 0; color: var(--d-ink); font-size: .92rem; line-height: 1.6; } /* the forward "money coming in" mini cash-in calendar */ body.dusk .cash-in { margin: 8px 0 24px; } body.dusk .cash-in .ci-lead { margin: 2px 0 14px; color: var(--d-ink); font-size: .92rem; } body.dusk .cash-in .ci-month { margin-bottom: 12px; border: 1px solid var(--d-line); border-radius: 13px; overflow: hidden; background: var(--d-card); } body.dusk .cash-in .ci-month-head { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 15px; background: var(--d-panel); border-bottom: 1px solid var(--d-line); } body.dusk .cash-in .ci-mon { color: var(--d-cream); font-weight: 700; font-size: .98rem; } body.dusk .cash-in .ci-mon-total { color: var(--d-copper-lit); font-weight: 700; } body.dusk .cash-in .ci-line { display: grid; grid-template-columns: minmax(88px, auto) 1fr auto; gap: 10px; align-items: center; padding: 11px 15px; } body.dusk .cash-in .ci-line + .ci-line { border-top: 1px solid var(--d-line); } body.dusk .cash-in .ci-date { color: var(--d-cream); font-weight: 600; font-size: .92rem; white-space: nowrap; } body.dusk .cash-in .ci-for { color: var(--d-ink); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.dusk .cash-in .ci-amt { color: var(--d-cream); text-align: end; white-space: nowrap; } body.dusk .cash-in .ci-grand { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 12px 16px; border-radius: 12px; background: var(--d-panel); border: 1px solid var(--d-line-2); color: var(--d-cream); font-size: 1.02rem; } body.dusk .cash-in .ci-grand strong { color: var(--d-copper-lit); font-size: 1.12rem; } @media (max-width: 560px) { body.dusk .cash-in .ci-line { grid-template-columns: 1fr auto; } body.dusk .cash-in .ci-for { grid-column: 1 / -1; grid-row: 2; } } /* ---- States ----------------------------------------------------------------- */ body.dusk .empty { background: #241A12; border-color: var(--d-line-2); color: var(--d-tan); } body.dusk .empty .ico svg { stroke: var(--d-copper); } body.dusk .empty h3 { color: var(--d-cream); } body.dusk .skel { background: linear-gradient(100deg, #2B2017 30%, #352719 50%, #2B2017 70%); background-size: 200% 100%; } body.dusk .err-block { background: #3A2418; border-color: var(--d-copper-2); color: #E7B79A; } body.dusk .err-block svg { stroke: #E7B79A; } /* ---- Toast ------------------------------------------------------------------ */ /* AA fix: dark ink on the copper gradient toast (white = 2.7:1 fail; #1A130D ≥ 4.85:1). info/danger toasts keep cream — those grounds (#34616B / #7A4B2E) pass on cream. */ body.dusk .toast { background: linear-gradient(135deg, var(--d-copper), var(--d-copper-2)); color: #1A130D; } body.dusk .toast.info { background: #34616B; color: var(--d-cream); } body.dusk .toast.danger { background: #7A4B2E; color: var(--d-cream); } /* ---- Calendar surface (operator daily hero) on the dark ground -------------- */ body.dusk .legend-row { color: var(--d-tan); } body.dusk .cal-dow { color: var(--d-ink); } /* DEMO-FIX (Lane 2): raise the cell hairline from --d-line (#3A2B1E, near-invisible on the oud ground) to --d-line-2 so the 7-column grid is always outlined even on an empty/sparse month. (The cell SURFACE fill is set by the warm-niche rule lower in this sheet — see the "CALENDAR day cell" block — which we also opacify there so empty cells read as a distinct surface, not a transparent wash that sinks into the page.) */ body.dusk .cal-day { background: #2B2017; border-color: var(--d-line-2); color: var(--d-cream); } body.dusk .cal-day:hover { border-color: var(--d-copper); box-shadow: 0 8px 20px rgba(0,0,0,.4); } body.dusk .cal-day .dnum { color: var(--d-tan); } body.dusk .cal-day.today .dnum { color: var(--d-star-lit); } body.dusk .cal-day.today .dnum::before { background: var(--d-saff); } body.dusk .cal-day.today .today-tag { color: var(--d-star-lit); background: #3B2E14; } body.dusk .cal-day .cap { color: var(--d-tan); } body.dusk .cal-day.unset .cap { color: var(--d-ink); } body.dusk .cal-day.selected { background: #3B2B1C; border-color: var(--d-copper); box-shadow: inset 0 0 0 2px var(--d-copper); } /* DEMO-FIX (Lane 2): closed kept DISTINCT (a touch flatter/darker than open) but still clearly a surface above the page — not the old #20160E that sank into the ground. Hairline stays --d-line-2 so the cell outline never disappears. */ body.dusk .cal-day.closed { background: linear-gradient(180deg, #251B12, #1F1610); border-color: var(--d-line-2); } body.dusk .cap-bar { background: #20160E; box-shadow: inset 0 0 0 1px var(--d-line); } body.dusk .cap-bar > span { background: var(--d-green); } body.dusk .cal-day.partial .cap-bar > span, body.dusk .cap-bar > .seg-blocked { background: var(--d-copper); } body.dusk .cal-day.full .cap-bar > span { background: var(--d-copper-2); } body.dusk .cap-bar > .seg-sold { background: var(--d-saff); } body.dusk .blocked-tag { color: var(--d-copper-press); background: #3B2B1C; } body.dusk .week-row { background: #2B2017; border-color: var(--d-line); color: var(--d-cream); } body.dusk .week-row:hover { border-color: var(--d-copper); } body.dusk .week-row.selected { border-color: var(--d-copper); background: #3B2B1C; box-shadow: inset 0 0 0 2px var(--d-copper); } body.dusk .week-row .wd .m { color: var(--d-ink); } body.dusk .chip { background: #2B2017; border-color: var(--d-line-2); color: var(--d-tan); } body.dusk .chip:hover { border-color: var(--d-copper); } body.dusk .chip.on { background: var(--d-copper); border-color: var(--d-copper); color: #1A130D; } body.dusk .stepper { border-color: var(--d-line-2); } body.dusk .stepper button { background: #2B2017; color: var(--d-cream); } body.dusk .stepper button:hover { background: #3B2B1C; } body.dusk .stepper .val { color: var(--d-cream); } body.dusk .reopen-row { background: #2B2017; border-color: var(--d-line); } body.dusk .reopen-row .body .meta { color: var(--d-ink); } body.dusk .day-panel .chiprow { gap: 8px; } /* Time-slot inventory (BUILD B): the per-slot day editor on the dark ground. */ body.dusk .slot-row .time { color: var(--d-cream); } body.dusk .slot-cap { background: #20160E; border-color: var(--d-line-2); color: var(--d-cream); } body.dusk .slot-cap:focus { border-color: var(--d-copper); } /* ---- Tables (pricing / earnings statement) on the dark ground --------------- */ body.dusk .tbl th { color: var(--d-ink); } body.dusk .tbl th, body.dusk .tbl td { border-bottom-color: var(--d-line); } body.dusk .tbl .total-row td { border-top-color: var(--d-copper); } body.dusk .kpi { background: #2B2017; border-color: var(--d-line-2); } body.dusk .kpi-val { color: var(--d-copper-press); } body.dusk .kpi-lbl { color: var(--d-ink); } /* V4 FINISH-LIFT — the queue card matches the warm niche (copper dawn-glow radial + inset hairline + 14px radius), consistent with the alert rows. */ body.dusk .queue-card { background: radial-gradient(120% 120% at 0% 0%, rgba(184,115,51,.08), transparent 58%), linear-gradient(180deg, rgba(46,34,24,.62), rgba(41,30,20,.72)); border: 1px solid var(--d-line); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(244,237,226,.04); } body.dusk .queue-card .qc-head strong { color: var(--d-cream); } body.dusk .queue-card .qc-head svg { stroke: var(--d-ink); } /* mobile bottom tabs on the dark ground */ body.dusk .tabbar { background: #1F160E; border-top: 1px solid var(--d-line); } body.dusk .tabbar a, body.dusk .tabbar button { color: var(--d-ink); } body.dusk .tabbar a.active, body.dusk .tabbar button#nav-more[aria-expanded="true"] { color: var(--d-star-lit); } /* H1: the mobile NAV DRAWER on the dark Dusk ground (the "More" overflow sheet). The shared platform.css drawer is cream; re-skin it dark here so the operator / cockpit / MT-console personas keep one voice. Saffron focus ring inherited. */ body.dusk .nav-drawer-backdrop { background: rgba(0,0,0,.55); } body.dusk .nav-drawer { background: linear-gradient(180deg, #261B12, #1F160E); border-top: 1px solid var(--d-line-2); box-shadow: 0 -18px 44px rgba(0,0,0,.5); } body.dusk .nav-drawer::before { background: var(--d-line-3); } body.dusk .nav-drawer-title { color: var(--d-cream); } body.dusk .nav-drawer-x { color: var(--d-ink); } body.dusk .nav-drawer-x:hover { background: #2F2216; color: var(--d-cream); } body.dusk .nav-draw-link { background: #2B2017; border-color: var(--d-line-2); color: var(--d-ink); } body.dusk .nav-draw-link svg { stroke: var(--d-ink); } body.dusk .nav-draw-link:hover { background: #2F2216; border-color: var(--d-copper); color: var(--d-cream); } body.dusk .nav-draw-link:hover svg { stroke: var(--d-cream); } body.dusk .nav-draw-link.active { background: linear-gradient(135deg, #3B2B1C, #2C2016); border-color: var(--d-line-3); color: var(--d-cream); } body.dusk .nav-draw-link.active svg { stroke: var(--d-saff); } body.dusk .nav-draw-link .soon-tag { background: #2B2017; color: var(--d-ink); } body.dusk .nav-drawer-foot { border-top-color: var(--d-line); } /* ============================================================================ HOME — the editorial Dusk hero (living horizon + seal watermark + bilingual kicker), emitted by supplier_home.js as .dusk-hero / .horizon / .seal-wm. ============================================================================ */ body.dusk .content { position: relative; z-index: 1; } .dusk-hero { position: relative; overflow: hidden; margin: -26px -28px 0; padding: 40px 44px 70px; /* V4 FIDELITY A7 — warm the hero ground: a cool Farasan-sea dawn haze pools at the top (the SEA end of the journey) and a warmer copper/saffron dawn glow rises from the top-left, lifting the slab off "boxed dark brown" toward v4's luminous dawn. The sea→peaks ridge (.j-ridge) carries the horizon line. */ background: radial-gradient(1100px 420px at 16% -16%, rgba(204,146,72,.22), transparent 60%), radial-gradient(800px 340px at 92% -6%, rgba(230,174,69,.12), transparent 55%), radial-gradient(900px 360px at 78% 2%, rgba(62,111,116,.10), transparent 62%), linear-gradient(180deg, #2A1E12, #1A130D); } /* POLISH (2026-06-23, founder catch) — the old flat `border-bottom: 1px solid` under the KPIs read as a hard, rigid rule (a default

). Replace it with a SOFT copper-tinted gradient hairline that FADES at both edges (transparent → copper dawn-glow → transparent), so the hero settles into the working middle like The Journey, not a boxed slab. A thin glow sits just above it so the line reads as a horizon, not a cut. Decorative + below the content; reduced-motion / forced-colors safe (the forced-colors block at the foot restores a plain rule). */ .dusk-hero::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; pointer-events: none; z-index: 1; background: linear-gradient(90deg, transparent 0%, rgba(184,115,51,.12) 18%, rgba(204,146,72,.55) 50%, rgba(184,115,51,.12) 82%, transparent 100%); } /* the faint warm bloom resting just above the hairline — the horizon glow */ .dusk-hero::before { content: ""; position: absolute; inset-inline: 8%; inset-block-end: 0; block-size: 26px; pointer-events: none; z-index: 0; background: radial-gradient(60% 100% at 50% 100%, rgba(204,146,72,.10), transparent 72%); } /* the LIVING horizon — two SVG layers, continuously undulating (SMIL) */ .dusk-hero .horizon { position: absolute; inset-inline: 0; inset-block-start: 28px; width: 100%; height: 64px; pointer-events: none; } .dusk-hero .horizon .back { filter: drop-shadow(0 0 5px rgba(204,146,72,.25)); opacity: .4; } .dusk-hero .horizon .front { filter: drop-shadow(0 0 7px rgba(230,174,69,.5)); } /* faint seal watermark */ .dusk-hero .seal-wm { position: absolute; inset-inline-end: 36px; inset-block-start: 26px; width: 260px; height: 260px; opacity: .05; pointer-events: none; } .dusk-hero .dunes { position: absolute; inset-inline-end: -30px; inset-block-end: -12px; width: 560px; opacity: .5; pointer-events: none; } .dusk-hero .kicker { position: relative; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--d-sea-lit); text-transform: uppercase; display: flex; align-items: center; gap: 10px; } .dusk-hero .kicker .nstar { width: 15px; height: 15px; color: var(--d-saff); flex: none; } .dusk-hero .kicker .ar { font-family: "Noto Naskh Arabic", "Amiri", serif; letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--d-copper-lit); opacity: .95; } .dusk-hero .greet { position: relative; z-index: 2; font-family: "Marcellus", serif; font-size: 2.4rem; line-height: 1.05; margin: 14px 0 0; color: var(--d-cream); } .dusk-hero .pulse { position: relative; z-index: 2; font-size: 1.02rem; color: var(--d-tan); margin-top: 12px; max-width: 640px; line-height: 1.55; } .dusk-hero .pulse b { color: var(--d-cream); font-weight: 600; } .dusk-hero .pulse .hl { color: var(--d-star-lit); font-weight: 700; } .dusk-hero .herocta { position: relative; z-index: 2; display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; } [dir="rtl"] .dusk-hero { margin-inline: -28px; } /* the KPI cards sit in a band that lifts over the hero (the mockup's -46px) */ body.dusk .dusk-kpis { margin-top: -42px; position: relative; z-index: 3; } /* FIX (69): the operator home now renders the "Ask Sanam" co-pilot panel BETWEEN the hero and the KPI band, so the -42px hero-lift was pulling the cards UP over the co-pilot's quick-action chips (the chip text was clipped by the card top). When the co-pilot panel directly precedes the band, clear the lift and add a calm positive gap so the chip row breathes above the cards (no negative bleed). */ body.dusk .copilot + .dusk-kpis { margin-top: 18px; } /* the count-up KPI value: the number animates from 0 (the JS sets data-to). */ body.dusk .stat-tile .num .count { font-variant-numeric: tabular-nums; } body.dusk .stat-tile .num .unit { font-size: 1rem; color: var(--d-ink); margin-inline-start: 2px; } /* FIX (69): the KPI loading state — give every card a stable VALUE SLOT so the value/loading placeholder sits in its own line and never collides with the label or the sub-line. The label gets its own row; the value reserves a height equal to the Marcellus number so an empty/loading card holds its shape, and the sub (delta) clears the value. Applies to all four KPI cards uniformly. */ body.dusk .dusk-kpis .stat-tile { display: flex; flex-direction: column; } body.dusk .dusk-kpis .stat-tile .lbl { margin-bottom: 8px; } body.dusk .dusk-kpis .stat-tile .num { display: block; min-height: 2.2rem; line-height: 1.1; } body.dusk .dusk-kpis .stat-tile .delta { margin-top: 6px; } /* the COMPLIANCE STANDING RIBBON (operator-v2: compliance folded onto Home) */ .dusk-ribbon { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 4px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(180deg, #30231799, #2a1f1599); backdrop-filter: blur(4px); border: 1px solid var(--d-line-2); box-shadow: 0 12px 30px rgba(0,0,0,.34); } .dusk-ribbon.ok { border-inline-start: 4px solid var(--d-green); } .dusk-ribbon.warn { border-inline-start: 4px solid var(--d-saff); } .dusk-ribbon .rb-ico { width: 38px; height: 38px; border-radius: 11px; background: #3D2C1C; display: inline-flex; align-items: center; justify-content: center; flex: none; } .dusk-ribbon .rb-ico svg { width: 20px; height: 20px; stroke: var(--d-copper); } .dusk-ribbon.warn .rb-ico svg { stroke: var(--d-saff); } .dusk-ribbon .rb-body { flex: 1; min-width: 0; } .dusk-ribbon .rb-body .rb-h { font-weight: 600; color: var(--d-cream); } .dusk-ribbon .rb-body .rb-sub { font-size: .84rem; color: var(--d-ink); margin-top: 1px; } .dusk-ribbon .rb-link { margin-inline-start: auto; color: var(--d-star-lit); font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; } .dusk-ribbon .rb-link svg { width: 15px; height: 15px; stroke: var(--d-star-lit); } /* the breathing "needs attention" dot (the mockup's @keyframes breathe) */ .dusk-attn { display: flex; flex-direction: column; } .dusk-attn .at { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--d-line); align-items: flex-start; } .dusk-attn .at:last-child { border-bottom: 0; } .dusk-attn .at .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; } .dusk-attn .at .dot.s { background: var(--d-saff); box-shadow: 0 0 9px rgba(230,174,69,.6); animation: dusk-breathe 3s ease-in-out infinite; } .dusk-attn .at .dot.g { background: var(--d-green); } @keyframes dusk-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(230,174,69,.5); } 50% { box-shadow: 0 0 0 7px rgba(230,174,69,0); } } .dusk-attn .at .at-body { min-width: 0; } .dusk-attn .at p { font-size: .9rem; line-height: 1.45; color: var(--d-cream); margin: 0; } .dusk-attn .at p .sub { color: var(--d-ink); } .dusk-attn .at .at-cta { margin-inline-start: auto; } /* the reveal animation (count-up + cards rise) is the ONE canonical ``.rv`` in the shared layer (platform.css): ``.rv`` start state + ``body.ready .rv`` release, on the --mo-slow / --ease-out tokens. body.dusk also carries ``ready``, so the canonical rule covers Dusk too — the per-front duplicate (a too-fast .7s + hard-coded easing that drifted from the shared speed) is deleted here. */ @media (max-width: 860px) { .dusk-hero { margin-inline: -16px; padding: 28px 18px 56px; } [dir="rtl"] .dusk-hero { margin-inline: -16px; } .dusk-hero .greet { font-size: 1.8rem; } .dusk-hero .seal-wm, .dusk-hero .dunes { display: none; } body.dusk .dusk-kpis { margin-top: -32px; } } /* ---- Operator AI CO-PILOT panel (O-5) — "Ask Sanam…", Arabic-first --------- */ /* V4 FIDELITY A5 — the assistant ("The Star") finish: the DUAL radial glow (saffron top-right + Farasan-sea bottom-left) over the oud gradient, the DEEP shadow + the inset cream hairline, the canon 16px radius (was a too-round 22px). The soft corner aura is added as .copilot::after (replacing the old flat 2px top line). */ body.dusk .copilot { background: radial-gradient(120% 80% at 100% 0%, rgba(200,133,10,.14), transparent 55%), radial-gradient(90% 60% at 0% 100%, rgba(62,111,116,.10), transparent 60%), linear-gradient(180deg, rgba(40,30,19,.96), rgba(31,23,14,.985)); border: 1px solid rgba(184,115,51,.34); border-radius: 16px; padding: 20px 22px; position: relative; overflow: hidden; box-shadow: 0 26px 56px rgba(0,0,0,.5), inset 0 1px 0 rgba(244,237,226,.07); margin-block: 4px 8px; } /* the soft saffron AURA at the Northern-Star corner (static at rest, per v4) */ body.dusk .copilot::after { content: ""; position: absolute; inset-block-start: -40px; inset-inline-end: -40px; width: 180px; height: 180px; pointer-events: none; opacity: .8; z-index: 0; background: radial-gradient(circle at 50% 50%, rgba(200,133,10,.16), transparent 68%); } /* keep the panel content above the aura */ body.dusk .copilot > * { position: relative; z-index: 1; } body.dusk .copilot .cp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } body.dusk .copilot .cp-head .cp-spark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: #3B2E14; flex: none; } body.dusk .copilot .cp-head .cp-spark svg { stroke: var(--d-saff); width: 19px; height: 19px; } body.dusk .copilot .cp-head h2 { color: var(--d-cream); font-size: 1.16rem; margin: 0; } body.dusk .copilot .cp-head .cp-sub { color: var(--d-ink); font-size: .82rem; } body.dusk .copilot .cp-ask { display: flex; gap: 10px; margin-top: 12px; align-items: stretch; } body.dusk .copilot .cp-ask input { flex: 1 1 auto; background: #20160E; border: 1px solid var(--d-line-2); border-radius: 13px; color: var(--d-cream); padding: 12px 15px; font: inherit; } body.dusk .copilot .cp-ask input::placeholder { color: var(--d-ink); } body.dusk .copilot .cp-ask input:focus { outline: none; border-color: var(--d-copper); box-shadow: 0 0 0 3px rgba(230,174,69,.30); } body.dusk .copilot .cp-ask .btn-primary { flex: none; border-radius: 13px; padding-inline: 18px; } body.dusk .copilot .cp-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } body.dusk .copilot .cp-chip { background: #2B2017; border: 1px solid var(--d-line-2); color: var(--d-tan); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .86rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s; } body.dusk .copilot .cp-chip:hover { border-color: var(--d-copper); color: var(--d-cream); } body.dusk .copilot .cp-chip svg { width: 13px; height: 13px; stroke: var(--d-copper); vertical-align: -2px; margin-inline-end: 5px; } body.dusk .copilot .cp-answer { margin-top: 14px; background: #241A12; border: 1px solid var(--d-line-2); border-radius: 14px; padding: 15px 17px; } body.dusk .copilot .cp-answer .cp-a-text { color: var(--d-cream); line-height: 1.6; } /* The pill-row (honesty pill + the "grounded in your org's own reads" line) is used in BOTH the home copilot (.copilot .cp-answer) AND the Command-Sketch answer (.ask-bar .cp-answer). The old selector was over-scoped to .copilot, so on the Command Sketch the flex+gap never applied and the SIM pill ran straight into the grounding line. Broaden to wherever .cp-a-pillrow is used (both themes inherit via body.dusk). */ body.dusk .cp-a-pillrow { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; } body.dusk .copilot .cp-grounding { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--d-line-2); color: var(--d-ink); font-size: .8rem; display: flex; flex-wrap: wrap; gap: 6px 12px; } body.dusk .copilot .cp-grounding .g-fig { display: inline-flex; align-items: center; gap: 5px; } body.dusk .copilot .cp-grounding .g-fig b { color: var(--d-tan); font-weight: 600; } /* LOW-1: the grounding source caption dropped to ~4.41:1 at opacity:.8 on the #241A12 ground — under AA. The colour is already the muted ink (--d-ink, ~5.1:1 at full opacity), so drop the opacity to clear 4.5:1. */ body.dusk .copilot .cp-grounding .g-src { color: var(--d-ink); } /* the reviewable ACTION draft — clearly a proposal, never an auto-action */ body.dusk .copilot .cp-draft { margin-top: 13px; background: #2B2017; border: 1px solid var(--d-line-3); border-radius: 13px; padding: 14px 16px; } body.dusk .copilot .cp-draft .cp-draft-h { display: flex; align-items: center; gap: 8px; color: var(--d-star-lit); font-weight: 600; margin-bottom: 8px; } body.dusk .copilot .cp-draft .cp-draft-h svg { stroke: var(--d-star-lit); width: 16px; height: 16px; } body.dusk .copilot .cp-draft .cp-day { color: var(--d-cream); margin: 6px 0; } body.dusk .copilot .cp-draft .cp-line { color: var(--d-tan); font-size: .9rem; padding: 4px 0; border-block-start: 1px solid var(--d-line); } body.dusk .copilot .cp-draft .cp-line:first-of-type { border-block-start: none; } body.dusk .copilot .cp-draft .cp-line .cp-px { color: var(--d-ink); } body.dusk .copilot .cp-draft .cp-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } body.dusk .copilot .cp-draft .cp-gate-note { color: var(--d-ink); font-size: .8rem; margin-top: 9px; display: flex; align-items: center; gap: 6px; } body.dusk .copilot .cp-draft .cp-gate-note svg { stroke: var(--d-sea); width: 14px; height: 14px; } /* the thinking dots while a turn resolves */ body.dusk .copilot .cp-thinking { display: inline-flex; gap: 5px; align-items: center; color: var(--d-ink); } body.dusk .copilot .cp-thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--d-copper); animation: cpdot 1.1s ease-in-out infinite; } body.dusk .copilot .cp-thinking i:nth-child(2) { animation-delay: .18s; } body.dusk .copilot .cp-thinking i:nth-child(3) { animation-delay: .36s; } @keyframes cpdot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } body.dusk .copilot .cp-err { color: #E7B79A; font-size: .9rem; } /* FR-SB-2 upgrade wall — a CALM, value-leading block (copper, NOT error-red): it leads with what the operator gets + the upgrade affordance, never reads as a fail. */ body.dusk .copilot .cp-upgrade { border: 1px solid rgba(184, 115, 51, .38); background: rgba(184, 115, 51, .09); border-radius: 12px; padding: 14px 16px; } body.dusk .copilot .cp-upgrade .cp-upgrade-lead { margin: 0 0 12px; color: var(--d-cream); font-size: .94rem; line-height: 1.5; display: flex; gap: 8px; align-items: flex-start; } body.dusk .copilot .cp-upgrade .cp-upgrade-lead svg { color: var(--d-copper); flex: 0 0 auto; margin-top: 2px; } @media (max-width: 640px) { body.dusk .copilot .cp-ask { flex-direction: column; } body.dusk .copilot .cp-ask .btn-primary { width: 100%; justify-content: center; } } /* ============================================================================ DISTRIBUTION (GATE 5.2 — "Distribute to Viator" + channel-vs-direct recon). ALL scoped under body.dusk (operator surface only — no :root drift, no leak to the buyer storefront / MT view / Sanam cockpit; those personas keep F2). The loss/negative is AMBER (--d-loss), never red — the brand law, encoded here too. ============================================================================ */ body.dusk .dist-list { display: flex; flex-direction: column; gap: 12px; } body.dusk .dist-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; background: linear-gradient(180deg, rgba(48,35,23,.92), rgba(42,31,21,.92)); border: 1px solid var(--d-line-2); border-radius: 18px; padding: 16px 18px; box-shadow: 0 12px 30px rgba(0,0,0,.34); } body.dusk .dist-row .dist-main { flex: 1 1 320px; min-width: 0; } body.dusk .dist-row .dist-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } body.dusk .dist-row .dist-head strong { color: var(--d-cream); } body.dusk .dist-row .dist-head svg { stroke: var(--d-copper); width: 18px; height: 18px; } body.dusk .dist-row .dist-meta { color: var(--d-ink); font-size: .85rem; margin-top: 5px; } body.dusk .dist-row .dist-action { flex: none; align-self: center; } /* MED-2 (UX): the SIM tag on the Distribute CTA — unmissable at the moment of the push (it can never read as a live publish while the connector is a SIM). Saffron on the copper button clears AA; it drops automatically once is_real flips. */ body.dusk .dist-sim-tag { font-size: .72rem; font-weight: 600; letter-spacing: .02em; opacity: .92; margin-inline-start: 2px; } /* LOW-1 (UX): the disabled "Not ready" CTA reads as a quiet status (tied to its readiness reasons via aria-describedby), not a dead primary-looking button. */ body.dusk .dist-row .dist-notready { opacity: .8; cursor: not-allowed; } /* MED-2 (UX): the lightweight pre-flight CONFIRM panel before a push. Neutral copper frame (not amber — it is not a loss/block), states the SIM nature plainly, and only its explicit Confirm fires the push. */ body.dusk .dist-confirm { display: flex; align-items: flex-start; gap: 10px; background: #2B2017; border: 1px solid var(--d-line-2); border-inline-start: 4px solid var(--d-copper); border-radius: 13px; padding: 13px 15px; color: var(--d-ink-2); } body.dusk .dist-confirm svg { stroke: var(--d-copper); width: 19px; height: 19px; flex: none; margin-top: 1px; } body.dusk .dist-confirm strong { color: var(--d-cream); } body.dusk .dist-confirm p { color: var(--d-ink-2); margin: 5px 0 0; font-size: .88rem; line-height: 1.5; } body.dusk .dist-confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 11px; } /* LOW-5 (UX): comfortable touch targets on the Dusk operator surface — the distribution CTAs (Distribute / Confirm / Cancel / Not-ready) clear 44px. */ body.dusk .dist-action .btn-sm, body.dusk .dist-confirm-actions .btn-sm { min-height: 44px; } body.dusk .dist-reasons { list-style: none; margin: 10px 0 0; padding: 10px 12px; background: #3B2E14; border: 1px solid var(--d-line-2); border-inline-start: 4px solid var(--d-saff); border-radius: 12px; color: var(--d-star-lit); font-size: .86rem; } body.dusk .dist-reasons li { display: flex; align-items: flex-start; gap: 7px; padding: 3px 0; } body.dusk .dist-reasons li svg { stroke: var(--d-star-lit); width: 15px; height: 15px; flex: none; margin-top: 2px; } body.dusk .dist-result:empty { display: none; } body.dusk .dist-result { margin-top: 11px; } /* the HONEST floor-block — AMBER (loss law), never red, never a fake success */ body.dusk .floor-block { display: flex; align-items: flex-start; gap: 10px; background: #3A2418; border: 1px solid var(--d-line-2); border-inline-start: 4px solid var(--d-loss); border-radius: 13px; padding: 13px 15px; color: var(--d-loss); } body.dusk .floor-block svg { stroke: var(--d-loss); width: 19px; height: 19px; flex: none; margin-top: 1px; } body.dusk .floor-block strong { color: var(--d-loss); } body.dusk .floor-block p { color: var(--d-ink-2); margin: 5px 0 0; font-size: .88rem; line-height: 1.5; } body.dusk .floor-block .dist-reasons { margin-top: 8px; } /* the success push result — copper/green confirm */ body.dusk .dist-ok { display: flex; align-items: flex-start; gap: 10px; background: #2C3326; border: 1px solid var(--d-line-2); border-inline-start: 4px solid var(--d-green); border-radius: 13px; padding: 13px 15px; color: var(--d-green-lit); } body.dusk .dist-ok svg { stroke: var(--d-green-lit); width: 19px; height: 19px; flex: none; margin-top: 1px; } body.dusk .dist-ok strong { color: var(--d-cream); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } body.dusk .dist-ok p { color: var(--d-tan); margin: 5px 0 0; font-size: .88rem; line-height: 1.5; } /* ---- the channel-vs-direct reconciliation panel ----------------------------- */ body.dusk .dist-recon-tiles { grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; } /* the shared .mt-table base ships an F2 light cream ground + no cell colour; on the dark Dusk ground that left the data rows light-on-light (invisible). Scope the dark ground + cream cell text to the recon table here (no F2 :root drift). */ body.dusk .dist-recon-table { background: #241A12; border-color: var(--d-line-2); } /* MED-1 (UX): the 4-col recon template lives HERE (a class rule), not as an inline style on each row — an inline grid-template-columns would beat the mobile media reflow by specificity and the table would never collapse on a narrow viewport. body.dusk .dist-recon-table .mt-tr out-specifies the shared 5-col .mt-tr base. */ body.dusk .dist-recon-table .mt-tr { grid-template-columns: 1.4fr .9fr .9fr .9fr; align-items: center; border-block-start-color: var(--d-line); } body.dusk .dist-recon-table .mt-tr span[role="cell"] { color: var(--d-cream); } body.dusk .dist-recon-table .mt-th { background: #2B2017; } body.dusk .dist-recon-table .mt-th span { color: var(--d-ink); font-weight: 600; } /* loss/negative net take — AMBER (--d-loss), NEVER red */ body.dusk .dist-recon-table .is-loss, body.dusk .stat-tile.tile-loss .delta.is-loss { color: var(--d-loss); } body.dusk .dist-recon-table .is-loss svg { stroke: var(--d-loss); width: 14px; height: 14px; vertical-align: -2px; } body.dusk .dist-total { border-block-start: 1px solid var(--d-copper) !important; background: #2B2017; } body.dusk .dist-total span { color: var(--d-cream); } body.dusk .stat-tile.tile-loss { border-inline-start: 4px solid var(--d-loss); } @media (max-width: 760px) { body.dusk .dist-recon-tiles { grid-template-columns: 1fr; } body.dusk .dist-row .dist-action { align-self: flex-start; } /* the dist-action button goes full-width so the SIM-labelled CTA stays tappable */ body.dusk .dist-row .dist-action, body.dusk .dist-row .dist-action .btn { width: 100%; justify-content: center; } } /* MED-1 (UX): the 4-col recon table COLLAPSES to 2 columns on a narrow viewport (the class rule above is overridden here, not by an un-collapsible inline style). The Channel name + Net-take read first; GMV + Commission wrap below. */ @media (max-width: 600px) { body.dusk .dist-recon-table .mt-tr { grid-template-columns: 1fr 1fr; row-gap: 4px; } } /* ============================================================================ THE CHANNEL BOARD (the Hawi "capture once → distribute everywhere" hero). One row per experience × four channels (Direct · Your website · GetYourGuide · Trade / Resellers); each cell a status chip + a one-tap action. TOKEN-grounded (no raw dark hex) so it flips to Paper-Desert day for free; the day layer (paper_desert.css §2q-ter) lifts the state-chip tints for AA crispness on paper. Clean columns on desktop; STACKS to per-listing cards on mobile (≤720px → no horizontal scroll at 390px). Scoped under body.dusk (operator surface only). Loss/SIM stay amber — never red, never a fake green REAL. ============================================================================ */ body.dusk .cb-hero { margin-top: 6px; } body.dusk .channel-board { display: flex; flex-direction: column; background: var(--d-panel); border: 1px solid var(--d-line-2); border-radius: 18px; overflow: hidden; box-shadow: var(--d-shadow); } body.dusk .cb-headrow, body.dusk .cb-row { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; } body.dusk .cb-headrow { background: var(--d-bg2); border-bottom: 1px solid var(--d-line-2); } body.dusk .cb-th { padding: 12px 14px; font-size: .82rem; font-weight: 600; color: var(--d-ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } body.dusk .cb-th.cb-corner { color: var(--d-tan); } body.dusk .cb-th .pill { font-size: .68rem; } body.dusk .cb-row { border-bottom: 1px solid var(--d-line); align-items: stretch; } body.dusk .cb-row:last-child { border-bottom: none; } body.dusk .cb-exp { padding: 14px; display: flex; align-items: center; gap: 9px; border-inline-end: 1px solid var(--d-line); min-width: 0; } body.dusk .cb-exp strong { color: var(--d-cream); font-size: .95rem; overflow-wrap: anywhere; } body.dusk .cb-exp svg { stroke: var(--d-copper); width: 17px; height: 17px; flex: none; } body.dusk .cb-cell { padding: 14px; display: flex; flex-direction: column; gap: 8px; border-inline-end: 1px solid var(--d-line); min-width: 0; } body.dusk .cb-cell:last-child { border-inline-end: none; } body.dusk .cb-cell-label { display: none; } /* desktop: the column header names it */ body.dusk .cb-cell-body { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* the status chip */ body.dusk .cb-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } body.dusk .cb-chip svg { width: 14px; height: 14px; flex: none; } body.dusk .cb-live { background: rgba(157,179,137,.16); color: var(--d-green-lit); border-color: rgba(157,179,137,.34); } body.dusk .cb-live svg { stroke: var(--d-green-lit); } body.dusk .cb-available, body.dusk .cb-paused { background: rgba(230,174,69,.14); color: var(--d-star-lit); border-color: rgba(230,174,69,.30); } body.dusk .cb-available svg, body.dusk .cb-paused svg { stroke: var(--d-star-lit); } body.dusk .cb-setup, body.dusk .cb-muted { background: rgba(210,187,155,.08); color: var(--d-ink); border-color: var(--d-line-2); border-style: dashed; } /* the GetYourGuide SIM chip — amber/info, NEVER a green REAL (honesty law) */ body.dusk .cb-chip-sim { background: rgba(200,133,10,.14); color: var(--d-star-lit); border-color: rgba(200,133,10,.30); border-style: solid; } body.dusk .cb-chip-sim svg { stroke: var(--d-star-lit); } body.dusk .cb-sim-tag { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--d-star-lit); opacity: .92; } /* the cell action — a quiet copper text link/button (not a filled primary) */ body.dusk .cb-cell-act { margin-top: 1px; } body.dusk .cb-cta { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: .82rem; font-weight: 600; color: var(--d-copper); background: none; border: none; padding: 0; cursor: pointer; text-align: start; } body.dusk .cb-cta svg { width: 14px; height: 14px; flex: none; stroke: var(--d-copper); } body.dusk .cb-cta:hover { color: var(--d-star-lit); text-decoration: underline; } body.dusk .cb-cta:hover svg { stroke: var(--d-star-lit); } body.dusk .cb-note { color: var(--d-ink); font-size: .8rem; display: inline-flex; align-items: center; gap: 5px; } body.dusk .cb-note svg { width: 14px; height: 14px; flex: none; stroke: var(--d-ink); } /* MOBILE: the grid STACKS into per-listing cards — no horizontal scroll at 390px. Each experience becomes a card; each channel becomes a labelled row inside it. */ @media (max-width: 720px) { body.dusk .channel-board { background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; gap: 14px; } body.dusk .cb-headrow { display: none; } body.dusk .cb-row { display: block; background: var(--d-card); border: 1px solid var(--d-line-2); border-radius: 16px; box-shadow: var(--d-shadow); overflow: hidden; } body.dusk .cb-exp { border-inline-end: none; border-bottom: 1px solid var(--d-line); background: var(--d-bg2); } body.dusk .cb-cell { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; border-inline-end: none; border-bottom: 1px solid var(--d-line); } body.dusk .cb-cell:last-child { border-bottom: none; } body.dusk .cb-cell-label { display: inline; color: var(--d-tan); font-size: .82rem; font-weight: 600; } body.dusk .cb-cell-act { margin-inline-start: auto; } } /* ============================================================================ THE CHANNEL MANAGER (Channel Manager slice-1) — the PRIMARY per-CHANNEL view. Four calm rows (your desk · your website · GetYourGuide · trade): an icon, the channel name + honesty pill, a plain-language status, an on/off state chip, and ONE action. "Everywhere by default." TOKEN-grounded (no raw dark hex) so it flips to Paper-Desert day for free; the state chips reuse the day-covered .cb-live / .cb-available / .cb-chip-sim tints. Scoped under body.dusk. ============================================================================ */ body.dusk .chman { display: flex; flex-direction: column; background: var(--d-panel); border: 1px solid var(--d-line-2); border-radius: 18px; overflow: hidden; box-shadow: var(--d-shadow); } body.dusk .chman-row { display: flex; align-items: center; gap: 15px; padding: 16px 18px; border-bottom: 1px solid var(--d-line); } body.dusk .chman-row:last-child { border-bottom: none; } body.dusk .chman-ico { inline-size: 42px; block-size: 42px; border-radius: 13px; flex: none; display: grid; place-items: center; background: var(--d-card); border: 1px solid var(--d-line-2); } body.dusk .chman-ico svg { inline-size: 20px; block-size: 20px; stroke: var(--d-copper); } body.dusk .chman-row.is-off .chman-ico { opacity: .7; } body.dusk .chman-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } body.dusk .chman-name { font-weight: 700; color: var(--d-cream); font-size: .98rem; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } body.dusk .chman-name .pill { font-size: .66rem; } body.dusk .chman-status { color: var(--d-tan); font-size: .86rem; line-height: 1.45; } body.dusk .chman-side { display: flex; align-items: center; gap: 16px; flex: none; flex-wrap: wrap; justify-content: flex-end; } body.dusk .chman-state .cb-chip { font-size: .78rem; } body.dusk .chman-act { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* the GetYourGuide primary "Connect" reads as a copper pill (invites the action); "Turn off" is a quieter muted control. Both build on the shared .cb-cta base. */ body.dusk .cb-cta-connect { padding: 7px 15px; border: 1px solid var(--d-copper); border-radius: 999px; color: var(--d-copper-lit); background: rgba(184,115,51,.10); } body.dusk .cb-cta-connect:hover { background: rgba(184,115,51,.18); text-decoration: none; color: var(--d-star-lit); } body.dusk .cb-cta-off { color: var(--d-ink); } body.dusk .cb-cta-off svg { stroke: var(--d-ink); } body.dusk .cb-cta-off:hover { color: var(--d-star-lit); } /* the ADVANCED per-listing detail disclosure (holds the old dense grid). */ body.dusk .dist-advanced { margin-top: 22px; border: 1px solid var(--d-line-2); border-radius: 14px; background: var(--d-panel); padding: 4px 16px 16px; } body.dusk .dist-advanced[open] { padding-bottom: 18px; } body.dusk .dist-advanced-sum { cursor: pointer; padding: 12px 2px; font-weight: 600; color: var(--d-copper-lit); display: flex; align-items: center; gap: 8px; list-style: none; } body.dusk .dist-advanced-sum::-webkit-details-marker { display: none; } body.dusk .dist-advanced-sum svg { inline-size: 16px; block-size: 16px; stroke: var(--d-copper); } /* the visual SEPARATION between the channels + the operator's OWN website section */ body.dusk .dist-sep { border: none; border-top: 1px solid var(--d-line); margin: 36px 0 4px; } /* ============================================================================ THE GUIDED GetYourGuide CONNECT WIZARD — a calm, few-step card that replaces the raw "enter a Product ID" prompt. TOKEN-grounded (day-safe); reuses the day-covered .honesty note + the shared .btn / .pill / .cb-chip primitives. ============================================================================ */ body.dusk .gyg-wiz-card { background: var(--d-card); border: 1px solid var(--d-line-2); border-radius: 18px; padding: 20px 22px; box-shadow: var(--d-shadow-2); max-width: 580px; margin: 4px 0 10px; } body.dusk .gyg-wiz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } body.dusk .gyg-wiz-eyebrow { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } body.dusk .gyg-wiz-step { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--d-tan); } body.dusk .gyg-wiz-x { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 8px; color: var(--d-ink); } body.dusk .gyg-wiz-x svg { inline-size: 18px; block-size: 18px; stroke: var(--d-ink); } body.dusk .gyg-wiz-x:hover { color: var(--d-cream); } body.dusk .gyg-wiz-x:hover svg { stroke: var(--d-cream); } body.dusk .gyg-wiz-title { margin: 12px 0 4px; color: var(--d-cream); font-size: 1.18rem; } body.dusk .gyg-wiz-sub { margin: 0 0 4px; color: var(--d-tan); font-size: .9rem; line-height: 1.5; } body.dusk .gyg-wiz-body { margin-top: 14px; } body.dusk .gyg-wiz-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; } /* the two big yes/no (and ride/create) choice cards */ body.dusk .wiz-choices { display: grid; gap: 12px; } body.dusk .wiz-choice { display: grid; gap: 4px; text-align: start; width: 100%; cursor: pointer; padding: 15px 16px; border: 1px solid var(--d-line-2); border-radius: 14px; background: var(--d-panel); color: var(--d-cream); } body.dusk .wiz-choice:hover { border-color: var(--d-copper); background: var(--d-card); } body.dusk .wiz-choice-ic { color: var(--d-copper); } body.dusk .wiz-choice-ic svg { inline-size: 20px; block-size: 20px; stroke: var(--d-copper); } body.dusk .wiz-choice-t { font-weight: 700; color: var(--d-cream); font-size: .98rem; } body.dusk .wiz-choice-s { color: var(--d-tan); font-size: .86rem; line-height: 1.45; } /* the auto-matched listing list (Yes path) — each row is a matched experience */ body.dusk .wiz-match { list-style: none; margin: 0; padding: 0; border: 1px solid var(--d-line-2); border-radius: 12px; overflow: hidden; } body.dusk .wiz-match-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--d-line); } body.dusk .wiz-match-row:last-child { border-bottom: none; } body.dusk .wiz-match-ok { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 999px; background: rgba(157,179,137,.16); flex: none; } body.dusk .wiz-match-ok svg { inline-size: 14px; block-size: 14px; stroke: var(--d-green-lit); } body.dusk .wiz-match-name { flex: 1 1 auto; min-width: 0; color: var(--d-cream); font-weight: 600; overflow-wrap: anywhere; } body.dusk .wiz-match-tag { flex: none; font-size: .72rem; font-weight: 700; color: var(--d-green-lit); background: rgba(157,179,137,.14); border-radius: 999px; padding: 2px 9px; } /* the "create an account" guided checklist + the success state */ body.dusk .wiz-checklist { margin: 0 0 12px; padding-inline-start: 20px; color: var(--d-cream); display: grid; gap: 8px; } body.dusk .wiz-checklist li { line-height: 1.5; } body.dusk .wiz-info { display: flex; align-items: flex-start; gap: 9px; } body.dusk .wiz-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 6px 0; } body.dusk .wiz-done-mark { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 999px; background: rgba(157,179,137,.16); border: 1px solid rgba(157,179,137,.34); } body.dusk .wiz-done-mark svg { inline-size: 26px; block-size: 26px; stroke: var(--d-green-lit); } body.dusk .wiz-done p { color: var(--d-cream); line-height: 1.55; margin: 0; max-width: 46ch; } @media (max-width: 640px) { body.dusk .chman-row { flex-wrap: wrap; } body.dusk .chman-side { inline-size: 100%; justify-content: space-between; } body.dusk .gyg-wiz-card { padding: 18px 16px; } } /* ============================================================================ MED-1 (UX) — BREATHING ROOM. The heroes are excellent but the body reverts to dense dashboard packing; whitespace is the single biggest "calm / claude-level" lever. Increase inter-section spacing + card padding on the operator Dusk body (scoped to body.dusk — no F2 / buyer drift). The cockpit + MT console tune their own section rhythm in their sheets (same intent). ============================================================================ */ /* more air ABOVE each section title (28 -> 40) so sections read as distinct chapters, not a continuous wall of cards. */ body.dusk .content .section-title { margin-top: 40px; } /* the first section under the hero/KPI band keeps its tighter lift. */ body.dusk .content .dusk-kpis + .section-title, body.dusk .content .section-title:first-child { margin-top: 24px; } /* roomier cards (20 -> 24/26) — the data inside gets space to breathe. */ body.dusk .card { padding: 24px 26px; } /* a touch more gap between stacked cards / panels. */ body.dusk .grid-2, body.dusk .split-7-5 { gap: 22px; } body.dusk .alert-rail { gap: 12px; } /* ============================================================================ CONCIERGE ONBOARDING (/app/sanam/onboarding) — the persona chooser on Dusk. The page is launched FROM the (Dusk) cockpit, so it wears the Dusk system too (onboarding.html carries + loads this sheet). The 5-persona cards ride the shared .card Dusk override; only the AGGREGATOR (Hawi) card needs a scoped fix — platform.css gives it a LIGHT --copper-tint ground (cream-on-cream on the dark Dusk ground = illegible). Re-tint it to a copper-warm DARK card so it still reads DISTINCT from the single-operator set (the plan-7.4 intent), legibly. Scoped under body.dusk — no F2 / buyer drift; a re-skin = a token swap. ============================================================================ */ body.dusk .persona-card { background: linear-gradient(180deg, rgba(48,35,23,.92), rgba(42,31,21,.92)); } body.dusk .persona-card:hover { border-color: var(--d-copper); box-shadow: var(--d-shadow-2), 0 0 26px rgba(204,146,72,.16); } body.dusk .aggregator-card { background: linear-gradient(180deg, #3B2B1C, #2C2016); border: 1.5px solid var(--d-line-3); } body.dusk .aggregator-card:hover { border-color: var(--d-copper-press); } /* ============================================================================ V4 FINISH-LIFT (operator sub-screens) — generalize the home's v4 finish to the remaining SHARED operator components so every operator sub-screen matches the "Journey" finish (copper dawn-glow card fills · the Najdi notch crest · a warm 16px rhythm · glassy translucent surfaces). Presentation-only, scoped under body.dusk (operator surface only — no F2 / buyer / cockpit-token drift). These override base sheets (platform.css / listing_new.css) which this sheet loads AFTER, so the cascade wins without editing those sheets. A re-skin = a token swap; AA preserved; reduced-motion + forced-colors fall back below. ============================================================================ */ /* the ASSETS "capacity pool" cards (listing_new.css .pool-card is a flat #20160E box): lift to the v4 card finish — copper dawn-glow radial over the oud gradient + the inset cream hairline + the canon 16px radius + a calm hover lift + the Najdi NOTCH crest on the top edge (it carries a .pool-head header). */ body.dusk .pool-card { background: radial-gradient(120% 90% at 12% 0%, rgba(184,115,51,.10), transparent 55%), linear-gradient(180deg, var(--d-card), var(--d-card-3)); border: 1px solid var(--d-line); border-radius: 16px; position: relative; overflow: hidden; box-shadow: var(--d-shadow), inset 0 1px 0 rgba(244,237,226,.05); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; } body.dusk .pool-card::before { content: ""; position: absolute; inset-inline: 18px; 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; } body.dusk .pool-card > * { position: relative; z-index: 2; } body.dusk .pool-card:hover { transform: translateY(-4px); border-color: var(--d-line-3); box-shadow: var(--d-shadow-2), 0 0 26px rgba(204,146,72,.14); } body.dusk .pool-card.retired:hover { transform: none; } /* the per-pool usage mini-stats read as warm slots, not bare numbers */ body.dusk .pool-usage .pu .pu-n { color: var(--d-cream); } body.dusk .pool-usage .pu .pu-l { color: var(--d-ink); } /* the TABLE / breakdown KPI chip (GENERIC FINISH — mirrored in journey.css; kept here for the operator sub-screens that don't load journey.css). Warm it from the flat #2B2017 to a copper dawn-glow chip + 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 CALENDAR day cell + week row read as warm niches (a faint copper lift) rather than flat #2B2017 boxes — the same dawn-glow, kept subtle so the capacity bars + state colours still lead the eye. DEMO-FIX (Lane 2 — blank-grid blocker): the base gradient was SEMI-TRANSPARENT (rgba(46,34,24,.6)→rgba(41,30,20,.72)); composited over the oud page ground (#161009) it landed barely above the page, so a low/no-booking cell — where the Sadu-weave is faint too — became invisible and the whole sparse month read as a blank grid. The base fill is now OPAQUE and clearly stepped above the page (#2E2218→#241A12, the same surface the cards use; #241A12 ≈ +ΔL over #1A130D), so EVERY cell is a distinct surface regardless of weave/density. The copper dawn-glow radial stays ON TOP as the lift, and the Sadu-weave (.cal-weave, z-0) still rides over this now-visible cell. */ body.dusk .cal-day, body.dusk .week-row, body.dusk .reopen-row { background: radial-gradient(140% 130% at 0% 0%, rgba(184,115,51,.07), transparent 60%), linear-gradient(180deg, #2E2218, #241A12); box-shadow: inset 0 1px 0 rgba(244,237,226,.04); } /* a SHARED Najdi NOTCH crest on any card / panel that carries a header (GENERIC FINISH — mirrored in journey.css; kept here for the operator sub- screens that don't load journey.css). A card with a header (.section-title or an

/

first child) gets the dawn-lit shoulder dome. / 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; } /* a SHARED page-head copper accent bar (GENERIC FINISH — mirrored in journey.css). / 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)); } / reduced-motion / forced-colors: the lift transitions stop; the decorative crests + accent bars are hidden in forced-colors (structure stays via borders). / @media (prefers-reduced-motion: reduce) { body.dusk .pool-card { transition: none; } } @media (forced-colors: active) { body.dusk .pool-card::before, body.dusk .card:has(> .section-title)::before, body.dusk .card:has(> h2:first-child)::before, body.dusk .card:has(> h3:first-child)::before, body.dusk .page-head::before { display: none; } body.dusk .pool-card, body.dusk .kpi { border: 1px solid; } / the soft hero hairline (gradient) vanishes in forced-colors -> restore a plain rule so the hero/middle boundary still reads as structure. / .dusk-hero::before { display: none; } .dusk-hero::after { background: none; block-size: 0; border-block-end: 1px solid; } / the decorative dune backdrop + its scrim drop in forced-colors (structure only) / body.dusk .hero-slim .hero-dunes-bg, body.dusk .hero-slim .hero-scrim { display: none; } } / ============================================================================ "THE JOURNEY" v4 — the operator HOME, restyled (presentation-only; emitted by supplier_home.js, motifs in journey.css). A walk through the day: DAWN hero (greeting + the Northern-Star assistant + KPIs up) → GOLDEN-HOUR working middle → CAMPFIRE foot (a sample Moment + portal doors + a warm sign-off). All scoped under body.dusk (operator surface only); AA on the dark ground (Sea/Green ONLY via the -lit tokens as text); logical CSS (LTR + RTL). ============================================================================ / / the hero now layers The Journey sea→peaks ridge BEHIND the editorial content / body.dusk .dusk-hero.j-hero { z-index: 1; } body.dusk .j-hero .j-ridge { z-index: 0; } body.dusk .j-hero .hero-inner { position: relative; z-index: 2; } / V4 FIDELITY (hero) — the .hero-scrim: a soft bottom-anchored darkening over the sea→peaks ridge so the LARGE editorial headline keeps AA legibility wherever the ridge/dawn-glow brightens behind it. It sits ABOVE the ridge but BELOW the content (z-index 1), is purely decorative, and ignores pointer events. / body.dusk .j-hero .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(22,16,9,.62) 0%, rgba(22,16,9,.30) 42%, transparent 72%), linear-gradient(0deg, rgba(22,16,9,.40) 0%, transparent 46%); } [dir="rtl"] body.dusk .j-hero .hero-scrim { background: linear-gradient(270deg, rgba(22,16,9,.62) 0%, rgba(22,16,9,.30) 42%, transparent 72%), linear-gradient(0deg, rgba(22,16,9,.40) 0%, transparent 46%); } @media (forced-colors: active) { body.dusk .j-hero .hero-scrim { display: none; } } / V4 FIDELITY A6/A7 — ONE clean horizon: the sea→peaks ridge reads, the legacy SMIL "squiggle" horizon (the older heroArt() front/back undulating line) is RETIRED so the two ridge ideas no longer compete. The .horizon markup stays in the JS (the living-horizon markers are part of the contract) but it no longer PAINTS over the brand ridge. The faint seal watermark is kept (it sits quietly behind, far right). Let the brand ridge read a touch brighter than the .6 base. / body.dusk .j-hero .horizon { display: none; } body.dusk .j-hero .j-ridge { opacity: .82; } / DAWN — the greeting + the assistant ride side by side on a wide screen / body.dusk .j-hero .hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(20px, 3vw, 48px); align-items: stretch; margin-top: clamp(16px, 2vw, 28px); } body.dusk .j-hero .hero-text { min-width: 0; align-self: center; } body.dusk .j-hero .greet { font-family: "Marcellus", serif; font-weight: 400; letter-spacing: -.01em; / V4 FIDELITY (hero) — the greeting LINE 1 (the warm "Good morning, {name}."). It is the quieter first line of a LARGE multi-line editorial headline; the evocative .warm line below carries the dramatic scale. / font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: 1.1; margin: 10px 0 0; color: var(--d-cream); } [dir="rtl"] body.dusk .j-hero .greet { font-family: "Noto Naskh Arabic", "Amiri", serif; } / V4 FIDELITY (hero) — the evocative VISITOR-FRAMED line at v4's dramatic display scale: a large multi-line Marcellus headline, warm copper→saffron gradient, set tight + grand under the greeting. This is the editorial centrepiece of the dawn hero (v4: "Three travelers are crossing / into your AlUla morning."). / body.dusk .j-hero .greet .warm { display: block; margin-top: .12em; font-size: clamp(2.3rem, 5.6vw, 5rem); line-height: 1.04; letter-spacing: -.015em; background: linear-gradient(96deg, var(--d-star-lit) 0%, var(--d-copper-press) 50%, var(--d-copper-lit) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; / a soft warm halo lifts the gradient text off the ridge for AA legibility / text-shadow: 0 1px 22px rgba(184,115,51,.18); } [dir="rtl"] body.dusk .j-hero .greet .warm { font-family: "Noto Naskh Arabic", "Amiri", serif; letter-spacing: 0; line-height: 1.3; } / the gradient-clip can hide forced-colors text -> fall back to a solid token / @media (forced-colors: active) { body.dusk .j-hero .greet .warm { -webkit-text-fill-color: currentColor; color: var(--d-cream); text-shadow: none; } } body.dusk .j-hero .pulse { max-width: 46ch; margin-top: 14px; } / the count/initials face cluster (NEVER named — count visualisation only) / body.dusk .j-hero .subline { margin: 16px 0 0; max-width: 46ch; color: var(--d-tan); line-height: 1.6; } body.dusk .facegroup { display: inline-flex; align-items: center; vertical-align: -9px; margin-inline-end: 6px; } body.dusk .facegroup .av { width: 28px; height: 28px; border-radius: 50%; margin-inline-start: -8px; border: 2px solid var(--d-panel); display: grid; place-items: center; background: radial-gradient(circle at 32% 28%, var(--d-sea-lit), var(--d-sea)); } body.dusk .facegroup .av:first-child { margin-inline-start: 0; } body.dusk .facegroup .av svg { width: 15px; height: 15px; stroke: var(--d-cream); } body.dusk .facegroup .more { width: 28px; height: 28px; border-radius: 50%; margin-inline-start: -8px; border: 2px solid var(--d-panel); display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--d-cream); background: var(--d-line); } / THE STAR — the assistant panel as the hero's right column (the copilot reuses its existing .copilot skin; here we give it the Northern-Star header + the default proactive opener treatment). / body.dusk .j-hero .copilot.assistant { margin: 0; display: flex; flex-direction: column; / V4 FIDELITY A5 — the hero assistant carries the same dual radial (saffron top-right + Farasan-sea bottom-left) over the oud gradient as the base .copilot, so "The Star" reads sea-lit + lamp-lit, not flat. / background: radial-gradient(120% 80% at 100% 0%, rgba(200,133,10,.14), transparent 55%), radial-gradient(90% 60% at 0% 100%, rgba(62,111,116,.10), transparent 60%), linear-gradient(180deg, rgba(40,30,19,.96), rgba(31,23,14,.985)); border-color: rgba(184,115,51,.34); } body.dusk .copilot .as-head .as-star.nstar, body.dusk .copilot .cp-spark.nstar { background: radial-gradient(circle at 36% 30%, rgba(230,174,69,.26), rgba(184,115,51,.16)); border: 1px solid rgba(200,133,10,.4); box-shadow: 0 0 18px rgba(200,133,10,.24); } body.dusk .copilot .cp-spark.nstar svg { width: 22px; height: 22px; color: var(--d-saff); stroke: none; } body.dusk .copilot .as-id .nm { font-family: "Marcellus", serif; } / the DEFAULT proactive opener — a warm Sanam bubble, never an empty box / body.dusk .copilot .cp-opener { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; background: linear-gradient(180deg, rgba(46,34,24,.9), rgba(38,28,18,.95)); border: 1px solid var(--d-line-2); border-radius: 4px 14px 14px 14px; padding: 12px 14px; } body.dusk .copilot .cp-opener-mark { flex: none; width: 20px; height: 20px; color: var(--d-saff); margin-top: 1px; } body.dusk .copilot .cp-opener-mark svg { width: 20px; height: 20px; } body.dusk .copilot .cp-opener-msg { margin: 0; color: var(--d-cream); line-height: 1.55; } / the situation chips wear the cool Farasan-Sea informational tone (text -lit) / body.dusk .copilot .cp-chip { color: var(--d-sea-lit); background: rgba(62,111,116,.14); border-color: rgba(94,154,160,.34); } body.dusk .copilot .cp-chip:hover { background: rgba(62,111,116,.26); color: var(--d-cream); border-color: var(--d-sea-lit); } body.dusk .copilot .cp-chip svg { stroke: var(--d-sea-lit); } / FLOW-FIX P1 (#6): a KPI tile rendered as a LINK to its surface. It keeps the .stat-tile lift/hover; strip the link chrome + add a copper drill affordance on hover so it reads as "click to open" (the saffron focus ring is inherited). / body.dusk .stat-tile.stat-link { text-decoration: none; color: inherit; cursor: pointer; display: flex; flex-direction: column; } / the drill-down chevron rides ::after now — ::before is the v4 notch crest (A1). / body.dusk .stat-tile.stat-link::after { content: ""; position: absolute; inset-block-start: 14px; inset-inline-end: 14px; width: 7px; height: 7px; border-top: 2px solid var(--d-copper); border-inline-end: 2px solid var(--d-copper); transform: rotate(45deg); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 2; } body.dusk .stat-tile.stat-link:hover::after { opacity: .9; transform: rotate(45deg) translate(2px, -2px); } / FLOW-FIX P1 (#7): the empty-operator earnings microcopy (net 0 + 0 bookings) — onboarding-forward, calm, in the tile's value slot instead of a stark SAR 0. The Occupancy 0-state ("Fills as you sell") shares the same calm treatment so neither tile ever paints a stark animated 0 when there's nothing to show yet. / body.dusk .stat-tile .earnings-empty, body.dusk .stat-tile .occupancy-empty { display: block; margin-top: 6px; color: var(--d-tan); font-size: .92rem; line-height: 1.45; } / FLOW-FIX P0 (#2): the anonymous traveller face cluster, now living INSIDE the Travellers KPI tile (one home for the count) rather than a duplicate subline. / body.dusk .stat-tile .kpi-faces { margin-top: 8px; } / the KPI head intro above the count-up band / body.dusk .j-hero .kpi-head { margin: clamp(20px, 2.4vw, 34px) 0 14px; } body.dusk .j-hero .kpi-head .kt { font-family: "Marcellus", serif; font-weight: 400; color: var(--d-cream); margin: 0; font-size: clamp(1.25rem, 1.9vw, 1.7rem); } body.dusk .j-hero .kpi-head .ks { margin: 4px 0 0; color: var(--d-tan); font-size: .9rem; } / in the hero the KPI band no longer lifts over the (now in-hero) content / body.dusk .j-hero .dusk-kpis { margin-top: 0; } / GOLDEN HOUR — the zone heads / body.dusk .zone-head { margin: clamp(30px, 3.6vw, 52px) 0 6px; } body.dusk .zone-title { font-family: "Marcellus", serif; font-weight: 400; color: var(--d-cream); margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -.005em; } [dir="rtl"] body.dusk .zone-title { font-family: "Noto Naskh Arabic", "Amiri", serif; } body.dusk .zone-sub { margin: 7px 0 0; color: var(--d-tan); } / the MONEY + SAFETY reassurance band — calm Asir-Green / cream, never ember / body.dusk .reassure { position: relative; margin-top: clamp(18px, 2vw, 28px); display: flex; align-items: center; flex-wrap: wrap; gap: clamp(14px, 2.4vw, 36px); padding: 16px clamp(18px, 2.4vw, 28px); border-radius: 16px; background: radial-gradient(120% 140% at 0% 0%, rgba(111,130,96,.14), transparent 60%), linear-gradient(180deg, rgba(46,40,30,.78), rgba(36,30,22,.86)); border: 1px solid rgba(111,130,96,.30); box-shadow: var(--d-shadow); } body.dusk .reassure .ra-shield { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--d-green-lit); background: rgba(111,130,96,.16); border: 1px solid rgba(111,130,96,.34); } body.dusk .reassure .ra-shield svg { width: 22px; height: 22px; stroke: var(--d-green-lit); } body.dusk .reassure .ra-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; } body.dusk .reassure .ra-item .v { font-size: clamp(1rem, 1.4vw, 1.18rem); font-weight: 700; color: var(--d-cream); line-height: 1.15; display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; } body.dusk .reassure .ra-item .v.money { color: #EDD49A; } body.dusk .reassure .ra-item .l { font-size: .8rem; color: var(--d-label, var(--d-ink)); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } body.dusk .reassure .ra-sep { width: 1px; align-self: stretch; background: rgba(111,130,96,.24); margin-block: 2px; } body.dusk .reassure .ra-ok { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 700; color: var(--d-green-lit); background: rgba(111,130,96,.14); border: 1px solid rgba(111,130,96,.34); border-radius: 999px; padding: 9px 15px; text-decoration: none; } body.dusk .reassure .ra-ok svg { width: 15px; height: 15px; stroke: var(--d-green-lit); } / FLOW-FIX P0 (#4): the collapsed Next-7 SUMMARY line — one calm row (real pool count + the real 7-day window) linking to the calendar, replacing the 7 identical rows. Reuses the .week-row dark surface language. / body.dusk .week-summary { display: flex; align-items: center; gap: 14px; text-decoration: none; background: #2B2017; border: 1px solid var(--d-line); border-radius: 14px; padding: 14px 18px; color: var(--d-cream); transition: border-color .2s, background .2s; } body.dusk .week-summary:hover { border-color: var(--d-copper); background: #2F2216; } body.dusk .week-summary .ws-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #3D2C1C; } body.dusk .week-summary .ws-ico svg { width: 19px; height: 19px; stroke: var(--d-copper); } body.dusk .week-summary .ws-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } body.dusk .week-summary .ws-head { font-weight: 600; color: var(--d-cream); } body.dusk .week-summary .ws-sub { font-size: .84rem; } body.dusk .week-summary .ws-go { margin-inline-start: auto; flex: none; } body.dusk .week-summary .ws-go svg { width: 18px; height: 18px; stroke: var(--d-star-lit); } / CAMPFIRE foot — ONE quiet trailing flourish (the sign-off only). A soft saffron glow still lights the foot, but the zone no longer stacks three sections, so its lead-in is tighter (the sign-off carries its own top margin). / body.dusk .campfire-zone { position: relative; margin-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(16px, 2vw, 32px); } / with only the sign-off inside, fold its extra top margin into the zone's. / body.dusk .campfire-zone > .signoff { margin-top: clamp(12px, 2vw, 28px); } body.dusk .campfire-zone::before { content: ""; position: absolute; inset-inline: -8%; inset-block-end: -6%; height: 60%; background: radial-gradient(60% 100% at 50% 100%, rgba(200,133,10,.16) 0%, rgba(184,115,51,.06) 42%, transparent 72%); pointer-events: none; z-index: 0; } body.dusk .campfire-zone > { position: relative; z-index: 1; } body.dusk .foot-intro { text-align: center; max-width: 62ch; margin: 0 auto clamp(22px, 3vw, 38px); } body.dusk .foot-intro p { color: var(--d-tan); margin-top: 10px; } /* the "Moments" SAMPLE card (honest SIM — no reviews read yet) / body.dusk .moments { position: relative; margin-bottom: clamp(20px, 2.2vw, 30px); display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2vw, 26px); align-items: center; padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 32px); border-radius: 16px; background: radial-gradient(90% 160% at 100% 0%, rgba(200,133,10,.10), transparent 55%), linear-gradient(180deg, var(--d-card-2), var(--d-card-3)); border: 1px solid rgba(184,115,51,.30); box-shadow: var(--d-shadow); overflow: hidden; } body.dusk .moments .m-quotemark { position: absolute; inset-inline-start: 14px; inset-block-start: -14px; font-family: "Marcellus", serif; font-size: 110px; color: rgba(200,133,10,.12); line-height: 1; pointer-events: none; } body.dusk .moments .m-face { position: relative; z-index: 1; width: clamp(52px, 6vw, 70px); height: clamp(52px, 6vw, 70px); border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--d-saff); background: radial-gradient(circle at 35% 30%, rgba(230,174,69,.22), rgba(184,115,51,.18)); border: 1px solid rgba(200,133,10,.35); } body.dusk .moments .m-face svg { width: 30px; height: 30px; } body.dusk .moments .m-body { position: relative; z-index: 1; min-width: 0; } body.dusk .moments .m-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--d-copper-lit); display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; } body.dusk .moments .m-quote { font-family: "Marcellus", serif; font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.34; color: var(--d-cream); margin: 8px 0 0; } [dir="rtl"] body.dusk .moments .m-quote { font-family: "Noto Naskh Arabic", "Amiri", serif; } body.dusk .moments .m-by { margin-top: 9px; font-size: .84rem; } / ============================================================================ V4 FIDELITY A10 — KPI flourishes: the illustrative sparkline + the REAL occupancy ring sit inside the .stat-tile (which is position:relative). ============================================================================ / body.dusk .stat-tile .k-spark { position: absolute; inset-inline-end: 16px; inset-block-end: 14px; width: 84px; height: 28px; opacity: .55; pointer-events: none; z-index: 1; } body.dusk .stat-tile .occ-ring { position: absolute; inset-inline-end: 18px; inset-block-start: 18px; width: 50px; height: 50px; pointer-events: none; z-index: 1; } / the occupancy tile reserves room on the right so the ring never overlaps text / body.dusk .stat-tile.occ-tile .lbl, body.dusk .stat-tile.occ-tile .occupancy-slot { padding-inline-end: 56px; } @media (max-width: 760px) { body.dusk .stat-tile .k-spark { display: none; } } / ============================================================================ V4 FIDELITY A7 — the 7-day SADU WOVEN STRIP (the signature flourish). Dense weave = booked, sparse = open, today lit by a saffron thread. The per-day density is illustrative (flagged); the dates + the pool count are REAL. ============================================================================ / body.dusk .sadu-card { padding: clamp(18px, 1.8vw, 24px); border-radius: 16px; background: linear-gradient(180deg, var(--d-card), var(--d-card-3)); border: 1px solid var(--d-line); box-shadow: var(--d-shadow), inset 0 1px 0 rgba(244,237,226,.05); } body.dusk .sadu { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } / REDESIGN (founder-approved): each day is now a GLANCEABLE DATA TILE — day + date header, an explicit "N open" capacity readout, and a legible FILL BAR (booked vs open). The Sadu weave is kept as a SUBTLE BRAND TEXTURE that rides INSIDE the booked portion of the bar (annotating the data, not being the only signal). Backgrounds use rgba()/existing tokens only — no NEW dark-hex grounds (the day-theme coverage guard) — so the tile stays legible in BOTH themes. / body.dusk .sadu-day { display: flex; flex-direction: column; gap: 8px; padding: 9px 9px 10px; border-radius: 12px; border: 1px solid var(--d-line); background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.10)); } body.dusk .sadu-day .dhead { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } body.dusk .sadu-day .dlabel { font-size: .68rem; font-weight: 700; letter-spacing: .05em; color: var(--d-tan); text-transform: uppercase; } body.dusk .sadu-day .dnum { font-size: .92rem; font-weight: 700; color: var(--d-cream); } / the FILL BAR — the open track is a faint inset; the booked portion is an Asir- green fill that carries the woven texture as a quiet brand annotation. / body.dusk .sadu-day .day-fill { position: relative; width: 100%; height: 26px; border-radius: 7px; overflow: hidden; border: 1px solid var(--d-line-2); background: repeating-linear-gradient(45deg, rgba(74,55,39,.55) 0 5px, rgba(36,26,18,.55) 5px 10px); } body.dusk .sadu-day .df-bar { position: absolute; inset-block: 0; inset-inline-start: 0; min-width: 3px; border-inline-end: 1px solid rgba(157,179,137,.6); background: linear-gradient(180deg, rgba(111,130,96,.92), rgba(111,130,96,.78)); overflow: hidden; } body.dusk .sadu-day .df-weave { position: absolute; inset: 0; opacity: .42; mix-blend-mode: soft-light; } body.dusk .sadu-day .df-weave svg { width: 100%; height: 100%; display: block; } / the EXPLICIT capacity readout — the PRIMARY signal (number + word), AA text. / body.dusk .sadu-day .day-cap { font-size: .74rem; font-weight: 600; color: var(--d-tan); display: flex; align-items: baseline; gap: 4px; } body.dusk .sadu-day .day-cap .dc-open { font-size: .98rem; font-weight: 800; color: var(--d-cream); line-height: 1; } / three glanceable states (legible without colour alone — the number + bar width already carry it; these just warm the accent). / body.dusk .sadu-day.day-open .dc-open { color: var(--d-star-lit); } body.dusk .sadu-day.day-busy .dc-open { color: var(--d-copper-lit); } body.dusk .sadu-day.day-full .day-fill .df-bar { background: linear-gradient(180deg, rgba(184,115,51,.95), rgba(184,115,51,.8)); border-inline-end-color: rgba(204,146,72,.7); } body.dusk .sadu-day.day-full .dc-open { color: var(--d-ink); } / TODAY — lit by a saffron ring + brighter header (kept). / body.dusk .sadu-day.today { border-color: rgba(200,133,10,.55); box-shadow: 0 0 16px rgba(200,133,10,.20); background: linear-gradient(180deg, rgba(200,133,10,.10), rgba(0,0,0,.12)); } body.dusk .sadu-day.today .dnum, body.dusk .sadu-day.today .dlabel { color: var(--d-star-lit); } / the tiny inline legend (booked vs open) — so the bar reads at a glance. / body.dusk .week-legend { display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; align-items: center; } body.dusk .week-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; color: var(--d-tan); } body.dusk .week-legend i { width: 20px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid var(--d-line-2); flex: none; } body.dusk .week-legend i.wl-booked { background: linear-gradient(180deg, rgba(111,130,96,.92), rgba(111,130,96,.78)); } body.dusk .week-legend i.wl-open { background: repeating-linear-gradient(45deg, rgba(74,55,39,.55) 0 4px, rgba(36,26,18,.55) 4px 8px); } body.dusk .week-legend .wl-illus { margin-inline-start: auto; } / the REAL summary row sits beneath the woven band / body.dusk .sadu-card .week-summary { margin-top: 14px; } @media (max-width: 560px) { body.dusk .sadu { gap: 5px; } body.dusk .sadu-day { padding: 7px 6px 8px; gap: 6px; } body.dusk .sadu-day .dlabel { font-size: .58rem; } body.dusk .sadu-day .dnum { font-size: .8rem; } body.dusk .sadu-day .day-fill { height: 20px; } body.dusk .sadu-day .day-cap { font-size: .66rem; } body.dusk .sadu-day .day-cap .dc-open { font-size: .84rem; } body.dusk .week-legend { gap: 10px; } } / DAY (Paper-Desert) grounds for the Sadu 7-day strip. The Dusk rules above ground the OPEN track + the legend swatch in dark oud rgba; on the cream day paper those read dark-on-cream, so re-ground them light here. The weave SVG's own background is theme-aware in JS (weaveSVG reads data-theme -> a paper-light ground in day), so these overrides re-ground the CSS-owned track + legend swatch and re-tune the weave blend (soft-light -> multiply) so the whole strip stays AA-legible on cream in BOTH themes. (rgba only — no new hex ground for the coverage guard to catch.) / html[data-theme="day"] body.dusk .sadu-day .day-fill { background: repeating-linear-gradient(45deg, rgba(58,42,28,.12) 0 5px, rgba(58,42,28,.05) 5px 10px); border-color: rgba(58,42,28,.18); } html[data-theme="day"] body.dusk .sadu-day .df-weave { opacity: .30; mix-blend-mode: multiply; } html[data-theme="day"] body.dusk .week-legend i.wl-open { background: repeating-linear-gradient(45deg, rgba(58,42,28,.12) 0 4px, rgba(58,42,28,.05) 4px 8px); } / ============================================================================ V4 FIDELITY A9 — the portal "doors" as ILLUSTRATED ART cards (v4 .portal): a 16:10 brand-SVG scene + scrim + kicker + desc + hover-lift + copper glow. ============================================================================ / body.dusk .portals { margin-top: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); } body.dusk .portal { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--d-line-2); background: var(--d-card-3); box-shadow: 0 22px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(244,237,226,.06); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; text-decoration: none; color: inherit; display: flex; flex-direction: column; } body.dusk .portal:hover { transform: translateY(-7px); border-color: rgba(184,115,51,.5); box-shadow: 0 30px 64px rgba(0,0,0,.6), 0 0 36px rgba(200,133,10,.12); } body.dusk .portal .art { position: relative; aspect-ratio: 16/10; overflow: hidden; } body.dusk .portal .art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } / the .j-art::after scrim (journey.css) keeps a label over the art legible / body.dusk .portal .body { padding: 16px 18px 20px; position: relative; } body.dusk .portal .p-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--d-copper-lit); display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; } body.dusk .portal .p-desc { margin-top: 8px; font-size: .9rem; line-height: 1.5; color: var(--d-tan); } body.dusk .portal .p-go { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; z-index: 2; background: rgba(46,34,24,.7); border: 1px solid var(--d-line-2); color: var(--d-copper-lit); transition: background .25s, transform .25s; } body.dusk .portal .p-go svg { width: 16px; height: 16px; stroke: var(--d-copper-lit); } body.dusk .portal:hover .p-go { background: rgba(184,115,51,.22); transform: translateX(3px); } [dir="rtl"] body.dusk .portal:hover .p-go { transform: translateX(-3px); } @media (max-width: 980px) { body.dusk .portals { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { body.dusk .portals { grid-template-columns: 1fr; } } / the spoken sign-off — earned + warm, marked by the Northern Star / body.dusk .signoff { text-align: center; margin-top: clamp(36px, 5vw, 72px); padding-block: clamp(24px, 3vw, 40px); } body.dusk .signoff .fire-mark { display: inline-grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 18px; color: var(--d-saff); } body.dusk .signoff .fire-mark svg { width: 40px; height: 40px; } body.dusk .signoff .outcome { font-size: clamp(1rem, 1.45vw, 1.16rem); line-height: 1.6; color: var(--d-cream); max-width: 40ch; margin: 0 auto 16px; font-weight: 500; } body.dusk .signoff .outcome b { color: var(--d-star-lit); font-weight: 700; } body.dusk .signoff .vow { font-family: "Marcellus", serif; font-weight: 400; font-size: clamp(1.25rem, 2.3vw, 2rem); line-height: 1.5; color: var(--d-cream); max-width: 28ch; margin: 0 auto; } [dir="rtl"] body.dusk .signoff .vow { font-family: "Noto Naskh Arabic", "Amiri", serif; } body.dusk .signoff .vow .em { color: var(--d-star-lit); } body.dusk .signoff .sig-name { margin-top: 16px; display: inline-flex; align-items: center; gap: 9px; font-size: .86rem; letter-spacing: .26em; color: var(--d-ink); font-weight: 700; } body.dusk .signoff .sig-name .nstar { width: 14px; height: 14px; color: var(--d-saff); } body.dusk .signoff .sig-name .nstar svg { width: 14px; height: 14px; } body.dusk .signoff .sig-ar { margin-top: 10px; font-family: "Noto Naskh Arabic", "Amiri", serif; color: var(--d-ink-2); font-size: 1rem; } / the footer wordmark + tagline lockup / body.dusk .foot-wm { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: clamp(10px, 2vw, 22px); padding-bottom: clamp(14px, 2vw, 26px); text-align: center; } body.dusk .foot-wm .wm { display: flex; align-items: baseline; gap: 10px; line-height: 1; } body.dusk .foot-wm .wm .lat { font-family: "Marcellus", serif; font-size: 1.4rem; letter-spacing: .3em; color: var(--d-cream); padding-inline-start: .3em; } body.dusk .foot-wm .wm .ar { font-family: "Noto Naskh Arabic", "Amiri", serif; font-size: 1.3rem; color: var(--d-copper-lit); } body.dusk .foot-wm .tag { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--d-tan-warm, var(--d-tan)); font-weight: 600; } / responsive — the hero columns + moments stack on a narrow screen / @media (max-width: 1080px) { body.dusk .j-hero .hero-top { grid-template-columns: 1fr; gap: 24px; } body.dusk .j-hero .copilot.assistant { order: -1; } / the STAR leads on small screens / } @media (max-width: 560px) { body.dusk .moments { grid-template-columns: 1fr; text-align: center; } body.dusk .moments .m-face { margin: 0 auto; } body.dusk .reassure .ra-sep { display: none; } body.dusk .reassure .ra-ok { margin-inline-start: 0; } / V4 FIDELITY (hero) — the editorial headline scales down gracefully on a phone (the clamp mins already keep it readable; these pin a calm phone ceiling so the large .warm line never overflows the narrow column). / body.dusk .j-hero .greet { font-size: 1.5rem; } body.dusk .j-hero .greet .warm { font-size: 2rem; line-height: 1.08; } } / ---- prefers-reduced-motion: the horizon stills, no rise, no count anim ----- / @media (prefers-reduced-motion: reduce) { body.dusk .rv { opacity: 1; transform: none; } .dusk-attn .at .dot.s { animation: none; } .dusk-hero .horizon animate { display: none; } / the slim-hero dune drift freezes flat (belt + braces with the no-preference gate) / body.dusk .hero-slim .hero-dunes-bg .hd-far, body.dusk .hero-slim .hero-dunes-bg .hd-mid, body.dusk .hero-slim .hero-dunes-bg .hd-near { animation: none !important; transform: none !important; } body.dusk .stat-tile { transition: none; } body.dusk .copilot .cp-thinking i { animation: none; opacity: .6; } / V4 FIDELITY — the portal hover-lift, the occ-ring sweep and the topnav caret rotation still under reduced motion (the ring snaps to its value in JS). / body.dusk .portal { transition: none; } body.dusk .occ-ring circle { transition: none !important; } body.dusk .topnav-caret { transition: none; } } / ---- REQ-018 P1-1: operator booking DETAIL panel (inline expand) ----------- / .opbk-detail { flex: 1 1 100%; margin-top: 10px; } .opbk-detail[hidden] { display: none; } .opbk-detail-card { padding: 16px 15px; display: flex; flex-direction: column; gap: 16px; } .opbk-sec { display: flex; flex-direction: column; gap: 6px; } .opbk-sec-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--d-copper, #CC9248); } .opbk-sec-h svg { width: 14px; height: 14px; stroke: var(--d-copper, #CC9248); flex: none; } .opbk-row-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .9rem; padding: 2px 0; } .opbk-row-kv > span:first-child { color: var(--d-tan, #C7AE8C); } .opbk-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--d-line, #3A2C1C); } .opbk-actions .btn, .opbk-cancel-cta { min-height: 44px; } .opbk-cancel-cta { color: var(--d-danger, #D98A6A); border-color: var(--d-danger, #D98A6A); } .opbk-detail-cta[aria-expanded="true"] svg { transform: rotate(90deg); } / COCKPIT slice-2 — INTERNAL NOTES list (layout only; colours inherit the theme, no dark ground → theme-neutral, no day override needed). / .opbk-note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .opbk-note { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-inline-start: 2px solid var(--d-copper, #CC9248); } .opbk-note-text { font-size: .9rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .opbk-note-meta { font-size: .74rem; } / ============================================================================ OPERATOR HOME — PARETO REDESIGN v2 (2026-06-24, spec: operator_home_redesign). "What needs me now." A 5-section Pareto home (3 above the fold): a SLIM hero ribbon + the "needs you now" ranked list (the star), ONE contextual CTA, today + the condensed week, ONE money strip, a slim sign-off — plus the persistent Ask-Sanam bar. Honors The Journey (Dusk + paper_desert tokens, copper/saffron, RTL, WCAG-AA via the `-lit` text siblings, reduced-motion). Token-only colours. ============================================================================ / / §1 — the SLIM hero ribbon (~150px: ribbon + greeting + ONE posture line). The duplicate evocative travellers line is removed; the seal/dunes are dropped here so the band stays thin and the needs-now list shares the fold. / / ROOT-CAUSE FIX (2026-07-01, home overlap): the hero band bleeds -26px to the content top ONLY when it is the FIRST element. Since the Ask-Sanam command bar is now PROMOTED above it (commandSketch() renders first), the -26px top pull was dragging the "Good evening." band UP into the ask-bar (which only carries a 22px bottom gap), so the greeting collided with the command bar. Scope the negative TOP bleed to the first-child case; when the hero follows the ask-bar, the top margin is 0 (the ask-bar's own 22px bottom margin sets the gap). The horizontal -28px full-bleed is kept in both cases. / body.dusk .dusk-hero.hero-slim { margin: 0 -28px 0; padding: 26px 44px 34px; min-height: 168px; / BRAND-HERO (2026-07-01): a warm oud ground with a copper/saffron DAWN GLOW rising from the bottom-right (sunrise over the dunes) so the band reads as an intentional Sanam hero, not a flat slab. The dune SVG (.hero-dunes-bg) layers ON TOP of this; the gradient sets the light, the SVG sets the land. / background: radial-gradient(120% 150% at 88% 128%, rgba(230,174,69,.20), transparent 52%), radial-gradient(90% 130% at 100% 120%, rgba(184,115,51,.24), transparent 60%), radial-gradient(1000px 380px at 14% -20%, rgba(204,146,72,.14), transparent 60%), linear-gradient(180deg, #2A1E12, #191108); } body.dusk .content > .dusk-hero.hero-slim:first-child { margin-top: -26px; } [dir="rtl"] body.dusk .dusk-hero.hero-slim { margin-inline: -28px; } body.dusk .dusk-hero.hero-slim .seal-wm, body.dusk .dusk-hero.hero-slim .horizon, body.dusk .dusk-hero.hero-slim .j-ridge, body.dusk .dusk-hero.hero-slim .dunes { display: none; } / ---- the SLIM-HERO DUNE BACKDROP (heroDuneBackdrop) — the brand horizon ------ A self-contained layered-dune SVG that sweeps the full width + fills the empty right. It sits BEHIND the greeting (z-index 0) + ABOVE the band gradient; the .hero-scrim (z-index 1) + the .hero-inner (z-index 2) keep the text AA over it. RTL: mirror the composition so the lit crest + star rise toward the start edge's opposite (the open side stays where the eye lands last). / body.dusk .hero-slim .hero-dunes-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } body.dusk .hero-slim .hero-dunes-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } [dir="rtl"] body.dusk .hero-slim .hero-dunes-bg { transform: scaleX(-1); } / the lit ridge line + star get a soft copper/saffron glow so the horizon breathes / body.dusk .hero-slim .hero-dunes-bg .hd-ridge { filter: drop-shadow(0 0 6px rgba(230,174,69,.35)); } body.dusk .hero-slim .hero-dunes-bg .hd-star { filter: drop-shadow(0 0 7px rgba(230,174,69,.6)); } body.dusk .hero-slim .greet-slim { font-size: 1.7rem; margin-top: 10px; line-height: 1.1; } body.dusk .hero-slim .pulse-slim { margin-top: 6px; font-size: .98rem; max-width: 680px; } / the slim-hero scrim (z-index 1): a soft start-anchored wash so the greeting stays AA wherever the dune glow brightens behind it. Dark wash on Dusk (cream text); Paper Desert flips it to a warm-cream wash in paper_desert.css. / body.dusk .hero-slim .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(21,14,7,.74) 0%, rgba(21,14,7,.34) 40%, transparent 66%), linear-gradient(0deg, rgba(21,14,7,.28) 0%, transparent 42%); } [dir="rtl"] body.dusk .hero-slim .hero-scrim { background: linear-gradient(270deg, rgba(21,14,7,.74) 0%, rgba(21,14,7,.34) 40%, transparent 66%), linear-gradient(0deg, rgba(21,14,7,.28) 0%, transparent 42%); } / a barely-there horizon drift (~10s) — the living-horizon breath. GPU-cheap transform only; GATED behind prefers-reduced-motion: no-preference (the reduce block below never gets it). Far/mid/near drift at slightly offset phases so the dunes don't move in lockstep. The star + the ridge glow stay put (calm). / @media (prefers-reduced-motion: no-preference) { body.dusk .hero-slim .hero-dunes-bg .hd-far, body.dusk .hero-slim .hero-dunes-bg .hd-mid, body.dusk .hero-slim .hero-dunes-bg .hd-near { animation: heroDuneDrift 11s ease-in-out infinite; will-change: transform; } body.dusk .hero-slim .hero-dunes-bg .hd-mid { animation-duration: 13s; animation-delay: -2.5s; } body.dusk .hero-slim .hero-dunes-bg .hd-near { animation-duration: 15s; animation-delay: -4.5s; } } @keyframes heroDuneDrift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -2px, 0); } } / §1 — "NEEDS YOU NOW": the ONE ranked, deduped action list (the star). / body.dusk .needs-now { margin: 16px 0 8px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(180deg, rgba(46,34,24,.96), rgba(31,23,14,.985)); border: 1px solid var(--d-line-2); box-shadow: 0 18px 40px rgba(0,0,0,.34); border-inline-start: 4px solid var(--d-saff); } body.dusk .needs-now .needs-now-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } body.dusk .needs-now .nn-title { font-family: "Marcellus", serif; font-size: 1.28rem; color: var(--d-cream); margin: 0; } / the AI proactive opener = the first row, woven into the spine (not a box). / body.dusk .nn-opener { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; background: rgba(200,133,10,.08); border: 1px solid rgba(200,133,10,.22); } body.dusk .nn-opener .nn-opener-mark { width: 17px; height: 17px; color: var(--d-saff); flex: none; margin-top: 2px; } body.dusk .nn-opener .nn-opener-msg { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--d-cream); } body.dusk .nn-opener .nn-opener-pill { margin-inline-start: auto; flex: none; } body.dusk .nn-list { display: flex; flex-direction: column; } body.dusk .nn-row { display: flex; align-items: flex-start; gap: 11px; padding: 12px 2px; border-bottom: 1px solid var(--d-line); } body.dusk .nn-row:last-child { border-bottom: 0; } body.dusk .nn-row .nn-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; } body.dusk .nn-row .nn-dot.s { background: var(--d-saff); box-shadow: 0 0 9px rgba(230,174,69,.6); animation: dusk-breathe 3s ease-in-out infinite; } body.dusk .nn-row .nn-dot.g { background: var(--d-green); } body.dusk .nn-row .nn-ico { flex: none; width: 18px; height: 18px; margin-top: 3px; } body.dusk .nn-row .nn-ico svg { width: 18px; height: 18px; stroke: var(--d-copper-lit); } body.dusk .nn-row .nn-body { min-width: 0; flex: 1; } body.dusk .nn-row .nn-head { margin: 0; font-size: .92rem; line-height: 1.4; color: var(--d-cream); } body.dusk .nn-row .nn-head b { font-weight: 600; } body.dusk .nn-row .nn-sub { margin: 2px 0 0; font-size: .82rem; color: var(--d-ink); } body.dusk .nn-row .nn-cta { margin-inline-start: auto; flex: none; min-height: 36px; } body.dusk .nn-viewall { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--d-star-lit); font-weight: 600; font-size: .88rem; text-decoration: none; } body.dusk .nn-viewall svg { width: 15px; height: 15px; stroke: var(--d-star-lit); } body.dusk .nn-calm { display: flex; align-items: center; gap: 8px; padding: 14px 4px; color: var(--d-green-lit); font-size: .95rem; } body.dusk .nn-calm svg { width: 18px; height: 18px; stroke: var(--d-green-lit); flex: none; } / §2 — ONE contextual primary CTA (the state machine's single next step). / body.dusk .ctx-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 14px 0; padding: 16px 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(184,115,51,.16), rgba(31,23,14,.96)); border: 1px solid var(--d-line-2); box-shadow: 0 14px 34px rgba(0,0,0,.3); } body.dusk .ctx-cta .ctx-cta-body { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; } body.dusk .ctx-cta .ctx-star { width: 18px; height: 18px; color: var(--d-saff); flex: none; } body.dusk .ctx-cta .ctx-posture { margin: 0; font-size: 1rem; color: var(--d-cream); line-height: 1.45; } body.dusk .ctx-cta .ctx-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-inline-start: auto; } body.dusk .ctx-cta .ctx-primary { min-height: 46px; } body.dusk .ctx-cta .ctx-secondary { min-height: 46px; } / §3 — today's guests + the condensed next-7 strip. / body.dusk .today-section .section-title-sub { margin-top: 18px; } body.dusk .today-guests { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(46,34,24,.9), rgba(31,23,14,.96)); border: 1px solid var(--d-line-2); text-decoration: none; color: inherit; } body.dusk .today-guests.today-has { border-inline-start: 4px solid var(--d-green); } body.dusk .today-guests.today-calm { color: var(--d-green-lit); font-size: .95rem; } body.dusk .today-guests.today-calm svg { width: 18px; height: 18px; stroke: var(--d-green-lit); flex: none; } body.dusk .today-guests .tg-ico { width: 38px; height: 38px; border-radius: 11px; background: #3D2C1C; display: inline-flex; align-items: center; justify-content: center; flex: none; } body.dusk .today-guests .tg-ico svg { width: 20px; height: 20px; stroke: var(--d-green-lit); } body.dusk .today-guests .tg-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } body.dusk .today-guests .tg-head { font-weight: 600; color: var(--d-cream); } body.dusk .today-guests .tg-sub { font-size: .84rem; margin-top: 1px; } body.dusk .today-guests .tg-go { margin-inline-start: auto; flex: none; } body.dusk .today-guests .tg-go svg { width: 16px; height: 16px; stroke: var(--d-star-lit); } body.dusk .sadu-card.sadu-condensed { margin-top: 8px; } / §4 — ONE glanceable MONEY STRIP (earnings · payout · occupancy · invoices). / body.dusk .money-strip { margin: 18px 0 6px; } body.dusk .money-strip .ms-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } body.dusk .ms-cell { display: flex; flex-direction: column; gap: 6px; padding: 14px 15px; border-radius: 14px; background: linear-gradient(180deg, rgba(46,34,24,.9), rgba(31,23,14,.96)); border: 1px solid var(--d-line-2); text-decoration: none; color: inherit; transition: border-color .18s ease, transform .18s ease; } body.dusk .ms-cell:hover { border-color: var(--d-copper); transform: translateY(-2px); } body.dusk .ms-cell .ms-lbl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .8rem; color: var(--d-ink); } body.dusk .ms-cell .ms-lbl svg { width: 16px; height: 16px; stroke: var(--d-copper-lit); flex: none; } body.dusk .ms-cell .ms-num { font-family: "Marcellus", serif; font-size: 1.55rem; color: var(--d-cream); line-height: 1.05; min-height: 1.7rem; } body.dusk .ms-cell .ms-num small { font-size: .9rem; color: var(--d-ink); } body.dusk .ms-cell .ms-num .count { font-variant-numeric: tabular-nums; } body.dusk .ms-cell .ms-unit { font-size: 1rem; color: var(--d-ink); margin-inline-start: 2px; } body.dusk .ms-cell .ms-empty { font-size: .9rem; color: var(--d-tan); line-height: 1.4; } body.dusk .ms-cell .ms-sub { font-size: .8rem; color: var(--d-ink); } body.dusk .money-strip .ms-statement { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--d-star-lit); font-weight: 600; font-size: .9rem; text-decoration: none; } body.dusk .money-strip .ms-statement svg { width: 16px; height: 16px; stroke: var(--d-star-lit); } / the persistent ASK-SANAM bar (the recast co-pilot — an inline ask-bar). / body.dusk .ask-bar { margin: 18px 0; padding: 16px 18px; border-radius: 16px; position: relative; overflow: hidden; background: radial-gradient(120% 80% at 100% 0%, rgba(200,133,10,.12), transparent 55%), linear-gradient(180deg, rgba(40,30,19,.96), rgba(31,23,14,.985)); border: 1px solid rgba(184,115,51,.34); box-shadow: 0 20px 44px rgba(0,0,0,.42); } body.dusk .ask-bar .ask-bar-row { display: flex; align-items: center; gap: 10px; } body.dusk .ask-bar .ab-star { width: 18px; height: 18px; color: var(--d-saff); flex: none; } body.dusk .ask-bar #cp-input { flex: 1; min-width: 0; background: #1F1710; border: 1px solid var(--d-line-2); border-radius: 13px; padding: 11px 14px; color: var(--d-cream); font-size: .95rem; } body.dusk .ask-bar #cp-input::placeholder { color: var(--d-ink); } body.dusk .ask-bar #cp-input:focus { outline: none; border-color: var(--d-copper); box-shadow: 0 0 0 3px rgba(230,174,69,.30); } body.dusk .ask-bar #cp-ask-btn { flex: none; border-radius: 13px; padding-inline: 18px; min-height: 44px; } body.dusk .ask-bar .ab-pill { flex: none; } body.dusk .ask-bar .ab-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } / ============================================================================ THE COMMAND SKETCH — the operator AI FRONT DOOR (P0, 2026-06-25). The ask-bar is PROMOTED into a prominent hero command surface (.ask-bar-hero) above the Pareto home, and an action turn renders a reviewable ACTION CARD (.cp-card) with Confirm / Edit / Cancel. (Day overrides live in paper_desert.css — the day-theme guard requires every dark-ground class below to have a counterpart.) ============================================================================ / / the hero command surface — a bigger, leading slab (reuses .ask-bar's dark ground + day override; only the layout/prominence changes here). / body.dusk .ask-bar.ask-bar-hero { margin: 4px 0 22px; padding: 22px 22px 20px; border-radius: 20px; } body.dusk .ask-bar-hero .ab-hero-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } body.dusk .ask-bar-hero .ab-hero-head .ab-star { width: 22px; height: 22px; margin-top: 2px; } body.dusk .ask-bar-hero .ab-hero-titles { flex: 1; min-width: 0; } body.dusk .ask-bar-hero .ab-hero-title { font-size: 1.28rem; color: var(--d-cream); margin: 0 0 4px; font-weight: 650; } body.dusk .ask-bar-hero .ab-hero-sub { color: var(--d-tan); font-size: .92rem; line-height: 1.55; margin: 0; max-width: 62ch; } body.dusk .ask-bar-hero .ab-pill { flex: none; margin-top: 2px; } body.dusk .ask-bar-hero #cp-input { font-size: 1rem; padding: 13px 16px; } body.dusk .ask-bar-hero #cp-ask-btn { min-height: 48px; } / A1 (2026-07-02) — the ask-bar chips are ``.cp-chip`` but live in ``.ask-bar-hero``, NOT inside ``.copilot``, so the base ``.copilot .cp-chip`` surface rule never matched them → they fell through to the UA-default grey button. On that grey the saffron action text + the calm question text both failed AA (2.67:1). Give EVERY ask-bar chip an oud-toned surface + copper border so the text has a real ground (star-lit #E6AE45 on #2B2017 ≈ 6.4:1; the sea question text ≈ AA too). / body.dusk .ask-bar .cp-chip { background: #2B2017; border: 1px solid var(--d-line-2); color: var(--d-tan); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .86rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s; } body.dusk .ask-bar .cp-chip:hover { border-color: var(--d-copper); color: var(--d-cream); background: #33261A; } body.dusk .ask-bar .cp-chip svg { width: 13px; height: 13px; stroke: var(--d-copper); vertical-align: -2px; margin-inline-end: 5px; } / the action chips lead (saffron-tinted); the question chips are calmer. / body.dusk .ask-bar-hero .cp-chip-action { border-color: var(--d-copper); color: var(--d-star-lit); } body.dusk .ask-bar-hero .cp-chip-action svg { stroke: var(--d-star-lit); } body.dusk .ask-bar-hero .cp-chip-action:hover { border-color: var(--d-star-lit); color: var(--d-cream); background: #33261A; } / the ACTION CARD — clearly a PROPOSAL ("what I will do"), reviewed before commit. / body.dusk .ask-bar .cp-card { margin-top: 14px; background: #2B2017; border: 1px solid var(--d-copper); border-radius: 14px; padding: 16px 18px; } body.dusk .ask-bar .cp-card.cp-card-destructive { border-color: #B5532A; } body.dusk .ask-bar .cp-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } body.dusk .ask-bar .cp-card-h svg { stroke: var(--d-star-lit); width: 17px; height: 17px; flex: none; } body.dusk .ask-bar .cp-card-title { color: var(--d-star-lit); font-weight: 650; font-size: 1.02rem; flex: 1; } body.dusk .ask-bar .cp-card-preview { color: var(--d-cream); line-height: 1.6; margin: 4px 0 10px; } body.dusk .ask-bar .cp-card-grounding { margin-top: 0; } body.dusk .ask-bar .cp-card-warn { display: flex; align-items: center; gap: 7px; margin: 10px 0; background: #3A1E12; border: 1px solid #B5532A; border-radius: 10px; padding: 9px 12px; color: #F0C4A6; font-size: .88rem; } body.dusk .ask-bar .cp-card-warn svg { stroke: #E7B79A; width: 16px; height: 16px; flex: none; } body.dusk .ask-bar .cp-card-gate { display: flex; align-items: center; gap: 7px; color: var(--d-ink); font-size: .82rem; margin: 10px 0 13px; } body.dusk .ask-bar .cp-card-gate svg { stroke: var(--d-sea); width: 15px; height: 15px; flex: none; } body.dusk .ask-bar .cp-card-actions { display: flex; gap: 10px; flex-wrap: wrap; } body.dusk .ask-bar .cp-card .cp-confirm-danger { background: #B5532A; border-color: #B5532A; } body.dusk .ask-bar .cp-card .cp-confirm-armed { background: #8F3D1E; border-color: #8F3D1E; } body.dusk .ask-bar .cp-card.cp-card-done { opacity: .82; } body.dusk .ask-bar .cp-card-result { margin-top: 12px; } body.dusk .ask-bar .cp-card-ok { display: flex; align-items: center; gap: 7px; color: var(--d-star-lit); font-size: .92rem; flex-wrap: wrap; } body.dusk .ask-bar .cp-card-ok svg { stroke: var(--d-star-lit); width: 16px; height: 16px; flex: none; } body.dusk .ask-bar .cp-card-link { color: var(--d-sea); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; } body.dusk .ask-bar .cp-card-link svg { stroke: var(--d-sea); width: 14px; height: 14px; } / §5 — the slim sign-off (the Moments card is CUT). / body.dusk .signoff.signoff-slim { margin-top: 22px; padding-top: 18px; } / responsive: money strip stacks, next-7 scrolls, ask-bar wraps. / @media (max-width: 860px) { body.dusk .dusk-hero.hero-slim { margin-inline: -16px; padding: 18px 18px 26px; } [dir="rtl"] body.dusk .dusk-hero.hero-slim { margin-inline: -16px; } body.dusk .hero-slim .greet-slim { font-size: 1.45rem; } body.dusk .money-strip .ms-row { grid-template-columns: 1fr 1fr; } body.dusk .ctx-cta { flex-direction: column; align-items: stretch; } body.dusk .ctx-cta .ctx-cta-actions { margin-inline-start: 0; } body.dusk .ask-bar .ask-bar-row { flex-wrap: wrap; } body.dusk .ask-bar #cp-input { flex: 1 1 100%; order: 2; } } @media (max-width: 520px) { body.dusk .money-strip .ms-row { grid-template-columns: 1fr; } body.dusk .nn-row .nn-cta { margin-inline-start: 29px; } } / reduced-motion: still the breathing dot + the hover lifts. / @media (prefers-reduced-motion: reduce) { body.dusk .nn-row .nn-dot.s { animation: none; } body.dusk .ms-cell:hover { transform: none; } } / ---- forced-colors: keep the top nav + flourishes legible as structure ------ / @media (forced-colors: active) { body.dusk .topnav, body.dusk .topnav-menu { border: 1px solid; } body.dusk .topnav-ask, body.dusk .topnav-help { border: 1px solid; } body.dusk .stat-tile::before, body.dusk .copilot::after, body.dusk .k-spark, body.dusk .portal .art { display: none; } body.dusk .portal, body.dusk .sadu-card, body.dusk .moments { border: 1px solid; } body.dusk .opbk-detail-card, body.dusk .opbk-actions { border: 1px solid; } / the v2 home cards as plain structure / body.dusk .needs-now, body.dusk .ctx-cta, body.dusk .today-guests, body.dusk .ms-cell, body.dusk .ask-bar, body.dusk .nn-opener { border: 1px solid; } } / ============================================================================ UI ROUND 2 — operator CALENDAR (the daily tool): the Sadu-weave density heatmap, the "month at a glance" idle panel, grid mount-motion, tactile select + the panel cross-fade. Operator-scoped (body.dusk); Paper-Desert inherits via the remapped --d-* tokens + the day-theme block below. All motion is gated behind prefers-reduced-motion; forced-colors falls back to plain structure at the foot. (Round-2 owned file — calendar only.) ============================================================================ / / ---- 1) SADU-WEAVE DENSITY HEATMAP (in the month cells) --------------------- / / The weave is a decorative SVG layer BEHIND the cell content. The cell becomes a positioning context; the caption + status dot ride on top (z-1) so AA contrast is never traded for the texture. The weave opacity is deliberately low so the "X of Y" caption stays the source of truth; density is the at-a-glance gestalt. / body.dusk .cal-day { position: relative; overflow: hidden; isolation: isolate; } body.dusk .cal-weave { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .22; / the at-a-glance density wash (booked = denser weave) / -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55), #000 42%); mask-image: linear-gradient(180deg, rgba(0,0,0,.55), #000 42%); / keep the top row (number) cleanest / } body.dusk .cal-weave svg { display: block; width: 100%; height: 100%; } / an unset day = a quiet empty paper track (an invitation, not a filled state) / body.dusk .cal-weave.is-unset { opacity: .14; } / today's saffron warp earns a touch more presence (the living motif). Capped at .26 (was .30): at .30 a fully-dense today cell pushed the caption's trailing glyph — where the scrim has thinned — to ~4.43:1 (<4.5 AA). .26 + the longer scrim solid-stop below keeps it >=4.5:1 even on a saturated weave. / body.dusk .cal-day.today .cal-weave { opacity: .26; } body.dusk .cal-day.selected .cal-weave { opacity: .30; } / the content sits ABOVE the weave; the cap stays fully legible / body.dusk .cal-day .dnum, body.dusk .cal-day .day-dot, body.dusk .cal-day .cap, body.dusk .cal-day .blocked-tag, body.dusk .cal-day .today-tag { position: relative; z-index: 1; } / the cap gets a faint ground scrim so digits never sit on a busy warp / body.dusk .cal-day .cap { align-self: flex-start; margin-top: auto; / AA: hold the solid ground all the way under the caption (.78 -> .62 at 92%) so even the LAST glyph sits on an opaque-enough scrim; the fade-to-transparent happens only past the text. Was: fell to .30 by 88% which thinned the scrim under the trailing glyph on a dense today cell. / background: linear-gradient(90deg, rgba(26,19,13,.80), rgba(26,19,13,.74) 78%, rgba(26,19,13,.62) 92%, transparent); padding: 1px 7px 1px 4px; border-radius: 5px; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); } [dir="rtl"] body.dusk .cal-day .cap { background: linear-gradient(270deg, rgba(26,19,13,.80), rgba(26,19,13,.74) 78%, rgba(26,19,13,.62) 92%, transparent); } / Paper-Desert (light) day theme: lighten the scrim + lift the weave a hair so it reads on the cream ground without muddying the caption. / html[data-theme="day"] body.dusk .cal-weave { opacity: .20; mix-blend-mode: multiply; } html[data-theme="day"] body.dusk .cal-weave.is-unset { opacity: .12; } html[data-theme="day"] body.dusk .cal-day.today .cal-weave { opacity: .24; } / match the dark scrim's longer solid hold on cream so the cap reads on a dense light-theme today cell too (the R2 light weave was unverified). / html[data-theme="day"] body.dusk .cal-day .cap { background: linear-gradient(90deg, rgba(247,241,231,.92), rgba(247,241,231,.86) 78%, rgba(247,241,231,.74) 92%, transparent); } [dir="rtl"] html[data-theme="day"] body.dusk .cal-day .cap { background: linear-gradient(270deg, rgba(247,241,231,.92), rgba(247,241,231,.86) 78%, rgba(247,241,231,.74) 92%, transparent); } / ---- 1b) MOBILE WEEK-ROW DENSITY RAIL ------------------------------------- / / The phone week-list now carries the same Sadu-weave at-a-glance density as the desktop cells (R2 had left the flat cap-bar here). The weave is a vertical rail on the row's LEADING edge so it reads booked/capacity in one glance, while the row's text + status pill ride above it (z-1) and never lose contrast. The precise fill stays in the .cap-bar + the status pill; the rail is the gestalt. / body.dusk .week-row { position: relative; overflow: hidden; isolation: isolate; } / A substantial Sadu-weave rail on the leading edge — wide + present enough to read as a density signal at arm's length (a thin hairline disappeared on the phone). It carries a faint copper hairline on its trailing edge so the rail reads as an intentional band, then a short scrim fades it into the row so the date never sits on a busy warp. / body.dusk .week-row .week-weave { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 22px; z-index: 0; pointer-events: none; opacity: .80; border-inline-end: 1px solid rgba(204,146,72,.34); -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent); mask-image: linear-gradient(90deg, #000 62%, transparent); } [dir="rtl"] body.dusk .week-row .week-weave { -webkit-mask-image: linear-gradient(270deg, #000 62%, transparent); mask-image: linear-gradient(270deg, #000 62%, transparent); } body.dusk .week-row .week-weave svg { display: block; width: 100%; height: 100%; } body.dusk .week-row .week-weave.is-unset { opacity: .42; border-inline-end-color: rgba(204,146,72,.18); } body.dusk .week-row.today .week-weave { opacity: .92; border-inline-end-color: rgba(230,174,69,.50); } / lift the row content clear of the rail (pad the leading edge + raise z) / body.dusk .week-row .wd, body.dusk .week-row .wcap, body.dusk .week-row > .pill { position: relative; z-index: 1; } body.dusk .week-row .wd { margin-inline-start: 16px; } html[data-theme="day"] body.dusk .week-row .week-weave { opacity: .58; mix-blend-mode: multiply; } html[data-theme="day"] body.dusk .week-row .week-weave.is-unset { opacity: .34; } html[data-theme="day"] body.dusk .week-row.today .week-weave { opacity: .70; mix-blend-mode: multiply; } / ---- 3a) GRID MOUNT-MOTION (stagger the cells in) -------------------------- / / The cells rise + fade in on mount with a capped per-index delay (--i set in JS to the day number). The animation only plays once the grid carries .cal-mounted (toggled on the next frame), so it replays cleanly on month change. / body.dusk .cal-grid.cal-mounted .cal-day { animation: calCellIn var(--mo-slow, 300ms) var(--ease-out, cubic-bezier(.2,.8,.2,1)) backwards; / cap the cascade at ~14 steps so a 31-day month never drags / animation-delay: calc(min(var(--i, 1), 14) 22ms); } @keyframes calCellIn { /* transform-only mount: NEVER gate cell VISIBILITY on the animation (with `backwards` fill + a per-cell delay, an opacity-0 `from` left the whole grid blank until the cascade finished / re-blank on every re-render — a "cream void"). Cells are always opacity 1; only a subtle rise/scale animates in. / from { transform: translateY(10px) scale(.985); } to { transform: none; } } / ---- 3b) TACTILE hover + select ------------------------------------------- / / Strengthen the existing hover/selected with a subtle lift + a copper hairline glow. The base border-color transition lives in platform.css; we add transform + a richer shadow on the Dusk ground. / body.dusk .cal-day:not(.past) { transition: border-color var(--mo-fast, 150ms) var(--ease-out), box-shadow var(--mo-fast, 150ms) var(--ease-out), transform var(--mo-fast, 150ms) var(--ease-out); } body.dusk .cal-day:not(.past):hover { transform: translateY(-2px); border-color: var(--d-copper); box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(204,146,72,.40); } body.dusk .cal-day:not(.past):active { transform: translateY(0); } body.dusk .cal-day.selected { box-shadow: inset 0 0 0 2px var(--d-copper), 0 0 0 1px rgba(230,174,69,.30), 0 8px 22px rgba(0,0,0,.40); } body.dusk .cal-day.today.selected .cal-weave { opacity: .34; } / ---- 3c) PANEL cross-fade on day-select ----------------------------------- / / #panel content fades up from a slight drop when re-rendered (select / month). .panel-fade is added on the next frame after innerHTML is replaced. / body.dusk #panel { transition: opacity var(--mo, 220ms) var(--ease-out), transform var(--mo, 220ms) var(--ease-out); } body.dusk #panel:not(.panel-fade) { opacity: 0; transform: translateY(8px); } body.dusk #panel.panel-fade { opacity: 1; transform: none; } / ---- 2) "MONTH AT A GLANCE" — the live idle panel ------------------------- / body.dusk .glance-card { background: radial-gradient(120% 90% at 100% 0%, rgba(200,133,10,.10), transparent 58%), linear-gradient(180deg, rgba(46,34,24,.66), rgba(41,30,20,.78)); border: 1px solid var(--d-line); } body.dusk .glance-head h3 { color: var(--d-cream); margin: 0 0 4px; } body.dusk .glance-sub { margin: 0 0 14px; font-size: .88rem; } body.dusk .glance-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } body.dusk .glance-stat { background: var(--d-panel); border: 1px solid var(--d-line); border-radius: 12px; / --d-panel == #241A12 in Dusk; auto-remaps in day / padding: 12px 10px; text-align: center; } body.dusk .glance-stat .gs-val { font-family: 'Marcellus', serif; font-size: 1.6rem; line-height: 1; color: var(--d-copper-press); font-variant-numeric: tabular-nums; } body.dusk .glance-stat .gs-lbl { font-size: .72rem; color: var(--d-ink); margin-top: 6px; text-transform: uppercase; letter-spacing: .03em; } / FIX C2 — the honest "caravan-nights" RATE line under the tiles (the window sum, named for what it is, never mislabelled as a count of caravans). / body.dusk .glance-rate { margin: -4px 0 14px; font-size: .86rem; line-height: 1.5; color: var(--d-ink); } body.dusk .glance-rate strong { color: var(--d-copper-lit); } / the "fill the gap" nudge — LOSSES framed in amber/saffron, never red / body.dusk .glance-nudge { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; background: linear-gradient(180deg, rgba(200,133,10,.10), rgba(200,133,10,.05)); border: 1px solid rgba(200,133,10,.34); border-radius: 12px; padding: 12px 14px; } body.dusk .glance-nudge p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--d-cream); } body.dusk .glance-nudge strong { color: var(--d-star-lit); } body.dusk .glance-nudge .gn-ico { flex: none; line-height: 0; margin-top: 2px; } body.dusk .glance-nudge .gn-ico svg { width: 18px; height: 18px; stroke: var(--d-saff); } body.dusk .glance-nudge.glance-good { background: rgba(62,111,116,.12); border-color: rgba(95,168,176,.34); } body.dusk .glance-nudge.glance-good .gn-ico svg { stroke: #7FC4CB; } body.dusk .glance-nudge.glance-good strong { color: #9FCFD4; } body.dusk .glance-foot { color: var(--d-ink); } / Paper-Desert glance panel / html[data-theme="day"] body.dusk .glance-card { background: radial-gradient(120% 90% at 100% 0%, rgba(184,115,51,.08), transparent 58%), var(--d-panel); } html[data-theme="day"] body.dusk .glance-stat { background: var(--d-bg2); } / ---- reduced-motion: still everything (content simply appears) ------------- / @media (prefers-reduced-motion: reduce) { body.dusk .cal-grid.cal-mounted .cal-day { animation: none; } body.dusk .cal-day:not(.past):hover { transform: none; } body.dusk #panel { transition: none; } body.dusk #panel:not(.panel-fade) { opacity: 1; transform: none; } } / ---- forced-colors: drop the decorative weave + glows; keep structure ------ */ @media (forced-colors: active) { body.dusk .cal-weave, body.dusk .week-row .week-weave { display: none; } body.dusk .week-row .wd { margin-inline-start: 0; } body.dusk .cal-day .cap { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } body.dusk .glance-card, body.dusk .glance-stat, body.dusk .glance-nudge { border: 1px solid; background: none; } body.dusk .cal-day:not(.past):hover { box-shadow: none; } }