/* Shared look for every Relay page: colours, header, buttons, dialogs, forms. */ :root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); } /* ---------- themes ---------- The picker in the header sets data-theme on . No attribute means "System": light or dark, following the device. Every theme sets the same colour tokens, so all pages pick them up automatically. */ :root, :root[data-theme="light"]{ color-scheme:light; --bg:#EEF0F6; --surface:#FFFFFF; --surface-2:#E4E7F1; --line:#D3D8E6; --text:#191C2C; --muted:#5A6079; --accent:#F4782E; --accent-ink:#FFFFFF; --link:#3450C8; --live:#E5354B; --good:#1F9D6B; --player:#0E1020; --tip-bg:#FFF1E6; } @media (prefers-color-scheme:dark){ :root:not([data-theme]){ color-scheme:dark; --bg:#131626; --surface:#1B1F32; --surface-2:#252A42; --line:#2D3350; --text:#E9EBF5; --muted:#949BB8; --accent:#FF8F47; --accent-ink:#1A1206; --link:#8FA5FF; --live:#FF4D63; --good:#3CCB91; --player:#0A0C18; --tip-bg:#2E2433; } } :root[data-theme="dark"]{ color-scheme:dark; --bg:#131626; --surface:#1B1F32; --surface-2:#252A42; --line:#2D3350; --text:#E9EBF5; --muted:#949BB8; --accent:#FF8F47; --accent-ink:#1A1206; --link:#8FA5FF; --live:#FF4D63; --good:#3CCB91; --player:#0A0C18; --tip-bg:#2E2433; } /* OLED: true black, so OLED screens switch those pixels off. */ :root[data-theme="oled"]{ --offline-glow:#000000; color-scheme:dark; --bg:#000000; --surface:#000000; --surface-2:#141414; --line:#222222; --text:#EDEDED; --muted:#8C8C8C; --accent:#FF8F47; --accent-ink:#140A02; --link:#8FA5FF; --live:#FF4D63; --good:#3CCB91; --player:#000000; --tip-bg:#1C1410; } /* Milkshake: strawberry milkshake pink. */ :root[data-theme="milkshake"]{ --offline-glow:#5C2A42; color-scheme:light; --bg:#FFEFF5; --surface:#FFFAFC; --surface-2:#FFE0EC; --line:#F7C6D9; --text:#3B1D2A; --muted:#8C5A70; --accent:#F25C9A; --accent-ink:#FFFFFF; --link:#B8246A; --live:#E0304F; --good:#1F9D6B; --player:#2B1420; --tip-bg:#FFE3EE; } /* Rainbow: a dark base with an accent that slowly travels round the colour wheel. */ @property --hue{ syntax:""; inherits:true; initial-value:0; } :root[data-theme="rainbow"]{ --offline-glow:#2E2352; color-scheme:dark; --bg:#15121F; --surface:#1E1A2C; --surface-2:#2A2540; --line:#3A3356; --text:#F2EEFF; --muted:#A79FC4; --accent:hsl(var(--hue) 92% 64%); --accent-ink:#140F20; --link:hsl(calc(var(--hue) + 180) 90% 75%); --live:#FF4D63; --good:#3CCB91; --player:#0D0B16; --tip-bg:#2B2140; --rainbow:linear-gradient(90deg,#FF5E7E,#FF9F43,#FFD84A,#4ADE80,#38BDF8,#818CF8,#E879F9,#FF5E7E); animation:relay-hue 24s linear infinite; } @keyframes relay-hue{ to{ --hue:360; } } :root[data-theme="rainbow"] .top{ border-bottom:3px solid transparent; border-image:var(--rainbow) 1; } :root[data-theme="rainbow"] .brand{ background:var(--rainbow); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:relay-slide 8s linear infinite; } @keyframes relay-slide{ to{ background-position:200% 0; } } @media (prefers-reduced-motion:reduce){ :root[data-theme="rainbow"], :root[data-theme="rainbow"] .brand{ animation:none; } :root[data-theme="rainbow"]{ --hue:300; } } /* ---------- theme picker ---------- */ .theme-menu{position:fixed;z-index:30;min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:12px; padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.28)} .theme-menu[hidden]{display:none} .theme-menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 10px;border-radius:8px; font-weight:600;color:var(--text);text-align:left} .theme-menu button:hover,.theme-menu button:focus-visible{background:var(--surface-2)} .theme-menu .sw{width:22px;height:22px;border-radius:50%;flex:none;border:1px solid rgba(128,128,128,.35)} .theme-menu .tick{margin-left:auto;color:var(--accent);visibility:hidden} .theme-menu button[aria-checked="true"] .tick{visibility:visible} html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%} *,*::before,*::after{box-sizing:inherit} body{margin:0;height:100%;background:var(--bg);color:var(--text); font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.45} button,input{font:inherit;color:inherit} button{cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} img{max-width:100%} .app{display:grid;grid-template-rows:auto 1fr;height:100%} /* ---------- header ---------- */ .top{display:flex;align-items:center;gap:22px;padding:0 20px;height:58px; background:var(--surface);border-bottom:1px solid var(--line)} .brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text); font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:800;font-size:25px;letter-spacing:-.02em} .brand-mark{width:26px;height:26px;position:relative} .brand-mark span{position:absolute;inset:0;border-radius:50%;border:3px solid var(--accent)} .brand-mark span:nth-child(2){inset:7px;background:var(--accent);border:none} .nav{display:flex;gap:4px} .nav a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px} .nav a:hover,.nav a[aria-current]{color:var(--text);background:var(--surface-2)} .top-right{margin-left:auto;display:flex;align-items:center;gap:10px} .search{display:flex;align-items:center;background:var(--surface-2);border-radius:10px;padding:0 12px;height:38px;width:240px} .search input{border:0;background:transparent;outline:0;width:100%;color:var(--text)} .btn{border:0;border-radius:10px;padding:9px 16px;font-weight:700;background:var(--surface-2)} .btn-accent{background:var(--accent);color:var(--accent-ink)} .icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:0;background:transparent;color:var(--muted)} .icon-btn:hover{background:var(--surface-2);color:var(--text)} /* ---------- dialog & toast ---------- */ dialog{border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);padding:22px;width:min(360px,90vw)} dialog::backdrop{background:rgba(5,7,15,.6)} dialog h2{margin:0 0 6px;font-family:"Bricolage Grotesque",sans-serif} dialog p{margin:0 0 14px;color:var(--muted)} dialog input{width:100%;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);padding:0 12px} .dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px} .toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0; background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;transition:.25s;pointer-events:none} .toast.show{opacity:1;transform:translate(-50%,0)} /* ---------- shared page layout for settings & admin ---------- */ body.page-body{height:auto;min-height:100%} .page-body .top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10} .wrap{max-width:1000px;margin:0 auto;padding:28px 20px 60px;display:grid;grid-template-columns:190px minmax(0,1fr);gap:32px} .side{position:sticky;top:calc(80px + env(safe-area-inset-top,0px));align-self:start;display:flex;flex-direction:column;gap:2px} .side a{color:var(--muted);text-decoration:none;font-weight:600;padding:9px 12px;border-radius:9px} .side a:hover{background:var(--surface-2);color:var(--text)} .side a.here{background:var(--surface);color:var(--text);box-shadow:inset 3px 0 0 var(--accent)} h1.page{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:30px;margin:0 0 4px;letter-spacing:-.01em} .lede{color:var(--muted);margin:0 0 24px} section.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:22px;scroll-margin-top:84px} section.card h2{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:20px;margin:0 0 4px} section.card > p.sub{color:var(--muted);margin:0 0 18px;max-width:62ch} .field{margin-bottom:16px} .field label,.field .label{display:block;font-weight:700;font-size:14px;margin-bottom:6px} .field .hint{color:var(--muted);font-size:13px;margin-top:5px;display:flex;justify-content:space-between;gap:10px} .inp,textarea.inp,select.inp{width:100%;min-height:42px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2); padding:9px 12px;color:var(--text);font:inherit} textarea.inp{min-height:110px;resize:vertical;line-height:1.5} .inp:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ratings{display:flex;gap:8px;flex-wrap:wrap} .ratings label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-weight:600;cursor:pointer;margin:0} .ratings input{accent-color:var(--accent)} .ratings label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)} .sched-row{display:grid;grid-template-columns:150px 1fr 40px;gap:8px;margin-bottom:8px} .sched-row .icon-btn{width:40px;height:42px} .link-add{border:0;background:none;color:var(--link);font-weight:700;padding:4px 0} .actions{display:flex;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap} .status{font-size:14px;font-weight:600} .status.ok{color:var(--good)} .status.bad{color:var(--live)} .btn:disabled{opacity:.55;cursor:default} .btn-danger{background:transparent;border:1px solid var(--live);color:var(--live)} .people{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .people li{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:999px;padding:4px 6px 4px 4px;font-weight:600;font-size:14px} .people .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800} .people button{border:0;background:var(--surface);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:700;color:var(--link)} .people li.plain{padding-right:12px} .empty{color:var(--muted);font-size:14px} .inline{display:flex;gap:8px;max-width:420px} .inline .inp{flex:1} .sub-h{font-weight:700;margin:18px 0 8px;display:flex;align-items:baseline;gap:8px} .sub-h .count{color:var(--muted);font-weight:600;font-size:14px} .divider{border:0;border-top:1px solid var(--line);margin:22px 0} .gate{text-align:center;padding:40px 22px} .gate .actions{justify-content:center} .pill{display:inline-block;font-size:12px;font-weight:800;border-radius:6px;padding:2px 8px;background:var(--surface-2);color:var(--muted);vertical-align:3px;margin-left:6px} .pill.on{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)} .danger-zone{border-color:color-mix(in srgb,var(--live) 45%,var(--line))} [hidden]{display:none!important} @media (max-width:760px){ .wrap{grid-template-columns:1fr;gap:16px;padding-top:18px} .side{position:static;flex-direction:row;overflow-x:auto} .side a.here{box-shadow:inset 0 -3px 0 var(--accent)} .row2{grid-template-columns:1fr} .sched-row{grid-template-columns:1fr 1fr 40px} .nav{display:none} } /* ---------- small shared bits ---------- */ .link-btn{border:0;background:none;padding:0;color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:2px} .live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);margin-right:6px;vertical-align:1px} code,kbd{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.92em;background:var(--surface-2);padding:1px 5px;border-radius:5px} @media (max-width:860px){ .nav{display:none} } @media (max-width:520px){ .top{gap:10px;padding:0 12px} .search{display:none} } /* ---------- site-wide announcement banner ---------- */ .announce{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 20px;font-weight:600;font-size:14.5px; background:color-mix(in srgb,var(--link) 14%,var(--surface));color:var(--text);border-bottom:1px solid var(--line)} .announce[hidden]{display:none} .announce .a-icon{font-size:18px;line-height:1} .announce .a-text{flex:1;min-width:0;overflow-wrap:anywhere} .announce a.a-link{color:var(--link);font-weight:800;white-space:nowrap} .announce .a-x{border:0;background:transparent;color:var(--muted);width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none} .announce .a-x:hover{background:var(--surface-2);color:var(--text)} .announce.celebrate{background:linear-gradient(90deg,color-mix(in srgb,#E879F9 20%,var(--surface)),color-mix(in srgb,#FFD84A 22%,var(--surface)))} .announce.important{background:color-mix(in srgb,var(--live) 16%,var(--surface))} .announce.important .a-text{font-weight:700} /* ---------- versions card on the logo ---------- */ .brand{position:relative} .brand .brand-tip{position:absolute;top:calc(100% + 10px);left:0;z-index:35;min-width:190px;display:flex;flex-direction:column;gap:5px; padding:10px 12px;border-radius:12px;border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.25); font-family:"Figtree",system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:0;line-height:1.3;white-space:nowrap; /* reset the wordmark's styling (the rainbow theme paints the text with a gradient) */ background:var(--surface);-webkit-background-clip:border-box;background-clip:border-box;color:var(--text);animation:none; opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility 0s linear .15s;pointer-events:none} .brand:hover .brand-tip,.brand:focus-visible .brand-tip{opacity:1;visibility:visible;transform:none;transition-delay:.25s,.25s,0s} .brand .brand-tip b{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:15px;font-weight:800} .brand .bt-row{display:flex;justify-content:space-between;gap:16px;color:var(--muted)} .brand .bt-row code{color:var(--text);background:var(--surface-2)} .brand .bt-warn{white-space:normal;max-width:220px;color:var(--live);font-size:12.5px;margin-top:2px} @media (prefers-reduced-motion:reduce){ .brand .brand-tip{transition:none} } /* ---------- footer links (Terms, Guidelines) ---------- */ .site-foot{border-top:1px solid var(--line);padding:18px 20px calc(18px + env(safe-area-inset-bottom,0px));text-align:center;color:var(--muted);font-size:14px} .site-foot a{color:var(--muted);margin:0 8px} .site-foot a:hover{color:var(--text)} /* ---------- profile pictures (Relay.avatar) ---------- */ .pic{position:relative;display:inline-grid;place-items:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:800;flex:none; width:32px;height:32px;font-size:14px;line-height:1;vertical-align:middle} .pic > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--surface)} /* ---------- animated profile frames (Relay.avatar(..., frame)) ---------- A spinning gradient ring behind the picture, plus a soft glow. Each frame sets its colours; --ring is the ring's thickness (bigger for big pictures). */ .pic-wrap{position:relative;display:inline-grid;border-radius:50%;isolation:isolate;flex:none;vertical-align:middle;--ring:2.5px; width:max-content;height:max-content} /* a fixed size, so a flex row (like a chat message) can't stretch it */ .pic-wrap > .pic,.pic-wrap > .avatar{position:relative;z-index:1} .pic-wrap[class*="fr-"]::before{content:"";position:absolute;inset:calc(var(--ring) * -1);border-radius:50%;z-index:0; background:var(--fr-ring);animation:fr-spin var(--fr-speed,4s) linear infinite} .pic-wrap[class*="fr-"]::after{content:"";position:absolute;inset:calc(var(--ring) * -1);border-radius:50%;z-index:-1; box-shadow:0 0 calc(var(--ring) * 3) var(--fr-glow);animation:fr-glow 2.6s ease-in-out infinite} @keyframes fr-spin{to{transform:rotate(360deg)}} @keyframes fr-glow{50%{opacity:.35}} .fr-ember{--fr-ring:conic-gradient(#ff3d00,#ffb300,#ff6d00,#ffd54f,#ff3d00);--fr-glow:#ff7a1a;--fr-speed:2.4s} .fr-ember::after{animation:fr-flicker 1.1s steps(2,jump-none) infinite!important} @keyframes fr-flicker{0%{opacity:1}40%{opacity:.55}70%{opacity:.9}100%{opacity:.6}} .fr-aurora{--fr-ring:conic-gradient(#34e0c4,#7b6cf6,#e879f9,#38bdf8,#34e0c4);--fr-glow:#7b6cf6;--fr-speed:6s} .fr-ocean{--fr-ring:conic-gradient(#0ea5e9,#1e3a8a,#22d3ee,#1d4ed8,#0ea5e9);--fr-glow:#22d3ee;--fr-speed:4.5s} .fr-rainbow{--fr-ring:conic-gradient(#ff5e7e,#ff9f43,#ffd84a,#4ade80,#38bdf8,#818cf8,#e879f9,#ff5e7e);--fr-glow:#e879f9;--fr-speed:3s} .fr-golden{--fr-ring:conic-gradient(#b8860b,#ffe08a,#fff6d0,#d4a017,#8a6508,#ffe08a,#b8860b);--fr-glow:#ffd54a;--fr-speed:7s} .fr-staff{--fr-ring:conic-gradient(#7b6cf6,#b45be0,#ffd84a,#e879f9,#7b6cf6);--fr-glow:#b45be0;--fr-speed:4s} .pic-wrap.big{--ring:4px} @media (prefers-reduced-motion:reduce){ .pic-wrap[class*="fr-"]::before,.pic-wrap[class*="fr-"]::after{animation:none!important} } /* ---------- Easter egg (↑↑↓↓←→←→BA) ---------- */ .konami-confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:60} .konami-card{position:fixed;left:50%;top:50%;z-index:61;transform:translate(-50%,-44%) scale(.92);opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.2,1.4,.4,1); display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;max-width:min(420px,calc(100vw - 32px)); background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:20px;padding:22px 26px;box-shadow:0 24px 70px rgba(0,0,0,.35);cursor:pointer} .konami-card.show{opacity:1;transform:translate(-50%,-50%) scale(1)} .konami-card .k-emoji{font-size:46px;line-height:1} .konami-card b{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:22px;letter-spacing:-.01em} .konami-card span{color:var(--muted);font-size:14.5px} @media (prefers-reduced-motion:reduce){ .konami-card{transition:opacity .2s} } /* ---------- go-live bell and pop-up ---------- */ #accountSlot{display:flex;align-items:center;gap:6px} .bell-wrap{position:relative} .bell-btn{position:relative} .bell-count{position:absolute;top:2px;right:0;min-width:17px;height:17px;border-radius:999px;background:var(--live);color:#fff;font-size:11px;font-weight:800; display:grid;place-items:center;padding:0 4px;border:2px solid var(--surface)} .bell-count[hidden]{display:none} .bell-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:25;width:300px;max-height:420px;overflow:auto;background:var(--surface);border:1px solid var(--line); border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.25);padding:8px} .bell-panel[hidden]{display:none} .bell-head{display:flex;align-items:baseline;gap:8px;padding:4px 8px 8px} .bell-head span{color:var(--muted);font-size:13px} .bell-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;color:var(--text);text-decoration:none} .bell-item:hover{background:var(--surface-2)} .bell-text{min-width:0;flex:1} .bell-text b{display:block} .bell-text small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bell-live{background:var(--live);color:#fff;font-size:11px;font-weight:800;border-radius:5px;padding:2px 6px} .bell-empty{color:var(--muted);font-size:14px;padding:6px 8px;margin:0} .bell-empty a{color:var(--link)} .bell-desktop{display:block;width:100%;margin-top:6px;border:0;border-top:1px solid var(--line);background:none;padding:10px 8px 4px;text-align:left;font-weight:700;color:var(--link)} .live-pop{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:55;display:flex;align-items:center;gap:12px;max-width:min(420px,calc(100vw - 40px)); background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--live);border-radius:14px;padding:12px 12px 12px 14px;box-shadow:0 14px 40px rgba(0,0,0,.3); transform:translateY(20px);opacity:0;transition:transform .3s,opacity .3s} .live-pop.show{transform:none;opacity:1} .live-pop .pic{width:40px;height:40px} .lp-text{min-width:0;flex:1} .lp-text b{display:block} .lp-text small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .live-pop .btn.sm{padding:6px 12px;font-size:13px;border-radius:8px;text-decoration:none} .lp-x{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;padding:0 4px}