/* Boundwake contrast polish — HARD pass v3 (Gary Nov 5 2026) Drop-in under assets/ui_motion/. Load AFTER style.css. Pure override: - Desktop column shells → hard plum night #221a34 → #140e1f (NOT soft dusk). - Opaque parchment plates on hub / Life / side cards. - Life Goals / Achievements: colored nested tiles (not cream-on-cream). Uses Boundwake tab/realm tint tokens (life-t, gold, mist, moss, work-t). Mobile + desktop. Coder wires. Never soft. */ /* ========================================================= Desktop ≥1024px — hard plum columns + opaque parchment plates ========================================================= */ @media (min-width: 1024px) { /* Column shells: HARD plum night (Gary: "too soft" / wants MORE contrast) */ .play-hub, .play-main, .play-side { background: linear-gradient(180deg, #221a34, #140e1f); border: 2px solid #e0b14a44; box-shadow: 0 12px 36px #0008, 0 0 0 1px #0003; } /* ---- Hub identity card: opaque parchment plate ---- */ .play-hub > .card.hub { background: linear-gradient(180deg, var(--parch3, #FBF4E4), var(--parch, #F7EBD2)); border: var(--bw, 2px) solid color-mix(in srgb, var(--accent, var(--gold, #E0B14A)) 55%, #8a6a3a); box-shadow: var(--shadow-card, 0 1px 0 #fff8 inset, 0 8px 22px #00000055, 0 0 0 1px #0002), 0 0 0 3px color-mix(in srgb, var(--accent, var(--gold, #E0B14A)) 22%, transparent); } .play-hub > .card.hub .card-body { background: linear-gradient(180deg, var(--parch3, #FBF4E4), var(--parch, #F7EBD2)); } /* ---- Life panel: opaque parchment shell; body keeps life-t mix ---- */ .play-body > .card.panel-life { background: linear-gradient(180deg, var(--parch3, #FBF4E4), var(--parch, #F7EBD2)); border: var(--bw, 2px) solid color-mix(in srgb, var(--accent, var(--life, #3F7A3A)) 55%, #8a6a3a); box-shadow: var(--shadow-card, 0 1px 0 #fff8 inset, 0 8px 22px #00000055, 0 0 0 1px #0002), 0 0 0 3px color-mix(in srgb, var(--accent, var(--life, #3F7A3A)) 22%, transparent); } .play-body > .card.panel-life .card-body { background: color-mix(in srgb, var(--life-t, #EEF5E6) 82%, var(--parch, #F7EBD2)); } /* ---- Side / realm card: opaque parchment plate ---- */ .play-side.card, .card.panel-side { background: linear-gradient(180deg, var(--parch3, #FBF4E4), var(--parch, #F7EBD2)); border: var(--bw, 2px) solid color-mix(in srgb, var(--accent, var(--realm, #1F7A72)) 55%, #8a6a3a); box-shadow: var(--shadow-card, 0 1px 0 #fff8 inset, 0 8px 22px #00000055, 0 0 0 1px #0002), 0 0 0 3px color-mix(in srgb, var(--accent, var(--realm, #1F7A72)) 22%, transparent); } .panel-side .card-body, .play-side .card-body { background: color-mix(in srgb, var(--realm-t, #E2F2F0) 78%, var(--parch, #F7EBD2)); } /* Even-row wells: keep subtle on hub/life/side (not the Legacy nest) */ .play-hub .row:nth-child(even), .play-body > .card.panel-life .row:nth-child(even), .play-side .row:nth-child(even) { background: color-mix(in srgb, var(--parch2, #EBD7B0) 42%, #fff); } } /* ========================================================= Life Goals / Achievements — colored nested tiles (Gary screenshot: cream panel + cream goal cards → edges gone. "maybe use more colors then fuck ass cream?" — hue, not darker beige.) Mobile + desktop. Overrides after style.css. ========================================================= */ /* Panel shell stays parchment reading surface; body becomes a tinted WELL so nested tiles can lift off it with real hue. */ .card.panel-legacy, .panel-legacy { background: linear-gradient(180deg, var(--parch3, #FBF4E4), var(--parch, #F7EBD2)); border: var(--bw, 2px) solid color-mix(in srgb, var(--gold, #E0B14A) 55%, #8a6a3a); } .card.panel-legacy .card-body, .panel-legacy .card-body, .panel-legacy .legacy-acc-body { /* Warmer moss/life well — not another cream plate */ background: linear-gradient( 180deg, color-mix(in srgb, var(--life-t, #EEF5E6) 55%, var(--parch2, #EBD7B0)), color-mix(in srgb, var(--parch2, #EBD7B0) 70%, var(--moss, #2F7A48) 18%) ); } /* Nested goal / achievement tiles — distinct plates with hue */ .panel-legacy .row.legacy-row, .panel-legacy .legacy-row, .row.legacy-row { background: color-mix(in srgb, var(--life-t, #EEF5E6) 72%, #fff); border: 2px solid color-mix(in srgb, var(--life, #3F7A3A) 45%, #8a6a3a); border-left: 4px solid var(--life, #3F7A3A); border-radius: 12px; box-shadow: inset 0 1px 0 #fff8, 0 2px 8px #00000028, 0 0 0 1px color-mix(in srgb, var(--moss, #2F7A48) 22%, transparent); margin-bottom: 8px; padding: 10px 10px; } /* Kill cream even-row wash that collapsed edges */ .panel-legacy .row.legacy-row:nth-child(even), .panel-legacy .legacy-row:nth-child(even), .row.legacy-row:nth-child(even) { background: color-mix(in srgb, var(--life-t, #EEF5E6) 62%, var(--adv-t, #E4F2EC)); } /* In-progress — moss / life plate */ .panel-legacy .legacy-row.legacy-progress, .row.legacy-row.legacy-progress { background: color-mix(in srgb, var(--life-t, #EEF5E6) 78%, var(--moss, #2F7A48) 8%); border-color: color-mix(in srgb, var(--moss, #2F7A48) 55%, #8a6a3a); border-left-color: var(--moss, #2F7A48); } /* Ready to claim — gold plate (loud edge) */ .panel-legacy .legacy-row.legacy-ready, .row.legacy-row.legacy-ready, .panel-legacy .legacy-row.legacy-ready:nth-child(even), .row.legacy-row.legacy-ready:nth-child(even) { background: linear-gradient( 180deg, color-mix(in srgb, var(--bel-t, #F6EED4) 70%, #fff), color-mix(in srgb, var(--gold, #E0B14A) 22%, var(--parch3, #FBF4E4)) ); border: 2px solid color-mix(in srgb, var(--gold2, #B07D24) 70%, #8a6a3a); border-left: 4px solid var(--gold, #E0B14A); box-shadow: inset 0 1px 0 #fff9, 0 3px 10px #00000030, 0 0 0 1px color-mix(in srgb, var(--gold, #E0B14A) 35%, transparent); } /* Claimed — mist / muted cool plate (reads done, still not cream) */ .panel-legacy .legacy-row.legacy-claimed, .row.legacy-row.legacy-claimed, .panel-legacy .legacy-row.legacy-claimed:nth-child(even), .row.legacy-row.legacy-claimed:nth-child(even) { background: color-mix(in srgb, var(--sk-t, #E8EEF8) 65%, var(--mist, #5A82A8) 12%); border: 2px solid color-mix(in srgb, var(--mist, #5A82A8) 45%, #8a6a3a); border-left: 4px solid var(--mist, #5A82A8); box-shadow: inset 0 1px 0 #fff6, 0 1px 4px #00000018; opacity: 1; /* keep readable; style.css uses .78 — we restore contrast */ } /* Achievements section: alternate cool realm well so goals ≠ achs */ .panel-legacy.legacy-achs .card-body, .panel-legacy[data-kind="ach"] .card-body, .panel-legacy.legacy-achs .legacy-acc-body, .panel-legacy[data-kind="ach"] .legacy-acc-body { background: linear-gradient( 180deg, color-mix(in srgb, var(--realm-t, #E2F2F0) 60%, var(--parch2, #EBD7B0)), color-mix(in srgb, var(--codex-t, #E8E8F6) 55%, var(--parch2, #EBD7B0)) ); } /* Progress bar track: darker than tile fill so empty bar is visible */ .panel-legacy .legacy-bar, .legacy-row .legacy-bar, .legacy-bar { background: color-mix(in srgb, var(--parch2, #EBD7B0) 35%, #3a2a18); border: 1px solid color-mix(in srgb, var(--gold2, #B07D24) 55%, #5a4020); box-shadow: inset 0 1px 3px #00000040; } .panel-legacy .legacy-bar > span, .legacy-row .legacy-bar > span, .legacy-bar > span { background: linear-gradient(90deg, var(--gold, #E0B14A), var(--moss, #2F7A48)); } /* Ready bar track leans gold so fill still pops */ .panel-legacy .legacy-row.legacy-ready .legacy-bar, .row.legacy-row.legacy-ready .legacy-bar { background: color-mix(in srgb, var(--gold2, #B07D24) 40%, #2a1c0c); border-color: color-mix(in srgb, var(--gold2, #B07D24) 70%, #5a4020); } /* Desktop Legacy panel plate against hard plum columns */ @media (min-width: 1024px) { body[data-tab="legacy"] .play-body > .card.panel-legacy, .play-body > .card.panel-legacy, body[data-tab="legacy"] .play-body > details.legacy-acc.panel-legacy, .play-body > details.legacy-acc.panel-legacy { background: linear-gradient(180deg, var(--parch3, #FBF4E4), var(--parch, #F7EBD2)); border: var(--bw, 2px) solid color-mix(in srgb, var(--gold, #E0B14A) 55%, #8a6a3a); box-shadow: var(--shadow-card, 0 1px 0 #fff8 inset, 0 8px 22px #00000055, 0 0 0 1px #0002), 0 0 0 3px color-mix(in srgb, var(--gold, #E0B14A) 22%, transparent); } }