/* mansion.css — HUSTLER'S MANSION, the colorway. * * Not "inspired by": this IS the palette of the app Keyno runs his * business on, lifted from the live admin. The one structural difference * from Original is that the gold is FIXED — Original wears the tenant's * brand; the Mansion wears the Mansion's. Deep gold carries the accent, * pale sand carries the quiet half of every chart, money is HM green, * attention is HM amber. Depth stays near zero (cream carries shadow * badly), the press is the Original's sink, and the wordmark is the * serif in plain black — exactly the header he showed. */ :root[data-skin="mansion"] { --bg: #F1EDE4; --face-a: #FFFFFF; --face-b: #FDFCF8; --surface: #FFFFFF; --surface-2: #F7F4EC; --text: #1A1A1A; --muted: #6B675E; --faint: #6E6A5C; /* 5.41 on white; #8A8578 failed at 3.68 */ --brand: #8B6212; --brand-weak: #F0E7C7; --on-brand: #FFFFFF; --green: #157A40; --green-weak: #E2F1E9; --amber: #8A5C00; --amber-weak: #F4EBDA; --red: #A94438; --red-weak: #F9E9E6; --border: #E7E0D2; --border-2: #D9D2C0; --line-soft: rgba(90,72,30,.10); --r-lg: 15px; --r-md: 13px; --shadow-rgb: 90,72,30; color-scheme: light; } :root[data-skin="mansion"] body { background: var(--bg); } :root[data-skin="mansion"] .pv, :root[data-skin="mansion"] .saka-w, :root[data-skin="mansion"] .set-card, :root[data-skin="mansion"] .pcard, :root[data-skin="mansion"] .hero, :root[data-skin="mansion"] .pvl, :root[data-skin="mansion"] .tm-rc { position: relative; isolation: isolate; border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(174deg, var(--face-a), var(--face-b)); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .05); transition: box-shadow 220ms ease, transform 120ms ease; } :root[data-skin="mansion"] .saka-w { border-radius: var(--saka-radius, var(--r-md)); } :root[data-skin="mansion"] .saka-w.act { background: linear-gradient(174deg, #F7F1DE, #F0E7C7); border-color: #E2D6B4; } :root[data-skin="mansion"] .pv:active, :root[data-skin="mansion"] .saka-w:active { transform: translateY(2px) scale(1.004, .988); box-shadow: inset 0 2px 6px rgba(var(--shadow-rgb), .15), inset 0 0 0 1px color-mix(in srgb, var(--border-2) 70%, transparent); } :root[data-skin="mansion"] .btn:active, :root[data-skin="mansion"] .mini:active { transform: translateY(2px) scale(1.004, .988); box-shadow: inset 0 2px 6px rgba(var(--shadow-rgb), .15); } :root[data-skin="mansion"] .tb-name { font-family: var(--font-display); color: #141210; } :root[data-skin="mansion"] .tl, :root[data-skin="mansion"] .floor { background: color-mix(in srgb, var(--face-a) 42%, var(--bg)); border: 1px solid var(--border); border-radius: var(--r-lg); } :root[data-skin="mansion"] .tlapt { background: #fff; border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent), 0 1px 2px rgba(var(--shadow-rgb), .10); } /* :not(.sel) is load-bearing: this rule outguns `.wkd.sel`'s brand gradient on specificity, so without it the PICKED/TODAY cell painted white while its number stayed --on-brand white — the current day was invisible. */ :root[data-skin="mansion"] .wkd:not(.sel) { background: #fff; border-color: var(--border-2); } :root[data-skin="mansion"] .mini.gold { background: var(--brand); border-color: var(--brand); color: #fff; } /* the Mansion arrives the way the Original does — paper settling */ :root[data-skin="mansion"] body.skinfx .saka-w, :root[data-skin="mansion"] body.skinfx .pv { animation: sfxSettle 380ms var(--ease-out-smooth, ease-out) backwards; } /* ── THE ASK RAIL — HM's floating question, everywhere ───────────────── Base shape is the Mansion's: a white pill riding sticky over the analytics, gold ASK. Every other skin restyles it through its own tokens below / in its own file. */ .ask-bar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: min(92vw, 400px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 6px 5px 15px; box-shadow: 0 8px 28px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08); transition: transform .24s cubic-bezier(.16,1,.3,1), opacity .18s; } .ask-bar.hidden { transform: translateX(-50%) translateY(74px); opacity: 0; pointer-events: none; } .ask-bar .ar-spark { color: var(--brand); flex: none; font-size: 15px; } .ask-bar input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 16px var(--font-ui); color: var(--text); } .ask-bar input::placeholder { color: var(--faint); } .ask-bar button { border: 0; background: none; color: var(--brand); font: 800 12.5px var(--font-ui); letter-spacing: .08em; cursor: pointer; padding: 9px 12px; min-height: 40px; } :root[data-skin="blackboard"] .ask-bar, :root[data-skin="schoolgreen"] .ask-bar { background: rgba(10,10,12,.72); border: 1.5px solid rgba(var(--ck-ghost, 244,242,236), .6); box-shadow: none; backdrop-filter: none; } :root[data-skin="kraft"] .ask-bar, :root[data-skin="whitebox"] .ask-bar { background: var(--cb-face, var(--surface)); border: 0; box-shadow: 0 3px 0 var(--cb-edge, #8E6538), 0 5px 6px rgba(50,32,14,.3); border-radius: 8px; } /* The calendar and the menu carry the house card, not the quiet panel. */ :root[data-skin="mansion"] .tl, :root[data-skin="mansion"] .sv-card { position: relative; isolation: isolate; border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(174deg, var(--face-a), var(--face-b)); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .06), 0 10px 24px rgba(var(--shadow-rgb), .07); } /* fields: warm paper recess */ :root[data-skin="mansion"] .chip-input input { background: color-mix(in srgb, var(--surface-2) 70%, transparent); box-shadow: inset 0 1.5px 3px rgba(var(--shadow-rgb), .12); } :root[data-skin="mansion"] .chip-input input:focus { background: #fff; box-shadow: inset 0 1.5px 3px rgba(var(--shadow-rgb), .08); } :root[data-skin="mansion"] .tlapt { background: color-mix(in srgb, var(--brand) 12%, #fff); border-left: 3px solid var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 24%, transparent), 0 1px 3px rgba(var(--shadow-rgb), .12); }