has to be a flex item in its own right, or the summary inside it cannot
take an equal quarter of the row. */
.viewtabs .menu { flex: 1 1 0; min-width: 0; display: flex; }
.viewtabs .menu-word { display: inline; }
/* Opening upward, since the bar is on the bottom edge. Inset from the right
rather than flush with it, so the panel reads as hanging off the tab. */
.viewtabs .menu-panel {
top: auto;
bottom: calc(100% + 8px);
right: 6px;
box-shadow: 0 -12px 28px rgba(0, 0, 0, .45);
}
/* Room for the bar, so the footer isn't stuck under it. The back office
has no tab bar, so its own footer keeps its padding. */
.colophon:not(.colophon-admin) {
padding-bottom: calc(30px + 62px + env(safe-area-inset-bottom));
}
/* Above the tab bar rather than on top of it. */
.bugfloats {
right: 12px;
bottom: calc(12px + 56px + env(safe-area-inset-bottom));
gap: 6px;
}
/* Both pills keep their words down here: an icon on its own says nothing,
and "what is this button" is the wrong question to leave somebody on a
phone. They are tightened instead - smaller text, less padding, a smaller
gap - which fits the pair inside 320px. Re-measure if either label
changes. */
.report-float { padding: 8px 10px; font-size: .7rem; gap: 6px; }
.report-float-mark { width: 16px; height: 16px; font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* --- the meetup banner --------------------------------------------------
A meetup page used to open with a grey slug line, a heading and a sentence
of prose, which is a lot of reading before you know whether you can make it.
The banner puts the four things somebody actually decides on - the date, the
title, the host and the headcount - on one dark card at the top.
Same near-black ground as .hero, and for the same reason: --chrome does not
flip with the theme, so this reads as brand furniture in both. The red date
block is the only saturated thing on the page, which is what makes it the
first thing seen. */
.mhero {
position: relative;
overflow: hidden;
isolation: isolate;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 28px;
background: var(--chrome);
color: var(--cream);
border: 1px solid var(--hairline);
border-left: 5px solid var(--signal);
border-radius: var(--radius);
padding: 26px 30px;
margin-bottom: 34px;
}
/* The same watermark the home hero carries, bled off the right edge. */
.mhero::before {
content: "";
position: absolute;
z-index: -1;
top: 50%;
right: -118px;
transform: translateY(-50%);
width: 300px;
height: 300px;
background: url("/assets/img/logo-watermark.svg") center / contain no-repeat;
opacity: .04;
pointer-events: none;
}
/* The date block: a torn-off calendar page in the signal red. It repeats what
the line under the title says, which is deliberate - one of them is read and
the other is glanced at, and they are not the same gesture. */
.mhero-date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 96px;
margin: 0;
padding: 13px 6px 11px;
background: var(--signal);
color: #fff;
border-radius: var(--radius);
line-height: 1;
box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.mhero-mon {
font: 700 .82rem/1 var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
}
.mhero-day {
font-family: var(--display);
font-size: 2.9rem;
font-weight: 700;
margin: 4px 0 5px;
}
.mhero-dow {
font: 500 .7rem/1 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
opacity: .82;
}
.mhero-body { min-width: 0; }
.mhero-place { color: #9AA3B0; margin: 0 0 6px; }
/* The h1 default runs to 3.1rem, which is too much shouting inside a card that
already has a red block in it. */
.mhero h1 {
font-size: clamp(1.8rem, 4vw, 2.5rem);
color: var(--cream);
margin: 0 0 10px;
}
.mhero-when {
font-family: var(--mono);
font-size: .88rem;
color: #D8DDE5;
margin: 0 0 14px;
}
.mhero-sep { color: var(--signal); margin: 0 4px; }
.mhero-tz {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
border: 1px solid rgba(252, 246, 228, .28);
border-radius: 100px;
font-size: .7rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cream);
}
.mhero-host { margin: 0; color: #C9CED6; font-size: .95rem; }
.mhero-host strong { color: var(--cream); font-weight: 600; }
.mhero-host .avatar { border-color: rgba(252, 246, 228, .25); }
/* Headcount and the way in, kept together on the right so the button is beside
the number it belongs to rather than at the bottom of the page. */
.mhero-side {
flex: 0 0 auto;
text-align: center;
padding-left: 26px;
border-left: 1px solid rgba(252, 246, 228, .16);
}
.mhero-count {
font-family: var(--display);
font-size: 2.6rem;
line-height: 1;
font-weight: 700;
color: var(--cream);
margin: 0 0 14px;
}
.mhero-count small {
display: block;
font: 400 .68rem/1.3 var(--mono);
letter-spacing: .09em;
text-transform: uppercase;
color: #8C95A4;
margin-top: 7px;
}
.mhero-count-done { margin-bottom: 0; }
/* One that has been and gone. The red block would be a call to action on a
night nobody can go to any more. */
.mhero-past .mhero-date { background: var(--chrome-2); box-shadow: none; }
.mhero-past .mhero-date .mhero-mon,
.mhero-past .mhero-date .mhero-dow { color: #9AA3B0; }
.mhero-past { border-left-color: var(--chrome-2); }
/* --- the rest of a meetup page ------------------------------------------ */
/* The photo leads the column now that the banner carries the time, so it wants
the margin off the top of it. */
figure.photo-lead { margin-top: 0; }
/* Square, like the card that led here. max-height has to be cleared or the
60vh cap on figure.photo above wins on a short window and letterboxes it
back to a rectangle. */
figure.photo-lead img {
width: 100%;
aspect-ratio: 1;
height: auto;
max-height: none;
object-fit: cover;
}
/* The weekly report as it will arrive, on /admin/mail. Monospace and scrolling
inside its own box: the body is written to a fixed width, and letting it wrap
to the page would show something nobody receiving it will see. */
.mail-preview {
font-family: var(--mono);
font-size: .8rem;
line-height: 1.6;
white-space: pre;
overflow: auto;
max-height: 420px;
margin: 12px 0 0;
padding: 14px 16px;
background: var(--surface-2);
border: 1px solid var(--hairline);
border-radius: var(--radius);
color: var(--ink-soft);
}
/* The HTML digest drawn as it arrives. Its own colours are baked into the
message, so the frame does not follow the theme. */
.mail-preview-html {
display: block;
width: 100%;
height: 640px;
margin: 12px 0 0;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: #EFECE4;
}
/* Whatever the host typed, with their line breaks kept. */
.meetup-copy {
white-space: pre-wrap;
font-size: 1.02rem;
color: var(--ink-soft);
margin-top: 22px;
max-width: 66ch;
}
.where { margin-top: 36px; }
.where h2 { font-size: 1.35rem; margin-bottom: 12px; }
/* The preview map. isolation matters: Leaflet's panes sit at z-index 400, and
without a stacking context of its own this would paint over the settings
dropdown whenever the two overlap. */
.minimap {
position: relative;
isolation: isolate;
z-index: 0;
height: 300px;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--surface-2);
}
.where-go { margin: 14px 0 0; }
/* The facts column as a stack of small cards rather than a bare list under a
rule, so the page has something on the right of it. Only the meetup page
asks for this; /venue keeps the plain column. */
.factbox-cards {
border-left: 0;
padding-left: 0;
display: grid;
gap: 14px;
}
.factbox-cards section {
margin: 0;
padding: 18px 20px;
background: var(--surface);
border: 1px solid var(--hairline);
border-left: 3px solid var(--signal);
border-radius: var(--radius);
}
.factbox-cards section + section { margin-top: 0; }
/* The RSVP form is the point of the page, so it gets the same red edge as the
cards pointing at it. */
.rsvp-card {
margin-top: 40px;
max-width: 560px;
border-left: 5px solid var(--signal);
}
.rsvp-card h2 { margin-bottom: 6px; }
/* --- the signed-in corner ------------------------------------------------
Logged in, the top right of both mastheads is your own icon: it replaces
both the three dots and the name that used to sit in the nav beside them.
The panel behind it still carries the name, which is what the phone gets
when .menu-word goes. */
.menu-me > summary { padding: 4px 12px 4px 5px; gap: 9px; }
.menu-me > summary .menu-face {
width: 30px;
height: 30px;
border: 1px solid rgba(252, 246, 228, .3);
vertical-align: middle;
}
.menu-me[open] > summary .menu-face,
.menu-me > summary:hover .menu-face { border-color: var(--signal); }
.menu-me > summary .menu-word { text-transform: none; letter-spacing: .03em; }
@media (max-width: 860px) {
/* The facts column is full width down here, so the cards would be four
wide slabs. Back to the plain list the rest of the site uses. */
.factbox-cards { display: block; }
.factbox-cards section {
padding: 0;
background: none;
border: 0;
border-left: 0;
}
.factbox-cards section + section { margin-top: 26px; }
}
@media (max-width: 720px) {
/* The headcount drops under the date and the title rather than squeezing
a third column into a phone. */
.mhero {
grid-template-columns: auto minmax(0, 1fr);
gap: 18px 20px;
padding: 20px;
}
.mhero-side {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
text-align: left;
padding: 16px 0 0;
border-left: 0;
border-top: 1px solid rgba(252, 246, 228, .16);
}
.mhero-count { margin: 0; font-size: 2rem; }
.mhero-count small { display: inline; margin-left: 8px; }
.mhero-date { width: 74px; padding: 10px 5px 9px; }
.mhero-day { font-size: 2.2rem; }
.mhero-when { font-size: .8rem; }
.mhero-tz { margin-left: 0; margin-top: 6px; }
.minimap { height: 240px; }
}
/* --- the phone masthead -------------------------------------------------
A phone has no top nav. Five words in a row that wrapped onto two lines was
the worst of both: too small to hit and too big to ignore. Everything in it
has somewhere better to be, so nothing is lost by taking it away:
Find a meetup -> the bar pinned to the bottom of the window
Host one -> .host-float, the green button in the top corner
The show -> the episode card in the hero, and the footer credit
Register / Log in -> the settings panel behind the icon
The show briefly had a big red button of its own down here. The hero card
that pulls the latest episode off the feed says the same thing better - it
names the episode and shows its artwork - so the button went, and with it the
only reason the wordmark and the icon were on separate rows.
.topfloats is declared hidden here and turned on inside the 640px block, so
a desktop never pays for it. */
.topfloats { display: none; }
@media (max-width: 640px) {
.masthead nav { display: none; }
/* Top right, over the page, and still there after you have scrolled. Same
z-index as the report button at the other end of the window; they cannot
overlap, so they do not need to be ordered against each other.
The row rather than the pills is what is fixed, so neither pill has to
know the other's width: "Host a Meetup" is not drawn on the host's own
form and "Log in" goes the moment somebody is logged in, and a pill
placed by a hard-coded offset would then sit beside a gap. */
.topfloats {
display: flex;
align-items: center;
gap: 8px;
position: fixed;
top: 10px;
right: 10px;
z-index: 1300;
}
.host-float, .login-float {
display: inline-block;
padding: 9px 14px;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
font: 600 .78rem/1 var(--body);
white-space: nowrap;
text-decoration: none;
}
.host-float {
background: var(--go);
border: 1px solid rgba(255, 255, 255, .22);
color: #fff;
}
.host-float:hover, .host-float:active { background: #246343; color: #fff; }
/* Quiet beside it, and deliberately so: hosting is the thing the site
actually wants, and two pills of equal weight in one corner is a choice
rather than a call to action. --chrome does not flip with the theme, so
cream on it reads in both. */
.login-float {
background: var(--chrome);
border: 1px solid rgba(252, 246, 228, .3);
color: var(--cream);
}
.login-float:hover, .login-float:active { background: #2A2E35; color: var(--cream); }
/* The home page says all of this at length in .guestbar. Down here the pill
above is the whole of it: the box is four lines and three buttons about
not needing an account, on the screen somebody is trying to get past. */
.guestbar { display: none; }
/* The corner belongs to the floats, so nothing else may compete for it.
The full wordmark measures 203px, and with both pills up there the row's
left edge lands at x=188 on a 390px screen - so the two cannot share a
row while the wordmark says both words.
It does not need to. The page title underneath now says MEETUPS in letters
an inch high, so repeating it up here on a phone was the least useful
thing on the screen. Dropping to "MMO" ends the wordmark at x=100, which
holds at every width: the row is anchored to the right edge, so at 320px
it starts at x=118 and there is still 18px of daylight between them.
Keep that in step with the floats: measured, not guessed. Anything added
to that row, or a longer word in either pill, eats into those 18px. */
.masthead:not(.masthead-admin) .brand span em { display: none; }
/* And nothing is left up there to reserve it for. The menu that used to
hold that corner is the fourth tab in the bar at the bottom of the
window now, so the whole row is the wordmark and the float over it. The
back office keeps its corner: it has no float and no tab bar. */
.masthead:not(.masthead-admin) .masthead-actions { display: none; }
.masthead .shell { gap: 8px 12px; }
/* The banner is the one thing left underneath the floats, and it cannot be
moved - it is the first element on the page. So it gives up the width
instead. Signed out there are two pills up there rather than one, which
is what the :has() asks: it is the row's own width either way, and the
banner sits above the floats in the document, so a sibling selector
could not have said it. Temporary either way: it goes when
site.under_construction does. */
.construction { padding-right: 132px; }
body:has(.login-float) .construction { padding-right: 200px; }
}
/* --- what changed, in the approval queue --------------------------------
Only drawn on a re-submission. A host editing an approved listing puts it
back in the queue, and without this the card is identical to a brand-new
one: an approver had to read the whole thing again to find out that all
that happened was a picture being added.
Amber ground rather than a plain panel, because it is the one thing on the
card that is news. It uses the --wait-* trio the pending chips use, so it
reads as the same kind of information in both themes. */
.changed {
margin: 0 0 18px;
padding: 12px 14px;
background: var(--wait-bg);
border: 1px solid var(--wait-line);
border-left: 3px solid var(--wait-text);
border-radius: var(--radius);
}
.changed-head {
margin: 0 0 9px;
font: 500 .74rem/1.4 var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--wait-text);
}
.changed-flags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
}
/* The chips sit on the amber panel rather than on the card, so the plain one
needs a ground of its own or it reads as a hole in the panel. */
.changed-flags .tag { background: var(--surface); border-color: var(--wait-line); }
.changed-flags .tag-wait { background: var(--surface); color: var(--wait-text); border-color: var(--wait-text); font-weight: 700; }
/* --- the latest episode, in the home hero -------------------------------
Only drawn when inc/show.php has an answer, so .hero has to hold up without
it: the words keep the whole width until .hero-show says otherwise, which is
why the split lives on that modifier rather than on .hero itself. */
.hero-show {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 38px;
}
.hero-words { min-width: 0; }
/* The label and the card. It is a heading over the card rather than a line
inside it: the card is the episode, and "listen to the latest show" is what
to do with it, which is not something the episode says about itself. The
card's own art still starts the link, so the first thing in it is the thing
it is. */
.showbox {
display: grid;
justify-items: center;
gap: 8px;
}
/* One link wrapping the art and the words, so there is a single target and no
argument about which half is clickable. */
.showcard {
display: grid;
justify-items: center;
gap: 2px;
width: 240px;
padding: 16px 16px 18px;
background: rgba(0, 0, 0, .28);
border: 1px solid rgba(252, 246, 228, .18);
border-radius: var(--radius);
text-align: center;
text-decoration: none;
color: var(--cream);
}
.showcard:hover {
color: var(--cream);
border-color: var(--signal);
background: rgba(0, 0, 0, .4);
}
/* Square, because podcast art is, and stored square by show_store_art(). The
width/height on the tag are the stored 480 and the box is 208, so the aspect
ratio is what reserves the space rather than a guess. */
.showcard-art {
display: block;
width: 208px;
height: auto;
aspect-ratio: 1;
object-fit: cover;
border-radius: 4px;
margin-bottom: 12px;
background: var(--chrome-2);
}
/* The label is the instruction, so it is the loud half. It is a outside
the anchor now, hence the margin reset, and it still lights up with the card
under it - :has(), because it is no longer inside the thing being hovered. */
.showcard-label {
font-family: var(--mono);
font-size: .72rem;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--signal);
margin: 0;
}
.showbox:has(.showcard:hover) .showcard-label { color: #FF6B60; }
/* The episode title is somebody else's typing and can run long, so it is
allowed two lines and clipped after that rather than growing the card. */
.showcard-title {
font-family: var(--display);
font-size: 1.08rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: .01em;
margin-top: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.showcard-when {
font-family: var(--mono);
font-size: .68rem;
letter-spacing: .06em;
color: #9AA3B0;
margin-top: 6px;
}
@media (max-width: 860px) {
/* Under the words rather than beside them, and centred, which is the only
thing that looks deliberate once it has the full width to sit in. The
box is what carries the width now; the card fills it. */
.hero-show { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.showbox { width: 100%; max-width: 260px; justify-self: center; }
.showcard { width: 100%; }
}
/* On a phone the episode card lies down: a small square of art on the left and
the title beside it, instead of a 260px column of picture. The hero is two
lines and two buttons down here and the card was taller than all of it. */
@media (max-width: 640px) {
.showbox { max-width: none; gap: 6px; justify-items: stretch; }
.showcard {
grid-template-columns: 56px minmax(0, 1fr);
justify-items: start;
align-items: center;
gap: 0 12px;
padding: 10px 12px;
text-align: left;
}
.showcard-art {
width: 56px;
margin-bottom: 0;
grid-row: span 2; /* the words stack beside it, not under it */
}
.showcard-title { font-size: .95rem; margin-top: 0; }
.showcard-when { margin-top: 2px; }
.showcard-label { font-size: .66rem; }
}
/* --- the home page's title ----------------------------------------------
The show's name, spelled out, at the top of its own site: it sits directly
under the nav and above the hero, and it is the only place Anton is used.
Anton ships one weight and that weight is already heavy, so the font-weight
the h1 rule sets has to be undone - ask a browser for 700 of a face that has
only 400 and it fakes it by smearing the letters sideways, which on a face
this tight closes the counters up.
"Meetups" is red and on a line of its own for the same reason it is red in
the wordmark up in the masthead: it is the same lockup, said larger. The show
names itself on the first line and the site says what it is on the second,
which is also what keeps four words off one line - all four at this size runs
past the shell on any screen narrower than about 1300px. */
.wordtitle {
font-family: var(--poster);
font-weight: 400;
font-size: clamp(2.3rem, 8.4vw, 5.4rem);
line-height: .92;
letter-spacing: .004em;
text-transform: uppercase;
color: var(--ink);
text-align: center;
margin: 0 0 28px;
}
/* Sized in em rather than rem, so it stays in proportion to the line above it
at every step of that clamp instead of needing a second one of its own - and
so the phone gets the same treatment for free. The centring is inherited
from .wordtitle now and repeated here only so this block still reads on its
own: both lines are centred, which is what makes them one lockup rather than
a heading with a word parked under its left edge. */
.wordtitle em {
display: block;
text-align: center;
font-size: 1.62em;
line-height: .86;
font-style: normal;
color: var(--signal);
}
@media (max-width: 640px) {
/* Sized to the width rather than clamped to a floor, so the show's name is
one line that fills the shell instead of breaking after "Media". Anton
sets those three words at 10.98em wide, measured; 11 leaves a hair of
slack, and 46px is the shell's 20px either side plus its border. The
clamp's 8.4vw was already about right - it was the 2.3rem floor under it
that overflowed everything narrower than 438px. */
.wordtitle {
font-size: calc((100vw - 46px) / 11);
margin-bottom: 20px;
}
/* Room between the two lines. On desktop the first line is large enough
that the tight leading reads as one lockup; shrunk to fit a phone it
reads as MEETUPS sitting on top of the name. The margin is in the em's
own em, so it scales with the line it is pushing down rather than with
the smaller line above it. */
.wordtitle em { margin-top: .18em; }
}