/* ============================================================ Popularity brand mark — subtle icon signature across the UI. Uses --brand-icon-url (set via brand_css_vars() in ). Symbol only — never replaces or modifies the full logo. ============================================================ */ /* ---------- Shared watermark (CSS background) ---------- */ .brand-watermark { position: absolute; pointer-events: none; user-select: none; background: var(--brand-icon-url) center / contain no-repeat; z-index: 0; } /* 1. Hero — large, 3–5% opacity, gradient blend */ .ft-hero-bg .brand-watermark--hero { width: min(720px, 88vw); height: min(720px, 88vw); left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg); opacity: 0.04; filter: blur(0.5px); mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 0%, transparent 72%); } html[data-theme="light"] .ft-hero-bg .brand-watermark--hero { opacity: 0.035; } /* 3–4. Auth — watermark behind the form card */ .ft-auth-main .brand-watermark--auth { width: min(520px, 92vw); height: min(520px, 92vw); left: 50%; top: 50%; transform: translate(-42%, -48%) rotate(-6deg); opacity: 0.035; mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 68%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 68%); } html[data-theme="light"] .ft-auth-main .brand-watermark--auth { opacity: 0.028; } /* 5. Footer — embossed behind content */ .ft-footer { position: relative; overflow: hidden; } .ft-footer .brand-watermark--footer { width: 420px; height: 420px; right: -80px; bottom: -100px; opacity: 0.045; filter: blur(1px); mix-blend-mode: soft-light; } html[data-theme="light"] .ft-footer .brand-watermark--footer { opacity: 0.04; mix-blend-mode: multiply; } /* 6. API code block — faint graphic behind console */ .ft-console-wrap { position: relative; } .ft-console-wrap .brand-watermark--api { width: 280px; height: 280px; right: -40px; bottom: -30px; opacity: 0.05; mask-image: radial-gradient(circle at 60% 60%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(circle at 60% 60%, #000 0%, transparent 70%); } /* 7. CTA — large blurred version */ .ft-bottom-cta { position: relative; overflow: hidden; } .ft-bottom-cta .brand-watermark--cta { width: min(640px, 95vw); height: min(640px, 95vw); left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.045; filter: blur(28px); } html[data-theme="light"] .ft-bottom-cta .brand-watermark--cta { opacity: 0.035; } /* ---------- Internal panel (logged-in) — same premium canvas as home ---------- */ .panel-premium-shell { position: relative; /* Do NOT use overflow:hidden here — it clips .app-content (margin-top + forms) */ overflow-x: hidden; overflow-y: visible; min-height: calc(100vh - 4rem); } .panel-premium-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .panel-premium-content { position: relative; z-index: 2; opacity: 1 !important; visibility: visible !important; } /* Soft color blobs — same palette and drift animation as the home hero */ .panel-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.4; animation: panelDrift 16s ease-in-out infinite alternate; } .panel-blob-a { width: 480px; height: 480px; left: -160px; top: -180px; background: radial-gradient(circle, rgba(124, 92, 255, 0.30), transparent 70%); } .panel-blob-b { width: 420px; height: 420px; right: -140px; top: 30%; background: radial-gradient(circle, rgba(30, 167, 255, 0.16), transparent 70%); animation-delay: -7s; } body:not(.theme-dark) .panel-blob { opacity: 0.22; } @keyframes panelDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(36px, 24px) scale(1.07); } } @media (prefers-reduced-motion: reduce) { .panel-blob { animation: none; } } /* Grid dots — identical texture to the landing hero */ .panel-grid-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(124, 92, 255, 0.16) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(620px 420px at 25% 12%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(620px 420px at 25% 12%, #000 0%, transparent 78%); } body:not(.theme-dark) .panel-grid-dots { opacity: 0.55; } .brand-watermark--panel { width: min(560px, 70vw); height: min(560px, 70vw); right: -120px; top: 8%; opacity: 0.035; filter: blur(0.5px); mask-image: radial-gradient(circle at 55% 45%, #000 0%, transparent 68%); -webkit-mask-image: radial-gradient(circle at 55% 45%, #000 0%, transparent 68%); } body:not(.theme-dark) .brand-watermark--panel { opacity: 0.028; } /* Card dimmer — brand icon instead of generic spinner */ .dimmer .loader { width: 48px !important; height: 48px !important; background: var(--brand-icon-url) center / contain no-repeat !important; border: none !important; animation: brandMarkPulse 2.4s ease-in-out infinite; filter: drop-shadow(0 0 14px var(--brand-glow-blue)); } .dimmer .loader::before, .dimmer .loader::after { display: none !important; content: none !important; } /* ---------- IMG-based marks (empty, loader, divider) ---------- */ .brand-mark { pointer-events: none; user-select: none; object-fit: contain; display: block; } /* 2 / 10. Empty states */ .brand-mark--empty, .data-empty .brand-mark--empty { width: 72px; height: 72px; margin: 0 auto 14px; opacity: 0.22; filter: grayscale(0.15); } body.theme-dark .brand-mark--empty, body.auto-theme-dark .brand-mark--empty { opacity: 0.18; } /* 8. Loading overlay */ #page-overlay .brand-mark--loader { width: 52px; height: 52px; animation: brandMarkPulse 2.4s ease-in-out infinite; } #page-overlay.active .brand-mark--loader { filter: drop-shadow(0 0 18px var(--brand-glow-blue)) drop-shadow(0 0 32px var(--brand-glow-purple)); } @keyframes brandMarkPulse { 0%, 100% { opacity: 0.55; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .brand-mark--loader { animation: none; opacity: 0.85; } } /* Card / inline loading */ .brand-mark--loading-inline { width: 28px; height: 28px; margin: 0 auto; opacity: 0.5; animation: brandMarkPulse 2.4s ease-in-out infinite; } /* 12. Documentation / section dividers */ .brand-mark-divider { display: flex; align-items: center; gap: 14px; margin: 28px 0 22px; color: var(--muted, #8a94a8); } .brand-mark-divider::before, .brand-mark-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border, rgba(255,255,255,.08)), transparent); } .brand-mark-divider .brand-mark--divider { width: 22px; height: 22px; opacity: 0.35; flex-shrink: 0; } /* API docs page — watermark on code blocks */ .api-documentation pre, .ft-public .api-documentation pre { position: relative; overflow: hidden; } .api-documentation pre::before, .ft-public .api-documentation pre::before { content: ""; position: absolute; right: -20px; bottom: -20px; width: 140px; height: 140px; background: var(--brand-icon-url) center / contain no-repeat; opacity: 0.04; pointer-events: none; } .ft-bottom-cta .ft-container { position: relative; z-index: 1; } .ft-console { position: relative; z-index: 1; } /* Blog / docs — optional section divider (add .brand-mark-divider in content) */ .ft-public .brand-mark-divider { margin: 32px 0 24px; } .ft-btn-primary:hover, .ft-btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(30, 167, 255, 0.12), 0 0 22px rgba(30, 167, 255, 0.22), 0 0 44px rgba(192, 38, 211, 0.14), 0 10px 32px rgba(124, 92, 255, 0.35) !important; } .ft-public .card:hover, .ft-card:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(30, 167, 255, 0.08), 0 0 24px rgba(192, 38, 211, 0.06); } body.theme-dark .btn-primary:hover, body.theme-dark .btn-primary:focus-visible, body.auto-theme-dark .btn-primary:hover { box-shadow: 0 0 0 3px rgba(30, 167, 255, 0.14), 0 0 20px rgba(30, 167, 255, 0.2), 0 0 36px rgba(192, 38, 211, 0.12) !important; }