/* Optional context skins. Add ONE of these classes to : → warm storefront look (cream bg, teal brand) → dark glass topbar, uppercase titles Load last so it can override component defaults. */ /* ── Customer / storefront ── */ .site-customer { background: var(--cream); } .site-customer .brand-mark { background: var(--teal); } .site-customer .topbar { background: rgba(255, 255, 255, 0.96); } /* ── Admin ── */ .site-admin { background: #eef1f6; } .site-admin .topbar { background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0; } .site-admin .brand, .site-admin .nav a { color: #e5e7eb; } .site-admin .brand-mark { color: #111827; background: #fff; } .site-admin .brand-copy small { color: #94a3b8; } .site-admin .nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.09); } .site-admin .nav a.is-current { color: #111827; background: #fff; } /* Admin titlebars render as compact uppercase labels */ .site-admin .admin-titlebar h1 { font-size: 1.05rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.15; margin: 0; }