/* ============================================================================ AISTARLETS — design system (Phase: prototype re-skin) Single source of truth for the app shell + shared components. Faithful to the boss's design-canvas prototype: Manrope, #0b0910 base, Ocean accent gradient (#8fb2ff -> #c58cff), glass header + bottom tab bar, centered 480px app-shell on desktop. Dark-only for the MVP. ============================================================================ */ :root { /* type */ --ast-font: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* surfaces */ --ast-bg: #0b0910; --ast-bg-deep: #050409; /* desktop surround, behind the shell */ --ast-surface: #14101c; /* elevated cards / sheets */ --ast-surface-soft: rgba(255, 255, 255, .04); --ast-surface-hover: rgba(255, 255, 255, .07); /* text */ --ast-text: #f4f1f6; --ast-text-2: #cfc6d6; --ast-muted: #8a8196; --ast-faint: #6b6376; /* accent (Ocean) — swap these three to re-theme the whole app */ --ast-accent-a: #8fb2ff; --ast-accent-b: #c58cff; --ast-accent-glow: #4b3f8f; --ast-accent: linear-gradient(90deg, var(--ast-accent-a), var(--ast-accent-b)); --ast-accent-140: linear-gradient(140deg, var(--ast-accent-a), var(--ast-accent-b)); /* lines */ --ast-line: rgba(255, 255, 255, .08); --ast-line-soft: rgba(255, 255, 255, .06); --ast-line-strong: rgba(255, 255, 255, .12); /* status */ --ast-online: #4ade80; --ast-danger: #ff6b7a; /* geometry */ --ast-shell: 480px; --ast-r-card: 20px; --ast-r-lg: 24px; --ast-r-md: 14px; --ast-tabbar-h: 64px; /* glass */ --ast-glass-header: rgba(11, 9, 16, .72); --ast-glass-nav: rgba(13, 11, 18, .86); } /* Force dark; neutralise the legacy light theme + palette switcher. */ html[data-theme], html { background: var(--ast-bg); color-scheme: dark; } * { box-sizing: border-box; } ::-webkit-scrollbar { width: 0; height: 0; display: none; } * { scrollbar-width: none; } ::selection { background: color-mix(in oklab, var(--ast-accent-a) 45%, transparent); color: #fff; } /* --------------------------------------------------------------------------- App shell — the is the 480px column (like the prototype). Fixed/sticky chrome aligns to this column automatically. --------------------------------------------------------------------------- */ body.ast-body { margin: 0 auto; max-width: var(--ast-shell); min-height: 100vh; position: relative; padding: 0 0 calc(var(--ast-tabbar-h) + 18px + env(safe-area-inset-bottom, 0px)); font-family: var(--ast-font); font-size: 15px; color: var(--ast-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: radial-gradient(120% 60% at 50% -8%, color-mix(in oklab, var(--ast-accent-glow) 26%, var(--ast-bg)) 0%, var(--ast-bg) 46%), var(--ast-bg); overflow-x: hidden; } body.ast-body.ast-no-tabbar { padding-bottom: env(safe-area-inset-bottom, 0px); } @media (min-width: 481px) { html { background: var(--ast-bg-deep); } body.ast-body { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 90px -24px rgba(0, 0, 0, .85); } } a { color: inherit; } img { max-width: 100%; } /* --------------------------------------------------------------------------- Header — sticky glass, logo (left) + coins + search (right) Keeps id="topNavbar" so the existing scroll / search-toggle JS still binds. --------------------------------------------------------------------------- */ .ast-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--ast-glass-header); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--ast-line-soft); transition: background .2s ease, border-color .2s ease; } .ast-header.scrolled { background: rgba(11, 9, 16, .88); } .ast-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; } .ast-logo-img { display: block; height: 34px; width: auto; } .ast-header-actions { display: flex; align-items: center; gap: 8px; flex: none; } /* coins pill — monetization awareness on every page */ .ast-wallet { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 13px; border: 1px solid var(--ast-line-strong); border-radius: 100px; background: var(--ast-surface-soft); color: var(--ast-text); font-family: var(--ast-font); font-weight: 800; font-size: 14px; text-decoration: none; cursor: pointer; transition: transform .12s ease, background .2s ease; } .ast-wallet:active { transform: scale(.94); } .ast-wallet-coin { width: 18px; height: 18px; display: block; } .ast-wallet .wallet-balance { min-width: 8px; } /* round icon buttons in the header */ .ast-iconbtn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--ast-line-strong); border-radius: 12px; background: var(--ast-surface-soft); color: var(--ast-text-2); cursor: pointer; transition: transform .12s ease, background .2s ease; } .ast-iconbtn:active { transform: scale(.9); } .ast-iconbtn svg { width: 18px; height: 18px; } /* expanding search row (revealed by #searchToggle -> .search-open) */ .ast-search { position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 14px; background: var(--ast-surface); border: 1px solid var(--ast-line-strong); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .ast-header.search-open .ast-search { opacity: 1; transform: none; pointer-events: auto; } .ast-search-icon { width: 18px; height: 18px; flex: none; color: var(--ast-muted); } .ast-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ast-text); font-family: var(--ast-font); font-size: 15px; } .ast-search input::placeholder { color: var(--ast-muted); } /* --------------------------------------------------------------------------- Bottom tab bar — 4 tabs, fixed glass, aligned to the shell column --------------------------------------------------------------------------- */ .ast-tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--ast-shell); z-index: 50; display: grid; grid-template-columns: repeat(4, 1fr); padding: 9px 8px calc(9px + env(safe-area-inset-bottom, 0px)); background: var(--ast-glass-nav); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid var(--ast-line); } .ast-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: none; cursor: pointer; text-decoration: none; color: var(--ast-faint); transition: transform .12s ease, color .18s ease; } .ast-tab-badge { position: absolute; top: -2px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 5px; display: grid; place-items: center; border-radius: 100px; background: var(--ast-accent); color: var(--ast-bg); font-weight: 800; font-size: 10px; line-height: 1; } .ast-tab:active { transform: scale(.9); } .ast-tab svg { width: 23px; height: 23px; } .ast-tab span { font-weight: 700; font-size: 10px; letter-spacing: .01em; } .ast-tab.is-active { color: var(--ast-accent-a); } .ast-no-tabbar .ast-tabbar { display: none; } .ast-no-header .ast-header { display: none; } /* --------------------------------------------------------------------------- Content wrapper + desktop left rail Mobile: rail hidden, body is the 480px column (above). Desktop (>=1024px): rail shown, mobile header/tabbar hidden, content widens. --------------------------------------------------------------------------- */ /* Always at least a full screen tall, so the footer never shows on first paint and is only reachable by scrolling. `dvh` tracks the collapsing mobile URL bar; `vh` is the fallback for browsers without dynamic viewport units. */ .ast-main { width: 100%; min-height: 100vh; min-height: 100dvh; } .ast-rail { display: none; } .ast-rail-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 6px 8px; margin-bottom: 8px; } .ast-rail-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ast-line-strong); background: var(--ast-surface-soft); margin-bottom: 12px; } .ast-rail-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ast-text); font-family: var(--ast-font); font-size: 14px; } .ast-rail-search input::placeholder { color: var(--ast-muted); } .ast-rail-nav { display: flex; flex-direction: column; gap: 3px; } .ast-rail-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; border: 0; background: none; text-align: left; text-decoration: none; color: var(--ast-text-2); font-family: var(--ast-font); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: background .16s ease, color .16s ease; } .ast-rail-link svg { width: 22px; height: 22px; flex: none; } .ast-rail-link:hover { background: var(--ast-surface-soft); color: var(--ast-text); } .ast-rail-link.is-active { color: var(--ast-accent-a); background: color-mix(in oklab, var(--ast-accent-a) 12%, transparent); } .ast-rail-link--sm { font-weight: 600; font-size: 13.5px; padding: 9px 12px; color: var(--ast-muted); } .ast-rail-link--sm svg { width: 19px; height: 19px; } .ast-rail-link--muted { color: var(--ast-faint); } .ast-rail-badge { margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px; display: grid; place-items: center; border-radius: 100px; background: var(--ast-accent); color: var(--ast-bg); font-weight: 800; font-size: 10.5px; } .ast-rail-sep { height: 1px; background: var(--ast-line); margin: 12px 6px; } .ast-rail-heading { padding: 4px 12px 4px; font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ast-faint); } .ast-rail-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--ast-line); } .ast-wallet--rail { width: 100%; height: 44px; justify-content: flex-start; border-radius: 12px; margin-bottom: 4px; } .ast-wallet--rail .ast-wallet-label { color: var(--ast-muted); font-weight: 600; } @media (min-width: 1024px) { .ast-header, .ast-tabbar { display: none !important; } .ast-rail { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; width: 244px; z-index: 45; padding: 18px 14px; overflow-y: auto; background: rgba(9, 8, 13, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-right: 1px solid var(--ast-line); } body.ast-body { max-width: none; margin: 0; padding: 0 0 0 244px; box-shadow: none; } body.ast-body.ast-no-rail { padding-left: 0; } .ast-no-rail .ast-rail { display: none; } .ast-main { max-width: 1160px; margin: 0 auto; padding: 10px 32px 72px; } } /* --------------------------------------------------------------------------- Global footer — legal links, company details, accepted cards Sits under the content on every page; the messenger chat opts out with the `ast-no-footer` body class. --------------------------------------------------------------------------- */ .ast-footer { margin-top: 40px; padding: 34px 18px calc(30px + env(safe-area-inset-bottom, 0px)); text-align: center; background: rgba(0, 0, 0, .28); border-top: 1px solid var(--ast-line-soft); } .ast-footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-bottom: 18px; } .ast-footer-links a { color: var(--ast-text); text-decoration: none; font-weight: 700; font-size: 14px; transition: color .18s ease; } .ast-footer-links a:hover { color: var(--ast-accent-a); } .ast-footer-sep { color: var(--ast-faint); font-size: 13px; } .ast-footer-company, .ast-footer-copy { margin: 0; color: var(--ast-muted); font-size: 12.5px; line-height: 1.6; } .ast-footer-company { display: block; } .ast-footer-pin { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; color: var(--ast-faint); } .ast-footer-legal { margin: 12px 0 0; font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #5f5769; } .ast-footer-pay { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; } .ast-pay { display: inline-flex; align-items: center; opacity: .9; } .ast-pay--visa { font-weight: 800; font-size: 22px; font-style: italic; letter-spacing: .01em; color: #fff; } .ast-pay--mc svg { width: 44px; height: 28px; } .ast-no-footer .ast-footer { display: none; } @media (min-width: 1024px) { .ast-footer { padding-left: 32px; padding-right: 32px; } } /* --------------------------------------------------------------------------- 18+ age gate — full-page interstitial for organic visitors The backdrop blurs and desaturates whatever is behind it, so the catalog stays recognisable but unreadable until the visitor confirms their age. --------------------------------------------------------------------------- */ html.age-gate-open, html.age-gate-open body { overflow: hidden; } .age-gate { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px)); background: rgba(5, 4, 9, .72); -webkit-backdrop-filter: blur(14px) grayscale(1) brightness(.55); backdrop-filter: blur(14px) grayscale(1) brightness(.55); } .age-gate-card { width: 100%; max-width: 440px; padding: 34px 28px 26px; text-align: center; border-radius: var(--ast-r-lg); background: var(--ast-surface); border: 1px solid var(--ast-line-strong); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9); } .age-gate-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; } .age-gate-title { margin: 0 0 10px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: #fff; } .age-gate-question { margin: 0 0 24px; font-size: 15px; line-height: 1.5; color: var(--ast-text-2); } .age-gate-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .age-gate-btn { padding: 14px 10px; border-radius: var(--ast-r-md); font-family: var(--ast-font); font-weight: 700; font-size: 13.5px; line-height: 1.3; text-wrap: balance; cursor: pointer; transition: filter .18s ease, background .18s ease, transform .12s ease; } .age-gate-btn:active { transform: scale(.97); } .age-gate-btn--no { background: transparent; border: 1.5px solid #ffb300; color: #ffb300; } .age-gate-btn--no:hover { background: rgba(255, 179, 0, .1); } .age-gate-btn--yes { border: 1.5px solid #ffb300; background: #ffb300; color: #1a1206; } .age-gate-btn--yes:hover { filter: brightness(1.06); } .age-gate-note { margin: 20px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ast-faint); } @media (max-width: 400px) { .age-gate-actions { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- Blocked account — full-page takeover after repeated Terms of Service violations. Same blur treatment as the age gate, but red-keyed and with no way out: the site behind it is visible enough to prove where you are and unreadable enough to be unusable. --------------------------------------------------------------------------- */ html.account-blocked-open, html.account-blocked-open body { overflow: hidden; } .acct-block { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px)); background: rgba(24, 4, 6, .8); -webkit-backdrop-filter: blur(16px) grayscale(.85) brightness(.5); backdrop-filter: blur(16px) grayscale(.85) brightness(.5); overflow-y: auto; } .acct-block-card { width: 100%; max-width: 460px; padding: 32px 28px 26px; text-align: center; border-radius: var(--ast-r-lg); background: var(--ast-surface); border: 1px solid rgba(220, 38, 38, .55); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(220, 38, 38, .12); } .acct-block-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; } .acct-block-icon { width: 52px; height: 52px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; color: #ff6b6b; background: rgba(220, 38, 38, .14); border: 1px solid rgba(220, 38, 38, .4); } .acct-block-title { margin: 0 0 12px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: #fff; } .acct-block-text { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--ast-text-2); } .acct-block-meta { margin: 0 0 18px; font-size: 12.5px; color: var(--ast-faint); } .acct-block-help { margin: 0 0 20px; font-size: 13.5px; line-height: 1.5; color: var(--ast-text-2); } .acct-block-btn { display: block; padding: 14px 20px; border-radius: var(--ast-r-md); background: #dc2626; border: 1.5px solid #dc2626; color: #fff; font-family: var(--ast-font); font-weight: 700; font-size: 14.5px; text-decoration: none; transition: filter .18s ease, transform .12s ease; } .acct-block-btn:hover { filter: brightness(1.08); } .acct-block-btn:active { transform: scale(.98); } .acct-block-links { margin-top: 18px; display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ast-faint); } .acct-block-links a { color: var(--ast-faint); text-decoration: underline; } .acct-block-links a:hover { color: var(--ast-text-2); } /* --------------------------------------------------------------------------- Buttons + price pill --------------------------------------------------------------------------- */ .ast-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border: 0; border-radius: var(--ast-r-md); font-family: var(--ast-font); font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; text-decoration: none; transition: transform .14s ease, filter .2s ease, opacity .2s ease; } .ast-btn:active { transform: scale(.975); } .ast-btn[disabled] { opacity: .55; cursor: default; } .ast-btn--accent { color: var(--ast-bg); background: var(--ast-accent); box-shadow: 0 8px 20px -8px var(--ast-accent-a); } .ast-btn--accent:hover { filter: brightness(1.04); } .ast-btn--ghost { color: var(--ast-text); background: var(--ast-surface-soft); border: 1px solid var(--ast-line-strong); } .ast-btn--pill { border-radius: 100px; } .ast-btn--block { width: 100%; } /* price pill that sits inside a generate button (Generate · ⭐ 12) */ .ast-price { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 100px; background: rgba(11, 9, 16, .22); font-weight: 800; font-size: 13px; } .ast-price-coin { width: 15px; height: 15px; display: block; } /* --------------------------------------------------------------------------- Small shared bits — eyebrow, online dot, section headings, spinner --------------------------------------------------------------------------- */ .ast-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ast-text-2); } .ast-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ast-accent-a); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ast-accent-a) 26%, transparent); } .ast-online { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #dfe9e2; } .ast-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ast-online); } .ast-badge { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 100px; background: var(--ast-accent); color: var(--ast-bg); font-weight: 800; font-size: 11px; } .ast-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .16); border-top-color: var(--ast-accent-a); animation: ast-spin .8s linear infinite; } /* --------------------------------------------------------------------------- Bottom sheet (custom request, gift, etc.) --------------------------------------------------------------------------- */ .ast-sheet-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(6, 5, 9, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .ast-sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: var(--ast-shell); z-index: 81; background: var(--ast-surface); border-top: 1px solid var(--ast-line-strong); border-radius: 26px 26px 0 0; padding: 14px 20px calc(22px + env(safe-area-inset-bottom, 0px)); animation: ast-sheet-up .28s cubic-bezier(.22, 1, .36, 1) both; } .ast-sheet-grip { width: 40px; height: 4px; border-radius: 100px; background: rgba(255, 255, 255, .16); margin: 0 auto 16px; } .ast-field { width: 100%; padding: 14px; border-radius: var(--ast-r-md); border: 1px solid var(--ast-line-strong); background: var(--ast-surface-soft); color: var(--ast-text); font-family: var(--ast-font); font-size: 14.5px; line-height: 1.45; outline: none; resize: none; } .ast-field:focus { border-color: color-mix(in oklab, var(--ast-accent-a) 55%, transparent); } /* --------------------------------------------------------------------------- Bug report modal — opened from the sidebar / footer "Report a problem" link --------------------------------------------------------------------------- */ .ast-bug-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(6, 5, 9, .68); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .ast-bug-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 101; width: calc(100% - 32px); max-width: 420px; max-height: calc(100dvh - 48px); overflow-y: auto; padding: 24px 22px; border-radius: var(--ast-r-lg); background: var(--ast-surface); border: 1px solid var(--ast-line-strong); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .9); /* Needs its own keyframe: the shared ast-card-in ends on `transform: none`, which would cancel the centering translate. */ animation: ast-bug-in .2s ease both; } .ast-bug-modal[hidden], .ast-bug-backdrop[hidden] { display: none; } .ast-bug-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ast-surface-soft); color: var(--ast-muted); cursor: pointer; } .ast-bug-close:hover { background: var(--ast-surface-hover); color: var(--ast-text); } .ast-bug-close svg { width: 16px; height: 16px; } .ast-bug-title { margin: 0 0 8px; padding-right: 34px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; } .ast-bug-sub { margin: 0 0 16px; color: var(--ast-muted); font-size: 13.5px; line-height: 1.5; } .ast-bug-text { min-height: 120px; resize: vertical; } .ast-bug-email { margin-top: 10px; } .ast-bug-error { margin: 12px 0 0; color: var(--ast-danger); font-size: 13px; font-weight: 600; } .ast-bug-error[hidden] { display: none; } .ast-bug-submit { margin-top: 16px; } /* --------------------------------------------------------------------------- Toast --------------------------------------------------------------------------- */ .ast-toast { position: fixed; left: 50%; bottom: calc(var(--ast-tabbar-h) + 20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(10px); z-index: 90; max-width: calc(var(--ast-shell) - 40px); padding: 12px 18px; border-radius: 14px; background: rgba(20, 16, 28, .96); border: 1px solid var(--ast-line-strong); color: var(--ast-text); font-size: 13.5px; font-weight: 600; line-height: 1.4; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .ast-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* --------------------------------------------------------------------------- Flash messages (Django) — dark pills near the top --------------------------------------------------------------------------- */ .messages { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 95; width: calc(100% - 32px); max-width: calc(var(--ast-shell) - 32px); display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .messages .message { pointer-events: auto; padding: 12px 16px; border-radius: 14px; background: var(--ast-surface); border: 1px solid var(--ast-line-strong); color: var(--ast-text); font-size: 14px; font-weight: 600; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .8); cursor: pointer; transition: opacity .3s ease, transform .3s ease; } .messages .message.error, .messages .message.danger { border-color: color-mix(in oklab, var(--ast-danger) 50%, transparent); } .messages .message.success { border-color: color-mix(in oklab, var(--ast-online) 50%, transparent); } .messages .message.hiding { opacity: 0; transform: translateY(-8px); } /* --------------------------------------------------------------------------- Sidebar (staff overflow menu) — dark restyle so it isn't broken while it still holds the admin links. Consumer nav is the bottom tab bar. --------------------------------------------------------------------------- */ .sidebar { background: var(--ast-surface) !important; border-right: 1px solid var(--ast-line) !important; color: var(--ast-text); } .sidebar-brand, .sidebar-nav a { color: var(--ast-text-2) !important; } .sidebar-nav a:hover { color: var(--ast-text) !important; background: var(--ast-surface-soft); } /* --------------------------------------------------------------------------- Keyframes --------------------------------------------------------------------------- */ @keyframes ast-spin { to { transform: rotate(360deg); } } @keyframes ast-sheet-up { from { transform: translateX(-50%) translateY(100%); } to { transform: translateX(-50%) translateY(0); } } @keyframes ast-floaty { 0%, 100% { transform: translate(-50%, -4%) scale(1); } 50% { transform: translate(-50%, 2%) scale(1.06); } } @keyframes ast-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes ast-bug-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } to { opacity: 1; transform: translate(-50%, -50%); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }