/* Shared design system. Loaded by every template so the whole app moves and feels like one thing. */ /* Themes. The page sets data-theme on ; everything downstream reads these four gradient stops plus the surface colours, so one block per theme is all a new look needs. */ :root, [data-theme="aurora"] { --grad-1: #0f766e; --grad-2: #15803d; --grad-3: #a78bfa; --grad-4: #38bdf8; --ink: #0d2b31; --muted: #4b7079; --card: rgba(250, 255, 255, 0.97); --ring: rgba(255, 255, 255, 0.42); --orb: rgba(167, 139, 250, 0.42); --orb-2: rgba(74, 222, 128, 0.38); --stream: #f0fbfb; --bubble-other: #ffffff; } [data-theme="midnight"] { --grad-1: #0f172a; --grad-2: #1e293b; --grad-3: #312e81; --grad-4: #0b1120; --ink: #e2e8f0; --muted: #94a3b8; --card: rgba(30, 41, 59, 0.96); --ring: rgba(148, 163, 184, 0.22); --orb: rgba(99, 102, 241, 0.45); --orb-2: rgba(14, 165, 233, 0.35); --stream: #0f172a; --bubble-other: #1e293b; } [data-theme="sunset"] { --grad-1: #e11d48; --grad-2: #a21caf; --grad-3: #7c3aed; --grad-4: #fbbf24; --ink: #3b1229; --muted: #8a5570; --card: rgba(255, 249, 251, 0.97); --ring: rgba(255, 255, 255, 0.42); --orb: rgba(251, 191, 36, 0.45); --orb-2: rgba(192, 38, 211, 0.35); --stream: #fdf4f7; --bubble-other: #ffffff; } [data-theme="forest"] { --grad-1: #2f5d50; --grad-2: #4d7c5f; --grad-3: #84a98c; --grad-4: #a3b18a; --ink: #1d2a20; --muted: #5c7365; --card: rgba(252, 253, 248, 0.97); --ring: rgba(255, 255, 255, 0.38); --orb: rgba(163, 177, 138, 0.5); --orb-2: rgba(45, 93, 80, 0.35); --stream: #f6f8f2; --bubble-other: #ffffff; } [data-theme="ocean"] { --grad-1: #0c4a6e; --grad-2: #0891b2; --grad-3: #2dd4bf; --grad-4: #1e40af; --ink: #08222f; --muted: #43687c; --card: rgba(247, 252, 255, 0.97); --ring: rgba(255, 255, 255, 0.36); --orb: rgba(45, 212, 191, 0.42); --orb-2: rgba(30, 64, 175, 0.32); --stream: #eff8fc; --bubble-other: #ffffff; } [data-theme="candy"] { --grad-1: #db2777; --grad-2: #9333ea; --grad-3: #bae6fd; --grad-4: #fed7aa; --ink: #4b3550; --muted: #8b7595; --card: rgba(255, 253, 255, 0.97); --ring: rgba(255, 255, 255, 0.55); --orb: rgba(255, 255, 255, 0.65); --orb-2: rgba(251, 207, 232, 0.5); --stream: #fdf8fc; --bubble-other: #ffffff; } [data-theme="ember"] { --grad-1: #1c1210; --grad-2: #7c2d12; --grad-3: #c2410c; --grad-4: #431407; --ink: #fde8d7; --muted: #c9a086; --card: rgba(41, 26, 22, 0.96); --ring: rgba(251, 146, 60, 0.24); --orb: rgba(249, 115, 22, 0.42); --orb-2: rgba(120, 53, 15, 0.5); --stream: #1a1110; --bubble-other: #2a1a16; } [data-theme="mono"] { --grad-1: #374151; --grad-2: #6b7280; --grad-3: #9ca3af; --grad-4: #1f2937; --ink: #111827; --muted: #6b7280; --card: rgba(255, 255, 255, 0.97); --ring: rgba(255, 255, 255, 0.3); --orb: rgba(255, 255, 255, 0.45); --orb-2: rgba(156, 163, 175, 0.4); --stream: #f9fafb; --bubble-other: #ffffff; } [data-theme="lagoon"] { --grad-1: #0e7490; --grad-2: #0f766e; --grad-3: #fde68a; --grad-4: #06b6d4; --ink: #0a2f34; --muted: #4a7a7d; --card: rgba(250, 254, 253, 0.97); --ring: rgba(255, 255, 255, 0.45); --orb: rgba(253, 230, 138, 0.5); --orb-2: rgba(94, 234, 212, 0.45); --stream: #f0fcfa; --bubble-other: #ffffff; } [data-theme="vapor"] { --grad-1: #1e1b4b; --grad-2: #7e22ce; --grad-3: #ec4899; --grad-4: #06b6d4; --ink: #f3e8ff; --muted: #b9a6d9; --card: rgba(35, 24, 66, 0.96); --ring: rgba(236, 72, 153, 0.3); --orb: rgba(236, 72, 153, 0.48); --orb-2: rgba(6, 182, 212, 0.42); --stream: #1b1038; --bubble-other: #2a1a52; } /* --- the living background ------------------------------------------------ */ body { background: linear-gradient(-45deg, var(--grad-1), var(--grad-2), var(--grad-3), var(--grad-4)); background-size: 400% 400%; animation: drift 18s ease infinite; min-height: 100vh; color: var(--ink); } @keyframes drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Soft floating orbs behind the content. */ body::before, body::after { content: ""; position: fixed; border-radius: 50%; filter: blur(70px); opacity: 0.4; pointer-events: none; z-index: 0; } body::before { width: 45vw; height: 45vw; background: var(--orb); top: -12vw; left: -10vw; animation: float-a 20s ease-in-out infinite; } body::after { width: 35vw; height: 35vw; background: var(--orb-2); bottom: -12vw; right: -8vw; animation: float-b 24s ease-in-out infinite; } @keyframes float-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 8vh) scale(1.15); } } @keyframes float-b { 0%, 100% { transform: translate(0, 0) scale(1.1); } 50% { transform: translate(-7vw, -6vh) scale(1); } } .container, .card, .glass, main, header { position: relative; z-index: 1; } /* --- glass surfaces ------------------------------------------------------- */ .glass { background: var(--card); backdrop-filter: blur(16px); border: 1px solid var(--ring); border-radius: 20px; box-shadow: 0 20px 50px rgba(31, 41, 55, 0.28); } .rise { animation: rise-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes rise-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* --- buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; border-radius: 12px; padding: 0.7rem 1.25rem; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; cursor: pointer; border: none; } .btn:hover { transform: translateY(-2px); filter: brightness(1.06); } .btn:active { transform: translateY(0) scale(0.98); } .btn-primary { background: linear-gradient(135deg, var(--grad-1), var(--grad-2)); color: #fff; box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4); } .btn-primary:hover { box-shadow: 0 12px 26px rgba(99, 102, 241, 0.5); } .btn-ghost { background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.3); } .btn-danger { background: #ef4444; color: #fff; } .btn-soft { background: #f3f4f6; color: var(--ink); } /* --- inputs --------------------------------------------------------------- */ .field { width: 100%; padding: 0.7rem 1rem; border: 2px solid #e5e7eb; border-radius: 12px; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; outline: none; } .field:focus { border-color: var(--grad-2); box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.16); transform: translateY(-1px); } /* --- avatars -------------------------------------------------------------- */ .avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: #fff; flex-shrink: 0; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18); } .avatar-sm { width: 26px; height: 26px; font-size: 0.7rem; } /* --- presence ------------------------------------------------------------- */ .dot-online { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); animation: pulse 2s infinite; flex-shrink: 0; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.65); } 70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .peer-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 10px; transition: background 0.18s ease, transform 0.18s ease; } .peer-row:hover { background: #f3f4f6; transform: translateX(3px); } /* --- messages ------------------------------------------------------------- */ .msg { animation: pop-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .bubble { max-width: 68%; padding: 0.6rem 0.95rem; border-radius: 18px; word-wrap: break-word; line-height: 1.45; box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12); transition: transform 0.18s ease; } .bubble:hover { transform: scale(1.015); } .bubble-own { background: linear-gradient(135deg, var(--grad-1), var(--grad-2)); color: #fff; border-bottom-right-radius: 5px; } .bubble-other { background: var(--bubble-other); color: var(--ink); border-bottom-left-radius: 5px; } .bubble-system { background: var(--bubble-other); opacity: .9; color: var(--muted); font-size: 0.82rem; border-radius: 999px; padding: 0.3rem 0.9rem; box-shadow: none; } /* --- typing indicator ----------------------------------------------------- */ .typing-dots span { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--muted); animation: bounce 1.3s infinite; } .typing-dots span:nth-child(2) { animation-delay: 0.18s; } .typing-dots span:nth-child(3) { animation-delay: 0.36s; } @keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-5px); opacity: 1; } } /* --- emoji bar ------------------------------------------------------------ */ .emoji-btn { font-size: 1.2rem; line-height: 1; padding: 0.25rem 0.35rem; border-radius: 9px; background: transparent; border: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; } .emoji-btn:hover { transform: scale(1.35) rotate(-6deg); background: #f3f4f6; } /* --- scrollbar ------------------------------------------------------------ */ .scroll-nice::-webkit-scrollbar { width: 8px; } .scroll-nice::-webkit-scrollbar-track { background: transparent; } .scroll-nice::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.35); border-radius: 99px; } .scroll-nice::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.55); } @media (prefers-reduced-motion: reduce) { *, body::before, body::after { animation: none !important; transition: none !important; } } /* --- theme-aware surfaces ------------------------------------------------- */ .glass, .card, .create-card, .login-card, .join-card, .lock-card, .dashboard-card { background: var(--card); color: var(--ink); } .messages, .stream-bg { background: var(--stream); } /* Tailwind's fixed greys would fight a dark theme, so the pieces that sit on themed surfaces inherit instead. */ [data-theme="midnight"] .bg-white, [data-theme="ember"] .bg-white, [data-theme="vapor"] .bg-white { background: var(--card) !important; color: var(--ink); } [data-theme="midnight"] .text-gray-800, [data-theme="midnight"] .text-gray-700, [data-theme="ember"] .text-gray-800, [data-theme="ember"] .text-gray-700, [data-theme="vapor"] .text-gray-800, [data-theme="vapor"] .text-gray-700 { color: var(--ink) !important; } [data-theme="midnight"] .text-gray-600, [data-theme="midnight"] .text-gray-500, [data-theme="ember"] .text-gray-600, [data-theme="ember"] .text-gray-500, [data-theme="vapor"] .text-gray-600, [data-theme="vapor"] .text-gray-500 { color: var(--muted) !important; } [data-theme="midnight"] .bg-gray-50, [data-theme="midnight"] .bg-gray-100, [data-theme="ember"] .bg-gray-50, [data-theme="ember"] .bg-gray-100, [data-theme="vapor"] .bg-gray-50, [data-theme="vapor"] .bg-gray-100 { background: var(--stream) !important; } [data-theme="midnight"] .field, [data-theme="ember"] .field, [data-theme="vapor"] .field { background: var(--stream); color: var(--ink); border-color: var(--ring); } /* --- theme picker --------------------------------------------------------- */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .theme-swatch { border-radius: 14px; padding: 0; border: 3px solid transparent; cursor: pointer; overflow: hidden; transition: transform .18s ease, border-color .18s ease; background: none; } .theme-swatch:hover { transform: translateY(-3px); } .theme-swatch.active { border-color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.28); } .theme-swatch .strip { height: 46px; } .theme-swatch .name { font-size: .75rem; font-weight: 600; padding: .35rem; background: var(--card); color: var(--ink); } /* --- images in messages --------------------------------------------------- */ .msg-image { display: block; max-width: 260px; max-height: 260px; border-radius: 12px; margin-top: .35rem; cursor: zoom-in; transition: transform .18s ease; } .msg-image:hover { transform: scale(1.02); } .lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 2rem; } .lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; } .emoji-panel { display: none; flex-wrap: wrap; gap: 2px; max-width: 320px; padding: .4rem; border-radius: 12px; background: var(--card); box-shadow: 0 10px 26px rgba(31,41,55,.25); } .emoji-panel.open { display: flex; } .muted-note { background: #fef3c7; color: #92400e; font-size: .8rem; padding: .5rem .9rem; text-align: center; } .role-pill { font-size: .62rem; font-weight: 700; letter-spacing: .03em; padding: .08rem .4rem; border-radius: 999px; text-transform: uppercase; } .role-owner { background: #fde68a; color: #92400e; } .role-captain { background: #ddd6fe; color: #5b21b6; } .role-warden { background: #bfdbfe; color: #1e40af; } .role-scout { background: #d1fae5; color: #065f46; } /* --- calling -------------------------------------------------------------- */ .call-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(15, 23, 42, 0.82); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 1rem; } .call-overlay.open { display: flex; } .call-panel { background: var(--card); color: var(--ink); border-radius: 20px; padding: 1.5rem; width: min(720px, 100%); max-height: 92vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); animation: rise-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } .call-title { font-size: 1.35rem; font-weight: 700; text-align: center; } .call-sub { font-size: 0.85rem; color: var(--muted); text-align: center; margin-top: 0.2rem; } .call-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 1.1rem 0; } .call-tile { position: relative; background: #0f172a; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; } .call-tile video { width: 100%; height: 100%; object-fit: cover; display: block; } .call-name { position: absolute; left: 8px; bottom: 6px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.45rem; border-radius: 999px; } .call-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } /* Banner shown in a room while a call is running. */ .call-banner { display: none; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.9rem; background: #dcfce7; color: #14532d; font-size: 0.85rem; flex-wrap: wrap; } .call-banner.show { display: flex; } @media (max-width: 768px) { .call-panel { padding: 1rem; border-radius: 16px; } .call-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 7px; } .call-actions .btn { flex: 1 1 44%; } }