/** * Global CSS * * --wl-* variables are set as defaults here so SSR / no-JS renders get the * default brand colours. The WhitelabelContext overrides these at runtime on * style directly. Components should always prefer var(--wl-*) over * hardcoded hex values. */ /* ─── Keyframes ─────────────────────────────────────────────────────────────── */ @keyframes fadeInUpSm { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes popInSm { from { opacity: 0; transform: scale(0.7) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ─── Whitelabel CSS Custom Properties (defaults = stan-store) ─────────────── */ :root { --wl-primary: #6829F8; --wl-primary-light: #8B55FA; --wl-primary-dark: #501DCA; --wl-secondary: #B83E3E; --wl-tertiary: #3D1A8E; --wl-bg: #000000; --wl-surface: #111111; --wl-text-primary: #FFFFFF; --wl-text-secondary: #A0A0A0; --wl-success: #22C55E; --wl-error: #EF4444; --wl-warning: #F59E0B; } /* App shell — stable SSR/hydration; brand bg comes from --wl-* injected on */ .app-shell { background-color: var(--wl-bg); min-height: 100dvh; } .app-shell--bottom-nav-pad { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); } /* ─── Markdown Content ──────────────────────────────────────────────────────── */ .stanshop-markdown-content h1 { font-size: 24px; margin-bottom: 16px; margin-top: 24px; } .stanshop-markdown-content h2 { font-size: 20px; margin-bottom: 12px; margin-top: 20px; } .stanshop-markdown-content h3 { font-size: 18px; margin-bottom: 8px; margin-top: 16px; } .stanshop-markdown-content p { margin-bottom: 16px; line-height: 1.6; } .stanshop-markdown-content ul, .stanshop-markdown-content ol { margin-bottom: 16px; padding-left: 20px; } .stanshop-markdown-content li { margin-bottom: 8px; } .stanshop-markdown-content a { color: var(--wl-primary); text-decoration: underline; } .stanshop-markdown-content a:hover { color: var(--wl-primary-dark); } /* ─── Snackbar ──────────────────────────────────────────────────────────────── */ .snackbar-root { z-index: 99999999 !important; } /* ─── MaxSavings responsive helpers (avoid reload flash/jitter) ─────────────── */ .msRoot { margin-right: 0px; } .msDesktopOnly { display: none; } .msMobileOnly { display: block; } @media (min-width: 600px) { .msDesktopOnly { display: block; } .msMobileOnly { display: none; } .msRoot.msBuyOpen { margin-right: 30vw; } } /* Empty by default (desktop / FedCM) so it never affects layout. */ .stanOneTapParent { display: contents; } @media (max-width: 599px) { /* Primary: Google renders the mobile One Tap card into this container via `prompt_parent_id`, so we position it above the fixed BottomNav directly — no dependency on Google's internal iframe DOM. */ .stanOneTapParent { display: flex; justify-content: center; position: fixed; left: 50%; transform: translateX(-50%); top: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: 100vw; z-index: 2147483000; } /* Fallback: if a browser ignores `prompt_parent_id` and still floats the card at bottom:0, nudge it up off the BottomNav. */ body > div:has(> iframe[src*="accounts.google.com/gsi"]), body > div:has(> div > iframe[src*="accounts.google.com/gsi"]), body > div:has(iframe[src*="accounts.google.com/gsi/iframe"]), #credential_picker_container { position: fixed !important; top: auto !important; bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; z-index: 2147483000 !important; } } @media (min-width: 768px) and (max-width: 1199px) { .msRoot.msBuyOpen { margin-right: 40vw; } }