@tailwind base; @tailwind components; @tailwind utilities; /* ------------------------------------------------------------------ */ /* Design tokens — mirrors tailwind.config.js so non-Tailwind contexts */ /* (inline styles, third-party widgets) can reference the same colors. */ /* ------------------------------------------------------------------ */ :root { --color-background: #0b1326; --color-surface: #0b1326; --color-surface-dim: #0b1326; --color-surface-bright: #31394d; --color-surface-container-lowest: #060e20; --color-surface-container-low: #131b2e; --color-surface-container: #171f33; --color-surface-container-high: #222a3d; --color-surface-container-highest: #2d3449; --color-surface-variant: #2d3449; --color-on-surface: #dae2fd; --color-on-surface-variant: #c7c4d8; --color-on-background: #dae2fd; --color-outline: #918fa1; --color-outline-variant: #464555; --color-primary: #c3c0ff; --color-primary-fixed-dim: #c3c0ff; --color-primary-container: #4f46e5; --color-on-primary: #1d00a5; --color-on-primary-container: #dad7ff; --color-secondary: #4edea3; --color-secondary-container: #00a572; --color-on-secondary: #003824; --color-on-secondary-container: #00311f; --color-tertiary: #ffb95f; --color-tertiary-container: #885500; --color-on-tertiary: #472a00; --color-on-tertiary-container: #ffd4a4; --color-error: #ffb4ab; --color-error-container: #93000a; --color-on-error: #690005; --color-on-error-container: #ffdad6; --color-whatsapp: #25D366; --color-telegram: #0088cc; --font-display: 'Geist', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; } body { background: var(--color-background); color: var(--color-on-background); font-family: var(--font-body); } /* ------------------------------------------------------------------ */ /* Material Symbols default weight (matches the Stitch import) */ /* ------------------------------------------------------------------ */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .material-symbols-outlined.fill, .material-symbols-outlined[data-weight='fill'] { font-variation-settings: 'FILL' 1; } /* ------------------------------------------------------------------ */ /* Glass surfaces — three intensities used across the mockups */ /* ------------------------------------------------------------------ */ .glass-panel { background: rgba(30, 41, 59, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(70, 69, 85, 0.3); } .glass-card { background: rgba(30, 41, 59, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(51, 65, 85, 0.5); } .glass-surface { background: rgba(23, 31, 51, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(70, 69, 85, 0.25); } .glass-modal { background: rgba(19, 27, 46, 0.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(70, 69, 85, 0.35); } .glow-shadow { box-shadow: 0 0 40px rgba(79, 70, 229, 0.15); } .input-glow:focus-within { border-color: #4f46e5; box-shadow: 0 0 0 1px #4f46e5, 0 0 15px rgba(79, 70, 229, 0.2); } /* ------------------------------------------------------------------ */ /* Shimmer effects — premium/boosted content indicators */ /* ------------------------------------------------------------------ */ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .shimmer-border { position: relative; } .shimmer-border::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.5), transparent); background-size: 200% 100%; animation: shimmer 3s infinite linear; z-index: -1; } .premium-shimmer { background: linear-gradient(90deg, transparent, rgba(255, 185, 95, 0.06), transparent); background-size: 200% 100%; animation: shimmer 4s infinite linear; } /* Animated gold ring wrapper for boosted story avatars */ .gold-shimmer { background: linear-gradient(90deg, #ffb95f, #ffddb8, #ffb95f); background-size: 200% 100%; animation: shimmer 2.5s infinite linear; border-radius: 9999px; } /* ------------------------------------------------------------------ */ /* Broadcaster ticker — infinite horizontal marquee */ /* ------------------------------------------------------------------ */ .ticker-wrap { overflow: hidden; white-space: nowrap; background: rgba(23, 31, 51, 0.6); padding: 8px 0; } .ticker { display: inline-block; padding-left: 100%; animation: ticker-scroll 28s linear infinite; } @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* ------------------------------------------------------------------ */ /* Story-viewer countdown ring (SVG stroke-dashoffset driven by JS/Alpine) */ /* ------------------------------------------------------------------ */ .countdown-ring circle { transition: stroke-dashoffset 1s linear; } /* ------------------------------------------------------------------ */ /* Utility scrollbar + hide-scrollbar helpers used in story trays/tabs */ /* ------------------------------------------------------------------ */ .no-scrollbar::-webkit-scrollbar, .hide-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar, .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-outline-variant); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-outline); } /* Ambient background orbs used on auth screens */ @keyframes pulse-glow { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.05); } } .ambient-orb { animation: pulse-glow 8s ease-in-out infinite alternate; }