/* Theatriverse web dashboard — brand: deep purple, magenta, sunset red & amber. Dark theme by default; light theme follows the OS preference, and the in-app toggle forces either via data-theme on . */ :root { color-scheme: dark; --bg: #170d33; --bg-raised: #221347; --card: #221347; --border: #392567; --text: #f5f1fb; --muted: #a79ac9; --accent: #3e1fb0; --accent-soft: #c93fd6; --danger: #f0405f; --ok: #3dbd7d; --warn: #f7a929; --brand-grad: linear-gradient(135deg, #3e1fb0, #c93fd6); --verse-grad: linear-gradient(90deg, #f0435e, #f7a929); --topbar-bg: #120a28; --input-bg: #120a28; --brand-ink: #fff; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #fbf7f1; --bg-raised: #efe9f8; --card: #ffffff; --border: #e2d9ee; --text: #2a1360; --muted: #75689f; --accent: #3e1fb0; --accent-soft: #a82fb5; --danger: #d62e4f; --ok: #1e9e60; --warn: #b26a00; --topbar-bg: #ffffff; --input-bg: #ffffff; --brand-ink: #2a1360; } } :root[data-theme="light"] { color-scheme: light; --bg: #fbf7f1; --bg-raised: #efe9f8; --card: #ffffff; --border: #e2d9ee; --text: #2a1360; --muted: #75689f; --accent: #3e1fb0; --accent-soft: #a82fb5; --danger: #d62e4f; --ok: #1e9e60; --warn: #b26a00; --topbar-bg: #ffffff; --input-bg: #ffffff; --brand-ink: #2a1360; } * { box-sizing: border-box; } /* The hidden attribute must beat author display rules (e.g. the topbar's flex). */ [hidden] { display: none !important; } body { margin: 0; font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); } header#topbar { display: flex; align-items: center; gap: 20px; padding: 12px 24px; background: var(--topbar-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .brand { font-weight: 800; letter-spacing: 4px; color: var(--brand-ink); } .brand-icon { height: 26px; width: 26px; margin-right: -8px; } .brand-verse { background: var(--verse-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .spacer { flex: 1; } nav a { color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: 6px; font-weight: 500; } nav a.active, nav a:hover { color: var(--text); background: var(--bg-raised); } .nav-badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 1px 5px; border-radius: 999px; background: var(--accent-soft); color: #fff; font-size: 11px; font-weight: 700; text-align: center; vertical-align: 1px; } main#view { max-width: 1100px; margin: 0 auto; padding: 28px 24px 64px; } h1 { font-size: 24px; margin: 0 0 4px; } h2 { font-size: 18px; margin: 24px 0 12px; } .muted { color: var(--muted); } .small { font-size: 13px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 14px; } .card.clickable { cursor: pointer; } .card.clickable:hover { border-color: var(--accent-soft); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .grid .card { margin-bottom: 0; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .row.between { justify-content: space-between; } /* Forms */ label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; } input, select, textarea { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: transparent; } textarea { min-height: 90px; resize: vertical; } button { font: inherit; font-weight: 600; padding: 9px 18px; border-radius: 8px; border: none; background: var(--brand-grad); color: #fff; cursor: pointer; } button:hover { filter: brightness(1.2); } button.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); } button.ghost:hover { color: var(--text); border-color: var(--accent-soft); background: transparent; filter: none; } button.small { padding: 5px 12px; font-size: 13px; } button:disabled { opacity: .5; cursor: default; } /* Badges */ .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg); border: 1px solid var(--border); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .badge.open, .badge.active, .badge.paid, .badge.offered, .badge.accepted { color: var(--ok); border-color: var(--ok); } .badge.draft, .badge.invited, .badge.submitted, .badge.viewed { color: var(--warn); border-color: var(--warn); } .badge.closed, .badge.declined, .badge.failed, .badge.withdrawn, .badge.cancelled { color: var(--danger); border-color: var(--danger); } .badge.shortlisted, .badge.cast { color: var(--accent-soft); border-color: var(--accent-soft); } /* Auth screen */ .auth-wrap { max-width: 420px; margin: 8vh auto 0; } .auth-wrap .brand-lg { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 28px; } .auth-wrap .brand-lg-icon { height: 84px; width: 84px; } .auth-wrap .brand-word { font-size: 30px; font-weight: 800; letter-spacing: 7px; color: var(--brand-ink); } .auth-wrap .brand-tagline { font-size: 12px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: var(--muted); } .auth-theme { position: fixed; top: 16px; right: 16px; } .auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; } .auth-tabs button { flex: 1; } .auth-tabs button.inactive { background: var(--bg-raised); color: var(--muted); } /* Tables */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; } /* Messages */ .thread { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0; } .bubble { max-width: 70%; padding: 9px 14px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--border); } .bubble.mine { align-self: flex-end; background: var(--accent); border-color: var(--accent); color: #fff; } .bubble .small { opacity: .7; } /* Plan cards */ .plan-price { font-size: 26px; font-weight: 800; } .plan-price .small { font-weight: 400; } ul.features { margin: 10px 0 0; padding-left: 18px; color: var(--muted); } /* Toast */ #toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--card); border: 1px solid var(--accent-soft); padding: 10px 22px; border-radius: 8px; z-index: 100; } #toast.error { border-color: var(--danger); } .empty { text-align: center; color: var(--muted); padding: 36px 0; } .prewrap { white-space: pre-wrap; } /* Performer media (headshots, showreels, self tapes) */ .headshot { width: 56px; height: 68px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; flex-shrink: 0; } .headshot:hover { border-color: var(--accent-soft); } .headshot.placeholder { display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--bg); cursor: default; } .headshot-wrap { position: relative; display: inline-block; flex-shrink: 0; } .headshot-wrap .headshot-count { position: absolute; bottom: 4px; right: 4px; background: rgba(18, 10, 40, .8); color: #fff; font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 999px; pointer-events: none; } #media-modal .media-box #media-prev, #media-modal .media-box #media-next { font-size: 22px; padding: 6px 14px; flex-shrink: 0; } #media-modal { position: fixed; inset: 0; background: rgba(18, 10, 40, .82); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 24px; } #media-modal .media-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; max-width: min(900px, 96vw); max-height: 92vh; display: flex; flex-direction: column; } #media-modal video, #media-modal img { max-width: 100%; max-height: 78vh; border-radius: 8px; object-fit: contain; }