/* * ShopMetro Pre-Order — front-end styles. * Everything is scoped under .spo-app so this never leaks into (or is * fought by) the active theme's own styles. */ .spo-app { --spo-green: #17603b; --spo-green-2: #0d4b2d; --spo-green-bg: #eef4ee; --spo-green-border: #cfe3d2; --spo-gold: #d4ad2c; --spo-cream: #f7f6ef; --spo-white: #ffffff; --spo-border: #e4e6dc; --spo-border-2: #e4e6dc; --spo-input-border: #d3d8c9; --spo-text: #26342c; --spo-text-muted: #778078; --spo-text-muted-2: #97a094; --spo-text-dark-muted: #46524a; --spo-notice-bg: #fdf6e3; --spo-notice-border: #ecd9a0; --spo-notice-text: #7a5c00; --spo-red: #b95d57; --spo-red-dark: #713330; --spo-red-light: #f6dcda; --spo-radius-lg: 12px; --spo-radius-md: 8px; --spo-radius-sm: 5px; font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--spo-cream); color: var(--spo-text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .spo-app *, .spo-app *::before, .spo-app *::after { box-sizing: border-box; } /* * Safety net: several elements here (the modals especially) rely on the * plain `hidden` attribute to disappear, but any author rule that sets * `display` on the same element at equal specificity (e.g. `.spo-modal { * display: flex; }`) wins over the browser default `[hidden] { display: * none; }` regardless of source order, since author styles always beat * user-agent styles. Most themes happen to carry their own `[hidden]` * reset, which is why this doesn't normally show up — but the plugin * shouldn't depend on that. This makes `hidden` reliably win on its own. */ .spo-app [hidden] { display: none !important; } .spo-app h1, .spo-app h2, .spo-app h3 { font-family: 'Fraunces', Georgia, serif; margin: 0; color: var(--spo-text); } .spo-app p { margin: 0; } .spo-app button { font-family: inherit; cursor: pointer; } .spo-app a { color: inherit; } .spo-app ul { margin: 0; padding: 0; list-style: none; } /* * .spo-app.spo-app (the class written twice) is a specificity bump, not a * typo: some host themes ship a broad reset like * `input[type=email], input[type=text], select, textarea { padding: ...; * height: ...; border: ...; }` which has the same specificity as a plain * `.spo-app input` rule (one class + one element either way), so the * winner becomes whichever stylesheet happens to print later in — * on at least one live site that was the theme, silently clobbering our * padding/height/border/background here. Repeating the class costs * nothing and reliably outranks a single-class or attribute-selector * theme rule regardless of load order, without reaching for !important. */ .spo-app.spo-app input, .spo-app.spo-app textarea, .spo-app.spo-app select { font-family: inherit; font-size: 14px; line-height: 1.4; color: var(--spo-text); } /* * Selects specifically: browsers (Chrome on Windows especially) can clip a *