/* GLiTCHED ViSUALS portal.
*
* Deliberately NOT importing glitched.css. That stylesheet is 2,187 lines built around
* one scrolling marketing page - rails, lightboxes, hero plates - and almost none of it
* applies to a signed-in tool. Inheriting it would mean every future change to the
* public site risks moving something in a client's gallery. So the tokens below are
* copied, not linked, and the two stylesheets are free to drift.
*
* If a token changes on the public site and matters here, it gets changed here too. That
* is a deliberate small cost, paid to keep the portal stable. */
:root{
/* Dark-only, said once. The list a select pops open, the scrollbars and the date
picker are drawn by the browser, not by this stylesheet. Without this it draws them
in light mode, so our white option text lands on a white popup and vanishes. */
color-scheme: dark;
--void: #050506;
--ink-2: #0b0b0d;
--ink-3: #131316;
--bone: #f4f4f6;
--silver: #c9ced8;
--dim: #8e9199;
--dimmer: #565961;
/* Two colours, not seven. The public site's full prismatic smear belongs on a
marketing page; a tool you look at all day wants one idea, so the portal keeps the
cool end of that spread and drops the rest. Violet into blue, always on black. */
--violet: #7b3fe0;
/* What the 3px accent stripe actually reads as. It is painted with --line-accent, a
90deg gradient, but across three pixels the eye gets the average rather than either
end - which is this. Stated as a colour so text can match the stripe exactly instead
of running the same gradient through letters and landing somewhere else. 4.05:1 on
the card behind it. */
--accent-edge: #5565e8;
--blue: #2f8bf0;
--holo-a: #7b3fe0; /* kept as names so nothing downstream has to change */
--holo-b: #2f8bf0;
--holo: linear-gradient(135deg, #7b3fe0 0%, #2f8bf0 100%);
--line-accent: linear-gradient(90deg, #7b3fe0 0%, #2f8bf0 100%);
--line: rgba(244,244,246,.13);
--line-2: rgba(244,244,246,.26);
--bad: #ff5b6e;
--good: #46e0a8;
/* Glass. Three weights of the same idea: a fill you can see through, a slightly
stronger one for things that sit on top, and the hairline that separates them.
All built from --bone so a surface picks up whatever is behind it rather than
being painted a flat grey. */
--glass: rgba(244,244,246,.045);
--glass-2: rgba(244,244,246,.075);
--glass-3: rgba(244,244,246,.11);
--glass-line:rgba(244,244,246,.12);
/* Blur is expensive, so it is reserved for the few surfaces that genuinely float:
the bar, a dialog, the notification panel. */
--blur: blur(16px) saturate(140%);
/* Corners. One value for panels, a smaller one for controls - mixing radii is what
makes an interface look assembled rather than designed. */
--r: 12px;
--r-sm: 8px;
}
*,*::before,*::after{ box-sizing:border-box; }
/* The hidden attribute is only display:none in the UA stylesheet, so any rule of ours
that sets display - .gate{display:grid} below, for one - silently outranks it. That
left the session gate covering a portal that had already loaded behind it. Stating it
once here means hidden means hidden, whatever else an element is styled as. */
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
margin:0;
background:var(--void);
color:var(--bone);
font:400 15px/1.55 "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
-webkit-font-smoothing:antialiased;
}
/* A single wash of colour behind everything, so the black is not flat. Fixed rather
than scrolled: it should feel like the light in the room, not part of the page. */
body::before{
content:"";
position:fixed; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(60vw 50vh at 18% 0%, rgba(47,139,240,.10), transparent 70%),
radial-gradient(50vw 44vh at 88% 96%, rgba(255,47,154,.08), transparent 70%);
}
a{ color:var(--silver); }
a:hover{ color:var(--bone); }
/* ------------------------------------------------------------------ auth screen */
.auth{
position:relative; z-index:1;
min-height:100dvh;
display:grid; place-items:center;
padding:clamp(20px,6vw,64px) 20px;
}
.auth-card{
width:100%; max-width:420px;
background:linear-gradient(180deg, rgba(22,22,27,.72), rgba(11,11,14,.72));
-webkit-backdrop-filter:var(--blur);
backdrop-filter:var(--blur);
border:1px solid var(--glass-line);
border-radius:var(--r);
box-shadow:0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(244,244,246,.07);
padding:clamp(26px,5vw,38px);
position:relative;
overflow:hidden;
}
/* The one piece of colour on the page. Same accent rule the public site uses for every
thin line that carries the brand, so the portal reads as the same studio. */
.auth-card::before{
content:"";
position:absolute; top:0; left:0; right:0; height:2px;
background:var(--line-accent);
}
.auth-mark{
display:block;
width:min(190px, 62%);
height:auto;
margin:0 auto 10px;
/* The wordmark is a dark-background asset already; this only lifts it off pure black. */
filter:drop-shadow(0 0 18px rgba(201,206,216,.18));
}
.auth-sub{
margin:0 0 26px;
text-align:center;
font-size:11px;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--dim);
}
/* Each flow (sign in, set password, reset) is a panel in the same card. Only one is
ever un-hidden, which keeps the transitions free and the markup honest about state. */
.panel{ display:none; }
.panel.on{ display:block; }
.panel h1{
margin:0 0 6px;
font:400 clamp(21px,4.4vw,26px)/1.1 "Anton", Impact, sans-serif;
letter-spacing:.02em;
text-transform:uppercase;
}
.panel p.lede{
margin:0 0 22px;
color:var(--dim);
font-size:13px;
line-height:1.6;
}
/* The band's name on the invitation panel, learned from the server after the page has
rendered. Brighter than the line below it, because it is the one word on screen that
tells a client this link was meant for them and not forwarded by mistake. */
.panel p.who{
margin:0 0 10px;
color:var(--silver);
font-size:14px;
}
/* Nothing to say - a legacy Supabase link, or a name we could not fetch. An empty
paragraph still carries its margin, and the gap reads as a missing sentence. */
.panel p.who:empty{ display:none; }
label{
display:block;
margin:0 0 7px;
font-size:10px;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--dim);
}
input[type=email],
input[type=password],
input[type=text]{
width:100%;
background:var(--void);
border:1px solid var(--line);
border-radius:var(--r-sm);
color:var(--bone);
font:inherit;
font-size:14px;
padding:12px 13px;
transition:border-color .16s ease, box-shadow .16s ease;
}
input:focus{
outline:none;
border-color:var(--line-2);
box-shadow:0 0 0 1px rgba(47,139,240,.35), 0 0 22px rgba(47,139,240,.12);
}
input:disabled{ opacity:.5; }
.field{ margin:0 0 16px; }
/* Shown under an input when that one field is wrong, rather than putting every error in
the banner. A client who mistypes a password should not have to re-read the page. */
.field-note{
margin:7px 0 0;
font-size:11px;
color:var(--bad);
min-height:0;
}
button.go{
width:100%;
margin-top:4px;
padding:13px 16px;
border:0; border-radius:var(--r-sm);
background:var(--bone);
color:var(--void);
font:700 11px/1 "Space Mono", monospace;
letter-spacing:.2em;
text-transform:uppercase;
cursor:pointer;
transition:transform .14s ease, box-shadow .2s ease, opacity .14s ease;
}
button.go:hover:not(:disabled){
box-shadow:0 0 26px rgba(220,228,240,.30);
}
button.go:active:not(:disabled){ transform:translateY(1px); }
button.go:disabled{ opacity:.45; cursor:default; }
/* Busy state. The label swaps to a dim pulse instead of a spinner: one less asset, and
it cannot be mistaken for the page still loading. */
button.go.busy{ color:var(--dimmer); }
@keyframes pulse{ 50%{ opacity:.45; } }
button.go.busy{ animation:pulse 1.1s ease-in-out infinite; }
.alt{
margin:18px 0 0;
text-align:center;
font-size:12px;
color:var(--dimmer);
}
.alt button{
background:none; border:0; padding:0;
color:var(--silver);
font:inherit;
text-decoration:underline;
text-underline-offset:3px;
cursor:pointer;
}
.alt button:hover{ color:var(--bone); }
/* ------------------------------------------------------------------ banner */
.banner{
margin:0 0 20px;
padding:11px 13px;
border:1px solid var(--line);
border-left:2px solid var(--dim);
border-radius:var(--r-sm);
font-size:12.5px;
line-height:1.5;
color:var(--silver);
display:none;
}
.banner.on{ display:block; }
.banner.bad{ border-left-color:var(--bad); color:#ffc6cd; }
.banner.good{ border-left-color:var(--good); color:#b9f2da; }
/* ------------------------------------------------------------------ foot */
.auth-foot{
margin:22px auto 0;
text-align:center;
font-size:10px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--dimmer);
}
.auth-foot a{ color:var(--dimmer); text-decoration:none; }
.auth-foot a:hover{ color:var(--silver); }
/* Password requirements, shown only while the field has focus or content, so the form
is not shouting rules at someone who has not started typing yet. */
.rules{
margin:9px 0 0; padding:0;
list-style:none;
font-size:11px;
color:var(--dimmer);
}
.rules li{ padding-left:15px; position:relative; }
.rules li::before{
content:"\2022";
position:absolute; left:3px;
color:var(--dimmer);
}
.rules li.met{ color:var(--good); }
.rules li.met::before{ content:"\2713"; left:1px; }
/* ------------------------------------------------------------------ signed-in shell */
/* The gate covers the page until the session is confirmed. It is markup rather than a
class on body so there is no frame in which a logged-out visitor sees portal chrome. */
.gate{
position:relative; z-index:1;
min-height:100dvh;
display:grid; place-content:center; justify-items:center;
gap:10px;
padding:40px 20px;
text-align:center;
}
.gate-note{
margin:0;
font-size:11px;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--dim);
animation:pulse 1.4s ease-in-out infinite;
}
.gate-note.bad{ color:#ffc6cd; animation:none; letter-spacing:.06em; text-transform:none; font-size:13px; }
.gate-note a{ color:var(--silver); }
.shell #app{ position:relative; z-index:1; }
.bar{
display:flex; align-items:center; gap:clamp(14px,3vw,32px);
padding:0 clamp(16px,3.5vw,32px);
height:62px;
border-bottom:1px solid var(--line);
background:rgba(10,10,13,.6);
-webkit-backdrop-filter:var(--blur);
backdrop-filter:var(--blur);
border-bottom:1px solid var(--glass-line);
position:sticky; top:0; z-index:20;
}
.bar-mark{ display:flex; align-items:center; flex:0 0 auto; }
.bar-mark img{ height:19px; width:auto; display:block; }
.bar-nav{ display:flex; gap:clamp(12px,2.4vw,24px); flex:1 1 auto; }
.bar-nav a{
font-size:10px; letter-spacing:.2em; text-transform:uppercase;
color:var(--dim); text-decoration:none;
padding:6px 0;
border-bottom:1px solid transparent;
}
.bar-nav a:hover{ color:var(--bone); }
.bar-nav a.on{ color:var(--bone); border-bottom-color:var(--holo-b); }
.bar-who{
display:flex; align-items:center; gap:12px;
margin-left:auto; flex:0 0 auto;
}
.who-name{
font-size:12px; color:var(--silver);
max-width:28ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.who-out{
background:none; border:1px solid var(--line); border-radius:var(--r-sm);
color:var(--dim);
font:400 10px/1 "Space Mono", monospace;
letter-spacing:.16em; text-transform:uppercase;
padding:8px 10px; cursor:pointer;
transition:color .14s ease, border-color .14s ease;
}
.who-out:hover:not(:disabled){ color:var(--bone); border-color:var(--line-2); }
.who-out:disabled{ opacity:.4; cursor:default; }
.page{
padding:clamp(28px,5vw,56px) clamp(16px,3.5vw,32px) 80px;
/* The header photograph hangs off this rather than off .head, so it can start at the
bar instead of below the back link. */
position:relative;
}
/* Layout gets the room, prose does not. 1240px still stopped the page well short of the
edge the header bar runs to, which read as a wide empty margin down the right of every
screen rather than as a measure. Layout now ends where the page padding ends, so the
controls in a head row line up with the ones in the bar above them. A paragraph still
wraps narrow below, because a line of text this wide is genuinely hard to read. */
.page > *{ max-width:none; }
.page > p{ max-width:760px; }
.loading{
color:var(--dim); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
animation:pulse 1.4s ease-in-out infinite;
}
/* A back link that reads as a step up rather than a button. The arrow is in the rule
so no view has to remember to type it. */
.back{
display:inline-block;
position:relative; z-index:2;
margin:0 0 16px;
font-size:12px; letter-spacing:.2em; text-transform:uppercase;
color:var(--dim); text-decoration:none;
}
.back::before{ content:"\2190\00a0\00a0"; }
.back:hover{ color:var(--silver); }
.head{
display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap;
margin:0 0 6px;
}
/* Everything in the header sits above the photograph behind it. :not() rather than a
blanket rule, because the blanket one would give the banner itself position:relative
and drop it back into the flow. */
.head > :not(.head-banner){ position:relative; z-index:1; }
/* The frame a shoot is remembered by, behind its own header rather than beside it. It
runs past the page gutters to the edge of the window - the same negative inset as the
page padding, so it stays flush as that padding clamps down on a phone - and it does
not end on a line anywhere. Two gradients do that: one down into the page background,
one in from both sides, so there is no edge to notice, only a photograph that stops
being a photograph. */
.head-banner{
position:absolute;
z-index:0;
/* Flush to .page, which already spans the whole window - its gutters are padding on
the inside, not margin. Insetting by a negative gutter pushed it 32px past the right
edge and gave the entire portal a horizontal scrollbar. Nothing negative is needed:
0,0,0 is edge to edge, and the top lands directly under the bar.
A fixed height rather than one measured from the header, because the header is a
different height on a client, a project and a folder, and the photograph should
not be. */
top:0;
left:0;
right:0;
height:clamp(260px, 36vh, 430px);
overflow:hidden;
pointer-events:none;
opacity:0;
transition:opacity .45s ease;
}
.head-banner.on{ opacity:1; }
/* The delivered frames, to choose a header from, inside the dialog. A strip rather than
a grid: the pictures are the point, and scrolling sideways through a shoot is closer
to how you would pick one off a contact sheet than paging a second modal would be. */
.strip{
display:flex; gap:8px;
margin:10px 0 0;
padding:8px;
overflow-x:auto; overflow-y:hidden;
scrollbar-width:thin;
border:1px solid var(--line-2);
border-radius:var(--r-sm);
background:rgba(244,244,246,.025);
}
.strip-note{
margin:4px 6px; font-size:12px; color:var(--dim);
}
.strip-pick{
flex:none;
width:74px; height:74px;
padding:0; margin:0;
cursor:pointer;
overflow:hidden;
border:1px solid var(--line-2);
border-radius:var(--r-sm);
background:none;
transition:border-color .12s ease, transform .12s ease;
}
.strip-pick img{ width:100%; height:100%; object-fit:cover; display:block; }
.strip-pick:hover{ border-color:var(--bone); transform:translateY(-1px); }
.strip-pick:focus-visible{ outline:1px solid var(--bone); outline-offset:2px; }
.strip-pick.is-on{
border-color:var(--good);
box-shadow:0 0 0 1px var(--good);
}
.head-banner img{
width:100%; height:100%;
display:block;
object-fit:cover;
/* Faces and horizons sit high in a live frame far more often than dead centre. */
object-position:center 34%;
}
.head-banner::after{
content:"";
position:absolute; inset:0;
background:
linear-gradient(to bottom,
rgba(5,5,6,.30) 0%, rgba(5,5,6,.58) 42%, rgba(5,5,6,.88) 78%, var(--void) 100%),
linear-gradient(to right,
var(--void) 0%, rgba(5,5,6,0) 20%, rgba(5,5,6,0) 80%, var(--void) 100%);
}
/* A pale photograph - a white backdrop, a snow shot, a bleached press image - takes the
opposite scrim, and the words go dark over it. Darkening a white frame until white
text sits on it comfortably means hiding most of the photograph, which is a poor
trade for a picture somebody chose. It still has to reach the page background by the
bottom, so the last fifth falls away to it. */
.head-banner.is-light::after{
background:
linear-gradient(to bottom,
rgba(242,242,246,.34) 0%,
rgba(242,242,246,.70) 40%,
rgba(242,242,246,.68) 64%,
rgba(70,70,78,.72) 88%,
var(--void) 100%),
linear-gradient(to right,
rgba(242,242,246,.55) 0%, rgba(242,242,246,0) 22%,
rgba(242,242,246,0) 80%, rgba(5,5,6,.35) 100%);
}
/* The words themselves. Only ever set while a light banner is actually behind them -
paintBanners clears this on every route - so nothing here can leak onto a page whose
header is the ordinary black. */
.page.on-light .back,
.page.on-light .head-text h1,
.page.on-light .head-text .sub,
.page.on-light .head-owner,
.page.on-light .head-text .sub a{
color:var(--void);
}
.page.on-light .sub-over .tag{
color:#16161a;
border-color:rgba(5,5,6,.3);
background:rgba(255,255,255,.35);
}
.page.on-light .sub-over .tag.is-active{
color:#07432c;
border-color:rgba(7,67,44,.35);
}
/* The amber summary line is tuned for a near black page and goes to mud on a pale one.
A darker amber keeps it the same piece of information rather than making it another
line of black text. */
.page.on-light .sub-sum,
.page.on-light .sub-sum em,
.page.on-light .sub-sum strong{ color:#7a4a00; }
/* The pen is drawn, not written, so it takes the colour the same way. */
.page.on-light .head-text .pen{ color:var(--void); opacity:.75; }
.page.on-light .head-text .pen:hover{ opacity:1; }
/* The one button sitting on the photograph needs the same treatment or it disappears
into it. */
.page.on-light .head-acts .act{
color:#f4f4f6;
background:rgba(12,12,15,.86);
border-color:rgba(12,12,15,.86);
}
/* Shorter where the header is already most of the screen. */
@media (max-width:640px){
.head-banner{ height:clamp(200px, 30vh, 280px); }
}
/* A decorative photograph is exactly the thing to drop when somebody has asked for less
movement and less noise. */
@media (prefers-reduced-motion:reduce){
.head-banner{ transition:none; }
}
.head h1{
margin:0; flex:1 1 auto;
font:400 clamp(26px,5vw,38px)/1.05 "Anton", Impact, sans-serif;
letter-spacing:.01em; text-transform:uppercase;
}
/* The one affordance per screen that creates something. Deliberately quiet - it sits
beside the title rather than shouting from a corner. */
.act{
flex:0 0 auto;
background:var(--bone); color:var(--void);
border:0; border-radius:var(--r-sm);
font:700 10px/1 "Space Mono", monospace;
letter-spacing:.18em; text-transform:uppercase;
padding:11px 15px; cursor:pointer;
transition:box-shadow .2s ease, transform .14s ease;
}
.act:hover{ box-shadow:0 0 24px rgba(220,228,240,.28); }
.act:active{ transform:translateY(1px); }
.sub{
margin:0 0 26px;
color:var(--dim); font-size:12.5px;
display:flex; gap:14px; flex-wrap:wrap; align-items:baseline;
}
/* Secondary verbs - rename, archive, delete. Text, because they are not what the screen
is for, and a row of buttons would compete with the work. */
.linky{
background:none; border:0; padding:0;
color:var(--silver); font:inherit;
text-decoration:underline; text-underline-offset:3px;
cursor:pointer;
}
.linky:hover{ color:var(--bone); }
.linky.danger{ color:var(--dimmer); }
.linky.danger:hover{ color:var(--bad); }
/* Stop, on a phone. A text link is the right weight for it - stopping a link should not
look like the thing you came here to do - but 31px of underlined text is a poor target
on glass. Padded out to 44 without changing how it reads. */
@media (hover:none){
.quick .who-acts .linky{
display:inline-flex; align-items:center;
min-height:44px; padding:0 4px;
}
}
.empty{
margin:26px 0 0;
padding:26px 0;
border-top:1px solid var(--line);
color:var(--dim); font-size:13px; line-height:1.65;
}
.aside{
margin:16px 0 0;
color:var(--dimmer); font-size:12px; line-height:1.6;
}
/* ------------------------------------------------------------------ rows */
.rows{ margin:22px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.rows li{ border-bottom:1px solid var(--line); }
.rows a,
.rows li > .row-main{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"main meta" "sub meta";
gap:3px 18px;
align-items:center;
padding:18px 2px;
text-decoration:none;
color:inherit;
transition:padding-left .16s ease, background-color .16s ease;
}
/* A whole row of plain text (an asset that is not a link) still has to lay out, so the
grid lives on the row itself in that case. */
.rows li:not(:has(a)){
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"main meta" "sub meta";
gap:3px 18px; align-items:center; padding:18px 2px;
}
.rows a:hover{ background:rgba(244,244,246,.03); padding-left:10px; }
.row-main{
grid-area:main;
display:flex; align-items:center; min-width:0;
font-size:15.5px; color:var(--bone);
}
/* The name inside a caption or a row. It does the truncating, so the three dots fall at
the end of the NAME and the state mark beside it survives - an ellipsis that ate the
tick made an activated account read as one nobody had opened. */
.nm-txt{
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
min-width:0;
}
/* Whitespace between flex items is dropped, so the online dot sets its own gap. */
.row-main > .dot{ flex:0 0 auto; margin-left:7px; }
.row-sub{
grid-area:sub;
font-size:12.5px; color:var(--dim);
overflow:hidden; white-space:nowrap;
/* Faded rather than cut with three dots, the same way the note line is. A client's
description can land here, and an ellipsis in the middle of a sentence reads as a
truncation error where a fade reads as "there is more". Short text is untouched:
the mask only ever covers the last stretch of the line, which is empty anyway. */
-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
mask-image:linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
}
.row-meta{
grid-area:meta;
font-size:11px; letter-spacing:.12em; text-transform:uppercase;
color:var(--dimmer); text-align:right; white-space:nowrap;
}
/* The link covers the picture and the words. Anything you can click separately -
a status dropdown - sits out here beside it, not nested inside an anchor. */
.rows li:has(.row-link),
.rows li:has(.row-side){
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:18px;
}
.row-link{ min-width:0; }
.row-side{
display:flex; align-items:center; gap:14px;
flex:0 0 auto;
padding-right:2px;
}
.row-side .row-meta{ text-align:right; }
/* Archived: present, legible, obviously not live. */
.rows li.is-off .row-main{ color:var(--dim); }
.rows li.is-off .row-meta{ opacity:.6; }
/* Row actions sit in the meta column. Normal case is text, so they stay out of the way
until wanted. */
.row-meta .linky{
margin-left:14px;
font-size:10px; letter-spacing:.14em; text-transform:uppercase;
text-decoration:none;
border-bottom:1px solid var(--line-2);
padding-bottom:2px;
}
.row-meta .linky:hover{ border-bottom-color:currentColor; }
/* Against a 64px thumbnail, actions centred in the row float in the middle of nothing.
Pinned to the top corner they line up with the title they belong to. */
#doc-list .row-meta{ align-self:start; padding-top:3px; }
#doc-list .row-meta .linky{ margin-left:0; }
/* The bin, drawn the same way as the pen so the pair match.
.pen.bin-row rather than .bin-row: this block sits ABOVE the .pen rules in this file,
and at equal specificity the later rule wins. Written as a single class it lost the
width, the margin AND the --pen mask, so the bin came out as a 5.5px pencil sitting
next to the real one. Two classes outranks one wherever either happens to be. */
.pen.bin-row{
--pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2zM6 9h12l-1 11a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L6 9zm3 2v9h2v-9H9zm4 0v9h2v-9h-2z'/%3E%3C/svg%3E");
width:16px; height:16px;
margin:0 0 0 12px;
-webkit-mask:var(--pen) center/contain no-repeat;
mask:var(--pen) center/contain no-repeat;
vertical-align:middle;
}
.pen.bin-row:hover{ background:var(--bad); }
/* ------------------------------------------------------------------ avatars */
/* A band is a picture before it is a word. Where there is no picture, initials on the
brand gradient - which reads as a decision rather than a missing image. */
/* 4:5 throughout. Portrait is the shape most of this work actually is - a singer, a
poster, a press shot - so the frame stops fighting the photograph, and one ratio
everywhere means a row of them lines up instead of stepping. */
.av{
grid-area:av;
width:64px; height:80px;
border-radius:var(--r-sm);
object-fit:cover;
display:grid; place-items:center;
flex:0 0 auto;
}
.av-ph{
background:var(--holo);
color:var(--bone);
font:700 12px/1 "Space Mono", monospace;
letter-spacing:.04em;
}
/* The header picture is the one that should carry the page. At 84px it was a list
thumbnail that happened to be at the top; at 160 it is the band. */
.av-big{ width:160px; height:200px; border-radius:var(--r); }
.av-big.av-ph{ font-size:46px; }
/* A row carrying an avatar needs a column for it. :has keeps the plain rows untouched. */
.rows a:has(.av),
/* ...and the same for a row that is not a link. The documents shelf is exactly that:
its row has no anchor, because View and the bin are buttons rather than navigation.
Without this the thumbnail had no column of its own and landed in the text one, which
is why it sat out of line with everything above it. */
.rows li:not(:has(a)):has(.av){
grid-template-columns:auto minmax(0,1fr) auto;
grid-template-areas:"av main meta" "av sub meta";
gap:2px 16px;
}
/* The third row exists only where there is something to put in it. Declaring the area
unconditionally would have given every row in the portal - assets, folders, documents
- an empty grid row and a few pixels of height for nothing. */
.rows a:has(.row-note){ grid-template-areas:"main meta" "sub meta" "note meta"; }
.rows a:has(.av):has(.row-note){
grid-template-areas:"av main meta" "av sub meta" "av note meta";
}
/* What the shoot actually was, under the file count. One line: this is a list you scan,
and a paragraph in every row turns it back into reading. It is cut by a mask rather
than an ellipsis, so a sentence that runs out of room dissolves instead of stopping on
three dots - and a short one is untouched, because the fade only ever covers the last
stretch of the line, which for short text is empty anyway. */
.row-note,
.card-note{
grid-area:note;
font-size:12px; line-height:1.5;
color:var(--dimmer);
white-space:nowrap; overflow:hidden;
-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
mask-image:linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
}
/* A card has room for two lines and no meta column beside them. */
.card-note{
grid-area:auto;
white-space:normal;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
max-height:3em;
-webkit-mask-image:linear-gradient(to bottom, #000 1.5em, rgba(0,0,0,.15) 3em);
mask-image:linear-gradient(to bottom, #000 1.5em, rgba(0,0,0,.15) 3em);
}
.head-client{ align-items:center; gap:26px; margin-bottom:10px; }
.head-client .head-text{ flex:1 1 auto; min-width:0; }
.head-client .head-text h1{ font-size:clamp(32px, 6vw, 52px); }
.head-client .head-text .sub{ margin:10px 0 0; gap:10px; }
@media (max-width:560px){
.head-client{ gap:16px; }
.av-big{ width:104px; height:130px; }
.av-big.av-ph{ font-size:30px; }
}
/* Pushed to the far right of the header, whatever the title does. Without margin-left
the actions sit against the text and the Upload button lands mid-page. */
/* Two rows, right-aligned. Downloading a whole delivery is the thing a client comes
here to do and the thing the studio does most often, so it sits on its own line as a
button rather than as a word tucked between New folder and Upload. */
.head-acts{
display:flex; flex-direction:column; align-items:flex-end; gap:11px;
flex:0 0 auto; margin-left:auto;
}
.head-acts-row{ display:flex; align-items:center; gap:12px; }
/* A square the same height as Upload, so the row sits on one line. New folder is a
thing you do occasionally and a word for it was as wide as the button that matters. */
.icon-act{
width:34px; height:34px; flex:none;
display:grid; place-items:center;
padding:0; cursor:pointer;
color:var(--silver);
border:1px solid var(--line-2);
border-radius:var(--r-sm);
background:transparent;
transition:color .14s ease, border-color .14s ease, background-color .14s ease;
}
.icon-act svg{ width:17px; height:17px; display:block; }
.icon-act:hover{ color:var(--void); background:var(--bone); border-color:var(--bone); }
.icon-act:focus-visible{ outline:1px solid var(--bone); outline-offset:2px; }
/* The same shape as Upload without the weight. Upload is the one that creates
something; this one only asks for what is already there. */
.act-quiet{
background:transparent; color:var(--bone);
border:1px solid var(--line-2);
padding:11px 17px;
}
.act-quiet:hover{
background:var(--bone); color:var(--void);
border-color:var(--bone);
box-shadow:0 0 24px rgba(220,228,240,.22);
}
/* Whether the account is live, and when they last looked, read before the name rather
than trailing after their email address - they are the two things being checked. */
.sub-over{
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
/* Sits between the back link and the header now, so it needs its own room above as
well as below rather than only the gap the header gave it. */
margin:-4px 0 16px;
position:relative; z-index:2;
}
/* Access and attention, said plainly. A client with no login is normal, not an error. */
.tag{
display:inline-flex; align-items:center; gap:6px;
font-size:9px; letter-spacing:.16em; text-transform:uppercase;
padding:3px 7px; border-radius:var(--r-sm);
border:1px solid var(--line);
color:var(--dimmer);
white-space:nowrap;
}
.tag-on{ color:var(--good); border-color:rgba(70,224,168,.35); }
/* Looking right now. The only thing on these screens that moves on its own, which is
the point: it should catch your eye once and then be ignorable. */
.tag-live{ color:var(--good); border-color:rgba(70,224,168,.4); }
.tag-live i,
.dot{
width:6px; height:6px; border-radius:50%;
background:var(--good);
box-shadow:0 0 0 0 rgba(70,224,168,.55);
animation:beat 2.4s ease-out infinite;
flex:0 0 auto;
}
.dot{ display:inline-block; margin-left:7px; vertical-align:middle; }
@keyframes beat{
0% { box-shadow:0 0 0 0 rgba(70,224,168,.5); }
70% { box-shadow:0 0 0 6px rgba(70,224,168,0); }
100% { box-shadow:0 0 0 0 rgba(70,224,168,0); }
}
.rows li.is-here .row-sub{ color:var(--good); }
/* The pen. Masked SVG rather than an icon font or an ![]()
: it inherits colour, so it
can sit quietly beside a heading and brighten on hover without a second asset. */
.pen{
--pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
display:inline-block;
vertical-align:middle;
/* A button does not inherit font-size, so without this the em below resolves against
the browser's 13px default and the pen comes out 7px beside a 38px heading. */
font-size:inherit;
/* Sized against the heading, and a touch above the baseline so it reads as an
affordance rather than punctuation. */
width:0.5em; height:0.5em;
margin:0 0 .12em .4em;
border:0; padding:0;
background:var(--dim);
-webkit-mask:var(--pen) center/contain no-repeat;
mask:var(--pen) center/contain no-repeat;
cursor:pointer;
transition:background-color .14s ease;
}
.pen:hover{ background:var(--bone); }
/* The pen when it sits in a list row rather than beside a heading: sized in px, because
there is no large heading nearby to take an em from. */
.pen-row{
width:16px; height:16px;
margin:0 0 0 14px;
-webkit-mask:var(--pen) center/contain no-repeat;
mask:var(--pen) center/contain no-repeat;
vertical-align:middle;
}
.pen:focus-visible{ outline:1px solid var(--line-2); outline-offset:3px; }
/* ------------------------------------------------------------------ filters */
.filters{
display:flex; flex-wrap:wrap; gap:10px 26px;
margin:24px 0 0;
padding:0 0 18px;
border-bottom:1px solid var(--line);
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
background:none;
border:1px solid var(--line);
border-radius:var(--r-sm);
color:var(--dim);
font:400 10px/1 "Space Mono", monospace;
letter-spacing:.16em; text-transform:uppercase;
padding:8px 11px;
cursor:pointer;
transition:color .14s ease, border-color .14s ease, background-color .14s ease;
}
.chip em{ font-style:normal; color:var(--dimmer); margin-left:5px; }
.chip:hover{ color:var(--bone); border-color:var(--line-2); }
.chip.on{ background:var(--bone); border-color:var(--bone); color:var(--void); font-weight:700; }
.chip.on em{ color:var(--dimmer); }
/* ------------------------------------------------------------------ bulk bar */
/* Appears only when something is ticked, and sticks to the top so it stays reachable
halfway down a shoot of four hundred frames. */
/* The bar that appears once something is ticked. It used to be a row of underlined text
links at one weight, which made eight equally shouty options with no sense of which
was the usual one and which was the one you cannot undo. Now: a count, the action you
almost always want, the rest as quiet pills, and the destructive one in red where it
cannot be mistaken for the others. */
.bulk{
position:sticky; top:0; z-index:12;
display:flex; align-items:center; flex-wrap:wrap;
gap:8px;
margin:0; padding:12px 2px;
background:rgba(5,5,6,.92);
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);
}
.bulk-n{
flex:none;
margin-right:6px;
padding:7px 12px;
border-radius:999px;
background:var(--bone);
color:var(--void);
font:700 11px/1 "Space Mono", monospace;
letter-spacing:.14em; text-transform:uppercase;
}
/* The bar as it looks the moment select mode opens, before anything has been ticked.
The count is a solid white pill when it has a number to report; with nothing to report
it would be a loud badge announcing an absence, which is the wrong emphasis for what
is really a prompt to press the button beside it. */
.bulk.is-empty .bulk-n{
background:none;
color:var(--dim);
box-shadow:inset 0 0 0 1px var(--line);
}
.bulk-act{
flex:none;
padding:7px 13px;
border:1px solid var(--line-2);
border-radius:999px;
background:none;
color:var(--silver);
font:400 11px/1 "Space Mono", monospace;
letter-spacing:.12em; text-transform:uppercase;
cursor:pointer;
transition:color .14s ease, border-color .14s ease, background-color .14s ease;
}
.bulk-act:hover{ color:var(--bone); border-color:var(--bone); }
/* The one you reach for most of the time. */
.bulk-act.is-go{
background:var(--bone); border-color:var(--bone); color:var(--void);
font-weight:700;
}
.bulk-act.is-go:hover{ background:#fff; border-color:#fff; color:var(--void); }
.bulk-act.is-bad{ color:var(--bad); border-color:rgba(255,92,92,.38); }
.bulk-act.is-bad:hover{
background:var(--bad); border-color:var(--bad); color:var(--void);
}
/* A hairline between the primary action and the rest. */
.bulk-sep{
width:1px; height:18px;
background:var(--line-2);
margin:0 4px;
}
/* Housekeeping, pushed to the end and deliberately plain: these are not things you
came here to do. */
.bulk-rest{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.bulk-quiet{
border:0; background:none; cursor:pointer;
padding:4px 0;
font:400 11px/1 "Space Mono", monospace;
letter-spacing:.12em; text-transform:uppercase;
color:var(--dimmer);
}
.bulk-quiet:hover{ color:var(--bone); }
@media (max-width:620px){
.bulk-rest{ margin-left:0; }
.bulk-sep{ display:none; }
}
/* A project's own words, above its files. Kept at reading measure even though the rest
of the page now runs full width, and pre-line so a description typed as two paragraphs
arrives as two paragraphs. */
.blurb{
margin:18px 0 0;
max-width:760px;
font-size:14.5px; line-height:1.7;
color:var(--silver);
white-space:pre-line;
}
/* The multi-line field in a dialog. Matches the single-line inputs it sits beside. */
.field textarea{
width:100%;
padding:11px 13px;
font:inherit; font-size:14px; line-height:1.6;
color:var(--bone);
background:var(--ink-3);
border:1px solid var(--line);
border-radius:var(--r-sm);
resize:vertical;
min-height:92px;
}
.field textarea:focus{ outline:none; border-color:var(--line-2); }
/* Where a client's login has got to. Four states, told apart by colour as well as by
words, because down a list of twenty the colour is what you actually read. */
.tag-acc{ white-space:nowrap; }
.tag-acc.is-active{ color:#39d98a; border-color:rgba(57,217,138,.4); }
.tag-acc.is-sent{ color:#ff9a3c; border-color:rgba(255,154,60,.4); }
/* Opened but not finished. Between amber and green on purpose: something has happened
since the email went out, and it is not nothing, but they are not in yet either. */
.tag-acc.is-opened{ color:#ffd166; border-color:rgba(255,209,102,.4); }
.tag-acc.is-none, .tag-acc.is-noemail{ color:var(--dimmer); }
/* The same three states as an icon. No border and no padding - a badge drawn round a
16px glyph is mostly border, and these sit in rows that already have enough boxes. */
.acc-mark{
display:inline-flex; align-items:center;
width:16px; height:16px;
flex:0 0 auto;
}
/* The last word of a name plus its mark. See withMark() - this is what stops the tick
dropping to a line of its own on a narrow card. */
.nm-end{ white-space:nowrap; }
.acc-mark svg{ width:16px; height:16px; display:block; }
.acc-mark.is-active{ color:#39d98a; }
.acc-mark.is-sent{ color:#ff9a3c; }
.acc-mark.is-opened{ color:var(--blue); }
/* Against the name wherever a name is drawn. inline-flex with a baseline nudge rather
than a flex child, because these names live in three different containers - a card
caption, a row's main cell and a heading - and only one of them is a flex row. */
.card-name .acc-mark,
.row-main .acc-mark,
.who-text > strong .acc-mark,
h1 .acc-mark{
display:inline-flex; vertical-align:-3px;
margin-left:7px;
}
/* The page heading is set much larger than the lists, so a 16px glyph beside it reads
as a speck. Scaled to the type rather than to a fixed size. */
h1 .acc-mark{ width:0.52em; height:0.52em; vertical-align:0.06em; }
h1 .acc-mark svg{ width:100%; height:100%; }
/* An entry the studio put on the calendar by hand. Told apart from a deadline by being
filled rather than outlined: a due date is something owed, an entry is just a fact
about the day, and they should not read as the same kind of thing. */
.cal-own{
display:block; width:100%;
text-align:left;
border:0;
background:var(--glass-3);
color:var(--bone);
cursor:pointer;
}
.cal-own:hover{ background:var(--bone); color:var(--void); }
/* The same row as a deadline in the Coming up list, but a button. */
.up-entry{
display:flex; align-items:baseline; gap:14px;
width:100%; padding:11px 14px;
border:0; background:none; cursor:pointer;
font:inherit; text-align:left;
}
.up-entry:hover{ background:var(--glass); }
/* Whose project this is, above its name. Deliberately small and above rather than
beside: you are already looking at the project, this answers the question you ask a
second later, and it is a way back to the artist as well as a label. */
.head-owner{
display:inline-flex; align-items:center; gap:9px;
margin:0 0 8px;
font:400 11px/1 "Space Mono", monospace;
letter-spacing:.16em; text-transform:uppercase;
color:var(--silver);
text-decoration:none;
}
.head-owner:hover{ color:var(--bone); }
.head-owner img, .head-owner-ph{
width:22px; height:22px; flex:none;
border-radius:50%;
object-fit:cover;
display:grid; place-items:center;
}
.head-owner-ph{
background:var(--glass-3);
font-size:9px; letter-spacing:.04em; color:var(--silver);
}
/* Arrived since this client last looked. Top right, where the studio's selection badge
sits in the other mode - the two are never on screen together, because a client never
selects and the studio never sees these. */
.tile-new{
position:absolute; right:10px; top:10px;
padding:4px 8px;
font:700 9px/1 "Space Mono", monospace;
letter-spacing:.16em; text-transform:uppercase;
color:var(--void);
background:var(--bone);
border-radius:999px;
pointer-events:none;
}
/* Picking whole clients or projects. The box sits over the thumbnail in both layouts
rather than taking a column, so turning the mode on does not reflow the list. */
.rows li, .card{ position:relative; }
.row-pick{
position:absolute; left:8px; top:8px; z-index:2;
width:20px; height:20px;
border:1px solid var(--line-2);
border-radius:var(--r-sm);
background:rgba(5,5,6,.72);
-webkit-backdrop-filter:blur(3px);
backdrop-filter:blur(3px);
cursor:pointer;
}
.row-pick:hover{ border-color:var(--bone); }
.rows li.is-picked .row-pick,
.card.is-picked .row-pick{ background:var(--bone); border-color:var(--bone); }
.rows li.is-picked .row-pick::before,
.card.is-picked .row-pick::before{
content:"";
position:absolute; left:6px; top:2px;
width:5px; height:10px;
border:solid var(--void); border-width:0 2px 2px 0;
transform:rotate(45deg);
}
.rows li.is-picked{ background:var(--glass); }
.card.is-picked .card-shot{ box-shadow:0 0 0 2px var(--bone); }
/* ------------------------------------------------------------------ gallery */
.grid{
margin:26px 0 0; padding:0;
list-style:none;
display:grid;
grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--tile, 280px)), 1fr));
gap:clamp(14px, 1.8vw, 24px);
}
.tile{ position:relative; min-width:0; }
.tile-shot{
position:relative;
width:100%; padding:0; margin:0;
font:inherit; color:inherit; text-align:inherit;
cursor:pointer;
aspect-ratio:4 / 5;
border:1px solid var(--line);
border-radius:var(--r-sm);
background:var(--ink-3);
display:grid; place-items:center;
overflow:hidden;
transition:border-color .16s ease;
}
.tile:hover .tile-shot{ border-color:var(--line-2); }
.tile-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Stand-in until the file store is connected. Faint diagonals so an empty tile reads as
"nothing loaded here yet" rather than as a broken image. */
.tile-ph{
font:700 11px/1 "Space Mono", monospace;
letter-spacing:.26em;
color:var(--dimmer);
width:100%; height:100%;
display:grid; place-items:center;
background:repeating-linear-gradient(135deg,
rgba(244,244,246,.022) 0 10px, transparent 10px 20px);
}
/* Video marker. Drawn rather than an asset, so it cannot 404 and costs no request. */
.tile-play{
position:absolute; left:50%; top:50%;
width:46px; height:46px; margin:-23px 0 0 -23px;
border:1px solid var(--line-2);
border-radius:50%;
background:rgba(5,5,6,.45);
backdrop-filter:blur(2px);
}
.tile-play::after{
content:"";
position:absolute; left:18px; top:14px;
border-style:solid;
border-width:9px 0 9px 14px;
border-color:transparent transparent transparent var(--bone);
}
/* Status, on the image rather than under it: at a glance down a wall of forty frames
you should be able to see which have gone out without reading a word. */
.tile-flag{
position:absolute; left:0; top:0;
padding:5px 9px;
font:400 9px/1 "Space Mono", monospace;
letter-spacing:.16em; text-transform:uppercase;
color:var(--dim);
background:rgba(5,5,6,.78);
backdrop-filter:blur(3px);
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.tile.is-brief .tile-shot{ border-style:dashed; }
/* Only drawn while selecting. The whole picture is the hit area now, so this is a badge
saying what will happen rather than the target you have to find. */
.tile-pick{
position:absolute; right:10px; top:10px;
width:20px; height:20px;
border:1px solid var(--line-2);
border-radius:var(--r-sm);
background:rgba(5,5,6,.6);
-webkit-backdrop-filter:blur(3px);
backdrop-filter:blur(3px);
transition:background-color .12s ease, border-color .12s ease;
pointer-events:none;
}
.tile-shot:hover .tile-pick{ border-color:var(--bone); }
.tile.is-picked .tile-pick{
background:var(--bone);
border-color:var(--bone);
}
/* the tick, drawn so there is no icon font to load */
.tile.is-picked .tile-pick::before{
content:"";
position:absolute; left:6px; top:3px;
width:5px; height:10px;
border:solid var(--void);
border-width:0 2px 2px 0;
transform:rotate(45deg);
}
.tile.is-picked .tile-shot{
border-color:var(--bone);
box-shadow:0 0 0 2px var(--bone);
}
.tile-foot{
display:flex; align-items:baseline; gap:10px;
padding:10px 2px 0;
}
.tile-name{
flex:1 1 auto; min-width:0;
font-size:12.5px; color:var(--bone);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tile-meta{
flex:0 0 auto;
font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dimmer);
}
/* Actions stay out of the way until the tile is wanted. Always visible on touch, where
there is no hover to reveal them. */
/* On the picture, not under it. A row of four words beneath every frame was four words
to read forty times down a contact sheet, and it pushed the next row of images off the
screen. These are marks in a corner of the image that is already being looked at. */
.tile-tools{
position:absolute; right:8px; top:8px;
display:flex; gap:6px;
opacity:0;
transform:translateY(-3px);
transition:opacity .14s ease, transform .14s ease;
pointer-events:none;
}
.tile:hover .tile-tools,
.tile:focus-within .tile-tools{
opacity:1;
transform:none;
pointer-events:auto;
}
/* The dots, phone only. On a desktop the five tools appear on hover across the top of
the tile and there is room for them; on a 375px screen two tiles across leaves about
170px, which is not room for five 34px buttons - they ran off the edge of the tile
and over the one beside it. */
.tile-dots{
display:none;
position:absolute; right:6px; top:6px;
width:34px; height:34px;
padding:0;
border:1px solid var(--glass-line);
border-radius:999px;
background:rgba(18,18,22,.82);
-webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
cursor:pointer;
z-index:3;
}
/* Three dots, drawn with one element and two shadows. */
.tile-dots i{
display:block;
width:3px; height:3px;
margin:0 auto;
border-radius:50%;
background:var(--bone);
box-shadow:0 -6px 0 var(--bone), 0 6px 0 var(--bone);
}
@media (hover:none), (max-width:620px){
.tile-dots{ display:block; }
/* Shut until the dots are pressed, then a column under them rather than a row across
the tile - a column has as much room as the tile is tall, which is plenty. */
.tile .tile-tools{
right:6px; top:46px;
flex-direction:column;
display:none; /* opened by showTools(), which sets display inline */
opacity:1; pointer-events:auto;
transform:none;
transition:none;
padding:6px;
border:1px solid var(--glass-line);
border-radius:12px;
background:rgba(14,14,18,.94);
-webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
box-shadow:0 18px 40px rgba(0,0,0,.5);
z-index:4;
}
.tile.tools-on .tile-tools{
opacity:1; pointer-events:auto; transform:none;
}
.tile.tools-on .tile-dots{ border-color:var(--line-2); }
}
/* Nothing hovers on a phone, so they used to simply stay - which is what put five
buttons across a 170px tile. They now live behind the dots above, so this is gone
rather than overridden: a rule that no longer does anything is a rule somebody will
later spend an afternoon on. */
.tool{
width:30px; height:30px;
flex:none;
display:grid; place-items:center;
padding:0; margin:0;
cursor:pointer;
color:var(--silver);
border:1px solid var(--line);
border-radius:var(--r-sm);
background:rgba(5,5,6,.72);
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
transition:color .12s ease, border-color .12s ease, background-color .12s ease;
}
.tool svg{ width:16px; height:16px; display:block; }
.tool:hover{
color:var(--void);
background:var(--bone);
border-color:var(--bone);
}
.tool:focus-visible{ outline:1px solid var(--bone); outline-offset:2px; }
/* Already spoken for. Green at a glance, so the same frame is not picked twice down a
wall of forty - the hover says which galleries, and whether it is built yet. */
.tool.is-on{
color:var(--good);
border-color:rgba(70,224,168,.45);
background:rgba(70,224,168,.1);
}
.tool.is-on:hover{
color:var(--void);
background:var(--good);
border-color:var(--good);
}
/* The one that cannot be undone is the one that looks different before it is pressed. */
.tool.is-bad:hover{
color:var(--void);
background:var(--bad, #ff6b6b);
border-color:var(--bad, #ff6b6b);
}
/* A larger target where the pointer is a finger. */
@media (hover:none){
.tool{ width:34px; height:34px; }
}
/* ---------------------------------------------------------- the homepage menu */
/* The house and its galleries are one hover area. A gap between the button and the
menu would drop the hover halfway down, so the menu's own top padding bridges it
and the wrapper covers both. */
/* Static on a tile so the menu hangs off the icon row's right edge rather than the
house's - the house is the leftmost of the three, and a menu aligned to it alone
spilled past the side of the picture. The hover still works from the house, because
:hover follows the DOM and the menu is inside it. */
.tool-home{ position:static; display:inline-flex; }
.bulk-home{ position:relative; }
.home-menu{
position:absolute; right:0; top:100%;
z-index:30;
min-width:172px;
padding:7px 0 0;
opacity:0;
transform:translateY(-4px);
pointer-events:none;
transition:opacity .14s ease, transform .14s ease;
}
.tool-home:hover .home-menu,
.tool-home:focus-within .home-menu{
opacity:1; transform:none; pointer-events:auto;
}
.home-menu > :not(.home-menu-t):first-of-type,
.home-menu-t{ border-top-left-radius:var(--r-sm); border-top-right-radius:var(--r-sm); }
.home-menu > :last-child{
border-bottom-left-radius:var(--r-sm); border-bottom-right-radius:var(--r-sm);
}
.home-menu-t{
display:block;
padding:9px 12px 7px;
font:400 8.5px/1.3 "Space Mono", ui-monospace, monospace;
letter-spacing:.17em; text-transform:uppercase;
color:var(--dimmer);
background:rgba(5,5,6,.96);
border:1px solid var(--line);
border-bottom:0;
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
}
.home-opt{
display:block; width:100%;
padding:8px 12px;
text-align:left; cursor:pointer;
font:400 11.5px/1 "Space Mono", ui-monospace, monospace;
letter-spacing:.06em;
color:var(--silver);
background:rgba(5,5,6,.96);
border:1px solid var(--line);
border-bottom:0;
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
transition:color .1s ease, background-color .1s ease;
}
.home-menu > .home-opt:last-child{ border-bottom:1px solid var(--line); }
.home-opt:hover{ color:var(--void); background:var(--bone); }
.home-opt:focus-visible{ outline:1px solid var(--bone); outline-offset:-1px; }
/* Where the frame already is. Pressing one of these takes it off again, so the tick
is also the affordance - and the red on hover says which way it is about to go. */
.home-opt.is-on::after,
.home-opt.is-some::after{
content:"✓";
float:right; margin-left:10px;
}
/* The same green as the house, so the icon and the gallery it refers to are obviously
the same fact. A dash and a muted green for a selection where only some of the frames
are in: pressing it adds the rest rather than taking the others off. */
.home-opt.is-on{
color:var(--good);
background:rgba(70,224,168,.09);
}
.home-opt.is-some{ color:rgba(70,224,168,.6); }
.home-opt.is-some::after{ content:"–"; }
.home-opt.is-on:hover,
.home-opt.is-some:hover{ color:var(--void); background:var(--bad, #ff5b6e); }
/* On the bulk bar the row runs left to right and there is room, so it drops straight
down under the button instead of hugging a corner. */
.bulk-home .home-menu{ right:auto; left:0; top:100%; }
/* ------------------------------------------------------------------ dialog */
.ask{
border:1px solid var(--glass-line);
border-radius:var(--r);
background:rgba(18,18,22,.72);
-webkit-backdrop-filter:var(--blur);
backdrop-filter:var(--blur);
box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(244,244,246,.06);
color:var(--bone);
padding:0;
width:min(420px, calc(100vw - 32px));
}
.ask::backdrop{ background:rgba(2,2,4,.72); backdrop-filter:blur(2px); }
.ask form{ padding:26px; position:relative; }
/* Two strokes crossed, drawn rather than fetched. Sits in the padding so it never
collides with the heading, however long the heading is. */
.ask-x{
position:absolute; right:12px; top:12px;
width:36px; height:36px;
border:0; border-radius:var(--r-sm);
background:none;
cursor:pointer;
transition:background-color .14s ease;
}
.ask-x::before,
.ask-x::after{
content:"";
position:absolute; left:50%; top:50%;
width:13px; height:1px;
margin:-1px 0 0 -7px;
background:var(--dim);
transition:background-color .14s ease;
}
.ask-x::before{ transform:rotate(45deg); }
.ask-x::after{ transform:rotate(-45deg); }
.ask-x:hover{ background:var(--glass-2); }
.ask-x:hover::before, .ask-x:hover::after{ background:var(--bone); }
.ask-x:focus-visible{ outline:1px solid var(--line-2); outline-offset:2px; }
/* Keep the title clear of it. */
.ask h2{ padding-right:34px; }
.ask h2{
margin:0 0 8px;
font:400 20px/1.15 "Anton", Impact, sans-serif;
letter-spacing:.02em; text-transform:uppercase;
}
.ask-note{ margin:0 0 18px; color:var(--dim); font-size:12.5px; line-height:1.6; }
.ask label{ margin-bottom:7px; }
.ask .field:last-child{ margin-bottom:0; }
/* Per-field guidance, under the input it explains rather than stacked in the note. */
.field-hint{
margin:6px 0 0;
font-size:11px; line-height:1.5;
color:var(--dimmer);
}
/* The destructive option, kept well away from Save. */
.ask-extra{
margin:18px 0 0;
padding-top:16px;
border-top:1px solid var(--line);
text-align:center;
}
.ask-extra .linky{ font-size:11px; }
.ask-row{ display:flex; gap:10px; margin-top:20px; }
.ask-row .go{ margin-top:0; flex:1 1 auto; width:auto; }
.ask-cancel{
flex:0 0 auto;
background:none; border:1px solid var(--line); border-radius:var(--r-sm);
color:var(--dim);
font:400 10px/1 "Space Mono", monospace;
letter-spacing:.16em; text-transform:uppercase;
padding:13px 14px; cursor:pointer;
}
.ask-cancel:hover{ color:var(--bone); border-color:var(--line-2); }
/* Destructive confirmation. Red, so the button does not look like every other Save. */
.go.danger{ background:var(--bad); color:#2a0208; }
.go.danger:hover{ box-shadow:0 0 26px rgba(255,91,110,.35); }
/* The bar used to wrap onto three rows here, to fit five navigation links, a name and
a Sign out button onto a phone. All three of those have moved - the links to the tab
bar along the bottom, the name and Sign out into the menu - so it is one row again.
The rules that do it are in the phone block at the end of this file, kept together
with the rest of the handset layout rather than left behind here. */
/* ------------------------------------------------------------------ status */
/* Four states, four weights of attention. On hold is the one that should catch your
eye in a list of thirty; delivered is the one that should stop asking for it. */
.st{
display:inline-block;
font-size:11px; letter-spacing:.12em; text-transform:uppercase;
padding:5px 9px; border-radius:var(--r-sm);
border:1px solid var(--line);
color:var(--dim);
white-space:nowrap;
}
/* The same chip, but it is a control. Styled as the chip rather than as a browser
dropdown so a list of them still reads as a column of statuses, not a form. */
.st-pick{
-webkit-appearance:none; appearance:none;
font:400 11px/1 "Space Mono", monospace;
letter-spacing:.12em; text-transform:uppercase;
padding:6px 24px 6px 9px;
border-radius:var(--r-sm);
border:1px solid var(--line);
background:
linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 12px) 50% / 4px 4px no-repeat,
linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 8px) 50% / 4px 4px no-repeat,
var(--void);
color:var(--dim);
cursor:pointer;
transition:border-color .14s ease, color .14s ease;
}
.st-pick:hover{ border-color:var(--line-2); }
.st-pick:focus{ outline:none; border-color:var(--line-2);
box-shadow:0 0 0 1px rgba(47,139,240,.3); }
.st-pick:disabled{ opacity:.5; cursor:default; }
.st-pick option{ background:var(--ink-3); color:var(--bone); letter-spacing:0; }
/* Deadlines, read at a glance. */
.tag-soon{ color:#ffcf6b; border-color:rgba(255,207,107,.4); }
.tag-late{ color:var(--bad); border-color:rgba(255,91,110,.45); }
/* The deadline tag takes its hue from how far off the date is - dueHue() in app.js
writes it into --due-h. One rule covers the whole run from green to red, so there is
no list of colour classes to keep in step with the thresholds. */
.tag-due{
color:hsl(var(--due-h, 58) 90% 68%);
border-color:hsl(var(--due-h, 58) 90% 68% / .42);
background:hsl(var(--due-h, 58) 90% 68% / .07);
}
/* Overdue is the one that should stop you, so it gets weight the others do not. */
.tag-due.is-late{
color:hsl(0 95% 72%);
border-color:hsl(0 95% 72% / .5);
background:hsl(0 95% 72% / .12);
font-weight:700;
}
/* The deadline sits under the status rather than beside it: they answer two different
questions, and on one line the eye reads them as a single long label. */
.row-state{
display:flex; flex-direction:column; align-items:flex-end; gap:6px;
}
/* Four states, four colours, read as a traffic light: red has stopped, cyan has begun,
orange is moving, green is done. Colour carries the meaning before the word does, so a
column of thirty projects can be skimmed rather than read.
*
* Violet is deliberately not here. It already means "a client did this" in the activity
* log, and one colour cannot mean two things. */
.st-hold{ --sc:#ff5b6e; }
.st-started{ --sc:#2ee6f0; }
.st-wip{ --sc:#ff9a3c; }
.st-done{ --sc:#46e0a8; }
.st-hold, .st-started, .st-wip, .st-done{ color:var(--sc); }
/* A tinted fill on the static chip; the dropdown keeps its own background because that
is what draws its arrow. */
.st.st-hold{ border-color:rgba(255,91,110,.48); background:rgba(255,91,110,.09); }
.st.st-started{ border-color:rgba(46,230,240,.42); background:rgba(46,230,240,.08); }
.st.st-wip{ border-color:rgba(255,154,60,.48); background:rgba(255,154,60,.09); }
.st.st-done{ border-color:rgba(70,224,168,.45); background:rgba(70,224,168,.08); }
.st-pick.st-hold{ border-color:rgba(255,91,110,.48); }
.st-pick.st-started{ border-color:rgba(46,230,240,.42); }
.st-pick.st-wip{ border-color:rgba(255,154,60,.48); }
.st-pick.st-done{ border-color:rgba(70,224,168,.45); }
.row-meta .st{ margin-right:10px; }
/* The project summary on a client. Coloured by the status it is counting, so a row of
clients can be read for trouble before it is read for names - the one with something
on hold is red whatever it is called. */
.sum{
color:var(--sc, var(--dim));
font-size:11px; letter-spacing:.1em; text-transform:uppercase;
white-space:nowrap;
}
.sum-sep{ color:var(--dimmer); margin:0 2px; }
.sub-sum{ margin-top:8px; }
/* ------------------------------------------------------------------ calendar */
/* The list comes before the grid on purpose. A month view answers "when is that due";
this answers "what do I have to do", which is the question people actually arrive
with. The grid is for orientation afterwards. */
.upcoming{ margin:4px 0 34px; }
.up-head{
margin:0 0 10px;
font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.up-list{ list-style:none; margin:0; padding:0; }
.up-list li + li{ border-top:1px solid var(--line); }
.up-list a{
display:grid; grid-template-columns:130px 1fr auto auto; gap:16px;
align-items:baseline; padding:11px 10px; border-radius:var(--r-sm);
color:var(--bone); text-decoration:none;
}
.up-list a:hover{ background:var(--glass); }
.up-when{
font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
white-space:nowrap;
}
.up-when.is-late{ color:var(--bad); }
.up-when.is-soon{ color:#ff9a3c; }
.up-name{ font-size:14px; }
.up-who, .up-date{ font-size:11px; color:var(--dimmer); white-space:nowrap; }
.cal-bar{ display:flex; align-items:center; gap:12px; margin:0 0 12px; }
.cal-title{
margin:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
min-width:190px; text-align:center;
}
/* Pushed to the far end of the row, away from the two arrows. It does something
different from them - it jumps rather than steps - and sitting beside them invited a
stray click. */
.cal-today{ margin-left:auto; }
.cal-grid{
display:grid; grid-template-columns:repeat(7, 1fr); gap:1px;
background:var(--line); border:1px solid var(--line); border-radius:var(--r);
overflow:hidden;
}
.cal-dow{
background:var(--ink-2); padding:9px 10px;
font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer);
}
.cal-cell{
background:var(--void); min-height:96px; padding:7px 7px 9px;
display:flex; flex-direction:column; gap:4px;
}
.cal-cell.is-empty{ background:var(--ink-2); opacity:.45; }
.cal-cell.is-today{ background:var(--glass-2); }
.cal-day{ font-size:11px; color:var(--dimmer); }
.cal-cell.is-today .cal-day{ color:var(--bone); font-weight:700; }
/* Coloured by the project's status, the same four colours used everywhere else, so the
grid needs no legend of its own. */
.cal-pill{
display:block; padding:3px 6px; border-radius:4px;
font-size:10.5px; line-height:1.35; text-decoration:none;
color:var(--bone); background:var(--glass-2);
border-left:2px solid var(--sc, var(--dim));
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cal-pill:hover{ background:var(--glass-3); }
.cal-pill.is-late{ border-left-color:var(--bad); }
/* Three filter groups on one line, wrapping to their own lines on a narrow screen. The
little labels matter: without them three rows of chips is a puzzle rather than a tool. */
.act-filters{ flex-wrap:wrap; gap:10px 22px; align-items:center; }
.act-filters .chips{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.chips-label{
font-size:9px; letter-spacing:.16em; text-transform:uppercase;
color:var(--dimmer); margin-right:2px;
}
/* The select borrows the status picker's styling, minus the status colour. */
.act-thing{ color:var(--silver); padding:6px 26px 6px 10px; font-size:11px; }
.act-count{
margin:14px 0 0;
font-size:11px; letter-spacing:.1em; text-transform:uppercase;
color:var(--dimmer);
}
.act-count .linky{ font-size:11px; letter-spacing:.1em; }
/* A thumbnail arrives after its tile does, so it fades in rather than snapping. Starting
at zero also hides the broken-image glyph when a link never arrives. */
.tile-shot img[data-shot]{ opacity:0; transition:opacity .25s ease; }
.tile-shot img[data-shot].on{ opacity:1; }
/* The upload panel. Bottom right, above everything, and deliberately not modal: a
gallery filling with forty frames is something you watch while carrying on. */
.uq{
position:fixed; right:18px; bottom:18px; z-index:70;
transform:translateY(16px);
opacity:0;
transition:opacity .2s ease, transform .2s ease;
width:min(380px, calc(100vw - 32px));
background:rgba(18,18,22,.86);
-webkit-backdrop-filter:var(--blur);
backdrop-filter:var(--blur);
border:1px solid var(--glass-line);
border-radius:var(--r);
box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(244,244,246,.06);
overflow:hidden;
}
.uq.on{ opacity:1; transform:translateY(0); }
.uq-head{
display:flex; align-items:center; gap:10px;
padding:12px 12px 12px 16px;
border-bottom:1px solid var(--line);
}
.uq-title{
margin:0; flex:1; min-width:0;
font:400 11px/1.4 "Space Mono", monospace;
letter-spacing:.14em; text-transform:uppercase;
color:var(--silver);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.uq-fold, .uq-shut{
width:24px; height:24px; flex:none;
border:0; background:none; cursor:pointer;
position:relative;
border-radius:var(--r-sm);
}
.uq-fold:hover, .uq-shut:hover{ background:var(--glass); }
/* A chevron and a cross, drawn rather than loaded. */
.uq-fold::before{
content:""; position:absolute; left:8px; top:9px;
width:7px; height:7px;
border:solid var(--silver); border-width:0 0 1.5px 1.5px;
transform:rotate(-45deg);
transition:transform .18s ease;
}
.uq.is-folded .uq-fold::before{ transform:rotate(135deg); top:11px; }
.uq-shut::before, .uq-shut::after{
content:""; position:absolute; left:6px; top:11px;
width:12px; height:1.5px; background:var(--silver);
}
.uq-shut::before{ transform:rotate(45deg); }
.uq-shut::after{ transform:rotate(-45deg); }
.uq-list{
list-style:none; margin:0; padding:4px 0;
max-height:min(46vh, 340px);
overflow:auto;
transition:max-height .22s ease, padding .22s ease;
}
.uq.is-folded .uq-list{ max-height:0; padding:0; overflow:hidden; }
.uq-row{
display:flex; align-items:center; gap:11px;
padding:7px 16px;
}
.uq-name{
flex:1; min-width:0;
font-size:13px; color:var(--bone);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.uq-row.is-waiting .uq-name{ color:var(--dim); }
.uq-pct{
flex:none;
font:400 10px/1 "Space Mono", monospace;
letter-spacing:.08em;
color:var(--dimmer);
min-width:34px; text-align:right;
}
/* Cancelling. Per row and for the whole run, because changing your mind about one
400MB video is a different thing from changing your mind about the lot. */
.uq-all{
flex:none;
border:0; background:none; cursor:pointer;
padding:4px 2px;
font:400 10px/1 "Space Mono", monospace;
letter-spacing:.12em; text-transform:uppercase;
color:var(--dimmer);
}
.uq-all:hover{ color:var(--bad); }
.uq-stop{
flex:none; position:relative;
width:20px; height:20px;
border:0; background:none; cursor:pointer;
border-radius:50%;
opacity:0;
transition:opacity .14s ease, background-color .14s ease;
}
/* Shown on hover, and always while a row is actually moving - that is the one you are
most likely to want to stop, and hunting for a control that only appears on hover is
no use on a phone. */
.uq-row:hover .uq-stop,
.uq-row.is-live .uq-stop{ opacity:1; }
/* On a touch screen there is no hover to reveal anything, so every row that can still
be stopped shows its control. Without this a queued file was uncancellable on a
phone, which is exactly where you are most likely to have picked the wrong folder. */
@media (hover: none){
.uq-row.is-waiting .uq-stop,
.uq-row.is-live .uq-stop{ opacity:1; }
}
.uq-stop:hover{ background:var(--glass); }
.uq-stop::before, .uq-stop::after{
content:""; position:absolute; left:5px; top:9px;
width:10px; height:1.5px; background:var(--dimmer);
}
.uq-stop::before{ transform:rotate(45deg); }
.uq-stop::after{ transform:rotate(-45deg); }
.uq-stop:hover::before, .uq-stop:hover::after{ background:var(--bad); }
/* Cancelled is its own state, not a failure: no red, nothing to go and look at. */
.uq-row.is-stopped .uq-arc{ opacity:0; }
.uq-row.is-stopped .uq-trk{ stroke:var(--line); }
.uq-row.is-stopped .uq-name{ color:var(--dimmer); text-decoration:line-through; }
.uq-row.is-stopped .uq-pct{ color:var(--dimmer); }
/* The ring. One SVG circle with its dash offset driven by --p, which the uploader sets
to a fraction, so progress costs a style write rather than a redraw. */
.uq-ring{
position:relative; flex:none;
width:24px; height:24px;
display:grid; place-items:center;
}
.uq-ring svg{ width:24px; height:24px; display:block; }
.uq-ring circle{ fill:none; stroke-width:2.5; }
.uq-trk{ stroke:var(--glass-3); }
.uq-arc{
stroke:var(--bone);
stroke-linecap:round;
stroke-dasharray:56.549;
stroke-dashoffset:calc(56.549 - 56.549 * var(--p, 0));
transform:rotate(-90deg);
transform-origin:50% 50%;
transition:stroke-dashoffset .15s linear;
}
.uq-row.is-waiting .uq-arc{ opacity:0; }
.uq-row.is-waiting .uq-trk{ stroke:var(--line); }
/* A tick when it lands, a cross when it does not. */
.uq-mark{ position:absolute; display:none; }
.uq-row.is-done .uq-arc{ stroke:#39d98a; }
.uq-row.is-done .uq-mark{
display:block;
left:9px; top:6px;
width:5px; height:10px;
border:solid #39d98a; border-width:0 2px 2px 0;
transform:rotate(45deg);
}
.uq-row.is-bad .uq-arc{ opacity:0; }
.uq-row.is-bad .uq-trk{ stroke:var(--bad); }
.uq-row.is-bad .uq-name{ color:var(--bad); }
.uq-row.is-bad .uq-mark{
display:block;
left:11px; top:7px;
width:2px; height:10px;
background:var(--bad);
transform:rotate(45deg);
}
.uq-row.is-bad .uq-mark::after{
content:""; position:absolute; inset:0;
background:var(--bad);
transform:rotate(90deg);
}
/* The gallery toolbar: what is shown, how big, and whether clicking picks or opens. */
.tools{
display:flex; align-items:center; gap:18px;
margin-left:auto;
}
.pickmode{
display:inline-flex; align-items:center; gap:8px;
padding:7px 13px;
border:1px solid var(--line-2);
border-radius:999px;
background:none; color:var(--silver);
font:400 11px/1 "Space Mono", monospace;
letter-spacing:.14em; text-transform:uppercase;
cursor:pointer;
transition:color .14s ease, border-color .14s ease, background-color .14s ease;
}
.pickmode:hover{ color:var(--bone); border-color:var(--bone); }
.pickmode-tick{
width:13px; height:13px; flex:none;
border:1px solid currentColor;
border-radius:3px;
position:relative;
}
.pickmode-tick::before{
content:""; position:absolute; left:4px; top:1px;
width:3px; height:7px;
border:solid currentColor; border-width:0 1.5px 1.5px 0;
transform:rotate(45deg);
}
.pickmode.on{
background:var(--bone); border-color:var(--bone); color:var(--void);
}
.zoom{ display:flex; align-items:center; gap:9px; cursor:pointer; }
.zoom-ic{ flex:none; border:1px solid var(--dimmer); border-radius:2px; }
.zoom-sm{ width:8px; height:8px; }
.zoom-lg{ width:13px; height:13px; }
.zoom input[type="range"]{
-webkit-appearance:none; appearance:none;
width:104px; height:3px;
border-radius:2px;
background:var(--glass-3);
cursor:pointer;
}
.zoom input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none;
width:13px; height:13px; border-radius:50%;
background:var(--bone);
border:0;
}
.zoom input[type="range"]::-moz-range-thumb{
width:13px; height:13px; border-radius:50%;
background:var(--bone); border:0;
}
/* Full screen. A fixed layer rather than a new tab, so the arrow keys work and closing
puts you back exactly where you were in the grid. */
body.lb-open{ overflow:hidden; }
.lb{
/* The bar's height, as a number the notes panel can start below. It used to open at
top:0, and at 92vw on a phone that put it straight over the bar - including the
close button, with no Esc key to fall back on and the backdrop behind it. There was
no way out of the notes panel at all. */
--lbbar:66px;
/* The breathing room around the photograph, and the width of the notes panel. Both are
named here because the image's own size is worked out from them, and a padding that
drifted from the number in that sum would put the frame back off the bottom. */
--lbpad:18px;
--lbnotes:min(380px, 92vw);
position:fixed; inset:0; z-index:90;
/* dvh as well as the inset, because the on-screen keyboard shrinks the visual
viewport when the note box takes focus and the bar would otherwise be pushed off. */
height:100dvh;
display:grid;
/* minmax(0,...) rather than a bare 1fr: the automatic minimum of a 1fr track is the
content's min-content size, so a 4000px frame grew the track instead of being told
to fit inside it. */
grid-template-columns:auto minmax(0, 1fr) auto;
grid-template-rows:auto minmax(0, 1fr);
align-items:center;
background:rgba(4,4,6,.94);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
opacity:0;
transition:opacity .16s ease;
}
.lb.on{ opacity:1; }
.lb-bar{
grid-column:1 / -1;
/* Above the notes panel, always. Whatever else is open, the way out stays clickable. */
position:relative; z-index:3;
height:var(--lbbar); box-sizing:border-box;
display:flex; align-items:center; gap:16px;
padding:0 20px;
background:rgba(4,4,6,.96);
border-bottom:1px solid var(--line);
}
.lb-name{
margin:0; flex:1; min-width:0;
font-size:14px; color:var(--bone);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Sits beside the filename, only for raws. Quiet rather than a warning: nothing is
wrong, it is simply worth knowing that the frame on screen is a preview of the file
and not the file. flex:none so a long filename shrinks before this does - the notice
is useless truncated to "Preview qual..." */
.lb-raw{
margin:0; flex:none;
font:400 11px/1 "Space Mono", monospace;
letter-spacing:.06em; color:var(--dim);
padding:5px 9px; border-radius:999px;
box-shadow:inset 0 0 0 1px var(--line);
}
@media (max-width: 620px){
/* On a phone the header is already the filename, a count and two buttons. */
.lb-raw{ display:none; }
}
.lb-count{
margin:0; flex:none;
font:400 11px/1 "Space Mono", monospace;
letter-spacing:.14em; color:var(--dimmer);
}
.lb-get{
flex:none;
padding:8px 15px;
border:1px solid var(--line-2); border-radius:999px;
background:none; color:var(--silver);
font:400 11px/1 "Space Mono", monospace;
letter-spacing:.14em; text-transform:uppercase;
cursor:pointer;
}
.lb-get:hover{ color:var(--bone); border-color:var(--bone); }
.lb-x{
flex:none; position:relative;
width:32px; height:32px;
border:0; background:none; cursor:pointer; border-radius:var(--r-sm);
}
.lb-x:hover{ background:var(--glass); }
.lb-x::before, .lb-x::after{
content:""; position:absolute; left:8px; top:15px;
width:16px; height:1.5px; background:var(--bone);
}
.lb-x::before{ transform:rotate(45deg); }
.lb-x::after{ transform:rotate(-45deg); }
.lb-stage{
grid-row:2; grid-column:2;
margin:0; padding:var(--lbpad);
/* Flex, not grid. As a grid this had implicit auto tracks, which the photograph sized
- so max-height:100% on it resolved against itself and constrained nothing, and a
tall frame hung 677px below the fold on a short window. Nothing was visibly wrong on
a tall one, which is why it survived. */
display:flex; align-items:center; justify-content:center;
width:100%; height:100%;
min-width:0; min-height:0;
overflow:hidden;
/* So the frame slides rather than jumps when the notes panel opens beside it. */
transition:padding .2s ease;
}
.lb-stage img, .lb-stage video{
/* Height measured off the viewport rather than off an ancestor. dvh is the live
viewport, so this holds on a phone when the browser chrome slides away and when the
keyboard opens under the note box - and it cannot be undone by anything in between. */
max-width:100%;
max-height:calc(100dvh - var(--lbbar) - (var(--lbpad) * 2));
width:auto; height:auto;
object-fit:contain;
display:block;
}
.lb-wait{
font:400 11px/1 "Space Mono", monospace;
letter-spacing:.2em; text-transform:uppercase;
color:var(--dimmer);
}
.lb-step{
grid-row:2;
position:relative;
width:68px; height:100%;
border:0; background:none; cursor:pointer;
}
.lb-prev{ grid-column:1; }
.lb-next{ grid-column:3; }
.lb-step:hover{ background:rgba(244,244,246,.04); }
.lb-step::before{
content:""; position:absolute; top:50%; left:50%;
width:13px; height:13px; margin:-7px 0 0 -7px;
border:solid var(--bone); border-width:0 0 2px 2px;
}
.lb-prev::before{ transform:rotate(45deg); margin-left:-4px; }
.lb-next::before{ transform:rotate(-135deg); margin-left:-10px; }
/* A marker, not a number you read - it says somebody has talked about this frame. */
.tile-notes{
position:absolute; left:10px; bottom:10px;
min-width:20px; height:20px;
padding:0 6px;
display:grid; place-items:center;
font:700 10px/1 "Space Mono", monospace;
color:var(--void);
background:var(--bone);
border-radius:999px;
pointer-events:none;
}
/* Which homepage gallery a frame has been chosen for. Bottom right because the other
three corners are taken - the New badge, the note count and the selection tick - and
all four can be on the same tile at once. */
.tile-home{
position:absolute; right:10px; bottom:10px;
max-width:calc(100% - 20px);
padding:3px 8px;
font:700 9px/1.25 "Space Mono", monospace;
letter-spacing:.1em; text-transform:uppercase;
-webkit-backdrop-filter:blur(3px);
backdrop-filter:blur(3px);
border-radius:999px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
pointer-events:none;
/* Filled: this gallery is live on glitchedvisuals.com. */
color:var(--void);
background:var(--good);
border:1px solid var(--good);
}
/* Chosen, but the site has not been rebuilt yet. The same green, because both mean the
frame is spoken for and a badge that changed hue would read as a different kind of
thing. Outlined rather than filled, so one is still a photograph on the website and
the other a decision waiting on a build. */
.tile-home.is-queued{
color:var(--good);
background:rgba(5,5,6,.72);
border-color:rgba(70,224,168,.45);
}
/* The thread, as a panel over the right of the full screen view rather than a column in
it: most of the time you are looking at the picture, and the notes should not take
width away from it until you ask for them. */
.lb-notes-go{
flex:none;
padding:8px 15px;
border:1px solid var(--line-2); border-radius:999px;
background:none; color:var(--silver);
font:400 11px/1 "Space Mono", monospace;
letter-spacing:.14em; text-transform:uppercase;
cursor:pointer;
}
.lb-notes-go:hover{ color:var(--bone); border-color:var(--bone); }
.lb-notes-go[aria-pressed="true"]{
background:var(--bone); border-color:var(--bone); color:var(--void);
}
.lb-notes{
position:absolute; right:0; top:var(--lbbar); bottom:0; z-index:2;
width:var(--lbnotes);
transform:translateX(100%);
transition:transform .2s ease;
display:flex; flex-direction:column;
background:rgba(14,14,18,.96);
-webkit-backdrop-filter:var(--blur);
backdrop-filter:var(--blur);
border-left:1px solid var(--line);
}
.lb.has-notes .lb-notes{ transform:translateX(0); }
/* With the thread open the photograph moves out from under it instead of sitting half
covered. Only on a wide screen: the panel is nearly the full width on a phone, and
there is no room to move into. */
@media (min-width:621px){
.lb.has-notes .lb-stage{ padding-right:calc(var(--lbnotes) + var(--lbpad)); }
}
.lb-thread{
list-style:none; margin:0; padding:18px;
flex:1; overflow:auto;
}
.lb-note + .lb-note{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.lb-who{
margin:0 0 5px;
display:flex; align-items:baseline; gap:9px;
font:400 11px/1 "Space Mono", monospace;
letter-spacing:.1em; text-transform:uppercase;
color:var(--silver);
}
.lb-when{ color:var(--dimmer); letter-spacing:.06em; text-transform:none; }
.lb-drop{
margin-left:auto;
border:0; background:none; cursor:pointer;
font:inherit; color:var(--dimmer);
text-transform:none; letter-spacing:.06em;
}
.lb-drop:hover{ color:var(--bad); }
.lb-body{
margin:0;
font-size:14px; line-height:1.65;
color:var(--bone);
white-space:pre-wrap; word-break:break-word;
}
.lb-none{
font:400 11px/1.6 "Space Mono", monospace;
letter-spacing:.1em; text-transform:uppercase;
color:var(--dimmer);
}
.lb-say{
padding:14px 18px 18px;
border-top:1px solid var(--line);
display:flex; flex-direction:column; gap:10px;
}
.lb-say textarea{
width:100%;
padding:10px 12px;
font:inherit; font-size:14px; line-height:1.55;
color:var(--bone);
background:var(--ink-3);
border:1px solid var(--line);
border-radius:var(--r-sm);
resize:vertical;
}
.lb-say textarea:focus{ outline:none; border-color:var(--line-2); }
.lb-say .act{ align-self:flex-end; }
@media (max-width:620px){
.lb{ --lbbar:58px; --lbpad:12px; }
/* The arrows go over the frame instead of taking a column out of it. Beside it they
cost 92px of a 320px screen, which left a tall photograph 192px wide and using a
third of the height it had - the frame fitted, but barely any of the page was the
photograph. Over it they cost nothing: the stage has no tap target of its own, so
there is nothing underneath for them to steal. */
.lb{ grid-template-columns:minmax(0, 1fr); }
.lb-stage{ grid-column:1; }
.lb-step{
position:absolute; top:var(--lbbar); bottom:0; z-index:2;
width:56px; height:auto;
}
.lb-prev{ left:0; }
.lb-next{ right:0; }
.lb-bar{ padding:0 14px; gap:10px; }
.lb-get{ display:none; }
/* The panel is nearly the full width here, so the arrows beneath it are unreachable
anyway and only confuse what is tappable. */
.lb.has-notes .lb-step{ display:none; }
.tools{ width:100%; margin-left:0; justify-content:space-between; }
}
/* A shared login can be either of them, so the name in the bar is a control rather than
a label. Underlined on hover only - it should not shout, it is read far more often
than it is clicked. */
.who-switch{ cursor:pointer; }
.who-switch:hover{ color:var(--bone); text-decoration:underline; text-underline-offset:3px; }
/* The invitation line. A small filled dot rather than the word "yes", so the two states
are told apart at a glance without reading either of them. */
.sub-invite .sent{ display:inline-flex; align-items:center; gap:7px; }
.sub-invite .sent::before{
content:""; flex:0 0 auto;
width:6px; height:6px; border-radius:50%;
background:var(--good);
}
/* ------------------------------------------------------------------ layout switch */
/* align-items:center is doing real work here. On a phone the Select pill beside these
is min-height:42px for a thumb, which stretches the row to 42px - and .lay has a
fixed 30px height, so without this the two buttons sat at the TOP of that row while
Select filled it. They looked misaligned because they were. */
.layouts{
display:flex; align-items:center; gap:6px;
flex:0 0 auto; margin-left:auto;
}
/* Two drawn glyphs, no icon font: three bars for rows, four squares for cards. */
.lay{
position:relative;
width:30px; height:30px;
border:1px solid var(--line);
border-radius:var(--r-sm);
background:none;
cursor:pointer;
transition:border-color .14s ease, background-color .14s ease;
}
.lay:hover{ border-color:var(--line-2); }
.lay.on{ background:var(--bone); border-color:var(--bone); }
.lay::before,
.lay::after{ content:""; position:absolute; background:var(--dim); transition:background-color .14s ease; }
.lay.on::before, .lay.on::after{ background:var(--void); }
/* rows: three stacked bars, 16 x 12 all told (2 + 3 + 2 + 3 + 2 tall).
CENTRED FROM THE MIDDLE, NOT INSET FROM THE EDGES. These were written as left:8px
right:8px top:9px, which centres a glyph in a 30px button and in nothing else - and
.lay is 42px under (hover:none) so a thumb can hit it. On a phone the bars sat 6px
high and stretched to 24px wide, while the squares beside them sat low and right.
Hung off the centre they are correct at any button size, including the next one. */
.lay-rows::before{
left:50%; top:50%;
margin-left:-8px; margin-top:-6px;
width:16px; height:2px;
box-shadow:0 5px 0 var(--dim), 0 10px 0 var(--dim);
}
.lay-rows.on::before{ box-shadow:0 5px 0 var(--void), 0 10px 0 var(--void); }
.lay-rows::after{ display:none; }
/* cards: a two by two grid, 14 x 14 all told (5 + 4 + 5). Centred the same way. */
.lay-cards::before{
left:50%; top:50%;
margin-left:-7px; margin-top:-7px;
width:5px; height:5px;
box-shadow:9px 0 0 var(--dim), 0 9px 0 var(--dim), 9px 9px 0 var(--dim);
}
.lay-cards.on::before{ box-shadow:9px 0 0 var(--void), 0 9px 0 var(--void), 9px 9px 0 var(--void); }
.lay-cards::after{ display:none; }
/* Somewhere to hang the switch when the heading above it belongs to something else. */
.shelf-bar{ display:flex; justify-content:flex-end; margin:22px 0 -8px; }
/* A bar carrying an action as well as the layout toggles stacks them, toggles first.
Side by side the button and the toggles read as one group of three controls; stacked,
the toggles stay a setting and the button stays a thing you do. */
.shelf-bar-stack{ flex-direction:column; align-items:flex-end; gap:12px; }
/* ------------------------------------------------------------------ cards */
/* The picture does the work. Names underneath, detail smaller still - a wall you scan
with your eyes rather than read. */
.cards{
margin:24px 0 0; padding:0;
list-style:none;
display:grid;
grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr));
gap:clamp(14px, 1.8vw, 24px);
}
.card{ min-width:0; }
.card a{ display:block; text-decoration:none; color:inherit; }
.card-shot{
position:relative;
display:grid; place-items:center;
aspect-ratio:4 / 5;
border:1px solid var(--line);
border-radius:var(--r-sm);
background:var(--ink-3);
overflow:hidden;
transition:border-color .16s ease, transform .18s ease;
}
.card a:hover .card-shot{ border-color:var(--line-2); transform:translateY(-2px); }
.card-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-ph{
width:100%; height:100%;
display:grid; place-items:center;
background:var(--holo);
color:var(--bone);
font:700 clamp(26px, 4vw, 40px)/1 "Space Mono", monospace;
letter-spacing:.06em;
}
.card-dot{ position:absolute; right:10px; top:10px; margin:0; }
.card-name{
display:flex; align-items:center; min-width:0;
margin:11px 0 0;
font-size:13.5px; color:var(--bone);
}
.card-sub{
display:block;
margin:3px 0 0;
font-size:11.5px; color:var(--dim);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-meta{
display:block;
margin:7px 0 0;
font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dimmer);
}
.card-foot{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
margin:9px 0 0;
}
/* In a row there is width to spare and the side sits on one line. In a card there is
not: the account tag plus the project summary is wider than the card, and without
this they run straight across the next one. */
.card-foot .row-side{
padding:0;
flex-wrap:wrap;
min-width:0; max-width:100%;
gap:8px 12px;
}
.card-foot .row-meta{ white-space:normal; text-align:left; }
.card.is-off .card-shot{ opacity:.45; }
.card.is-off .card-name{ color:var(--dim); }
/* ------------------------------------------------------------------ activity */
.day{ margin:26px 0 0; }
.day-head{
margin:0 0 2px;
font:400 10px/1 "Space Mono", monospace;
letter-spacing:.22em; text-transform:uppercase;
color:var(--dimmer);
padding:0 0 10px;
border-bottom:1px solid var(--line);
}
.log{ margin:0; padding:0; list-style:none; }
.log-row{
display:grid;
grid-template-columns:56px minmax(0,1fr);
gap:14px;
align-items:baseline;
border-bottom:1px solid var(--line);
position:relative;
}
/* A hairline in the client colour marks the rows that were not us. At a glance you can
see the shape of a day: your own work in one column, theirs standing out of it. */
.log-row.is-client::before{
content:"";
position:absolute; left:-10px; top:12px; bottom:12px; width:2px;
background:var(--violet);
}
.log-time{
font-size:10.5px; letter-spacing:.1em;
color:var(--dimmer);
padding:13px 0;
white-space:nowrap;
}
.log-body{
display:block;
padding:13px 2px;
text-decoration:none; color:inherit;
min-width:0;
}
a.log-body:hover{ background:rgba(244,244,246,.03); }
.log-line{ display:block; font-size:13.5px; color:var(--dim); line-height:1.5; }
.log-line strong{ color:var(--bone); font-weight:400; }
.log-line em{ font-style:normal; color:var(--bone); }
.log-row.is-client .log-line strong{ color:var(--violet); }
.log-detail{
display:block;
margin:3px 0 0;
font-size:11.5px; color:var(--dimmer); line-height:1.5;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:560px){
.log-row{ grid-template-columns:46px minmax(0,1fr); gap:10px; }
}
/* ------------------------------------------------------------------ the bell */
.bell-wrap{ position:relative; flex:0 0 auto; }
.bell{
--bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22zm7-5.5-1.5-1.6V10a5.5 5.5 0 0 0-4.25-5.36V4a1.25 1.25 0 0 0-2.5 0v.64A5.5 5.5 0 0 0 6.5 10v4.9L5 16.5V18h14z'/%3E%3C/svg%3E");
position:relative;
width:34px; height:34px;
border:1px solid var(--line);
border-radius:var(--r-sm);
background:none;
cursor:pointer;
transition:border-color .14s ease;
}
.bell::after{
content:"";
position:absolute; inset:8px;
background:var(--dim);
-webkit-mask:var(--bell) center/contain no-repeat;
mask:var(--bell) center/contain no-repeat;
transition:background-color .14s ease;
}
.bell:hover{ border-color:var(--line-2); }
.bell:hover::after{ background:var(--bone); }
.bell.has-new::after{ background:var(--bone); }
/* The count. Holo rather than the usual red: this is work arriving, not an error. */
.bell-n{
position:absolute; top:-6px; right:-6px;
min-width:17px; height:17px;
padding:0 4px;
border-radius:9px;
background:var(--holo);
color:var(--bone);
font:700 9px/17px "Space Mono", monospace;
text-align:center;
box-shadow:0 0 0 2px var(--void);
}
.bell-panel{
/* Fixed rather than hung off the bell, because it no longer shares a parent with it.
The offsets match the bar's own height and side padding, so it still lines up under
the bell exactly as before. */
position:fixed; right:clamp(16px,3.5vw,32px); top:72px;
width:min(420px, calc(100vw - 32px));
max-height:min(70vh, 540px);
overflow:auto;
/* Real glass: you can see there is something behind it, but not what. The fill stays
light and the blur does the work - at this radius the text underneath dissolves into
a wash of its own colour instead of staying readable. Raising the fill instead would
have given a solid panel, which is a different thing entirely. */
background:rgba(16,16,20,.55);
-webkit-backdrop-filter:blur(40px) saturate(170%);
backdrop-filter:blur(40px) saturate(170%);
border:1px solid var(--glass-line);
border-radius:var(--r);
box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(244,244,246,.06);
z-index:40;
}
.bell-head{
display:flex; justify-content:space-between; align-items:center;
padding:13px 15px;
border-bottom:1px solid var(--line);
font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
position:sticky; top:0;
/* A touch denser than the panel, so the heading stays legible as rows scroll under it,
but still glass rather than a lid. */
background:rgba(16,16,20,.72);
-webkit-backdrop-filter:blur(40px) saturate(170%);
backdrop-filter:blur(40px) saturate(170%);
}
.bell-list{ margin:0; padding:0; list-style:none; }
.bell-list li{ border-bottom:1px solid var(--line); position:relative; }
.bell-head-acts{ display:flex; align-items:center; gap:14px; }
/* The preview pass, while it runs. A bar at the top of the page rather than a dialog:
it takes a while, and nothing else on the page needs blocking while it does. */
.backfill{
display:flex; align-items:center; justify-content:space-between; gap:16px;
margin:0 0 18px;
padding:11px 15px;
font-size:12.5px;
color:var(--silver);
border:1px solid var(--line-2);
border-radius:var(--r-sm);
background:rgba(244,244,246,.04);
}
.backfill-say{
min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* The two date boxes, inline with the chips they belong to rather than on a row of
their own, so the filter bar stays one line until it has to wrap. */
.act-range{ display:flex; align-items:center; gap:7px; }
.act-range input[type="date"]{
padding:5px 8px;
font:400 11px/1.3 "Space Mono", monospace;
color:var(--silver);
background:rgba(244,244,246,.043);
border:1px solid var(--line-2);
border-radius:8px;
color-scheme:dark;
}
.act-range input[type="date"]:focus-visible{
outline:1px solid var(--bone); outline-offset:1px;
}
.act-range-to{
font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dimmer);
}
/* One notice at a time, over the right of its own row. Hidden until the row is under
the pointer: this list is read far more often than it is cleared, and a column of
crosses down the side reads as clutter the rest of the time. */
.bell-x{
position:absolute; right:9px; top:9px;
width:22px; height:22px;
display:grid; place-items:center;
padding:0; margin:0;
font:400 15px/1 system-ui, sans-serif;
cursor:pointer;
color:var(--dim);
background:rgba(16,16,20,.9);
border:1px solid var(--line-2);
border-radius:999px;
opacity:0;
transition:opacity .12s ease, color .12s ease, border-color .12s ease;
}
.bell-list li:hover .bell-x,
.bell-list li:focus-within .bell-x{ opacity:1; }
.bell-x:hover{ color:var(--bad, #ff6b6b); border-color:var(--bad, #ff6b6b); }
.bell-x:focus-visible{ opacity:1; outline:1px solid var(--bone); outline-offset:2px; }
@media (hover:none){ .bell-x{ opacity:1; } }
/* Room for the cross, so a long "when" does not slide under it. Qualified by the li so
it outranks the shorthand padding set on .bell-list a further down, rather than
depending on which rule happens to come last. */
.bell-list li a{ padding-right:38px; }
.bell-list a{
display:grid;
grid-template-columns:auto 1fr auto;
grid-template-areas:"kind who when" "body body body";
gap:4px 10px;
padding:13px 15px;
text-decoration:none; color:inherit;
}
.bell-list a:hover{ background:rgba(244,244,246,.04); }
/* Unread carries the accent bar. One glance tells you how much is new without counting. */
.bell-list li.is-new{ position:relative; }
.bell-list li.is-new::before{
content:"";
position:absolute; left:0; top:10px; bottom:10px; width:2px;
background:var(--line-accent);
}
.bell-list li:not(.is-new) a{ opacity:.6; }
.nk{
grid-area:kind;
font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
padding:3px 6px; border-radius:var(--r-sm);
border:1px solid var(--line);
color:var(--dim);
white-space:nowrap;
}
/* Violet asks something of us; blue is something that simply happened. Two colours
carry the only distinction that changes what you do next. */
.nk-print{ color:var(--violet); border-color:rgba(123,63,224,.5); }
.nk-note{ color:var(--violet); border-color:rgba(123,63,224,.5); }
.nk-brief{ color:var(--violet); border-color:rgba(123,63,224,.5); }
.nk-open{ color:var(--blue); border-color:rgba(47,139,240,.4); }
.bell-who{ grid-area:who; font-size:12.5px; color:var(--bone); align-self:center;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bell-when{ grid-area:when; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
color:var(--dimmer); align-self:center; white-space:nowrap; }
.bell-body{ grid-area:body; font-size:11.5px; color:var(--dim); line-height:1.5; }
.bell-empty{ margin:0; padding:22px 15px; font-size:12px; line-height:1.6; color:var(--dim); }
/* ------------------------------------------------------------------ documents */
/* A sheet of paper with the corner turned, drawn rather than fetched. */
.av-doc{
background:var(--ink-3);
border:1px solid var(--line);
position:relative;
}
.av-doc::before{
content:"";
position:absolute; left:11px; right:11px; top:8px; bottom:8px;
border:1px solid var(--dim);
border-top-right-radius:0;
clip-path:polygon(0 0, 62% 0, 100% 26%, 100% 100%, 0 100%);
}
.av-doc::after{
content:"";
position:absolute; right:11px; top:8px;
width:7px; height:7px;
border-left:1px solid var(--dim);
border-bottom:1px solid var(--dim);
}
/* The format, printed on the page. Three or four letters is the whole label: anybody
who has used a computer reads PDF faster than they read any drawing of one. */
.av-doc em{
position:relative; /* above the drawn sheet, not behind it */
font:700 9px/1 "Space Mono", monospace;
letter-spacing:.1em;
font-style:normal;
color:var(--dim);
padding-top:6px; /* clear of the folded corner */
}
/* One colour per format. The sheet keeps its drawn outline and takes the colour with
it, so the tile reads as a tinted page rather than a coloured box. */
.av-doc.dk-pdf { --dk:#e5484d; }
.av-doc.dk-word { --dk:#3b82f6; }
.av-doc.dk-sheet { --dk:#22c55e; }
.av-doc.dk-deck { --dk:#f97316; }
.av-doc.dk-img { --dk:#a855f7; }
.av-doc.dk-text { --dk:#94a3b8; }
.av-doc.dk-zip { --dk:#e8b23a; }
.av-doc.dk-any { --dk:#8e9199; }
.av-doc[class*="dk-"]{
border-color:color-mix(in srgb, var(--dk) 38%, transparent);
background:color-mix(in srgb, var(--dk) 9%, var(--ink-3));
}
.av-doc[class*="dk-"]::before,
.av-doc[class*="dk-"]::after{ border-color:color-mix(in srgb, var(--dk) 70%, transparent); }
.av-doc[class*="dk-"] em{ color:var(--dk); }
.row-meta .linky + .linky{ margin-left:12px; }
/* A document row in select mode. The tick box sits where it does in every other list;
the row itself is the hit area, because aiming at a 20px circle on a phone is a
worse version of the same gesture. */
#doc-list li[data-row]{ cursor:default; }
#doc-list li.is-picked{ background:var(--glass); }
/* Being dragged. Faded rather than hidden, so you can still see where it came from. */
#doc-list li.is-lifted{ opacity:.45; }
/* A folder, or the way back up, while a document is over it. */
.rows.folders .row-link.drop-on,
a.back.drop-on{
background:var(--glass-2);
border-radius:var(--r-sm);
outline:1px dashed var(--line-2);
outline-offset:2px;
}
/* ------------------------------------------------------------------ folders */
/* A folder reads as a folder before it reads as a word, so it gets the same slot an
avatar would and a drawn glyph rather than initials. */
/* The drawn glyphs stay square. A folder is not a photograph and stretching it to 4:5
just makes a tall thin folder. */
.av-folder,
.av-doc{ height:64px; align-self:center; }
/* Drawn as one path rather than built out of three boxes. The box version had to fake
the tab with a second rectangle sitting on the first, which never quite lined up and
read as a sheet of paper with a corner missing. */
.av-folder{
background:var(--ink-3);
border:1px solid var(--line);
display:grid; place-items:center;
color:var(--dim);
}
.av-folder svg{ width:30px; height:30px; display:block; }
.rows li:hover .av-folder{ color:var(--silver); }
/* Three questions stacked instead of one long line of chips. At a single row the
status, the deadline and the type ran together and nothing said which chip belonged
to which question. */
.filters-stack{
display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.filters-stack .chips{ flex-wrap:wrap; }
.rows.folders{ margin-top:22px; }
/* ------------------------------------------------------------------ row menu */
/* Three dots at the end of a row. A , so Escape and the tab order come free.
The marker is removed in two ways because Safari still wants the WebKit one. */
.rowmenu{ position:relative; }
.rowmenu > summary{ list-style:none; }
.rowmenu > summary::-webkit-details-marker{ display:none; }
.rowmenu-go{
width:30px; height:30px;
display:grid; place-items:center;
cursor:pointer;
font-size:17px; line-height:1;
color:var(--dim);
border:1px solid transparent;
border-radius:var(--r-sm);
transition:color .12s ease, border-color .12s ease, background-color .12s ease;
}
.rowmenu-go:hover,
.rowmenu[open] .rowmenu-go{
color:var(--bone);
border-color:var(--line-2);
background:rgba(244,244,246,.05);
}
.rowmenu-go:focus-visible{ outline:1px solid var(--bone); outline-offset:2px; }
.rowmenu-pop{
position:absolute; right:0; top:calc(100% + 5px);
z-index:40;
min-width:148px;
display:flex; flex-direction:column;
padding:5px;
border:1px solid var(--line-2);
border-radius:var(--r-sm);
background:rgba(16,16,20,.96);
-webkit-backdrop-filter:blur(30px) saturate(170%);
backdrop-filter:blur(30px) saturate(170%);
box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.rowmenu-pop button{
padding:8px 10px;
text-align:left;
cursor:pointer;
/* A button does not inherit the page's font unless told to, which left this menu in
the browser's default sans while every row around it was mono. */
font:inherit;
font-size:12.5px;
color:var(--silver);
background:none; border:0;
border-radius:6px;
}
.rowmenu-pop button:hover{ color:var(--void); background:var(--bone); }
.rowmenu-pop button.is-bad:hover{ color:var(--void); background:var(--bad, #ff6b6b); }
.rowmenu-pop button:focus-visible{ outline:1px solid var(--bone); outline-offset:-1px; }
/* The last row's menu would otherwise open past the bottom of a short list and be cut
off by nothing at all - but a row near the foot of the page is common enough that it
is worth flipping upward there. */
.rows li:last-child .rowmenu-pop{ top:auto; bottom:calc(100% + 5px); }
.crumb-sep{ color:var(--dimmer); margin:0 2px; }
.sub a{ color:var(--silver); text-decoration:none; border-bottom:1px solid var(--line); }
.sub a:hover{ color:var(--bone); border-bottom-color:var(--line-2); }
/* ------------------------------------------------------------------ pickers */
/* The browser's own date picker, made to match everything around it. A date input sizes
itself from its own internal fields rather than from padding, so without a height it
sits visibly shorter than the text inputs stacked above it. */
.f-date{ color-scheme:dark; min-height:44px; }
.f-date::-webkit-calendar-picker-indicator{ filter:invert(.7); cursor:pointer; }
.ask select{
width:100%;
background:var(--void);
border:1px solid var(--line);
border-radius:var(--r-sm);
color:var(--bone);
font:inherit; font-size:14px;
padding:12px 13px;
}
.ask select:focus{
outline:none; border-color:var(--line-2);
box-shadow:0 0 0 1px rgba(47,139,240,.35);
}
/* Firefox draws the popup list itself and does not always take its colour from
color-scheme, so each option is painted outright as well. */
select option{
background:var(--ink-3);
color:var(--bone);
}
/* A group heading in a dropdown. Left alone it inherits the browser's own idea of a
disabled label, which on a dark popup is grey on near-black and effectively invisible
- the headings were there and could not be read. Stated outright, and lighter than
the names under it rather than dimmer, because it is the thing you are scanning for. */
select optgroup{
background:var(--ink-3);
color:var(--bone);
font-weight:700;
font-style:normal;
}
/* Restated: some browsers hand the optgroup's colour down to the options inside it. */
select optgroup option{
background:var(--ink-3);
color:var(--silver);
font-weight:400;
}
/* Preview beside the controls, so you can see what you picked before it uploads - and
before anything leaves the machine. */
.pickr{
display:flex; align-items:center; gap:14px;
margin:0 0 10px;
}
.pickr-shot{
width:64px; height:64px; flex:0 0 auto;
border:1px solid var(--line);
border-radius:var(--r-sm);
background:var(--void);
display:grid; place-items:center;
overflow:hidden;
}
.pickr-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.pickr-shot em{
font-style:normal; font-size:9px; letter-spacing:.16em;
text-transform:uppercase; color:var(--dimmer);
}
.pickr-side{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.pickr-go{
background:none;
border:1px solid var(--line-2);
border-radius:var(--r-sm);
color:var(--bone);
font:400 10px/1 "Space Mono", monospace;
letter-spacing:.16em; text-transform:uppercase;
padding:9px 12px; cursor:pointer;
}
.pickr-go:hover{ background:rgba(244,244,246,.05); }
.pickr-side .linky{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.pickr-hint{
font-size:10px; letter-spacing:.14em; text-transform:uppercase;
color:var(--dimmer);
margin-left:auto;
}
/* Dropping. The whole row is the target, not the 64px preview, because aiming at a
thumbnail with a file in hand is a worse experience than it sounds. */
.pickr{
border:1px dashed transparent;
border-radius:var(--r-sm);
padding:6px;
margin-left:-6px; margin-right:-6px;
transition:border-color .14s ease, background-color .14s ease;
}
.pickr.over{
border-color:var(--holo-b);
background:rgba(47,139,240,.07);
}
.pickr.over .pickr-hint{ color:var(--holo-b); }
/* Dropping a shoot onto the gallery. An outline on the page rather than a modal
overlay: you should still be able to see where the files are going to land. */
.page.dropping{
outline:2px dashed var(--holo-b);
outline-offset:-10px;
background:rgba(47,139,240,.04);
}
/* ------------------------------------------------------------------ phone */
@media (max-width:560px){
/* Two cards across. One 430px-tall tile per screen is a slideshow, not a list you
can scan - and at this width two still show the photograph properly. */
.cards{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.card-name{ font-size:12.5px; }
.card-sub{ font-size:11px; }
.card-meta{ font-size:9.5px; }
.card-foot{ margin-top:7px; }
/* The gallery too: two up rather than one enormous frame. */
.grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.tile-name{ font-size:11.5px; }
.tile-meta{ font-size:9px; }
/* Rows: the picture stays, the furniture shrinks. */
.av{ width:52px; height:65px; }
.rows a, .rows li > .row-main, .rows li:not(:has(a)){ padding:14px 2px; }
.row-main{ font-size:14px; }
.row-sub{ font-size:11.5px; }
/* The status dropdown and the date stop competing for one line. */
.rows li:has(.row-link){ gap:10px; }
.row-side{ flex-direction:column; align-items:flex-end; gap:6px; }
/* The side column is `auto` in the row grid and its text is nowrap, so it took every
pixel it wanted and the name took what was left - which for "1 ready, 1 in progress"
on a 400px screen was two pixels, and the client's name simply was not on screen.
Capped and allowed to wrap: it costs the summary a second line and gives the name
back more than half the row. */
.rows li:has(.row-link),
.rows li:has(.row-side){ grid-template-columns:minmax(0,1fr) minmax(0,36%); }
.row-side .row-meta{ white-space:normal; }
/* 18px between the thumbnail, the name and the meta is a desktop measure. On a phone
those two gaps were costing the name a third of what it had left. */
.rows a, .rows li:not(:has(a)){ column-gap:12px; }
.head{ gap:12px; }
.layouts{ margin-left:0; }
/* ---- filters, on a phone ----
Flex-wrapped, the groups ran into each other: five chips landed three-and-two at
their own natural widths, each group started at a different x depending on how long
its label was, and the whole block read as spare parts rather than a set of
controls. Each group now gets a band of its own - the label on its own line, the
chips on an even three-column grid - so every group starts at the same left edge
and every chip is the same width as the one above it. */
.filters{ gap:16px 0; }
.filters .chips{
flex:1 1 100%;
display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
gap:7px;
}
.filters .chips-label{ grid-column:1 / -1; margin:0; }
.filters .chip{ padding:13px 8px; text-align:center; }
/* A select or a date range is one control, not one of three. */
.filters .act-thing,
.filters .act-range{ grid-column:1 / -1; width:100%; }
.filters > .linky{ flex:1 1 100%; text-align:left; }
/* The page's own action - Add project, Add client - sits full width under the title.
Wrapped, it was a short button stranded on the left with the filters hard against
it, which is the thing that read as untidy. */
.head > .act{ flex:1 1 100%; }
/* Full width on a phone, with the gap either side. top is set when it opens, from the
bar's measured height - the bar is three rows here and one on a desktop. */
.bell-panel{ position:fixed; left:12px; right:12px; width:auto; }
}
/* Touch: nothing you have to aim at should be smaller than a fingertip. These only
apply where there is no mouse, so the desktop keeps its tighter spacing. */
@media (hover:none){
.bar-nav a{ padding:13px 0; }
.who-out{ padding:13px 15px; }
.bell{ width:42px; height:42px; }
.lay{ width:42px; height:42px; }
.chip{ padding:13px 15px; }
.back{ padding:12px 0; }
.st-pick{ padding:12px 26px 12px 11px; }
.pickr-go{ padding:13px 15px; }
/* A text button still needs a thumb's worth of room around it. */
.linky{ display:inline-block; padding:11px 0; }
.row-meta .linky, .bulk .linky{ padding:11px 0; }
/* The pen keeps its drawn size; only the button it sits in grows. */
.pen{
width:44px; height:44px;
margin:0 0 .08em .15em;
-webkit-mask:var(--pen) center / 21px 21px no-repeat;
mask:var(--pen) center / 21px 21px no-repeat;
}
/* Selecting a frame: the whole corner, not a 20px box. */
.tile-pick{ width:58px; height:58px; }
/* The one create button on each screen, and the controls beside a row. */
.act{ padding:15px 18px; }
.st-pick{ padding:13px 26px 13px 12px; }
.row-meta .linky{ padding:11px 7px; }
.pen-row{ width:44px; height:44px; margin-left:10px;
-webkit-mask:var(--pen) center / 18px 18px no-repeat;
mask:var(--pen) center / 18px 18px no-repeat; }
.pickr-side .linky{ padding:11px 4px; }
/* Form controls in the dialog. A date field in particular has a picker to tap, and
Safari renders it shorter than a text input unless told otherwise. */
.ask input, .ask select{ padding:14px 13px; min-height:48px; }
.f-date{ min-height:48px; }
.pickr-go{ min-height:46px; }
.ask-cancel, .ask-ok{ min-height:48px; }
.ask-x{ width:46px; height:46px; right:8px; top:8px; }
}
@media (prefers-reduced-motion:reduce){
*{ animation:none !important; transition:none !important; }
}
/* ------------------------------------------------------------------ glass */
/* Surfaces that hold something - a photograph, a form field, a chip - get a fill you
can see through rather than a flat panel colour. The page's own background wash
shows through, which is what stops a dark interface reading as a black rectangle. */
.tile-shot,
.card-shot,
.pickr-shot,
.av-folder,
.av-doc{
background:var(--glass);
border-color:var(--glass-line);
}
input[type=email],
input[type=password],
input[type=text],
.ask select{
background:var(--glass);
border-color:var(--glass-line);
}
input:focus, .ask select:focus{ background:var(--glass-2); }
/* Quiet controls: visible as surfaces, not as outlines. */
.chip,
.lay,
.bell,
.who-out,
.pickr-go,
.ask-cancel,
.st-pick{
background-color:var(--glass);
border-color:var(--glass-line);
}
.chip:hover, .lay:hover, .bell:hover, .who-out:hover,
.pickr-go:hover, .ask-cancel:hover{ background-color:var(--glass-2); }
/* The select keeps its drawn arrow, so only the colour underneath it changes. */
.st-pick{
background:
linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 12px) 50% / 4px 4px no-repeat,
linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 8px) 50% / 4px 4px no-repeat,
var(--glass);
}
/* A selected chip stays solid - the one thing on screen that is definitely on. */
.chip.on, .lay.on{ background-color:var(--bone); border-color:var(--bone); }
/* Rows lift rather than light up. */
.rows a:hover{ background:var(--glass); border-radius:var(--r-sm); }
a.log-body:hover{ background:var(--glass); border-radius:var(--r-sm); }
.bell-list a:hover{ background:var(--glass); }
/* The one place the gradient still earns its keep: an avatar with no photograph. */
.av, .card-shot, .tile-shot, .pickr-shot{ border-radius:var(--r-sm); }
.av-big{ border-radius:var(--r); }
/* ------------------------------------------------------------------ cropping
The picture moves under a fixed frame, not the other way round. It is the same
arithmetic either way, but it is what a hand expects: you slide the photograph to
choose what shows in the hole, as you would a print under a mount.
The frame is drawn as a hole rather than as a box, by a shadow the size of the stage
spilling inwards from the frame's own edges. One element, no overlay panes to keep in
step with it, and the dimmed part is genuinely outside the crop rather than
approximately so. */
/* A