/* One stylesheet, one owner. Monochrome.
*
* No hue anywhere in the chrome - the whole interface is black through white,
* and hierarchy is carried by contrast, weight and space instead of colour.
* That is the discipline: with no accent hue to lean on, anything that needs
* to stand out has to earn it by being brighter, heavier or better spaced.
*
* The one thing deliberately left in colour is the artwork. Posters, backdrops
* and clearlogos ARE the colour in a media app; draining them would make the
* shelves harder to scan and is the opposite of what a poster is for. The
* badge chips, which are interface rather than content, are desaturated so
* they sit in the scheme.
*
* Ramp, so greys stay deliberate rather than drifting:
* #000 ground #0b0b0b raised #141414 panel
* #1f1f1f hairline #333 border #909090 secondary text
* #eaeaea primary text #fff emphasis / the "accent"
*/
:root {
/* surfaces */
--bg: #000;
--bg-hi: #000;
--bg2: #0b0b0b;
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--panel: rgba(15, 15, 15, .96);
--header: rgba(0, 0, 0, .55);
--elev: rgba(255, 255, 255, .055);
--elev2: rgba(255, 255, 255, .11);
--line: #1f1f1f;
--line-hi: #333;
--topH: 3.6rem;
/* Where content starts, once the bar has been cleared.
The bar is a capsule floating .5rem down from the top edge now rather than
a full-width thing anchored to it, so "clear of it" means clear of a shape
with air on every other side - and content arriving flush under it reads
as crowding in a way it did not when the bar was a boundary. One rem of
that air, stated once: the page padding, the cast jump's landing and the
sticky year label all used to write calc(var(--topH) + .5rem) separately,
which is three places to keep in agreement about one distance. */
--clear: calc(var(--topH) + 1.5rem);
/* One blur for every piece of floating chrome - the header capsule, the two
corner buttons, the phone's tab bar and the refresh panel. They are one
material, and five copies of a number are five chances to drift.
Turned down from 20px: at that strength what is behind the bar was mush
rather than a suggestion of a picture, and being able to tell something is
back there is the whole point of glass.
It costs no legibility, and that is measured rather than hoped. The .62
ground was checked at 4.53:1 with NO blur at all, because the car never
paints one - so every device that does draw a blur has always been getting
decoration on top of a ground that already passed on its own. */
--glass: blur(12px) saturate(1.25);
/* type */
--fg: #eaeaea;
--dim: #909090;
--dimmer: rgba(144, 144, 144, .62);
/* emphasis - white is the accent. There is no second hue to reach for. */
--accent: #fff;
--accent-hi: #fff;
--accent-deep: #f2f2f2; /* primary button ground */
--accent-ink: #000; /* text on that ground */
--good: #fff; /* selected / confirmed */
--good-deep: #d6d6d6;
--bad: #fff; /* failed - carried by wording, not hue */
/* Was never declared, so every var(--warn, #f5c451) fell through to a
gold literal - a third hue, in a palette that has exactly two and
gives both a meaning. "Public" is an assertion, and white is already
the word for asserted. */
--warn: #fff;
/* ---- the measure and the gutter ----
Declared here, ONCE, and never re-declared. Every "the heading sits at 60
and the grid it labels sits at 430" bug this file has had came from a
second opinion about the measure written somewhere further down. There
were five of them - 96rem in four separate places, 106rem, 92rem, and
calc(96rem + var(--pad)) - and they did not agree.
--measure is in px, not rem, on purpose. rem here is calc(15px * --ui),
and --ui was a TEXT-SIZE preference running 0.92 to 1.26, so a 96rem cap
silently moved the page between 1325px and 1814px depending on how big
someone liked their type. How WIDE the page is belongs to the screen; how
MUCH fits inside it belongs to the type knob. Those are two questions and
this token answers only the first.
3000, which is deliberately larger than any screen this runs on, so in
practice the page is edge-to-edge and the gutter alone sets the margin.
That is the answer to the actual complaint: on a media browser a wide
screen should show MORE POSTERS, not the same number in a centred column
with 469px of nothing beside it. Everything here is already
auto-fill/minmax, so width turns into items rather than into stretch.
The token stays because a governor is still wanted at the extreme: past
3000px a row of text really does become unreadable, and this is where
that is decided - once, instead of in five places that disagreed. */
--measure: 3000px;
/* One kind of unit at every width. This was 3.3% below 900px and 3.2vw
above it - a percentage of each element own container, then a slice of
the viewport - so one token produced two different gutters depending on
where it was used, and grew without limit on a wide screen. */
--pad: clamp(0.95rem, 3.2vw, 3.4rem);
/* Prose. In ch, so a measure tracks the type it is measuring rather than
the window. About 68 characters is the line a person reads without
losing the start of the next one. */
--prose: 68ch;
--prose-tight: 46ch;
--rail-card: clamp(8.9rem, 9vw, 9.8rem);
/* ---- rings ----
One idea at three strengths, so a ring always means the same kind of
thing and you can still tell which. They had drifted into five different
treatments - 2px accent, .1em at 85%, .11em at 85%, .12em solid white in
two places - which is why pointing at a card looked identical to owning
it.
faint, inside the pointer is over this
solid, OUTSIDE the keyboard is on this (outside is the tell)
solid, inside you are here
Ownership is deliberately NOT in this list. It used to take the strongest
ring on the card, which made every hover claim it; the sub-line already
reads "In library" in words, which is a better statement than a ring
anyone has to learn. */
--ring-w: .12em;
--ring-hover: rgba(255, 255, 255, .45);
--ring-focus: #fff;
--ring-here: rgba(255, 255, 255, .85);
/* One gap between rows, whatever kind of row it is. */
--row-gap: 1.7rem;
/* A still card. Sized here rather than inline because it is the one card
that never had a phone size - see the max-width: 700px block. */
--wide-card: 15.5rem;
--r-s: .5em;
--r-m: 1em;
--r-l: 1.25em;
--ease: cubic-bezier(.2, .8, .2, 1);
/* Overshoots and settles. For the handful of moments that are an ARRIVAL -
a tick landing, a heart filling, a dialog appearing - where stopping dead
on the value reads as mechanical. Never for anything that moves often:
overshoot on a control you touch repeatedly is a tic. */
--pop: cubic-bezier(.34, 1.56, .64, 1);
/* Room above a row for the card that is standing up out of it.
*
* Any element with overflow-x: auto also clips VERTICALLY - a computed
* overflow-y of visible is forced to auto the moment the other axis is not
* visible - so every horizontally scrolling row in this app is a box with a
* lid on it. A card that lifts 4px on hover was being shaved by that lid,
* and the 3D tilt made it obvious: measured worst case, a tilted poster
* reaches 5.5px above its resting top edge.
*
* Measured, not guessed, and not tight: 12.6px against a 5.5px worst case,
* so the tilt can be deepened later without this coming back.
*
* Added as padding and taken straight back off as a negative margin, so
* every row sits exactly where it sat before. The rules below fold it into
* their OWN padding rather than a later override doing it for them - each
* row stays the single place its spacing is written down. */
--lift-room: .75rem;
--shadow: .1em .1em .15em rgba(0, 0, 0, .5);
--shadow-lg: 0 14px 40px -12px rgba(0, 0, 0, .9);
--blur: blur(5px);
--blur-lg: blur(10px);
/* ---- the fixed stack ----
* Every layer pinned to the viewport, in the order it paints. There are
* thirteen of them and until now each carried a bare number chosen where it
* was written, which meant three pairs shared a value and were separated by
* nothing but source order: .top with .fixbar, .topback with .fab, and
* .sheet-pop with both full-screen viewers. Only the last of those can
* actually meet on screen - a corner panel left open while a still opens -
* and it came out right by luck.
*
* A name rather than a number, so the next thing pinned to an edge has to
* say WHERE it belongs rather than pick a figure that wins. Raising one to
* win a fight only means covering the navigation instead.
*
* --z-corner is shared on purpose: .topback and .fab are the same kind of
* control at opposite corners of the same screen and cannot overlap. */
--z-top: 40; /* the header capsule, top centre */
--z-fixbar: 42; /* a commit bar pinned to the bottom edge */
--z-backbar: 50; /* the detail page's own back circle */
--z-corner: 55; /* .topback and .fab - peers, opposite corners */
--z-tabs: 60; /* the tab bar */
--z-pop: 85; /* a corner panel; a full-screen view covers it */
--z-full: 90; /* full screen over the app: stills, the trailer */
--z-player: 100;
--z-qpop: 120; /* the query popover, over the player's chrome */
--z-stream: 160;
--z-toast: 200; /* last, always: it reports on everything above */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Any author `display` rule beats the user-agent [hidden] rule, and this app
sets display on .iconbtn (grid) and .nextup (flex) - so el.hidden = true
silently did nothing and the up-next card and the subtitle/audio buttons
showed regardless. One rule fixes the class of bug rather than each case. */
[hidden] { display: none !important; }
/* One knob scales the whole interface: --ui multiplies the rem base, and
every size in this file is expressed against it. The two selectors are
split deliberately - rem resolves against html only, so leaving body on a
literal pixel size would scale every box while the text inside it, and
anything inheriting through `font: inherit`, stayed exactly as it was. */
/* U+20C1 SAUDI RIYAL SIGN, carried rather than hoped for.
The sign is new - Unicode 17.0, September 2025 - and the car's browser does
not have it in any font it ships with, so the app fell back to printing
"SAR". Correct, readable, and not what the same figure looks like on the
phone in your pocket, which is how it got noticed.
768 bytes, and it is 768 bytes because the unicode-range is one codepoint:
this face is subset to the single glyph and the browser will never download
it for anything else, never use it for anything else, and never let it touch
the metrics of a single other character. That is also why it can sit at the
FRONT of the global stack below without being a font change - for every
codepoint except this one it does not exist.
Self-hosted, not linked. It works with no network, it is one fewer
third-party request from the car, and the file cannot change under us. Cut
from Noto Naskh Arabic (SIL Open Font License 1.1) via Google's subsetter;
its outline was checked against the one this machine already draws before
anything was wired up.
font-display: block, not swap: swap paints the fallback first, and the
fallback for a codepoint nothing has is a tofu box. Better a beat of nothing
than a rectangle. riyalMark() in app.js is what actually decides whether the
glyph is printed at all, and it only says yes once this has arrived. */
@font-face {
font-family: 'Riyal';
src: url(riyal.woff2) format('woff2');
font-display: block;
/* 400, and ONLY 400, which is the correction. This said 100 900, which is a
promise the file cannot keep: a browser told a face already covers 700
uses it as-is and will NOT synthesize a bold, so asking the mark to be
heavier did exactly nothing.
Declaring the one weight it has puts synthesis back on the table. That is
the right answer here rather than shipping a heavier cut, because there
isn't one: Google's variable 400-700 subset of this face renders U+20C1
IDENTICALLY at every weight - measured, 93,116 units of ink at 400, 500,
600 and 700 alike, against an Inter control that moves 91,615 to 126,484.
The axis does not reach this glyph. So a real bold does not exist to ship,
and 272 bytes of variable machinery would buy nothing. */
font-weight: 400;
unicode-range: U+20C1;
}
/* The interface scale. It follows the SCREEN, and nothing else.
It was a four-way setting - Compact, Default, Large, Larger - stored on the
ACCOUNT, which is the flaw that made it unfixable: picking the size the car
wanted necessarily picked it for the phone as well. There was never a value
that suited both, so the setting could only ever be wrong on one of them.
Two steps, and they are steps rather than a fluid clamp on purpose. Every
measurement in this file is reasoned in exact rem against this multiplier -
"3.5rem is the 52px floor" is a statement about a number - and a scale that
slides with the viewport turns every one of those into an unknowable. Two
values, each with a knowable px answer, is worth more here than smoothness
nobody would see.
BOTH axes have to be big, not just the width, and that is the trap this
repo has already fallen into once: a landscape phone is 844x390 and sails
past any width-only test. The car is 1921x1141 and clears both with room to
spare; a phone fails on width standing up and on height lying down.
1.26 up there because the car asked for it - measured on the real screen,
where the largest of the four old sizes was simply right. 1 down here
because that was the old Default, which is the size the phone had before an
account-wide preference dragged it up. */
:root { --ui: 1; }
@media (min-width: 1200px) and (min-height: 700px) { :root { --ui: 1.26; } }
html { font-size: calc(15px * var(--ui)); }
html, body {
margin: 0; padding: 0; min-height: 100%;
color: var(--fg);
background: #000;
font-family: 'Riyal', Inter, system-ui, sans-serif;
line-height: 1.55;
overscroll-behavior-y: none;
text-rendering: optimizeLegibility;
/* Pan in both directions, and nothing else. This is the declaration that
actually stops pinch-zoom on iOS, which ignores user-scalable=no - and
it is inherited down the tree, so no descendant can hand the gesture
back. Rails still scroll sideways (pan-x) and pages still scroll
(pan-y); only the zoom is gone. */
touch-action: pan-x pan-y;
/* Stops iOS inflating text when it decides a column is too narrow, which
it does silently and which would fight the interface-size setting. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* Kills the 300ms double-tap wait on anything tappable. */
button, a, [role="button"], .card, .epc { touch-action: manipulation; }
/* body only - naming html here too would resolve 1rem against the root's own
parent and quietly undo the calc above. */
body { font-size: 1rem; }
/* Depth without hue. A pure-black vignette plus the faintest grain: large
flat blacks band badly on an 8-bit panel, and a monochrome scheme has no
colour variation to hide it. Fixed layers, no layout cost. */
body::before {
content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(130% 95% at 50% 0%, rgba(255,255,255,.028), transparent 58%);
}
/* --grain is on :root so anything that has to paint an OPAQUE ground over this
layer can put the texture back rather than leaving a smooth hole in it. The
sticky month head that needed it went with the month grid; the token stays
because the next opaque surface over this layer will need it too. */
body::after {
content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
opacity: .022;
background-image: var(--grain);
}
#app { position: relative; z-index: 1; }
/* Badge chips are interface, not artwork, so they lose their colour with
everything else. The posters behind them keep theirs. */
/* The rule that used to sit here desaturated badge chips: `.row .chip img`.
Neither class is applied anywhere in app.js - every row in the client is
.ed-row, .cfm-row, .nu-row, .nl-row or .sr-row, and nothing is a bare
.chip - so it has matched nothing for as long as those names have been
what they are. The manifesto above still describes the intent, and
.vb img is where it is actually carried out. */
img { display: block; }
button {
font: inherit; color: inherit; border: 0; background: none;
cursor: pointer; padding: 0;
}
:focus { outline: none; }
:focus-visible {
outline: var(--ring-w) solid var(--ring-focus); outline-offset: var(--ring-w);
/* On the scale, not a loose 6px - the ring has to follow the corner of the
thing it is ringing, and every rounded thing here uses --r-s/-m/-l. */
border-radius: var(--r-s);
}
::selection { background: rgba(255, 255, 255, .26); }
/* Thin, quiet scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: var(--line-hi) transparent; }
*::-webkit-scrollbar { height: 6px; width: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }
/* ---------------------------------------------------------------- motion -- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
/* A band of light travelling across, moved with a transform rather than by
animating background-position. The old way repainted the whole element every
frame; this one moves a layer that is already painted, which is the
difference between a repaint and a composite - and on the car, which
rasterises in software, that is the difference worth having. */
/* ---- the two motions a placeholder has ----
DRIFT is the only motion a placeholder has. There was an ORBIT here too,
rotating a ring of blobs around the card, and it is gone: a circular path
inside a rectangular card draws a visible oval, which is a ring painted on
the card rather than an edge that glows. The edge is an inset shadow now and
does not move at all.
DRIFT is the line, and it does have ends, so it keeps its envelope: opacity
zero at both, which doubles as the reduced-motion rest pose. Reduced motion
zeroes duration and iteration count, so the last keyframe is what the
element wears for ever - invisible for the line, and for the glow a single
still frame of it, which is a soft coloured edge that does not move. That is
a better resting state than nothing, and it is free. */
@keyframes drift {
0% { opacity: 0; transform: translate3d(-78%, -24%, 0); }
5% { opacity: 1; }
95% { opacity: 1; }
100% { opacity: 0; transform: translate3d(78%, 24%, 0); }
}
/* THE WAY IN IS A CLASS, NOT AN ANIMATION, and the reason is measured rather
than stylistic.
It was @keyframes toastin, and it could not carry a fill-mode: the end state
has to hand the element back to the DECLARED transform, the one that knows
about --i, or a toast would keep asserting the i=0 pose and never step back
when the next one arrived. That constraint was real and the reasoning was
right.
But a from-0 keyframe with no fill-mode has a failure mode that a transition
does not: if the frame clock never ticks, the animation is pinned at 0% -
which here is opacity 0 - and the toast is INVISIBLE rather than merely
unanimated. Measured: three toasts, playState "running", currentTime 0, all
at opacity 0, in a context producing no frames. That context is not
hypothetical on a car that rasterises in software.
A class inverts the failure. .enter is the pre-state with its transition
switched off; it is applied, forced to layout, and removed in the same task
- the same shape transitions.dev's banner-stacking uses, and for the same
reason, since a rAF hop is skipped when the clock is throttled. If the clock
never ticks at all, the class is still gone and the element simply computes
to its resting style, which is visible and depth-correct. The worst case
stops being an invisible toast and becomes a toast that did not slide.
(0,2,0), so it outranks .toast's own transform and opacity. */
.toast.enter {
transition: none;
opacity: 0;
transform: translateX(-50%) translateY(12px) scale(.96);
}
/* And the way out. A toast used to be removed from the document mid-sentence,
which reads as a glitch rather than as a window closing - worst on the undo
toast, which holds a real button for six seconds and then is simply not
there. Shorter than the way in: arriving is an announcement, leaving is
not. */
@keyframes toastout {
to { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.97); }
}
.toast.out { animation: toastout .18s var(--ease) both; pointer-events: none; }
/* The one orchestrated moment: each screen's children arrive in sequence.
*
* Retimed from .55s with delays out to .32s, which meant the sixth child was
* not settled until 870ms after every navigation - and `both` fill held it at
* opacity 0 for the first 320ms of that, so a third of the wait was spent
* looking at nothing.
*
* Changing a screen is the single most frequent thing anyone does in this
* app, and it was carrying its longest animation. The rule that decides it:
* frequency of use sets duration, and a UI animation should generally stay
* under 300ms. Rare things can afford to be slow; the thing you do a hundred
* times cannot.
*
* The orchestration survives - children still arrive in order, the sequence
* still reads - it just stops being something you sit through. Safe to
* retime: nothing listens for animationend and no timer is coupled to it. */
/* ---- the measure, applied once ----
Every screen is exactly two elements: a fixed .top, and one page body
carrying .body-clear or .body-flush. So the measure goes on the page body,
and nothing inside it is ever capped again.
That is the whole point. While each block carried its own max-width, any
block that was forgotten - .qh-query, .ix-h, .hs-h, .stand, .shead - kept
the viewport left edge while its siblings moved to the centred column, and
the two drifted further apart the wider the screen got. There is no list to
keep in sync now: one element owns the measure, everything else fills its
parent. */
.screen > .body-clear,
.screen > .body-flush {
max-width: var(--measure);
margin-inline: auto;
}
.screen > * { animation: rise .3s var(--ease) both; }
/* Except the bar, which no longer arrives - it stays. It used to lift 14px and
fade on EVERY navigation, which is the "the whole thing redraws under you"
feeling in its most literal form: the one element that is meant to be the
fixed point of the app was the most obviously animated thing on it. It is
also the element carrying two backdrop-filter pseudo-elements, so not
animating its opacity is a straight win on a machine that rasterises in
software. */
/* Neither does the nav, on a phone, where it is a child of .screen rather than
of the header. Two reasons and the second is a bug: it is the same persistent
element and re-animating it on every navigation is the thing this rule
exists to stop - and `rise` ends on `transform: none` with a `both` fill,
which beats the translateX(-50%) that centres the bottom capsule. The
capsule sat with its left edge on the middle of the screen until this line
existed. */
/* And neither do the two corner buttons, for a harder reason than taste:
`rise` ends on opacity 1 and transform none with a `both` fill, and a filled
animation beats every ordinary declaration including inline styles. So while
these were in the ladder, nothing could move or fade them - not :active,
not the hide-while-the-panel-is-open rule below. They are fixed to the
viewport and never move; there was nothing for an entry animation to do
here anyway. */
.screen > .top,
.screen > .tabs,
.screen > .fab,
.screen > .topback { animation: none; }
.screen > :nth-child(1) { animation-delay: .02s; }
.screen > :nth-child(2) { animation-delay: .06s; }
.screen > :nth-child(3) { animation-delay: .10s; }
.screen > :nth-child(4) { animation-delay: .14s; }
.screen > :nth-child(5) { animation-delay: .18s; }
.screen > :nth-child(n+6) { animation-delay: .22s; }
/* .railSlot went with the Library tab's four rails; .discSlot is the one
remaining user and it holds a single rail, so the three delays below it had
nothing left to stagger. The ladder is kept as one line rather than folded
into the .screen > * rule above, because a rail arriving into a slot that is
already on screen is a different entrance from a screen laying itself out,
and only the slot version carries `both` fill. */
.discSlot > .rail { animation: rise .3s var(--ease) both; }
.discSlot > .rail:nth-child(2) { animation-delay: .05s; }
.discSlot > .rail:nth-child(3) { animation-delay: .10s; }
.discSlot > .rail:nth-child(4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
.hero.skel { display: block; height: clamp(26rem, 56.25vw, 100vh); }
/* ---- and how it leaves ----
.heroSlot had no rule of its own until now; it needs one, because the
departing skeleton is positioned against it.
The REAL hero stays in normal flow and the skeleton is the one lifted out.
That is the opposite of the transitions.dev recipe, which absolutely
positions both layers - and it is deliberate: the hero owns its own height
(clamp(26rem, 56.25vw, 100vh) here, clamp(30rem, 64vh, 38rem) in the phone
block), and taking it out of flow would collapse the slot and drag every
row on the page up by a screen. The disposable layer is the one that can
afford to be absolute.
height: auto so `inset: 0` alone decides the size. Without it the skeleton
keeps its own clamp and the two agree only by coincidence - they do agree
today, at every width, but that is two expressions that have to be kept in
step by hand, and this needs none.
z-index because both are positioned - .hero is position: relative - and the
hero comes LAST in the DOM, so paint order would otherwise put the answer
on top of the placeholder that is meant to be covering it.
(0,4,0), which is what it takes to beat `.heroSlot .hero` in the phone
block at (0,2,0); that rule sets the height this one has to override. */
.heroSlot { position: relative; }
.heroSlot > .hero.skel.handover {
position: absolute; inset: 0; height: auto; z-index: 2;
/* It is a picture of something that has already arrived. It must not take a
press meant for the thing underneath it. */
pointer-events: none;
transition: opacity .4s ease-in-out;
}
.heroSlot > .hero.skel.handover.gone { opacity: 0; }
/* A rail standing in for one still loading. The heading is real and reads at
full strength - it is true, and it is the part that tells you what is
coming. The cards under it are holes, so they sit back. */
.skelrail .track { pointer-events: none; }
.skelrail h2 { opacity: .72; }
/* A heading that is not knowable yet. Sized by a real non-breaking space
rather than by a height, so it is exactly the line the words would have
occupied at whatever font-size the breakpoint is using. */
.skelh { display: inline-block; width: 9rem; border-radius: var(--r-s); }
.skelrow { pointer-events: none; }
/* Placeholder blocks - a rail of these stands in for a row still loading. */
.skel {
position: relative; overflow: hidden;
/* #222226, which is the tile the organic-shimmer recipe is designed against
- its blobs run at .11 to .14 alpha and simply do not read on the .045
white this used to be, which is about three times darker. Stated as a
solid rather than a white overlay so a placeholder is the same surface
wherever it sits, which is what the recipe assumes. */
background: #222226;
border-radius: var(--r-s);
}
/* AND THE HOSTS THAT OUTRANK IT. .skel is one class, so any component rule
that sets its own background beats it - .listcard and .pickcard both carry
var(--elev), and .epsec .epc-art carried var(--bg2) at (0,2,0). The blobs
run at .11 to .14 alpha and do not read on either, which is how a hole can
be shimmering correctly and still look flat and empty. Restated wherever a
picture-shaped placeholder has a ground of its own; grep this comment
before adding another. */
.listcard.skel, .pickcard.skel { background: #222226; }
/* ---- the shimmer, on the diagnostics page ----
Real .skel and .artbox elements at the shapes the app draws, laid out so
they can be looked at side by side and compared. This exists because the
shimmer is the one thing on that page that is not reportable: whether it is
pretty is a judgement, and the two screens it has to be pretty on - a car
dashboard and a phone - are exactly the two this machine cannot see.
The cells are given real sizes rather than aspect-ratio, because a
placeholder that collapses to nothing here would look like the shimmer had
failed when what failed was the demo.
*/
.shimdemo {
display: flex; flex-wrap: wrap; align-items: flex-start;
gap: 1.1rem; margin: .9rem 0 .4rem;
}
/* flex: none, because these cells exist to show a SHAPE. Left to shrink, a
16:9 still turns into a tall narrow box on a phone and the label under it
becomes a lie - which is exactly how it read on the first look. */
.shimdemo .shimcell { flex: none; }
.shimcell { display: flex; flex-direction: column; gap: .45rem; }
.shimcell > span {
font-size: 0.7333rem; color: var(--dimmer); font-weight: 600; letter-spacing: .04em;
}
/* Fixed rem, not percentages, and the same at every width. These cells exist
to show a SHAPE, so the one thing they must never do is take their size from
whatever room is left: a percentage inside a flex: none cell resolves against
a cell that is sizing to its own content, which collapsed the 16:9 still into
a tall narrow box and made its label a lie. They wrap instead. */
.shimdemo .sd-still { width: 13rem; height: 7.31rem; }
.shimdemo .sd-poster { width: 7rem; height: 10.5rem; }
.shimdemo .sd-bar { width: 13rem; height: 1.1rem; }
/* .artbox is normally a frame around an and gets its radius from the
card it sits in; standing alone it needs both stated. The same tile as its
neighbours, so the only difference on show is the shimmer rather than the
surface underneath it - it looked broken beside them at the old .045. */
.shimdemo .artbox { border-radius: var(--r-s); background: #222226; }
.diag-note {
margin: .5rem 0 0; max-width: 42rem;
font-size: 0.8rem; line-height: 1.55; color: var(--dim);
}
@media (max-width: 700px) { .shimdemo { gap: .8rem; } }
/* ---- an edge that glows, and a line that crosses it ----
Three goes at this missed the same thing, so it is worth writing down what
the target actually is. Hisham named it in the end: the Siri glow. That is
not a highlight travelling over a surface - it is a WIDE, SOFT, COLOURED
LIGHT LIVING INSIDE THE BORDER, hugging the edge the whole way round and
flowing along it. A thin bright line with a faint halo is a different
object, and no amount of tuning turns one into the other.
So there are two things here now, and the glow is the important one.
THE GLOW is four big coloured blobs sitting near the edges of an oversized
layer, and the layer rotates. Because the layer is 200% of the card and
anchored at -50%, its 25% and 75% marks land exactly on the card's own
edges - so blobs placed there ride around a path that follows the card's
perimeter, and overflow: hidden keeps only the part that falls inside. The
result is light that lives in the border and travels round it.
Rotation is also why this one cannot break: 360 degrees is 0 degrees. There
is no seam to hide.
NO BLUR FILTER. A radial gradient with soft stops IS a blur, and it costs a
rasterisation once rather than a filter pass per frame - which matters on a
car that rasterises in software, and matters more because these appear six
to a row. The softness here is entirely in the colour stops.
THE LINE is the second thing and now clearly the lesser one: wider than
before and much softer, crossing the glow rather than competing with it.
It was the whole effect for three attempts and it was never going to be
enough on its own.
THE RING is a hairline, and it is under both - an inset shadow paints below
the pseudo-elements - so the glow tints it from within as it passes. That
is the "glows from the inside" part, and it needs nothing animated.
*/
/* ---- organic shimmer, from transitions.dev (Pro) ----
Bought 2026-09-07 after five home-grown attempts, each of which I could
describe and none of which looked right. What they were all missing is in
the first two lines of the recipe: the band is WAVED BY AN SVG TURBULENCE
FILTER. That is where "organic" comes from, and it is not something a
gradient can be tuned into.
The shape of it, so it is legible without reading every value:
THE BAND is six coloured blobs behind a travelling mask - a 135-degree comet
profile at 280% of the layer, slid corner to corner by mask-position. The
mask is what makes the light a band; the blobs only supply its colour. That
is inside out from every version I wrote, where the gradient WAS the band.
THE WARP sits on the wrapper, not the band, and the split is load-bearing: a
filter applies before a mask on a single element, so warping and masking the
same node warps the mask's source rather than its result.
THE EDGE BEAM is the same mask over a second stack - a 1px gradient ring, an
inner glow at 2px of blur, and a bloom at 20px - so the border lights up
exactly where the band is crossing it. Phase-locked because both animations
run the same duration on the same clock, not because anything syncs them.
WHAT WAS CHANGED, and only this:
- the surface stays ours: .skel keeps its own grey and radius rather than
their #222226 tile;
- --shimmer-scale is set per placeholder, since their geometry is tuned for
a 142px tile and ours run from a 97px rail card to a full-bleed hero;
- the reduced-motion rule also clears the warp, so the band stops rather
than freezing mid-displacement, which looks like damage.
THE CAR IS THE OPEN QUESTION, and it should be said plainly: this is built
on animated mask-position, an SVG displacement filter and a 20px blur -
the three techniques this stylesheet has refused by name for a device that
rasterises in software. It ships anyway, because five rounds of guessing
produced nothing worth keeping and because the diagnostics page carries a
live copy, so the question can be answered by looking rather than by
prediction. If it is slow there the levers, in order, are
--shimmer-glow-blur and then dropping .t-shimmer-edge. */
/* .shim is the marker: anything carrying it and the five child elements gets
the real thing. .skel has it by rule, and a picture frame gets it from
cardEl, so a placeholder does not have to be a skeleton to shimmer. */
.skel, .shim {
--shimmer-dur: 3000ms;
--shimmer-ease: ease-out;
--shimmer-band-span: 26%;
--shimmer-glow-blur: 20px;
--shimmer-glow-strength: .7;
--shimmer-ring-strength: 1;
/* Their geometry is tuned for a 142px tile; a rail card's art is about 97px
tall, which is where this default comes from. Overridden where a
placeholder is a very different size. */
--shimmer-scale: .7;
isolation: isolate;
}
.hero.skel { --shimmer-scale: 2.4; }
/* A bar is about 16px tall and the edge beam insets by 20px x scale, so at any
normal scale the ring, glow and bloom collapse through each other and the
bar just flashes. A tenth puts that inset at 2px, which fits. */
.skel.sd-bar, .vd-sk { --shimmer-scale: .1; }
/* A picture frame is a card's art box - same size as a rail card's still. */
.artbox, .st-plate, .pface { --shimmer-scale: .7; }
/* A picture frame gets the BAND only. The edge beam is a 14px blur and a 1.4px
blur on top of the band's own warp, and frames outnumber skeletons by more
than twenty to one - 385 against 6 on a cold Home - so it is the one place
where the difference between four layers and two is the difference between
the effect running and the page stuttering. The warped colour band is what
reads on a frame anyway; the beam is for a surface you are looking AT rather
than one about to be covered by a poster. */
.artbox .t-shimmer-edge,
.st-plate .t-shimmer-edge,
.pface .t-shimmer-edge { display: none; }
.shimdemo .sd-still { --shimmer-scale: 1.1; }
.shimdemo .sd-poster { --shimmer-scale: .9; }
/* ---- nothing expensive runs until it is on screen ----
A cold Home carries 385 of these at once, and every one was warping,
blurring and repainting two animated masks whether or not it was anywhere
near the viewport. That is where the frame rate went.
So the layout and the colour are unconditional - a placeholder still looks
like a placeholder the instant it exists - and the filter and the two
animations only attach under .shim-on, which an observer puts on what is
actually in view. Everything off screen costs a static gradient. */
.skel .t-shimmer, .shim .t-shimmer {
position: absolute; inset: calc(-20px * var(--shimmer-scale));
pointer-events: none;
}
/* A SKELETON is always on, and a picture frame is not. The difference is
arithmetic rather than principle: a screen holds at most about a dozen
skeletons - six in a rail, the hero, four in the diagnostics preview - and
they are built as HTML strings with no element to hand an observer. Frames
are built by cardEl one at a time and there are hundreds. A reserved row
holding twenty-eight is hushed separately, above. */
.shim-on .t-shimmer, .skel .t-shimmer {
filter: url(#t-shimmer-warp) blur(calc(5px * var(--shimmer-scale)));
}
/* ---- the warp is for skeletons, not for picture frames ----
feTurbulence into feDisplacementMap is the most expensive thing in this
recipe by a wide margin, and it is worse than its raw cost suggests: the
animated mask lives INSIDE the filtered subtree, so the displacement field
is not computed once and reused - it is recomputed on every frame of the
sweep. WebKit is the least forgiving about that, which is what "short of
smooth on my iPhone" is.
So a frame keeps the blur and loses the warp. What is lost is the ripple
along the band's edge; what is kept is the colour, the sweep and the soft
edge - and a frame wears it for the second or two before its poster lands,
which is not long enough to study a rippling boundary.
Skeletons keep the whole thing. There are about a dozen at most, they are
what you are actually looking at while a row loads, and a dozen displacement
fields is a bill any of these devices can pay. */
/* .shim-on, not bare. Written unqualified first, and it put a filtered layer
on all 385 frames at once - off-screen ones included - which is the very
thing the gate exists to prevent. A blur is cheaper than a displacement
field; four hundred of them are not cheap at all. */
.artbox.shim-on .t-shimmer,
.st-plate.shim-on .t-shimmer,
.pface.shim-on .t-shimmer { filter: blur(calc(5px * var(--shimmer-scale))); }
/* The diagnostics preview's frame is exempt from the gate, and deliberately.
That page exists to be LOOKED at - it is the only way to see this effect on
the car or the phone - so the one cell there must not depend on a scroll
sweep having run. It is a single element on a page nobody keeps open. */
.shimdemo .artbox .t-shimmer { filter: blur(calc(5px * var(--shimmer-scale))); }
.shimdemo .artbox .t-shimmer-band {
animation: t-shimmer-sweep var(--shimmer-dur) var(--shimmer-ease) infinite;
}
.skel .t-shimmer-band, .shim .t-shimmer-band {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 49.45% 38.46% at 20% 15%, rgba(40, 140, 255, .14), transparent),
radial-gradient(ellipse 43.96% 32.97% at 65% 25%, rgba(255, 50, 100, .13), transparent),
radial-gradient(ellipse 38.46% 43.96% at 30% 55%, rgba(50, 200, 80, .12), transparent),
radial-gradient(ellipse 49.45% 38.46% at 75% 65%, rgba(180, 40, 240, .13), transparent),
radial-gradient(ellipse 38.46% 32.97% at 45% 85%, rgba(255, 120, 40, .12), transparent),
radial-gradient(ellipse 32.97% 32.97% at 10% 85%, rgba(30, 185, 170, .11), transparent),
linear-gradient(rgba(90, 90, 100, .05), rgba(90, 90, 100, .05));
-webkit-mask-image: linear-gradient(135deg,
transparent 0%,
transparent calc(50% - var(--shimmer-band-span) * .8),
rgba(255, 255, 255, .25) calc(50% - var(--shimmer-band-span) * .45),
rgba(255, 255, 255, .7) calc(50% - var(--shimmer-band-span) * .18),
#fff 50%,
rgba(255, 255, 255, .7) calc(50% + var(--shimmer-band-span) * .18),
rgba(255, 255, 255, .25) calc(50% + var(--shimmer-band-span) * .45),
transparent calc(50% + var(--shimmer-band-span) * .8),
transparent 100%);
mask-image: linear-gradient(135deg,
transparent 0%,
transparent calc(50% - var(--shimmer-band-span) * .8),
rgba(255, 255, 255, .25) calc(50% - var(--shimmer-band-span) * .45),
rgba(255, 255, 255, .7) calc(50% - var(--shimmer-band-span) * .18),
#fff 50%,
rgba(255, 255, 255, .7) calc(50% + var(--shimmer-band-span) * .18),
rgba(255, 255, 255, .25) calc(50% + var(--shimmer-band-span) * .45),
transparent calc(50% + var(--shimmer-band-span) * .8),
transparent 100%);
-webkit-mask-size: 280% 280%; mask-size: 280% 280%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: 100% 100%; mask-position: 100% 100%;
}
.shim-on .t-shimmer-band, .skel .t-shimmer-band {
animation: t-shimmer-sweep var(--shimmer-dur) var(--shimmer-ease) infinite;
}
.skel .t-shimmer-edge, .shim .t-shimmer-edge {
position: absolute; inset: calc(-20px * var(--shimmer-scale));
z-index: 1; opacity: var(--shimmer-glow-strength); pointer-events: none;
-webkit-mask-image: linear-gradient(135deg,
transparent 0%,
transparent calc(50% - var(--shimmer-band-span) * 1.4),
rgba(255, 255, 255, .06) calc(50% - var(--shimmer-band-span) * 1),
rgba(255, 255, 255, .18) calc(50% - var(--shimmer-band-span) * .6),
rgba(255, 255, 255, .45) calc(50% - var(--shimmer-band-span) * .25),
#fff 50%,
rgba(255, 255, 255, .5) calc(50% + var(--shimmer-band-span) * .18),
transparent calc(50% + var(--shimmer-band-span) * .35),
transparent 100%);
mask-image: linear-gradient(135deg,
transparent 0%,
transparent calc(50% - var(--shimmer-band-span) * 1.4),
rgba(255, 255, 255, .06) calc(50% - var(--shimmer-band-span) * 1),
rgba(255, 255, 255, .18) calc(50% - var(--shimmer-band-span) * .6),
rgba(255, 255, 255, .45) calc(50% - var(--shimmer-band-span) * .25),
#fff 50%,
rgba(255, 255, 255, .5) calc(50% + var(--shimmer-band-span) * .18),
transparent calc(50% + var(--shimmer-band-span) * .35),
transparent 100%);
-webkit-mask-size: 280% 280%; mask-size: 280% 280%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: 100% 100%; mask-position: 100% 100%;
}
.shim-on .t-shimmer-edge, .skel .t-shimmer-edge {
animation: t-shimmer-sweep var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer-sweep {
0% { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
100% { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; }
}
.skel .t-shimmer-edge-ring, .shim .t-shimmer-edge-ring,
.shim .t-shimmer-edge-glow,
.skel .t-shimmer-edge-bloom, .shim .t-shimmer-edge-bloom {
position: absolute; inset: calc(20px * var(--shimmer-scale));
border-radius: var(--r-s); pointer-events: none;
}
.skel .t-shimmer-edge-ring, .shim .t-shimmer-edge-ring {
padding: calc(1px * var(--shimmer-scale));
opacity: var(--shimmer-ring-strength);
background:
radial-gradient(ellipse 29.58% 16.90% at 33% -7.4%, rgba(255, 50, 100, .62), transparent),
radial-gradient(ellipse 25.35% 14.79% at 12% -5%, rgba(40, 140, 255, .48), transparent),
radial-gradient(ellipse 16.90% 29.58% at 2.1% 68.3%, rgba(50, 200, 80, .55), transparent),
radial-gradient(ellipse 8.45% 14.79% at 2.1% 68.3%, rgba(30, 185, 170, .44), transparent),
radial-gradient(ellipse 76.06% 13.38% at 74.4% 100%, rgba(100, 70, 255, .58), transparent),
radial-gradient(ellipse 35.92% 11.27% at 55% 100%, rgba(40, 140, 255, .51), transparent),
radial-gradient(ellipse 30.99% 13.38% at 93.9% 0%, rgba(255, 120, 40, .65), transparent),
radial-gradient(ellipse 11.27% 17.61% at 100% 27.1%, rgba(240, 50, 180, .5), transparent),
radial-gradient(ellipse 21.83% 20.42% at 100% 27.1%, rgba(180, 40, 240, .56), transparent),
linear-gradient(rgba(90, 90, 100, .22), rgba(90, 90, 100, .22));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
}
.skel .t-shimmer-edge-glow, .shim .t-shimmer-edge-glow {
background:
radial-gradient(ellipse 27.46% 14.79% at 33% -7.4%, rgba(255, 50, 100, .34), transparent),
radial-gradient(ellipse 23.24% 12.68% at 12% -5%, rgba(40, 140, 255, .28), transparent),
radial-gradient(ellipse 14.79% 27.46% at 2.1% 68.3%, rgba(50, 200, 80, .3), transparent),
radial-gradient(ellipse 6.34% 12.68% at 2.1% 68.3%, rgba(30, 185, 170, .25), transparent),
radial-gradient(ellipse 73.24% 11.97% at 74.4% 100%, rgba(100, 70, 255, .32), transparent),
radial-gradient(ellipse 33.80% 9.15% at 55% 100%, rgba(40, 140, 255, .28), transparent),
radial-gradient(ellipse 28.87% 11.97% at 93.9% 0%, rgba(255, 120, 40, .35), transparent),
radial-gradient(ellipse 9.15% 16.20% at 100% 27.1%, rgba(240, 50, 180, .28), transparent),
radial-gradient(ellipse 19.72% 18.31% at 100% 27.1%, rgba(180, 40, 240, .3), transparent),
radial-gradient(ellipse 25.35% 25.35% at 0% 0%, rgba(90, 90, 100, .14), transparent 70%),
radial-gradient(ellipse 25.35% 25.35% at 100% 0%, rgba(90, 90, 100, .14), transparent 70%),
radial-gradient(ellipse 25.35% 25.35% at 0% 100%, rgba(90, 90, 100, .14), transparent 70%),
radial-gradient(ellipse 25.35% 25.35% at 100% 100%, rgba(90, 90, 100, .14), transparent 70%);
box-shadow: inset 0 0 calc(14px * var(--shimmer-scale)) calc(1px * var(--shimmer-scale)) rgba(90, 90, 100, .12);
filter: blur(calc(2px * var(--shimmer-scale)));
-webkit-mask-image:
linear-gradient(#fff, transparent calc(44px * var(--shimmer-scale)), transparent calc(100% - 44px * var(--shimmer-scale)), #fff),
linear-gradient(to right, #fff, transparent calc(44px * var(--shimmer-scale)), transparent calc(100% - 44px * var(--shimmer-scale)), #fff);
-webkit-mask-composite: source-over;
mask-image:
linear-gradient(#fff, transparent calc(44px * var(--shimmer-scale)), transparent calc(100% - 44px * var(--shimmer-scale)), #fff),
linear-gradient(to right, #fff, transparent calc(44px * var(--shimmer-scale)), transparent calc(100% - 44px * var(--shimmer-scale)), #fff);
mask-composite: add;
}
.shim .t-shimmer-edge-bloom {
background:
radial-gradient(ellipse 38.73% 21.83% at 33% -7.4%, rgba(255, 50, 100, .4), transparent),
radial-gradient(ellipse 33.10% 19.01% at 12% -5%, rgba(40, 140, 255, .34), transparent),
radial-gradient(ellipse 21.83% 38.73% at 2.1% 68.3%, rgba(50, 200, 80, .38), transparent),
radial-gradient(ellipse 98.59% 17.61% at 74.4% 100%, rgba(100, 70, 255, .4), transparent),
radial-gradient(ellipse 46.48% 14.08% at 55% 100%, rgba(40, 140, 255, .35), transparent),
radial-gradient(ellipse 40.85% 17.61% at 93.9% 0%, rgba(255, 120, 40, .44), transparent),
radial-gradient(ellipse 28.17% 26.76% at 100% 27.1%, rgba(180, 40, 240, .38), transparent);
box-shadow: inset 0 0 calc(var(--shimmer-glow-blur) * 3 * var(--shimmer-scale))
calc(var(--shimmer-glow-blur) / 2 * var(--shimmer-scale)) rgba(90, 90, 100, .1);
filter: blur(calc(var(--shimmer-glow-blur) * var(--shimmer-scale)));
-webkit-mask-image:
linear-gradient(#fff, transparent calc(26px * var(--shimmer-scale)), transparent calc(100% - 26px * var(--shimmer-scale)), #fff),
linear-gradient(to right, #fff, transparent calc(26px * var(--shimmer-scale)), transparent calc(100% - 26px * var(--shimmer-scale)), #fff);
-webkit-mask-composite: source-over;
mask-image:
linear-gradient(#fff, transparent calc(26px * var(--shimmer-scale)), transparent calc(100% - 26px * var(--shimmer-scale)), #fff),
linear-gradient(to right, #fff, transparent calc(26px * var(--shimmer-scale)), transparent calc(100% - 26px * var(--shimmer-scale)), #fff);
mask-composite: add;
}
/* The wrapper as well as the two animated layers: without clearing the filter
the warp keeps its displacement and the band sits frozen mid-wave, which
reads as damage rather than as stillness. */
@media (prefers-reduced-motion: reduce) {
.skel .t-shimmer-band, .shim .t-shimmer-band,
.skel .t-shimmer-edge, .shim .t-shimmer-edge { animation: none; }
.skel .t-shimmer, .shim .t-shimmer { filter: none; }
}
/* A placeholder with no shimmer markup inside it - a text bar, a heading, a
verdict rule - keeps the plain sweep it has always had. */
.skel:not(:has(.t-shimmer))::before {
content: ''; position: absolute; top: -30%; left: -55%; width: 210%; height: 160%;
background: linear-gradient(112deg,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, .03) 41%,
rgba(255, 255, 255, .14) 50%,
rgba(255, 255, 255, .04) 59%,
rgba(255, 255, 255, 0) 70%);
animation: drift 3.4s linear infinite;
}
/* Both of these were written when .skel carried two shimmer pseudo-elements and
a bar was too short to hold both. It carries none now - the organic shimmer
is child ELEMENTS, and ::before is the plain sweep a bar falls back to - so
turning it off leaves a bar with nothing at all, which is what it had. */
/* ---------------------------------------------------------------- and the
same treatment for real pictures, for the gap between a frame appearing and
the image landing in it. Posters come from TMDB and stills from a server on
the end of a tunnel, so that gap is real - it was a dark hole before, which
on a wall of them reads as a broken grid rather than as a loading one.
.lit is put on the frame by imgSettled() the moment the image resolves,
whether it loaded or failed. */
.artbox, .st-plate, .pface { position: relative; overflow: hidden; }
/* ONE layer here, not two, and not by choice: .artbox::after is already the
card's outline and its ownership ring, so there is no second slot to put a
core in. It gets the same diagonal, the same asymmetry and the same rest -
just the wash and the core folded into a single gradient, which is a little
flatter than a skeleton's and is the closest this slot allows. */
/* :not(:has(.t-shimmer)) is the whole point of this selector now. cardEl gives
every frame the organic shimmer's markup, and without this guard the frame
ran BOTH - the licensed shimmer and the plain sweep it was meant to replace,
on top of each other, on 385 frames at once. The .skel rule below has always
carried the guard; this one was widened to the shimmer and never given it. */
.artbox:not(:has(.t-shimmer))::before,
.st-plate:not(:has(.t-shimmer))::before,
.pface:not(:has(.t-shimmer))::before {
content: ''; position: absolute; z-index: 1; pointer-events: none;
top: -30%; left: -55%; width: 210%; height: 160%;
/* One layer here - .artbox::after is already the outline and the ownership
ring - so the wash and the core fold into a single gradient. Colourless on
purpose: this one waits over artwork that is about to arrive, and the
picture is the colour. */
background: linear-gradient(114deg,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, .03) 41%,
rgba(255, 255, 255, .20) 50%,
rgba(255, 255, 255, .065) 57%,
rgba(255, 255, 255, 0) 70%);
animation: drift 3.4s linear infinite;
}
.artbox.lit::before, .st-plate.lit::before,
.pface.lit::before { content: none; }
/* And the shimmer's own elements, for the same two reasons ::before had: a
frame with its picture in it is not waiting, and a frame that will never
hold one must not promise otherwise. */
.artbox.lit .t-shimmer, .artbox.lit .t-shimmer-edge,
.st-plate.lit .t-shimmer, .st-plate.lit .t-shimmer-edge,
.pface.lit .t-shimmer, .pface.lit .t-shimmer-edge { display: none; }
/* A frame with no picture in it is not waiting for one. A history plate with
nothing to draw shows an initial instead - it has no that will ever
fire, so without this it would shimmer for as long as the screen is open
and promise something that is never coming.
THE SECOND :not() IS WEIGHT, NOT MEANING. Do not trim it back.
This rule shipped without it and never fired once. :has() takes its
argument's own weight, so the sweep rule above - .artbox:not(:has(.t-shimmer))
- is (0,2,1) on a CLASS, while this was (0,1,2) on a TYPE. It lost every
time, silently, and the frames it was written to quiet shimmered for ever:
measured, four of ten cards on an airing season, plus five behind the front
card of a still pile.
It is a regression rather than an oversight. Before :not(:has(.t-shimmer))
was added above - to stop 385 frames running the old sweep and the organic
shimmer at once - the sweep rule was .artbox::before at (0,1,1) and this
guard beat it. Fixing the double shimmer killed the never-shimmer guard, and
the two are 29 lines apart.
(0,2,2) now, which beats (0,2,1) outright rather than tying on source order
the way .lit does. Same over-specification, for the same reason, as the
index's own hole rule further down. */
.artbox:not(:has(img)):not(:has(.t-shimmer))::before,
.st-plate:not(:has(img)):not(:has(.t-shimmer))::before,
.pface:not(:has(img)):not(:has(.t-shimmer))::before { content: none; }
.artbox:not(:has(img)) .t-shimmer, .artbox:not(:has(img)) .t-shimmer-edge,
.st-plate:not(:has(img)) .t-shimmer, .st-plate:not(:has(img)) .t-shimmer-edge,
.pface:not(:has(img)) .t-shimmer, .pface:not(:has(img)) .t-shimmer-edge { display: none; }
/* The picture fades up rather than snapping in, so the handover from shimmer
to image is one movement instead of two. */
.artbox img, .st-plate img, .pface img {
opacity: 0; transition: opacity .35s var(--ease);
}
.artbox img.ld, .st-plate img.ld, .pface img.ld { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.artbox img, .st-plate img, .pface img { opacity: 1; transition: none; }
}
/* ---- the dot matrix ----
Sixteen dots on a four-by-four grid pulsing as a diagonal wave, inside a
container that snaps a quarter turn every cycle - so the wave enters from a
different corner four times before the whole thing repeats. Four patterns
out of one keyframe and one steps().
steps(4) rather than a smooth rotation, deliberately: a grid that spins is a
spinner again, and not being one is the entire point. It holds each
orientation still and changes between them.
Dots move opacity and transform; the turn is a transform. Nothing here wants
a filter, which is the only reason it paints in the car at all. */
.mdl { display: grid; place-items: center; }
.mdl > span {
display: grid; grid-template-columns: repeat(4, 1fr); gap: .26rem;
animation: mdlTurn 6.4s steps(4, end) infinite;
}
.mdl i {
width: .3rem; height: .3rem; border-radius: 50%; background: currentColor;
opacity: .18; animation: mdlDot 1.6s var(--ease) infinite;
}
/* Delay by row plus column, so the wave crosses corner to corner. The
container's quarter turn is what makes that one wave into four. */
.mdl i:nth-child(1) { animation-delay: 0s; }
.mdl i:nth-child(2), .mdl i:nth-child(5) { animation-delay: .08s; }
.mdl i:nth-child(3), .mdl i:nth-child(6), .mdl i:nth-child(9) { animation-delay: .16s; }
.mdl i:nth-child(4), .mdl i:nth-child(7),
.mdl i:nth-child(10), .mdl i:nth-child(13) { animation-delay: .24s; }
.mdl i:nth-child(8), .mdl i:nth-child(11), .mdl i:nth-child(14) { animation-delay: .32s; }
.mdl i:nth-child(12), .mdl i:nth-child(15) { animation-delay: .4s; }
.mdl i:nth-child(16) { animation-delay: .48s; }
@keyframes mdlDot {
0%, 55%, 100% { opacity: .18; transform: scale(.82); }
22% { opacity: 1; transform: scale(1.18); }
}
@keyframes mdlTurn { to { transform: rotate(360deg); } }
/* Still, but not absent: the grid stays, at the brightness it spends most of
its cycle at, so the space does not read as empty. */
@media (prefers-reduced-motion: reduce) {
.mdl > span, .mdl i { animation: none; }
.mdl i { opacity: .4; }
}
/* ----------------------------------------------------------------- boot -- */
.boot { display: grid; place-items: center; height: 100vh; }
/* WHEN THE BOOT SCREEN HAS SOMETHING TO SAY. The traps that add this live in
index.html, inline and dependency-free, because a black page with four rows
of dots and no console is what a failed module looks like on a phone.
The dots go when the message arrives - they promise something is coming, and
once this is on screen nothing is. */
.boot.failed .mdl { display: none; }
.bootfail {
max-width: 26rem; padding: 0 1.5rem; text-align: center;
font-size: .95rem; line-height: 1.5; color: var(--fg, #fff);
}
.bootfail p { margin: 0 0 .5rem; }
/* The message itself is the only thing here worth reading twice, so it is the
only thing not dimmed. The location under it is for a photograph, not for
the reader. */
.bootfail p:first-child { font-weight: 600; }
.bootfail p:nth-child(2) { opacity: .75; word-break: break-word; }
.bootfail p:nth-child(3) { opacity: .45; font-size: .8rem; word-break: break-all; }
.spin {
width: 2.2rem; height: 2.2rem; border-radius: 50%;
border: .12em solid var(--line-hi); border-top-color: #fff;
animation: spin .8s linear infinite;
}
/* ---- spinner into a check ----
One box, two occupants. The ring turns while the work is out, then drops
away as the tick draws itself in behind it with stroke-dashoffset - one
path, so the line follows the stroke the way a hand would.
A button that says "Saving..." and then says "Apply" again has told you
nothing about whether it worked, and the toast carrying the real answer is
at the far end of the screen. */
/* ---- the watch editor ----
A sheet listing every season of a show, each expandable into its episodes,
where taps build a DRAFT and nothing is written until Apply.
Built on .strmwrap/.strmdlg rather than on anything new, which is most of
why it costs so little: that shell already carries the flat rgba backdrop
with no backdrop-filter, sheetup/sheetdown on transform and opacity only,
the safe-area padding so the last row clears a home indicator, and the two
height clamps for a phone and for a car in landscape.
No hue enters. Cyan means you narrowed a query and this asks none; amber
means results are hidden and this hides nothing - it lists every season a
show has. Selection is carried by FORM: a filled white disc with a black
tick for watched, a hollow ring for not. The disc is .epc-mark's own shape
at another size, so a tick means one thing in the grid and in here. */
.we-body {
overflow-y: auto; overscroll-behavior: contain;
-webkit-overflow-scrolling: touch; padding: 0 0 .3rem;
}
.we-row {
display: flex; align-items: center; gap: .1rem;
min-height: max(3.5rem, 52px);
/* On the row, NOT on .stage-on/.stage-off. Declared on the staged classes
the transition arrives in the same style change as the value it is meant
to animate, and the shadow latches at its from-value - transparent, zero
offset - and never travels. Measured: with the transition suppressed the
same rule paints rgb(255,107,107) 3.36px inset, and with it declared on
the state it stays rgba(0,0,0,0) 0px for ever. A transition has to be in
force BEFORE the thing it transitions changes. */
transition: box-shadow .18s var(--ease), background .18s var(--ease);
}
/* Between seasons, not between the episodes inside one, so the grouping is
done by the rule and not by a box around anything. */
.we-sn + .we-eps { border-bottom: 0; }
.we-sn { border-top: 1px solid var(--line); }
.we-body > .we-grp:first-child > .we-sn { border-top: 0; }
/* ---- the box, and the two colours in this sheet ----
Two hues enter here and nowhere else, and they earn it by saying something
nothing else on the row can: WHICH WAY a change is going. Green is a play
about to be recorded, red is one about to be deleted, and the difference
between those two is the only thing in this sheet that cannot be undone.
They are on the staged state only - the resting states stay white and grey
like the rest of the app, so an untouched sheet is as monochrome as every
other screen and colour appears exactly when there is something to lose.
Deliberately not --good/--bad, which this app sets to #fff on purpose:
those mean "confirmed" and "failed" everywhere else, and this is neither.
Scoped to .we so nothing outside changes. */
.we {
--we-add: #4ADE80;
--we-del: #FF6B6B;
}
.we-box {
flex: none; width: max(3.25rem, 48px); height: max(3.25rem, 48px);
display: grid; place-items: center; background: none; border: 0; padding: 0;
color: var(--fg);
}
.we-box i {
position: relative; display: grid; place-items: center;
width: 1.55rem; height: 1.55rem; border-radius: 99px;
box-sizing: border-box;
transition: background .18s var(--ease), box-shadow .18s var(--ease);
box-shadow: inset 0 0 0 .1rem var(--line-hi);
}
.we-glyph { display: grid; place-items: center; }
.we-box svg.we-ring + .we-glyph { position: absolute; inset: 0; }
.we-glyph svg {
width: .82rem; height: .82rem; opacity: 0;
transform: scale(.6) rotate(-25deg);
transition: opacity .2s var(--ease), transform .24s var(--pop);
}
.we-box.on i { background: #fff; box-shadow: inset 0 0 0 .1rem #fff; color: #000; }
.we-box.on .we-glyph svg { opacity: 1; transform: none; }
/* The progress ring, which replaces a single bar that stood in for every
partial state - 2 of 13 and 12 of 13 drew the same glyph. An arc is the
number itself, and stroke-dashoffset transitions, so it travels when a
tick moves it. The season box carries it; an episode is on or off and has
nothing to draw. */
.we-box .we-ring {
position: absolute; inset: -.12rem; width: auto; height: auto;
transform: rotate(-90deg); overflow: visible;
}
.we-box .we-trk, .we-box .we-arc {
fill: none; stroke-width: 3.4; stroke-linecap: round;
}
/* A faint full circle behind the arc, so a part-watched season reads as a
ring that is partly filled rather than a crescent floating on its own.
Only under the arc - a complete or empty season has a disc outline from
.we-box i and does not want a second circle on top of it. */
.we-box .we-trk { stroke: transparent; }
.we-sbox.part .we-trk { stroke: var(--line-hi); }
.we-box .we-arc {
stroke: var(--dim);
transition: stroke-dashoffset .42s var(--ease), stroke .18s;
}
.we-sbox.part i { box-shadow: inset 0 0 0 .1rem transparent; }
.we-sbox.part .we-arc { stroke: #fff; }
.we-box.on .we-arc { stroke: transparent; }
/* Staged. The ring and the disc take the direction's colour, so a season you
are about to empty is red before you reach the confirmation that says so. */
.we-box.to-add i { background: var(--we-add); box-shadow: inset 0 0 0 .1rem var(--we-add); color: #06331a; }
.we-box.to-add .we-arc { stroke: var(--we-add); }
.we-box.to-del i { background: none; box-shadow: inset 0 0 0 .1rem var(--we-del); }
.we-box.to-del .we-glyph svg { opacity: 0; transform: scale(.6); }
.we-box.to-del .we-arc { stroke: var(--we-del); }
/* The press, and it is the only motion on a tap: a squash that settles with
--pop's overshoot, on transform alone. */
@keyframes we-pop {
0% { transform: scale(1); }
38% { transform: scale(.86); }
100% { transform: scale(1); }
}
.we-box.pop i { animation: we-pop .34s var(--pop); }
.we-box:active i { background: var(--elev2); }
.we-open {
flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .55rem;
background: none; border: 0; padding: .35rem .6rem .35rem .1rem;
text-align: left; color: var(--fg); min-height: max(3.5rem, 52px);
}
.we-open b { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
.we-sub {
font-size: .75rem; color: var(--dim); font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* The season chip's own bar, restated rather than reused: the rules for it
are scoped `.epsec .sn-bar` and this sheet is not inside .epsec, so the
element rendered as an empty inline span. Same height, same track, same
--p, so a season reads identically on the rail and in here. */
.we-open .sn-bar {
flex: 1 1 3rem; max-width: 7rem; align-self: center;
height: .28rem; border-radius: 99px; overflow: hidden;
background: rgba(255, 255, 255, .16);
}
.we-open .sn-bar i {
display: block; height: 100%; background: #fff;
transform: scaleX(var(--p, 0)); transform-origin: left;
transition: transform .2s var(--ease);
}
.we-chev {
flex: none; width: .55rem; height: .55rem; margin-left: auto;
border-right: .12rem solid var(--dimmer); border-bottom: .12rem solid var(--dimmer);
transform: rotate(45deg); transition: transform .2s var(--ease);
}
.we-grp.open .we-chev { transform: rotate(-135deg); }
/* Episodes. One rhythm, and the numbers line up: a fixed numeral column and a
fixed date column make true vertical rules down the sheet, so a half-watched
season reads as a waterline - the discs stop and the rings begin - without
anyone reading a number. */
.we-eps { display: none; }
.we-grp.open .we-eps { display: block; }
.we-ep .we-tog {
flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: .55rem;
background: none; border: 0; padding: .3rem .6rem .3rem 0; text-align: left;
color: var(--fg); min-height: max(3.5rem, 52px);
}
.we-n {
flex: none; width: 2.1rem; font-size: .8rem; font-weight: 800;
color: var(--dim); font-variant-numeric: tabular-nums;
}
.we-t {
flex: 1 1 auto; min-width: 0; font-size: .875rem;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.we-tail {
flex: none; font-size: .72rem; color: var(--dimmer);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.we-ep.soon .we-t, .we-ep.soon .we-n { color: var(--dimmer); }
/* Staged rows say so in the row, not only in the total at the foot. A left
rule in the direction's colour, so the shape of an edit reads straight down
the column - a block of green is a season going on, a block of red is one
coming off. */
.we-row.stage-on { box-shadow: inset .2rem 0 0 var(--we-add); }
.we-row.stage-off { box-shadow: inset .2rem 0 0 var(--we-del); }
.we-ep.stage-off .we-t { text-decoration: line-through; color: var(--dim); }
/* Episodes arrive in order when a season opens. Opacity and transform only,
40ms apart and capped at ten by the caller, and the whole thing is off
under reduced motion by the global block that zeroes durations AND delays. */
@keyframes we-in {
from { opacity: 0; transform: translateY(.35rem); }
to { opacity: 1; transform: none; }
}
.we-eps.in > * { animation: we-in .26s var(--ease) both; animation-delay: calc(var(--i, 10) * 40ms); }
/* Clearing a season from inside it, naming what it does and how many. The
season's own box does this too now; this row stays because it says the
number out loud, which a box cannot. */
.we-clear {
width: 100%; min-height: max(3.2rem, 48px);
display: flex; align-items: center; gap: .5rem;
background: none; border: 0; padding: .2rem .6rem .2rem 1.1rem;
color: var(--dim); font-size: .8rem; font-weight: 700; text-align: left;
}
.we-clear:active { opacity: .7; }
.we-clear.on { color: var(--fg); }
.we-clear i {
flex: none; width: 1.1rem; height: 1.1rem; border-radius: 99px;
border: .1rem solid var(--line-hi); box-sizing: border-box;
}
.we-clear.on { color: var(--we-del); }
.we-clear.on i { background: var(--we-del); border-color: var(--we-del); }
/* The foot. Says what the draft costs before Apply is pressed, and Apply is
dead until there is something to do. */
.we-foot {
flex: none; display: flex; align-items: center; gap: .7rem;
padding: .7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--line); background: var(--bg2);
}
.we-cost {
flex: 1 1 auto; min-width: 0; font-size: .8rem; color: var(--dim);
font-variant-numeric: tabular-nums;
}
.we-cost b { color: var(--fg); font-weight: 800; }
.we-cost .add { color: var(--we-add); }
.we-cost .del { color: var(--we-del); }
.we-foot .btn { flex: none; min-height: max(3.2rem, 52px); }
.we-foot .btn[disabled] { opacity: .4; }
@media (max-width: 700px) {
.we-open .sn-bar { display: none; }
.we-t { font-size: .84rem; }
/* Four things do not fit across 375px: the title wrapped to two lines and
pushed the show name into two more. The show name goes - this sheet is
opened from that show's own page, so it is the one item on the line the
reader cannot be in any doubt about. */
.we .sd-scope { display: none; }
.we .sd-hd { gap: .5rem; }
.we .sd-n { margin-left: auto; }
}
/* ---- the success check ----
Transitions.dev's "Success check", with its blur dropped: filter does not
paint on the car, so the published version's fade-in-from-blur would be an
effect that only ever happened on a desk. Opacity, rotate and a short bob
are what is left, and those are the two things that rasteriser composites
cheaply.
The travel is 10px rather than the snippet's 40. It lands inside a button
here, not alone on a page, so 40 starts the mark outside the pill.
Not folded into .s2c above, which is a spinner MORPHING into a tick and is
a different event: that one says "the thing you started has finished", this
one says "it worked". The first is worth watching, the second is worth
catching out of the corner of an eye. */
.okchk {
display: inline-grid; place-items: center;
width: 1.15em; height: 1.15em; margin-right: .35rem;
transform-origin: center; opacity: 0;
}
.okchk svg { display: block; overflow: visible; width: 100%; height: 100%; }
.okchk svg path { stroke-dasharray: 21; stroke-dashoffset: 21; }
.okchk[data-state="in"] {
animation: okchk-fade .5s cubic-bezier(.22,1,.36,1) forwards,
okchk-turn .5s cubic-bezier(.22,1,.36,1) forwards,
okchk-bob .5s cubic-bezier(.34,1.35,.64,1) forwards;
}
.okchk[data-state="in"] svg path {
animation: okchk-draw .5s cubic-bezier(.22,1,.36,1) 80ms forwards;
}
@keyframes okchk-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes okchk-turn { from { transform: rotate(80deg) } to { transform: rotate(0) } }
@keyframes okchk-bob { from { translate: 0 10px } to { translate: 0 0 } }
@keyframes okchk-draw { to { stroke-dashoffset: 0 } }
/* The mark still arrives, it just does not travel to get here. The global
reduced-motion block zeroes durations, which would leave the stroke
half-drawn at dashoffset 21 - an unfinished tick is worse than no
animation, so the path is completed outright. */
@media (prefers-reduced-motion: reduce) {
.okchk { animation: none; opacity: 1; }
.okchk svg path { animation: none; stroke-dashoffset: 0; }
}
.s2c {
position: relative; display: inline-grid; place-items: center;
width: 1.1em; height: 1.1em; vertical-align: -.16em;
}
.s2c > * { grid-area: 1 / 1; }
.s2c-ring {
width: 1em; height: 1em; border-radius: 50%;
border: .11em solid rgba(255, 255, 255, .28); border-top-color: currentColor;
animation: spin .8s linear infinite;
transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.s2c-tick {
width: 1.05em; height: 1.05em;
stroke-dasharray: 22; stroke-dashoffset: 22;
transform: scale(.6); opacity: 0;
}
.s2c.done .s2c-ring { transform: scale(.4); opacity: 0; animation: none; }
.s2c.done .s2c-tick {
opacity: 1; transform: scale(1); stroke-dashoffset: 0;
transition: stroke-dashoffset .34s var(--ease) .1s,
transform .34s var(--pop) .06s,
opacity .12s linear .06s;
}
@media (prefers-reduced-motion: reduce) {
.s2c-ring { animation-duration: 1.4s; }
/* The global rule zeroes durations and leaves delays alone, so these would
survive as a stall - a tick appearing a beat after everything else has
stopped moving. */
.s2c.done .s2c-tick { transition-delay: 0s; }
}
/* ---- the shake ----
Five crossings, each shorter than the last, on a curve that arrives hard and
leaves soft. Small on purpose: this says "that field is wrong", not "the
page is falling over". */
@keyframes shakeX {
0% { transform: translateX(0); }
15% { transform: translateX(-.44rem); }
32% { transform: translateX(.38rem); }
50% { transform: translateX(-.26rem); }
68% { transform: translateX(.16rem); }
85% { transform: translateX(-.07rem); }
100% { transform: translateX(0); }
}
.shake { animation: shakeX .5s cubic-bezier(.36, .07, .19, .97) both; }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }
/* ---- content arriving where a skeleton was ----
No fill mode. This class is taken off again on a timer, and an animation
still asserting its last keyframe at that moment would hand the element back
to its declared state with a visible flick. The end state is the resting
state anyway, so there is nothing to hold. */
.revealin { animation: revealIn .34s var(--ease); }
@keyframes revealIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
/* The stagger is an inline animation-delay, which the global reduced-motion
rule does not touch - it zeroes durations only - so it would survive as a
stall: content sitting invisible for a quarter second and then simply
being there. */
.revealin { animation: none; animation-delay: 0s !important; }
}
/* ---- 3D tilt, on a poster under a pointer ----
Guarded by (hover: hover) and (pointer: fine), which is not a nicety: the
car reports coarse and has no hover at all, so on the screen this app is
mainly for, none of this exists. It is for the desk.
The card leans toward the cursor and a glare crosses it. .artbox's two
pseudo-slots are already the shimmer and the outline, so the glare is a real
element - there was no third slot to take.
--mx and --my are set from JS as the pointer moves; the resting values here
are the centre, so a card that never gets a pointer is simply flat. */
@media (hover: hover) and (pointer: fine) {
.card.tilt { perspective: 900px; }
.card.tilt .artbox {
--mx: .5; --my: .5;
transition: transform .35s var(--ease);
will-change: transform;
}
/* The lift is KEPT and the tilt is added to it, rather than replacing it.
This has to be .card.tilt:hover and not .card.tilt, because .card:hover
.artbox already sets translateY(-4px) with exactly the same specificity
and sits two thousand lines further down - so a tilt declared on the
resting selector loses to it silently and the card simply never leans.
Three classes beats two, and composing the two transforms in one
declaration is the only way both can be true at once anyway.
.06s, not .35s: at rest this is the return home, but under a pointer it
runs on every move, and a third of a second there is a card lagging the
cursor. */
.card.tilt:hover .artbox {
transform: translateY(-4px)
rotateX(calc((var(--my) - .5) * -7deg))
rotateY(calc((var(--mx) - .5) * 9deg));
transition: transform .06s linear;
}
/* And the press still reads as a press - .card:active .artbox would
otherwise lose to the hover rule above for the whole time a finger is
down. */
.card.tilt:active .artbox { transform: translateY(-1px) scale(.98); }
.tiltglare {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
border-radius: inherit; opacity: 0;
background: radial-gradient(38% 46% at calc(var(--mx) * 100%) calc(var(--my) * 100%),
rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
transition: opacity .25s var(--ease);
}
.card.tilt:hover .tiltglare { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.card.tilt .artbox { transform: none; transition: none; }
.tiltglare { display: none; }
}
/* ---- icon swap ----
Two glyphs in one grid cell, so the outgoing one leaves while the incoming
one arrives and the box never reflows. The host needs place-items: center
and a single cell; .tricon already had both, which is why it is the one this
is used on.
Scale and opacity only. The usual version of this blurs the outgoing glyph,
and blur is the one thing the car's browser will not paint - it would be an
effect that exists only on machines this app is not for. */
.iswap { display: grid; place-items: center; }
.iswap > .isw {
grid-area: 1 / 1; display: grid; place-items: center;
transform: scale(.55); opacity: 0;
transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.iswap > .isw.in { transform: scale(1); opacity: 1; }
/* The one that is leaving grows slightly as it goes, so the two do not read as
the same object shrinking and returning. */
.iswap > .isw.out { transform: scale(1.3); opacity: 0; pointer-events: none; }
/* The first paint has nothing to cross-fade from and must simply be there. */
.iswap > .isw:only-child { transform: none; opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) {
.iswap > .isw { transition: none; transform: none; opacity: 1; }
.iswap > .isw.out { display: none; }
}
/* ---- clearing an input, word by word ----
A ghost of the text laid exactly over the field, whose words lift and fade
in sequence. The field itself is already empty by the time this paints - it
is decoration over a change that has happened, never a delay in front of one.
white-space: pre and the copied font are what keep the ghost sitting on the
same pixels as the text it replaces; without them it is a second, differently
spaced copy sliding over the first. */
.dissolve {
position: absolute; pointer-events: none; z-index: 3;
white-space: pre; overflow: hidden;
display: flex; align-items: center;
box-sizing: border-box;
}
.dissolve i {
font-style: inherit;
animation: wordGo .34s var(--ease) forwards;
}
@keyframes wordGo {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-.5rem); }
}
/* ---------------------------------------------------------------- login -- */
.login { display: grid; place-items: center; min-height: 100vh; padding: var(--pad); }
.login form { width: min(21rem, 100%); display: flex; flex-direction: column; gap: .75rem; }
.login form > * { animation: rise .55s var(--ease) both; }
.login form > :nth-child(1) { animation-delay: .05s; }
.login form > :nth-child(2) { animation-delay: .12s; }
.login form > :nth-child(3) { animation-delay: .19s; }
.login form > :nth-child(4) { animation-delay: .26s; }
.login form > :nth-child(5) { animation-delay: .33s; }
.login form > :nth-child(6) { animation-delay: .40s; }
.login .mark {
font-size: 0.7333rem; font-weight: 800; letter-spacing: .34em;
color: var(--accent); text-transform: uppercase; margin-bottom: .2rem;
}
.login h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.login p { margin: 0 0 .5rem; color: var(--dim); font-size: 0.8667rem; }
.login input {
background: var(--bg2); border: .06em solid var(--line-hi); border-radius: var(--r-s);
padding: .85rem 1rem; color: var(--fg); font: inherit;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.login input:focus { border-color: var(--accent); background: var(--bg2); outline: none; }
.login button[type=submit] {
background: var(--accent); color: var(--accent-ink); font-weight: 800;
border-radius: 99px; padding: .85rem; letter-spacing: .01em;
transition: transform .15s var(--ease), background .2s;
}
.login button[type=submit]:hover { background: var(--accent-hi); }
.login button[type=submit]:active { transform: scale(.97); }
.login .err { color: var(--bad); font-size: 0.8667rem; min-height: 1.2em; }
/* --------------------------------------------------------------- chrome -- */
/* A capsule floating ON the view, not a bar across the top of it.
*
* It used to span the screen and carry a gradient scrim down from the top
* edge, because the tabs had no ground of their own and had to stay readable
* over an arbitrary hero frame. That works, and it costs the top of every
* picture in the app: a strip of every backdrop permanently darkened to hold
* up five words. The capsule carries its own ground instead, so the scrim goes
* and the picture behind it is the picture.
*
* Solid, not blurred. The car never paints backdrop-filter at all - the same
* measurement the player's wait plate is built on - so a blur is added as an
* enhancement underneath a ground that is already sufficient on its own,
* rather than as the thing carrying the contrast.
*
* .5, and the number is the floor rather than a taste. It started at .72,
* borrowed from the player's wait plate, and that plate sits over a paused
* frame where nothing else competes; here it read as a black slab laid on the
* artwork. The question is how light it can go while the CAR is still legible,
* because the car has the ground and nothing else. Worst case is a near-white
* frame behind it with no blur: at .5 the composite is 115 and white 800-weight
* text on it is 4.7:1, which clears the 4.5:1 floor for normal-size text - and
* this text is 0.8rem, so it is normal-size text and does not get to use the
* 3:1 large-text floor. .45 would be 4.0:1 and fails. So .5 is as light as this
* is allowed to be, not as light as it looked good at.
*
* width: max-content with a max-width is what makes it hug its contents and
* still give way on a narrow screen: past the cap its children shrink. There
* is not much left to shrink now that search is one icon rather than a field,
* which is most of why this fits everywhere it has to. */
.top {
position: fixed; top: .5rem; left: 50%; transform: translateX(-50%);
z-index: var(--z-top);
width: max-content; max-width: calc(100% - 2 * var(--pad));
display: flex; align-items: center; gap: .9rem;
padding: .3rem .55rem;
min-height: var(--topH);
border-radius: 999px;
/* .5 was recorded here as a measured floor and the measurement was wrong -
or rather it was right about the wrong text. Recomputed over a PURE WHITE
frame with no blur, which is what the car gets:
ground .5 over white = rgb(128)
--fg white text on it = 3.31:1 (not the 4.7 the old note said)
an UNSELECTED tab label on it = 1.15:1
The second number is the one that matters and nobody had ever checked it,
because the labels are not --fg: they were rgba(144,144,144,.62), a
translucent grey that composites to rgb(138) against a rgb(128) ground.
That is the same colour twice, and it is exactly what a bright sky behind
the bar looked like.
The ground and the label brightness trade against each other and only
their RATIO has to hold. .62 with the labels at 78% white measured 4.53:1;
.55 with them at 95% measures 4.48:1 - the same floor, with an eighth less
black laid over the picture. Black is the expensive half of that trade
because it is the half you see on every frame, and the labels cost
nothing to brighten. */
background: rgba(0, 0, 0, .55);
border: .06em solid var(--line-hi);
backdrop-filter: var(--glass);
-webkit-backdrop-filter: var(--glass);
}
/* The two masked blur layers are gone with the scrim. They existed to fade a
full-width bar into the picture below it, and a capsule has an edge instead
of a fade - it needs no gradient to end on. They also never painted on the
one device that matters most here. */
/* Screens whose first thing is a hero run under the header; everything else
clears it. The class is set in chrome(), not guessed at with :has(), which
is not safe to rely on in the browser this targets. */
.screen > .body-flush { padding-top: 0; }
.screen > .body-clear { padding-top: var(--clear); }
.top .brand {
font-size: 0.8rem; font-weight: 800; letter-spacing: .32em;
text-transform: uppercase; color: var(--fg);
transition: color .2s;
}
.top .brand em { font-style: normal; color: var(--accent); }
.top .brand:hover { color: var(--accent-hi); }
/* Back, first in the bar. It was given a hairline to divide it from the tabs,
on the argument that it is the only control there acting on the page rather
than moving between pages. Taken out: it is already a filled disc among
unfilled words, which says the same thing without drawing a line across a
bar whose whole shape is one uninterrupted capsule. */
.top .backin { margin-right: .1rem; }
/* Back, as a corner circle - only where there is no bar to sit in, which is a
phone. Same glass as both capsules, at the same .5 whose contrast floor was
measured against a near-white frame with no blur, because this sits on
artwork too. */
.screen > .topback {
position: fixed; z-index: var(--z-corner);
left: var(--pad); top: calc(.55rem + env(safe-area-inset-top, 0px));
width: 3rem; height: 3rem; border-radius: 50%;
display: grid; place-items: center; color: #fff;
background: rgba(0, 0, 0, .55);
border: .06em solid var(--line-hi);
backdrop-filter: var(--glass);
-webkit-backdrop-filter: var(--glass);
transition: background .2s, transform .15s var(--ease);
}
.screen > .topback svg { width: 1.15rem; height: 1.15rem; }
.screen > .topback:active { transform: scale(.92); }
/* The nav names where you are and draws the rest as icons.
*
* Four words across the top is four words to read; three of them are places
* you are not. The one you are in keeps its name and takes a filled pill, the
* other three are their icon alone. It also buys back most of a header that
* has to hold search, settings, refresh and sign-out as well.
*
* The animation is an `animation`, not a `transition`, and that is forced
* rather than chosen: show() does app.replaceChildren(node) on every route
* change, so the header is a brand new element each time. A transition has
* nothing to transition FROM - the new tab is simply born active - and would
* never once run. An animation on the mounted element replays on every
* navigation, which is exactly the moment worth marking.
*
* Nothing here animates a width. The pill is a pseudo-element scaled on its X
* axis and the label moves on opacity and translate, so the whole thing is
* transform and opacity - the only two properties the car is guaranteed to
* paint, and the only two that do not put layout back through a CPU
* rasteriser sixty times a second. The tab is laid out at its final size
* immediately; only the paint arrives late. */
.top .navtab {
position: relative; isolation: isolate;
display: inline-flex; align-items: center; gap: .45rem;
font-size: 0.8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
/* Light, not grey. --dimmer is rgba(144,144,144,.62) - a translucent grey
that composited to within ten values of the capsule's own ground over a
bright frame, so the words were the same colour as the bar they sat on.
95% white on the .55 ground measures 4.48:1 over a pure white frame with
no blur. It went up when the ground came down - see the note there. */
color: rgba(255, 255, 255, .95);
padding: .42rem .6rem; border-radius: 99px;
transition: color .2s var(--ease);
}
.top .navtab .nt-i { display: grid; place-items: center; flex: none; }
.top .navtab .nt-i svg { width: 1.25rem; height: 1.25rem; display: block; }
/* Present for the accessible name and for measurement, absent to the eye.
display:none would take it out of the accessibility tree too, and then the
only label left is the aria-label - which is on the button already, but the
pill has nothing to grow around. */
.top .navtab .nt-l { display: none; }
.top .navtab:hover { color: var(--fg); }
.top .navtab.on { color: #000; }
/* The tab no longer draws its own ground, and no longer animates itself in.
It used to paint a ::before that scaled up from 42% every time the bar was
built - which was every navigation - so the highlight was born at its
destination and inflated. That reads as five separate controls each
announcing itself. There is one lozenge now and it travels, which is the
whole difference between this and what was here before.
The three keyframes it used - navPill, navWord, navIcon - are deleted rather
than left unreferenced. */
.top .navtab:active { transform: scale(.94); }
.top .navtab:first-child { margin-left: 0; }
@media (prefers-reduced-motion: reduce) {
.top .navtab.on::before, .top .navtab.on .nt-l,
.top .navtab.on .nt-i, .top .navtab { animation: none; transition: none; }
.top .navtab:active { transform: none; }
}
/* pill links (Library tab shortcuts) */
.chipbtn {
background: var(--elev); border: .06em solid var(--line-hi); border-radius: 99px;
padding: .45rem 1rem; font-size: 0.8333rem; font-weight: 700; color: var(--fg);
transition: background .2s, border-color .2s, transform .15s var(--ease);
}
.chipbtn:hover { background: var(--elev2); border-color: var(--accent); }
.chipbtn:active { transform: scale(.96); }
.chipbtn.on { background: #fff; color: #000; border-color: #fff; }
/* ---- the cast chips are a switch, so they get the switch's pill ----
The same white lozenge that slides between the tabs on Discover and the
review sort. The machinery, and why it is transform-and-width only and
paints nothing the car cannot, is documented at .tabpill below; these are
the declarations that hand it this particular row.
position: relative is the mandatory one and there is no working around it.
slidePill translates the pill by the selected chip's offsetLeft/offsetTop,
and offsetLeft is measured from the offsetParent - with nothing positioned
here the offsetParent is whatever positioned ancestor happens to be up the
page, and the pill lands somewhere else entirely. .kindsw, .viewsw and
.revsort carry the same declaration for the same reason.
The colour goes into the transition list, and it is not in the base
.chipbtn rule: with a pill gliding under it over .3s, a label that snaps to
#000 the instant it is pressed is black text on a near-black chip until the
pill arrives, and the label it left is light grey on white for just as long.
.ktab has carried `color` in its transition since the pill was built, for
exactly this. Not gated on .haspill, because the un-pilled row has a milder
version of the same thing - a 200ms background fade under an instantly
black label - and so does the person page's filmography row, which shares
this class.
Everything else is gated behind .haspill, which only slidePill adds. If the
script never runs, .chipbtn.on keeps painting its own white background and
this row is exactly what it is today: the effect is additive and its
absence is the old design, not a broken one.
THE OPAQUE GROUND is what stops the pill showing through, and it is the one
thing .ktab did not need. The pill travels at z-index 0 UNDER the chips, and
a .chipbtn is var(--elev) - 94.5% transparent - over an OPAQUE .06em
var(--line-hi) border with a var(--fg) label. Over white that reads as a
dark #333 ring around invisible text: #eaeaea on #ffffff is 1.2:1. A .ktab
survives the same trip because its border is transparent and var(--dim) on
white is 3.2:1. And this row is up to five chips - Everyone plus one per
filled credit group - so Everyone to Producers drags the pill under THREE of
them, on one line, for the whole .3s: three chips reading as selected at
once, which the row-change cut in slidePill never sees.
#0e0e0e and #1c1c1c are not new colours. They are var(--elev) and
var(--elev2) composited over the page's own #000 by hand - 0.055 x 255 is
14.0 and 0.11 x 255 is 28.05, and the browser resolves the chip's own
translucent ground to rgb(14,14,14) either way. Written opaquely because a
background-image layer would not interpolate and the fade to and from the
selected state has to. They are wanted as COLOURS, not a shorthand reset,
which is why nothing else is in these two declarations.
:not(.on) rather than trusting source order, so the two grounds can never
reach the selected chip whatever gets written after them - the hover would
otherwise tie with the .on rule at four classes each and paint over the pill.
The hover has to be restated at all because .castchips.haspill .chipbtn
would outrank the plain .chipbtn:hover and silently delete the affordance.
The border goes transparent rather than to zero, so its .06em stays
reserved and nothing reflows when a chip is selected - the pill is sized
from offsetWidth/offsetHeight, which are border-box, so it covers the
chip's outer edge exactly, border included. */
.castchips { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .9rem; }
.castchips .chipbtn { transition: background .2s, border-color .2s, color .2s, transform .15s var(--ease); }
/* Above the pill, and no longer carrying a ground of its own: an absolutely
positioned child paints in the positioned layer, over static in-flow
content, no matter that it is the first child - without these the selected
chip's label disappears behind a blank white lozenge. */
.castchips.haspill .chipbtn { position: relative; z-index: 1; }
.castchips.haspill .chipbtn:not(.on) { background: #0e0e0e; }
.castchips.haspill .chipbtn:not(.on):hover { background: #1c1c1c; }
.castchips.haspill .chipbtn.on { background: none; border-color: transparent; }
.morebtn {
background: var(--elev); border: .06em solid var(--line-hi); border-radius: 99px;
padding: .6rem 1.6rem; color: var(--fg); letter-spacing: .06em;
}
.morebtn:hover { background: var(--elev2); border-color: var(--accent); color: var(--fg); }
.top .icon {
width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid;
/* Same reason as the magnifier: these sit over a hero on every screen whose
first thing is one, and a grey picked against black does not survive a
bright frame. */
place-items: center; color: rgba(255,255,255,.66);
transition: background .2s, color .2s, transform .15s var(--ease);
}
.top .icon svg { width: 1.05rem; height: 1.05rem; }
.top .icon:hover { background: var(--elev2); color: var(--fg); }
.top .icon:active { transform: scale(.92); }
/* Sign out, armed. The first tap arms it and says so; the second signs out.
A monochrome scheme cannot go red to warn, so it goes white - the button
inverts, which is the loudest thing available here. */
.top .icon.arm {
background: #fff; color: #000;
animation: armpulse 1.1s ease-in-out infinite;
}
@keyframes armpulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
60% { box-shadow: 0 0 0 .35rem rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) { .top .icon.arm { animation: none; } }
/* detail action buttons */
.btn.iconlabel { gap: .45rem; }
.btn.iconlabel svg { width: 1.05em; height: 1.05em; }
/* The icon sits in its own span so the two states can be swapped without
disturbing the label beside it. */
.btn.iconlabel .tg-i { display: grid; place-items: center; flex: none; }
.btn.iconlabel .tg-i svg { display: block; }
/* On is a filled pill, not a tint. It used to be a colour change on the
label of a dark pill, which on a phone, over a bright backdrop, was very
nearly no signal at all - you could not tell whether "Watched" was telling
you something or offering to do it. Filled reads at a glance and from
across a car. The palette has no second hue to reach for, so the signal is
fill against ghost - and the fill sits one step below Play's pure white,
so the thing that starts playback still reads as the loudest thing here. */
.btn.iconlabel.on {
background: var(--good-deep); color: var(--accent-ink);
border-color: transparent; font-weight: 800;
}
/* Filling a solid shape reads as "on". Filling a shape that is DRAWN in
outline just floods it: the eye became a black blob with no pupil. Anything
marked i-stroke keeps its stroke and lets the pill carry the state. */
.btn.iconlabel.on svg { fill: currentColor; }
.btn.iconlabel.on svg.i-stroke { fill: none; }
.btn.iconlabel.on:hover { background: var(--accent); }
/* Watched, but only on Flick - so the button reads as watched and still acts
as "record this", because PublicMetaDB is the only record it can write to.
The state has to sit visibly between the two it is between.
An OUTLINE of the on state, not a colour of its own. It draws the same eye
and takes the same token as the filled pill, so it reads as the same family
of answer; what it does not have is the fill, which is exactly the thing the
filled state is claiming and this one cannot. The accent system here is
closed - white is "you are here", cyan is a narrowed query, amber is hidden
results - so a third meaning had to come out of form rather than a fourth
hue, and a ring against a fill is the difference the shape can carry.
inset box-shadow rather than a border, because a border would change the
button's box and shift every button beside it by the width of the ring on
the one title in twenty that is in this state. */
.btn.iconlabel.viaflick {
background: transparent;
box-shadow: inset 0 0 0 .11rem var(--good-deep);
color: var(--fg);
}
.btn.iconlabel.viaflick svg { fill: currentColor; }
.btn.iconlabel.viaflick svg.i-stroke { fill: none; }
.btn.iconlabel.viaflick:hover { background: rgba(255,255,255,.13); }
/* ---- cast, similar and franchise rails inside the sheet: full bleed ----
These are .track outside a .rail, sitting inside .detail .sheet's own
var(--pad). That left all three inset at both ends: dead space in front of
the first card, and the last card cut off a gutter short of the screen
edge - while every rail on home runs to the edge and lets its own padding
inset the CONTENT instead. Same trick as .rail .track, and as .trrail
further down which has been doing it inside this very sheet all along:
pull the box out by a gutter, hand that gutter back as padding.
The arithmetic, because it is exact and that is not obvious. The containing
block is the sheet's content box - width W - 2*pad, left edge at x = pad
(nothing narrows it; none of .castSlot, .simSlot or .colSlot appears in
either of this sheet's max-width lists). Minus pad each side makes the
margin box W wide with its left edge at 0: EQUAL to .detail, never wider,
so nothing here can put a horizontal scrollbar on the page. Plus pad of
padding puts the content box back at x = pad. Measured against an 980px
.detail at all three gutters the clamp can produce - 14.25px, 31.36px and
51px - the rail comes out left 0 width 980 every time, the first card lands
at exactly the gutter, and the .sec heading above it lands on the same
number to the sub-pixel. Body overflow: zero at all three.
It holds only because --pad is clamp(0.95rem, 3.2vw, 3.4rem) - VIEWPORT
relative, so it is the same pixel count on the sheet and on the rail. It
was a percentage below 900px once, container-relative, and against that
this would have been off by whatever the two boxes' widths differed by.
margin-inline and not a `margin` shorthand: .track already sets a negative
margin-top for the lift room and a shorthand would silently drop it. Not
hypothetical - .trrail's comment records that exact mistake being made
there first.
scroll-padding-left because the gutter now sits in front of the first card.
.card is scroll-snap-align: start, so without it the first card snaps to
the scrollport edge and hides under the padding, which is the bug .rail
.track's own comment is about. The cast rail's .person cards carry no
snap-align, so for that one the line is inert today - written anyway,
because "inert until somebody adds snap-align" is how the next person
inherits it instead of rediscovering it. */
.detail .castrail, .detail .simrail, .detail .colrail {
padding-left: var(--pad); padding-right: var(--pad);
margin-inline: calc(var(--pad) * -1);
scroll-padding-left: var(--pad);
}
.person { flex: 0 0 auto; width: 6rem; cursor: pointer; text-align: center; }
/* The frame, so there is something to shimmer while the face is on its way -
a pseudo-element cannot be hung on an . It is also what holds the
initial when there is no photograph at all. */
/* Portrait cards, not medallions. A circle crops a headshot's chin or its
hair to fit a shape no photograph was composed for, and a rail of circles
next to a rail of rectangular posters reads as two different apps. TMDB
profiles are shot 2:3, the same as a poster - so they get a poster's frame. */
.pface {
position: relative; overflow: hidden; display: block;
width: 6rem; aspect-ratio: 2 / 3; border-radius: var(--r-s);
background: var(--bg2); margin: 0 auto;
}
/* Every image in a face frame fills the frame, stated once on the frame's own
selector - the frames hold three kinds of image now (headshots in the rail,
the portrait in the header, posters on the timeline) and each had, or
lacked, sizing of its own. One rendered at intrinsic size inside an
overflow:hidden box and showed the top-left corner of a poster: a patch of
sky where Fast X should be.
Pinned to the frame's edges rather than sized 100%/100%, and that choice is
the actual fix: the frame's height comes from aspect-ratio, and iOS Safari
does not resolve a child's percentage height against an aspect-ratio-derived
height - the header portrait rendered as a strip across the top of an empty
frame on the phone. inset needs no percentages and no parent height at all;
.pface is already position:relative for the shimmer. */
.pface img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
}
.person img {
/* Sizing comes from the .pface img rule; only the crop bias is this rail's
own - headshots frame the face high, so a centred crop keeps forehead
and loses chin. */
object-position: 50% 18%;
/* These used to be desaturated so they read as interface rather than as
artwork. Two things were wrong with that. The car does not paint `filter`
at all, so the one device that matters most was already showing them in
colour while every other screen showed grey - the intent was never
achieved where it counted. And a cast is the most human thing on the
page; draining it is what made these look like a database rather than
like people. */
transition: outline-color .2s, filter .25s var(--ease);
outline: .12em solid transparent;
}
.pface { outline: .12em solid transparent; transition: outline-color .2s; }
.person:hover .pface { outline-color: var(--ring-hover); }
/* And the same ring for a keyboard, on the face rather than round the whole
card: the card is a 6rem column with two lines of text under it, and an
outline round all of that reads as a box drawn on the page rather than as a
thing that is selected. Only a rail whose faces open a page is focusable,
so this can never appear on one that does nothing. */
.person:focus { outline: none; }
.person:focus-visible { outline: none; }
.person:focus-visible .pface {
outline-color: var(--fg); outline-width: .16rem; outline-offset: .18rem;
}
.person .pn { margin-top: .4rem; font-size: 0.8rem; font-weight: 650; line-height: 1.25;
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.person .pr { font-size: 0.7333rem; color: var(--dimmer); overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
/* browse pages */
/* .browsefilters had no base rule anywhere - no display, no gap - so it was a
plain block and the chips inside it were held apart by collapsed whitespace,
about 4px, while the phone block set flex-wrap and row-gap on a box that was
not a flex container. (.qh-query overrides this to display: contents on the
discover head, which still works: that rule comes later.) */
.browsefilters {
display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
}
.browsehead {
display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
padding: 1rem var(--pad) .6rem;
}
.browsehead h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.browsecount {
font-size: 0.8rem; font-weight: 600; color: var(--dimmer);
letter-spacing: .04em; margin-left: .5rem;
}
/* ---- films or shows ----
Two tabs became one, so the thing that used to be the tab bar's job is
done here instead. Beside the heading and not in the source rail below it:
the rail answers "where does this list come from" and this answers "of
what", which is the prior question and a different kind of question. Same
shape as the genre band's switch at the foot of home, because it is the
same control doing the same job. */
.kindsw { display: inline-flex; gap: .3rem; align-self: center; }
.ktab {
min-height: 1.9rem; padding: 0 .8rem; border-radius: 999px;
background: var(--elev); border: var(--rule-w) solid transparent;
color: var(--dim); font: inherit; font-size: .7333rem; font-weight: 800;
letter-spacing: .08em; text-transform: uppercase;
transition: background .18s, color .18s, border-color .18s;
}
.ktab:hover, .ktab:focus-visible { background: var(--elev2); color: var(--fg); }
.ktab.on { background: #fff; color: #000; border-color: #fff; }
.ktab:active { transform: scale(.96); }
/* ---- the sliding pill ----
One white pill that MOVES between the tabs, instead of each tab painting and
unpainting its own background. Three switches here are the same control -
the Films/Shows kind switch, the Posters/Details/Stills lens and the review
sort - and the travel is what says the two options are one choice rather
than two buttons.
transform and width, nothing else. No blur, no hover, nothing the car cannot
paint, which is what rules out most published versions of this effect.
It only takes over once slidePill has measured a selected tab and set
.haspill; until then, and if the script never runs, .ktab.on keeps painting
its own white background exactly as before. The effect is additive and its
absence is the old design, not a broken one. */
.kindsw, .viewsw, .revsort { position: relative; }
.tabpill {
position: absolute; left: 0; top: 0; z-index: 0;
border-radius: 999px; background: #fff;
opacity: 0; pointer-events: none;
transition: transform .3s var(--ease), width .3s var(--ease), opacity .2s var(--ease);
}
.haspill .tabpill { opacity: 1; }
/* Above the pill, and no longer carrying a ground of its own - the pill is the
ground now, and two whites stacked would double-paint the corners. */
.haspill .ktab { position: relative; z-index: 1; }
.haspill .ktab.on { background: none; border-color: transparent; }
/* The hover ground would sit over the pill and grey it out. */
.haspill .ktab.on:hover, .haspill .ktab.on:focus-visible { background: none; color: #000; }
@media (prefers-reduced-motion: reduce) {
.tabpill { transition: none; }
}
/* ---- the source rail ----
Where the list comes from, beside the heading rather than under it: the h1
already makes that row ~75px tall, so the rail costs a pixel instead of a
whole row, and the grid keeps two full poster rows above the fold on the
car.
overscroll-behavior-x is what stops a sideways flick at the end of the rail
firing the browser's back gesture, the same reason the season rail carries
it. No fade at the edge: a mask-image is not trusted to paint on the car,
and a chip clipped by the edge is a truer "there is more" than a gradient. */
.srcrail {
display: flex; gap: .55rem; margin-left: auto;
overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
max-width: 100%;
}
.srcrail::-webkit-scrollbar { display: none; }
.srcrail .chipbtn { white-space: nowrap; flex: none; }
/* ---- the shelf's doors ----
The five screens that are next to the shelf without being on it, as one
horizontally scrolling line that costs the same height at every width.
.srcrail and not .browsefilters, and not an .ix-band. Not .browsefilters
because that element holds browseScreen's Sort and Genre and Discover's
tri-state genre chips - eight navigation buttons standing in it taught that
navigating and filtering are one control, which is the exact mistake
.viewsw's own comment says it exists to avoid. Not an .ix-band because two
bands of doors above a poster wall cost about 242px at 375: five cells at
the .ix-grid phone track of 7.6rem is two columns, so three rows of 3.6rem
plus two headings. A rail of five chips is ONE line at every width, which
is less than the three lines eight wrapping chips take on a phone today.
Three declarations. .srcrail already carries the scroll, the hidden
scrollbar, overscroll-behavior-x (which is what stops a sideways flick
firing the browser's back gesture) and its deliberate refusal of an end
fade - a chip clipped by the edge is a truer "there is more" than a
gradient, and a mask-image is not trusted to paint on the car. And
.srcrail .chipbtn is already in the car block's 3.47rem list, so every door
is a 52px target there for free.
margin-left is re-asserted because .srcrail's own is `auto`, for the case
where it sits beside a heading; this one is a row of its own. The padding
is the page gutter, which .srcrail never needed while it lived inside a
.browsehead that had one. */
.srcrail.shelfdoors { margin-left: 0; padding: 0 var(--pad) .55rem; }
/* A door that states its size, in .kfilt b's recipe - the count sits back
against the word at the same .55 and the same tabular figures, because a
door reading "History 3,825 plays" is a door you can decide about without
pressing it, which matters most on a screen read at arm's length. */
.srcrail.shelfdoors .chipbtn b {
margin-left: .4rem; font-weight: 800; opacity: .55;
font-variant-numeric: tabular-nums;
}
/* ---- the lens row ----
How you are looking, under what you are looking for. Its own row rather
than more chips in the filter row, because those narrow the QUERY and these
two narrow what came back - one goes to TMDB and one never leaves the
browser, and a row that mixes them teaches that they are the same thing. */
.viewsw { display: inline-flex; align-items: center; gap: .3rem; }
/* A mark, not a word. Square, so three of them read as one control rather
than as three differently-sized pills. */
.vtab { padding: 0; width: 2.3rem; display: grid; place-items: center; }
.vtab svg { width: 1.05rem; height: 1.05rem; display: block; }
/* ---- Details ----
One item per row, and the first view here to spend the overview and the
genres, both of which have arrived with every result since this screen was
written and had nowhere to go on a poster tile. Newspaper columns fall out
of auto-fill: one at 375px, two on the car, three on a wide desktop. */
.rows {
display: grid; gap: 0 2.2rem; padding: .2rem var(--pad) 2rem;
grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
}
.drow {
display: grid; grid-template-columns: 7.4rem minmax(0, 1fr) auto;
gap: .85rem; align-items: start; text-align: left;
padding: .7rem .6rem; margin: 0 -.6rem;
border-top: 1px solid var(--line);
background: none; color: var(--fg); font: inherit;
transition: background .16s;
}
.drow:hover, .drow:focus-visible { background: var(--elev); }
.drow:active { transform: scale(.995); }
.dr-shot {
display: block; border-radius: var(--r-s); overflow: hidden;
background: var(--bg2); aspect-ratio: 16/9;
}
.dr-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-body { min-width: 0; display: flex; flex-direction: column; gap: .18rem; }
.dr-t {
font-size: .95rem; font-weight: 800; letter-spacing: -.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The standing line every listing in print has: when, and of what kind. */
.dr-m {
font-size: .6667rem; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--dim);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Two lines is the whole point: enough to tell what it is, not so much that
the row stops being a row. */
.dr-p {
font-size: .8rem; line-height: 1.35; color: var(--dim); margin-top: .1rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
/* A review column prints a score as a figure, never as a star. */
.dr-v { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding-left: .2rem; }
.dr-v b { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dr-v i {
font-style: normal; font-size: .55rem; font-weight: 800;
letter-spacing: .14em; color: var(--dimmer);
}
/* ---- Stills ----
The same grid, turned on its side. .card.wide already carries 16/9, so this
is a column width and nothing else. */
.grid.wideg { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
/* ---- what is happening with this one ----
Above the title, small, and quiet enough that the picture is still the
picture. It earns its place by being rare: most titles have nothing to say
and show nothing at all, so a badge means something is genuinely going on
rather than being chrome every hero wears.
Its own element rather than a pseudo on .body - .hero .body already carries
layout, and this file has spent an afternoon learning what happens when a
new overlay takes a slot something else was using. */
.hbadge {
/* Arrives after the hero ladder has already run for the meta line it sits
in - see @keyframes arrive. */
animation: arrive .22s var(--ease) both;
display: inline-block; vertical-align: -.15em;
margin: 0 .5rem 0 0; padding: .18rem .6rem; border-radius: 999px;
background: rgba(0, 0, 0, .5);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
color: #fff; font-size: .7333rem; font-weight: 800;
letter-spacing: .02em; white-space: nowrap;
}
@media (pointer: coarse) and (min-width: 820px) and (min-height: 600px) {
.hbadge { font-size: .8667rem; padding: .38rem .85rem; }
}
@media (max-width: 700px) { .hbadge { font-size: .6667rem; } }
/* ---- the title, on the picture ----
In a band of its own along the bottom, and that band is a REAL element.
Both pseudo-element slots on .artbox are already spoken for - ::before is
the loading shimmer and ::after is the card's outline and hover ring - and
I took each of them in turn for this scrim. The first left every still
shimmering for as long as the screen was open; the second moved the card's
outline to 45% down the frame and drew a line across the picture. A third
guess was not the answer; a span is.
Small and low, because the point of a still is the frame: a wordmark blown
across the middle of it is a poster with extra steps. Capped on both axes
so a long mark is stopped by the width and a stacked one by the height,
which leaves the landscape intact either way. */
.cwm {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
height: 55%; display: flex; align-items: flex-end;
padding: 0 1rem .9rem;
background: linear-gradient(to top, rgba(0, 0, 0, .5), transparent);
pointer-events: none;
}
.cwordmark {
max-height: 36%; max-width: 40%; width: auto; height: auto;
object-fit: contain; object-position: left bottom;
}
/* ---- the mark ----
White on black, like every other selected or asserted thing here. Top-left
because the bottom-right of a poster is where the progress bar lives. */
.cmark {
position: absolute; top: var(--mark-inset, .4rem); left: var(--mark-inset, .4rem); z-index: 2;
padding: .12rem .38rem; border-radius: var(--r-s);
background: #fff; color: #000;
font-size: .5667rem; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; pointer-events: none;
/* Never broken across lines. Inside the details row it sits in the title's
own text flow, so at 375px it split into "IN" above "LIBRARY" - two
half-pills reading as damage rather than as a label. */
white-space: nowrap;
}
.dr-lib { position: static; margin-left: .45rem; vertical-align: .06em; }
/* Finished is a filled pill; part-way through is the same pill hollowed out.
Two states from one accent, and the difference reads at a glance without a
second colour or a second shape.
Nothing is dimmed. Fading a watched title treats having seen it as a reason
to look away, and a discovery screen full of half-faded artwork is a
discovery screen that has decided for you. */
.cmark.part {
/* A ground, not a hue. White type on a hollow pill reads perfectly against
the near-black page and not at all against the bright half of a film
still - and this pill sits on arbitrary photography by definition. The
TMDB images are cross-origin so a canvas cannot measure the luminance
under it; a scrim removes the question instead of sampling it. */
background: rgba(0, 0, 0, .62); color: #fff;
box-shadow: inset 0 0 0 var(--rule-w) rgba(255, 255, 255, .6);
}
/* Inside a details row there is no picture beneath it, so it needs no ground
and the outline alone does the work. */
.dr-lib.part { background: none; }
/* The empty state offers the filters themselves, not advice about them. */
.emptydrop { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.ed-row { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
/* ================= the Discover head ================= *
Two rows with two different jobs, and the difference is the whole point of
the rebuild.
Row one is IDENTITY and PRESENTATION: what kind of thing, how many, how it
is drawn, and what is being held back. Nothing here changes the question.
Row two is THE QUESTION: where the list comes from, how it is ordered, and
what narrows it - one idiom, left to right, in a fixed order, so the row
reads as a sentence about the list rather than as five unrelated widgets. */
.qhead {
display: flex; flex-wrap: wrap; align-items: center;
gap: .5rem .7rem; padding: .8rem var(--pad) .35rem;
}
/* The word is on screen already, lit, in the nav tab - at every size, not
just on a phone. Kept in the document for anyone listening to it. */
.qhead .bh-word {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.qhead .browsecount {
font-size: .8rem; font-weight: 700; color: var(--dim); margin: 0;
font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
/* Amber when the number is not the whole truth, so "some of this is being
kept from you" is a peripheral fact rather than a string you must read.
Unscoped from .qhead: the Calendar head is a plain .browsehead and it has
the same thing to say once its filters hide a row. `.cut` is only ever set
deliberately, so widening the selector cannot surprise a head that does
not ask for it. */
.browsecount.cut { color: var(--hide-tint); }
.qh-gap { flex: 1 1 auto; }
/* ---- row two: the query ----
One horizontal scroller with a fixed slot order rather than a wrapping row.
The head's height is then CONSTANT: today a third filter token pushes the
grid down a whole line, and under this it cannot. What scrolls off the
right is always "more filters", never the two structural tokens. */
.qh-query {
display: flex; align-items: center; gap: .45rem;
padding: 0 var(--pad) .5rem;
overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
/* A fade at whichever end has more behind it.
*
* This row is deliberately a scroller - see the note above: a constant head
* height is worth more than a second line of chrome, which on a phone cost
* four lines and pushed the first poster nearly halfway down the screen. But
* nothing said so, and a token sliced in half at the screen edge reads as a
* broken layout rather than as a row that continues.
*
* Four background layers and no script. The two `local` layers are painted
* in the page's own black and travel WITH the content, so each covers its
* end-stop only while that end is the one you are at; the two `scroll`
* layers are the fades and stay pinned to the scrollport. Covers are listed
* first so they paint over the fades - which makes the left fade hidden at
* rest and the right one vanish on arrival, correct at every position in
* between without measuring a scroll offset.
*
* Backgrounds rather than a mask: this machine reports support for
* mask-image and for backdrop-filter and paints neither, and a mask honoured
* as "no mask" would take the row with it. */
}
/* Only when there is something off the edge to fade. The four layers above are
painted in --bg on a page painted in --bg, so the intent was that a row with
nothing to scroll paid nothing for them - black on black. It does not hold:
reported from a real screen and reproduced here, a flat explicitly-painted
black reads as a dark rectangle against the page's own black at the end of
the row. A decoration that can only be invisible or wrong is not painted at
all now. fadeIfScrolls() sets the class from scrollWidth against clientWidth
and keeps it right through a resize. */
.qh-query.scrolls {
background:
linear-gradient(to right, var(--bg) 55%, rgba(0, 0, 0, 0)) 0 0 / 2.2rem 100% no-repeat local,
linear-gradient(to left, var(--bg) 55%, rgba(0, 0, 0, 0)) 100% 0 / 2.2rem 100% no-repeat local,
linear-gradient(to right, var(--bg), rgba(0, 0, 0, 0)) 0 0 / 2.2rem 100% no-repeat scroll,
linear-gradient(to left, var(--bg), rgba(0, 0, 0, 0)) 100% 0 / 2.2rem 100% no-repeat scroll;
}
.qh-query::-webkit-scrollbar { display: none; }
.qhead + .qh-query .srcrail, .qh-query .browsefilters { display: contents; }
.qh-query .srcrail { display: contents; }
/* ---- the token ----
A label and the value it holds. Three of them are a