/* RylCart web — app-level overrides on top of the prototype tokens. The prototype painted dark because the UI sat inside a device mockup. The real responsive storefront fills the viewport itself, so the page background is the app surface. */ html, body { background: var(--cream); min-height: 100%; } #root { min-height: 100vh; } /* Kobweb/Silk can inject a surface wrapper; keep it transparent + full height */ #root > div { min-height: 100vh; } a { color: inherit; text-decoration: none; } /* Pressed feedback for buttons/steppers/chips (the prototype tracked this in JS) */ .am-press { transition: transform .12s ease, box-shadow .12s ease, background .15s; } .am-press:active { transform: translateY(2px) !important; } .am-press-btn:active { box-shadow: none !important; } /* Inputs inherit the app font and remove default chrome */ input { font-family: var(--font); } input::placeholder { color: var(--gray-400); } /* TextInput focus ring (the prototype tracked focus state in JS) */ .am-input { transition: border-color .15s; } .am-input:focus-within { border-color: var(--ink); } .am-input-error, .am-input-error:focus-within { border-color: var(--error); } /* Desktop hover affordances (the prototype tracked hover in JS) */ .am-card-d { transition: transform .2s, box-shadow .2s, border-color .2s; box-shadow: var(--e-1); } .am-card-d:hover { box-shadow: var(--e-3); transform: translateY(-2px); } .am-card-d .am-fav { opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; } .am-card-d:hover .am-fav { opacity: 1; transform: translateY(0); } .am-tile-d { transition: transform .15s, box-shadow .15s; box-shadow: var(--e-1); } .am-tile-d:hover { box-shadow: var(--e-2); transform: translateY(-2px); } .am-sidecat:hover { background: var(--lime-50); }