(the .v-actions trick), so
the buttons shrink to the arrow alone — still 44px square, still reachable,
and aria-label keeps the full wording for a screen reader. At 320px the
whole header then measures 280px against a 320px screen. */
@media(max-width:600px){
.ep-nav .lbl{display:none}
.ep-nav .ep-btn{min-width:44px;padding-left:0;padding-right:0}
.ep-nav .arw{font-size:1.2rem}
}
/* At 320px the watch header still carries five 44px tap targets — the account
avatar, the logo, both pager arrows, the theme toggle and the bell — and
adds up 18px wider than the screen. None of the targets may shrink, so the
budget has to come from the header's own padding and gaps. The slim bar
gives back 8px a side and a couple of pixels per gap, which is more than
enough to bring the row inside a 320px screen.
This spill was invisible until now only because the tab-bar pass had
clamped the viewport with html{overflow:hidden}; removing that clamp (so
the page can scroll at all) is what uncovered it. */
@media(max-width:360px){
.topbar,.topbar.slim{padding-left:8px;padding-right:8px;gap:6px}
.navlinks{gap:5px}
.ep-nav{gap:5px}
}
/* ══════════════════════════════════════════════════════════════════════
THE BELL PANEL — a phone-first notification list.
Before this pass, measured on a 320px screen: the panel was a white card
in BOTH themes (a selector-list bug three hundred lines up put
`background:#fff` on it unconditionally), so in dark mode the heading was
#f1f1f1 on #ffffff — 1.07:1, invisible. It was 615px tall with six rows
and had no scroll of its own, so it ran off the bottom of the phone and
the oldest notifications could not be reached at all. Every row was the
same grey block whatever it was about, every timestamp read "9/14/2026",
a row that opened a video was a with an onclick (no keyboard, no
link semantics), there was no way to tell a new one from one she read
last week, and the empty state was one grey sentence.
What it is now: a card that keeps 12px of air each side down to 320px,
scrolls inside itself instead of off the screen, and gives each row an
icon, a label, the words, and a time in plain language. Unread rows carry
a pink rail and a dot. Everything a thumb has to hit is 44×44.
══════════════════════════════════════════════════════════════════════ */
/* ---- the card ---- */
.notif-panel{
/* 88vw left 39px of margin on one side and 12 on the other at 320px.
min() keeps a true 12px gutter each side all the way down. */
width:min(340px,calc(100vw - 24px));max-width:none;
background:var(--panel); /* the theme's surface, in both themes */
color:var(--txt);
border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--e4);
/* The top padding lives on the sticky head instead, so the head's background
covers the full width of the card as rows slide under it. */
padding:0 10px 10px;
/* The CARD is the scroller, not a box inside it. toggleNotifs() opens the
panel by writing `display:block` to the inline style, and an inline
declaration beats anything a stylesheet says without !important — so a
flex column here was silently ignored, the inner list was never shrunk
to fit, and twenty notifications spilled 1684px down the page instead of
scrolling. One scroller and a sticky head needs no display at all. */
overflow-y:auto;-webkit-overflow-scrolling:touch;
/* Never taller than the screen it hangs in — the list scrolls, the card does
not grow past the bottom of the phone. Two numbers say what the screen has
already spent: what is above the card (the header it hangs off, plus the
52px it hangs down, plus air) and what is below it. Each is set by the
thing that owns it, so nothing here has to know about live strips or tab
bars — see the two rules underneath. */
--np-above:68px;
--np-below:8px;
max-height:calc(100vh - var(--np-above) - var(--np-below));
max-height:calc(100dvh - var(--np-above) - var(--np-below));
overscroll-behavior:contain;
}
/* the LIVE strip sits above the header and takes the whole bar — and the card
hanging off it — 44px down the screen */
html.livebar-on .notif-panel{--np-above:calc(var(--livebar-h) + 68px)}
/* and on a page with the bottom tab bar, "the bottom of the phone" is the top
of that bar. The same --tabbar-clear every other full-height thing reads, so
the two cannot drift. Without this the last notification sits under
Home / Reels / Live and cannot be tapped. */
body.has-tabbar .notif-panel{--np-below:var(--tabbar-clear)}
/* ---- head: the title, and a way out that a thumb can hit ---- */
/* Sticky, so "Notifications" and the way out stay put while a long list runs
under them. The negative margins take its background out to the card's
edges, over the padding. */
.np-head{
position:sticky;top:0;z-index:2;
display:flex;align-items:center;gap:8px;
margin:0 -10px 6px;padding:10px 10px 8px 14px;
background:var(--panel);
border-bottom:1px solid var(--line);
}
html[data-theme="light"] .np-head{background:#fff}
.notif-panel .np-head b{
display:flex;align-items:center;gap:8px;margin:0;flex:1;min-width:0;
font-size:.92rem;font-weight:700;letter-spacing:-.01em;color:var(--txt);
}
.np-head b svg{width:18px;height:18px;flex:none;color:var(--mut)}
/* 44×44 of hit area, a 16px glyph inside it — the same trick the rest of the
header uses: grow the box, never the icon. The negative margin keeps the
head the height the title alone made it. */
.np-x{
width:44px;height:44px;min-height:44px;flex:none;margin:-10px -6px -10px 0;
display:inline-flex;align-items:center;justify-content:center;
background:none;border:none;border-radius:50%;cursor:pointer;
color:var(--mut);line-height:1;
}
.np-x svg{width:17px;height:17px}
.np-x:hover{background:var(--panel2);color:var(--txt)}
/* ---- the list ---- */
.np-list{display:flex;flex-direction:column;gap:6px;margin:0 -2px;padding:2px}
/* ---- a row ---- */
.nrow{
display:grid;grid-template-columns:28px 1fr;column-gap:10px;align-items:start;
position:relative;
padding:10px 12px 10px 10px;margin:0;
min-height:44px; /* the floor, even for one short line */
border-radius:var(--radius-sm);
background:var(--panel2);
font-size:.82rem;line-height:1.45;
color:var(--txt);text-decoration:none;
border-left:3px solid transparent; /* the unread rail, held in reserve */
}
/* the icon disc */
.nr-ic{
grid-row:1 / span 3;
width:28px;height:28px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:var(--panel3);color:var(--mut);flex:none;margin-top:1px;
}
.nr-ic svg{width:15px;height:15px}
.nr-main{display:block;min-width:0}
/* the label it already carried — "LIVE NOW", "PREMIERE", "New" */
.nr-kind{
display:block;font-size:.62rem;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--mut);margin-bottom:2px;
}
.nr-text{
display:block;color:var(--txt);
/* long words and pasted links must wrap, not push the card wider */
overflow-wrap:anywhere;word-break:break-word;
}
.nr-when{display:block;color:var(--mut);font-size:.7rem;margin-top:4px}
/* what kind of thing it is, in one colour each */
.nrow.nr-live .nr-ic{background:var(--pink-a14);color:var(--pink)}
.nrow.nr-live .nr-kind{color:var(--pink)}
.nrow.nr-prem .nr-ic{color:var(--pink-bright)}
.nrow.nr-video .nr-ic{color:var(--txt-dim)}
.nrow.nr-acct .nr-ic{color:var(--ok)}
/* ---- unread ---- */
/* A rail, a dot and a fractionally warmer surface: three signals, so it still
reads for someone who cannot separate the pink from the grey. */
.nrow.unread{
background:var(--panel3);
border-left-color:var(--pink);
padding-right:24px; /* room for the dot, so text never runs under it */
}
.nrow.unread .nr-text{font-weight:600}
.nr-new{
position:absolute;top:12px;right:10px;
width:8px;height:8px;border-radius:50%;background:var(--pink);
}
/* ---- a row that opens something ---- */
.nrow.link{cursor:pointer}
.nrow.link:hover{background:var(--panel3);outline:none;transform:none}
.nrow.unread.link:hover{background:var(--panel3);filter:brightness(1.08)}
.nrow.link:active{transform:scale(.99)}
.nrow.link:focus-visible{outline:2.5px solid var(--pink);outline-offset:2px}
/* ---- nothing here yet ---- */
.np-empty{
display:flex;flex-direction:column;align-items:center;text-align:center;
gap:6px;padding:26px 18px 30px;margin:0;color:var(--mut);font-size:.78rem;
line-height:1.5;
}
.np-empty-ic{
width:44px;height:44px;border-radius:50%;background:var(--panel2);
display:inline-flex;align-items:center;justify-content:center;
color:var(--mut);margin-bottom:2px;
}
.np-empty-ic svg{width:20px;height:20px}
.np-empty b{display:block;font-size:.88rem;color:var(--txt);margin:0}
/* ---- the live-alert switch above the list ---- */
.notif-panel .prow{margin-bottom:8px}
/* Its button is a real target on a phone: 26px of pill before, 44 now, with
the extra height taken out of the row's own padding so the switch does not
grow taller than the rows under it. */
@media (max-width:760px),(pointer:coarse){
.prow{padding:6px 6px 6px 10px}
.prow button{min-height:44px;padding:0 14px;display:inline-flex;align-items:center}
}
/* A live row is the one she opened the panel for — give it the accent border
the rest of the site uses for "this is happening now". */
.nrow.nr-live{outline:1px solid var(--pink-a25);outline-offset:-1px}
/* At 320 the icon column is the first thing that can go without costing a tap
target: the words get 10px back and still wrap on the same number of lines. */
@media (max-width:340px){
.notif-panel{padding:8px}
.nrow{grid-template-columns:24px 1fr;column-gap:8px;padding-left:8px}
.nr-ic{width:24px;height:24px}
.nr-ic svg{width:13px;height:13px}
}
/* The panel animates in from the bell; the refinement layer already gives it
`pop`, but it scaled from the middle of the card. From the top-right it
reads as coming out of the bell it belongs to. */
.notif-panel{transform-origin:top right}
@media (prefers-reduced-motion: reduce){
.notif-panel{animation:none}
}
/* ══════════════════════════════════════════════════════════════════════
LIVE ANNOUNCEMENT — "she is on air right now"
─────────────────────────────────────────────────────────────────────
A live is the only thing on this site that is over if you miss it, and the
treatment it had left was a 44px strip of 13px grey-on-gradient text at the
top of the page — the shape of a cookie notice, which is exactly what the
eye does with it. Two surfaces carry it now, and they are the same event
said once each rather than the same sentence said three times:
.livebar a banner across the top of every member page. Her title, how
many people are already in there, and a white Join pill that is
a real 44px target rather than a run of underlined words.
#live-hero the card at the head of the home feed — the old LIVE strip,
rebuilt. It REPLACES the generic pinned announcement for the
same live (main.js removes that one) instead of sitting above
a second, quieter copy of itself.
Both are painted on tokens, so both are right in either theme; the banner's
own ground is a fixed gradient with white on it, which is why it does not
depend on --panel and cannot repeat the white-on-white the notification
panel once had. Every animation here is switched off wholesale by the
prefers-reduced-motion rule in the refinement layer.
══════════════════════════════════════════════════════════════════════ */
.livebar{
position:fixed;top:0;left:0;right:0;z-index:200;
display:flex;align-items:center;gap:12px;
box-sizing:border-box;height:var(--livebar-h);padding:0 12px;
text-decoration:none;color:#fff;font-family:var(--font);
background:linear-gradient(100deg,#0b0b0d 0%,#2b0014 40%,var(--pink) 100%);
box-shadow:0 8px 24px -10px rgba(0,0,0,.7);
animation:lb-drop .45s var(--ease-out) both;
}
/* the dot that says "now": a live core with a ring going out of it */
.livebar .lb-pulse{
position:relative;flex:none;width:11px;height:11px;border-radius:50%;
background:#fff;box-shadow:0 0 10px rgba(255,255,255,.75);
}
.livebar .lb-pulse::after{
content:'';position:absolute;inset:-4px;border-radius:50%;
border:2px solid rgba(255,255,255,.9);
animation:lb-ping 1.9s cubic-bezier(.2,.6,.3,1) infinite;
}
.livebar .lb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.livebar .lb-kicker{
display:flex;align-items:baseline;gap:7px;
font-size:.6rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
}
.livebar .lb-count{
font-size:.66rem;font-weight:700;letter-spacing:.01em;text-transform:none;
color:rgba(255,255,255,.85);white-space:nowrap;
}
.livebar .lb-count::before{content:'·';margin-right:6px;opacity:.7}
.livebar .lb-txt{
font-size:.92rem;font-weight:700;line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.livebar .lb-go{
flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
min-height:44px;min-width:44px;padding:0 16px;box-sizing:border-box;
border-radius:var(--radius-pill);background:#fff;color:#0b0b0d;
font-size:.82rem;font-weight:800;letter-spacing:.01em;
box-shadow:0 2px 10px rgba(0,0,0,.28);
transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.livebar:hover .lb-go{transform:translateY(-1px);box-shadow:0 5px 16px rgba(0,0,0,.36)}
.livebar:active{filter:brightness(.94)}
.livebar .go-arrow{flex:none}
@keyframes lb-drop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes lb-ping{
0%{transform:scale(.7);opacity:.95}
70%{transform:scale(2.1);opacity:0}
100%{transform:scale(2.1);opacity:0}
}
/* 320px: the pill keeps its 44px target, the words around it give way */
@media(max-width:359px){
.livebar{gap:9px;padding:0 10px}
.livebar .lb-go{padding:0 12px;font-size:.78rem}
.livebar .lb-count{display:none}
}
/* ── the home feed's LIVE card ──────────────────────────────────────────
Two rows on a phone (identity + words, then a full-width button) so the
button is never squeezed into something you have to aim at; three columns
from the point there is room for it. */
#live-hero.live-strip{
display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px 12px;align-items:center;
box-sizing:border-box;width:100%;margin:0 0 16px;padding:14px;
text-decoration:none;color:var(--txt);
background:linear-gradient(100deg,var(--pink-a14),transparent 60%),var(--panel);
border:1px solid var(--pink-a25);border-radius:var(--radius);
box-shadow:var(--e1);
animation:lsx-in .45s var(--ease-out) both;
}
#live-hero.live-strip:hover{border-color:var(--pink);box-shadow:var(--e2)}
.lsx-ring{
position:relative;flex:none;width:46px;height:46px;border-radius:50%;
display:grid;place-items:center;background:var(--pink);color:#fff;
}
.lsx-ring::after{
content:'';position:absolute;inset:-5px;border-radius:50%;
border:2px solid var(--pink);
animation:lb-ping 2.1s cubic-bezier(.2,.6,.3,1) infinite;
}
.lsx-cam{display:grid;place-items:center}
.lsx-cam svg{width:22px;height:22px}
.lsx-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.lsx-kicker{
display:flex;align-items:center;gap:7px;
font-size:.62rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
color:var(--pink);
}
.lsx-dot{
flex:none;width:7px;height:7px;border-radius:50%;background:var(--pink);
animation:lsx-blink 1.5s ease-in-out infinite;
}
.lsx-count{
font-size:.68rem;font-weight:700;letter-spacing:.01em;text-transform:none;color:var(--mut);
}
.lsx-count::before{content:'·';margin-right:6px;opacity:.7}
.lsx-title{
font-size:1.02rem;font-weight:700;line-height:1.25;color:var(--txt);
overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.lsx-blurb{
font-size:.82rem;line-height:1.45;color:var(--mut);
overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.lsx-go{
grid-column:1/-1;
display:flex;align-items:center;justify-content:center;gap:8px;
min-height:44px;box-sizing:border-box;padding:0 18px;
border-radius:var(--radius-pill);background:var(--pink);color:#fff;
font-size:.86rem;font-weight:800;
transition:background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
#live-hero.live-strip:hover .lsx-go{background:var(--pink-dark)}
#live-hero.live-strip:active{transform:scale(.995)}
@media(min-width:520px){
#live-hero.live-strip{grid-template-columns:46px minmax(0,1fr) auto;padding:16px}
.lsx-go{grid-column:auto;justify-self:end;white-space:nowrap}
}
@keyframes lsx-in{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
@keyframes lsx-blink{0%,100%{opacity:1}50%{opacity:.25}}
/* The bell's live row goes somewhere now, so it should look like it does. */
.nrow.nr-live.link .nr-kind{color:var(--pink)}
/* Live switched off in the Studio (): every way into a live
disappears — links, the Studio's Live and Recordings tabs, Create's live
options — rather than leading to a page that no longer exists. */
html[data-live="0"] a[href="/live"],
html[data-live="0"] a[href^="/live/"],
html[data-live="0"] .live-only,
html[data-live="0"] [data-tab="live"],
html[data-live="0"] [data-tab="recordings"],
html[data-live="0"] #tab-live,
html[data-live="0"] #tab-recordings{display:none!important}
/* Studio app: enrolled devices */
.sa-devs{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.sa-dev{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line,#2c2c33);border-radius:12px}
.sa-dev b{display:block;font-weight:600}
.sa-dev small{display:block;color:var(--mut);font-size:.78rem;margin-top:2px}
/* Live hidden from viewers ( is her view of it): the
Studio keeps every live tool, and says plainly that members cannot see it. */
.live-host-note{display:none}
html[data-live="host"] .live-host-note{display:block;margin:12px 0 16px;padding:12px 14px;border-radius:12px;
background:var(--warn-bg,#fff4e0);color:var(--warn,#8a5a00);font-size:.9rem;line-height:1.45}
html[data-live="host"] .live-host-note a{color:inherit;text-decoration:underline}
html[data-live="host"] #create-menu .live-only span::after{content:" · not visible to viewers";opacity:.6;font-size:.8em}
/* ── Upload cover picker (segmented Auto / Pick a moment / Upload image) ── */
.up-cover-auto{color:var(--mut);font-size:.82rem;padding:10px 0 4px}
.up-cover-scrub{display:flex;align-items:center;gap:8px;margin-top:10px}
.up-cover-scrub input[type=range]{flex:1;min-width:0}
.up-cover-cands{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.up-cover-cands img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;
border:1px solid var(--line-strong);background:var(--panel2);cursor:pointer}
.up-cover-cands img:hover{outline:2px solid var(--pink);outline-offset:1px}
.up-cover-scrub .btn{flex:0 0 auto}
@media(max-width:560px){
.up-cover-cands{grid-template-columns:repeat(3,1fr)}
}
#up-cover-upload{height:auto;min-height:64px;display:flex;align-items:center;justify-content:center}
#up-cover-mode .seg-b{min-height:36px;padding:6px 14px;font-size:.78rem;white-space:nowrap}
#up-cover-vid{display:none}
/* ===== landing hero with her photo (no reel clips) =====
The photo used to be the 512px logo stretched over the whole screen with
"cover": blurry and blocky on a tablet, her face cut at forehead and chin,
and JOYCE printed across her mouth. Now the 1024px original is shown no
larger than it can stay sharp, and the words sit beside it (wide) or below
her face (phone) — never on it. */
.lp-hero.hero-photo .reel-stage.poster-only{background-color:#0d0d0e;background-repeat:no-repeat}
.lp-hero.hero-photo .reel-stage::after{opacity:.25}
/* side by side only on wide, landscape screens; any portrait screen stacks */
@media (min-width:820px) and (min-aspect-ratio:5/4){
.lp-hero.hero-photo{align-items:flex-start;text-align:left;padding-left:max(6vw,32px)}
.lp-hero.hero-photo .reel-stage.poster-only{background-size:auto 100%;background-position:right center}
.lp-hero.hero-photo .reel-veil{background:linear-gradient(90deg,#0d0d0e 0%,#0d0d0e 34%,
rgba(13,13,14,.78) 48%,rgba(13,13,14,.18) 68%,rgba(13,13,14,.08) 85%,rgba(13,13,14,.35) 100%),
linear-gradient(0deg,rgba(13,13,14,.7) 0%,rgba(13,13,14,0) 22%)}
.lp-hero.hero-photo .hero-inner{max-width:560px}
.lp-hero.hero-photo .hero-cta{margin-left:0}
}
@media (max-width:819px), (max-aspect-ratio:5/4){
.lp-hero.hero-photo{justify-content:flex-end;padding-bottom:calc(env(safe-area-inset-bottom) + 64px)}
.lp-hero.hero-photo .reel-stage.poster-only{background-size:118% auto;background-position:center 56px}
.lp-hero.hero-photo .reel-veil{background:linear-gradient(180deg,rgba(13,13,14,.55) 0%,
rgba(13,13,14,0) 16%,rgba(13,13,14,0) 38%,rgba(13,13,14,.85) 58%,#0d0d0e 68%)}
}