/* Train.
*
* The screen is a sequence, and the CSS earns its keep in two places.
*
* 1. The three steps are laid out in a flex column and ordered with `order:`,
* which is what lets the season decide whether learn-at-home or the on-playa
* calendar leads without the markup changing shape. Source order is the
* reading order either way, so a screen reader and a print stylesheet get
* the same page.
*
* 2. Each block looks like what it is. Documents are wide rows you tap, videos
* are small tiles with a play mark, roles are cards with a territory rail,
* the calendar is a timetable. The screen used to be eleven identically
* styled cards followed by eight more, which is exactly why it read as a
* wall of text — the eye had nothing to navigate by. */
.train { display: block; }
.train-head { margin-bottom: var(--space-4); }
/* The page's own eyebrow above the `` ("On playa now" / "Before you come,
* and when you land") — a `
`, not a heading, so it stays local rather than
* becoming `sectionHead()`: that primitive renders an `
`, and one before
* this screen's `` would invert the document outline. "Good to know"
* further down *is* a section heading and is `sectionHead(…, { rule: true })`
* now — this used to carry that rule too, under `.train-kicker--rule`. */
.train-kicker {
font-size: var(--size-kicker);
font-weight: var(--weight-bold);
letter-spacing: var(--track-kicker);
text-transform: uppercase;
color: var(--soft);
margin: 0 0 5px;
}
.train-title {
font-family: var(--font-display);
font-size: var(--size-h1);
font-weight: var(--weight-normal);
line-height: 1.14;
max-width: 22em;
margin: 0;
}
.train-intro {
font-size: var(--size-body);
color: var(--soft);
line-height: 1.5;
max-width: 42em;
margin: 6px 0 0;
}
/* --- the plan rail --------------------------------------------------------
*
* The shape of the whole screen in one glance, and a jump to each part. It is
* the first answer to "how long is this going to take me". */
.train-plan {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: var(--space-2);
margin: 0 0 var(--space-5);
}
.train-plan-step {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--tap-min);
padding: var(--space-3);
text-align: left;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-card);
color: var(--ink);
font: inherit;
cursor: pointer;
}
.train-plan-step:hover { border-color: var(--t-tea); }
.train-plan-num {
width: 26px;
height: 26px;
flex: none;
border-radius: var(--radius-pill);
background: var(--t-tea);
color: var(--t-tea-fg);
font-size: var(--size-micro);
font-weight: var(--weight-bold);
display: flex;
align-items: center;
justify-content: center;
}
.train-plan-body { display: flex; flex-direction: column; min-width: 0; }
.train-plan-name { font-size: var(--size-small); font-weight: var(--weight-semibold); }
.train-plan-meta { font-size: var(--size-micro); color: var(--soft); }
/* --- sections -------------------------------------------------------------- */
.train-flow { display: flex; flex-direction: column; }
.train-section { margin-bottom: var(--space-6); scroll-margin-top: 78px; }
.train-section-head {
display: flex;
gap: var(--space-2);
align-items: center;
flex-wrap: wrap;
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--line);
margin: 0 0 var(--space-3);
font-size: 15px;
font-weight: var(--weight-normal);
}
.train-step {
width: 24px;
height: 24px;
border-radius: var(--radius-pill);
background: var(--t-tea);
color: var(--t-tea-fg);
font-size: var(--size-micro);
font-weight: var(--weight-bold);
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.train-section-title { font-size: 17px; font-weight: var(--weight-semibold); }
.train-section-note { font-size: var(--size-micro); color: var(--soft); }
/* --- learn at home --------------------------------------------------------- */
.train-callout {
display: flex;
gap: var(--space-3);
align-items: flex-start;
background: var(--soon-bg);
border-left: 3px solid var(--soon);
border-radius: var(--radius-control);
padding: var(--space-3) var(--space-4);
margin: 0 0 var(--space-4);
font-size: var(--size-small);
line-height: 1.5;
color: var(--ink);
}
/* On the camp box the materials are simply not there. That is a fact to state,
* not an alarm to raise — the alarm colour stays reserved for a real gap. */
.train-callout--dead {
background: var(--card);
border-left-color: var(--soft);
}
.train-callout-mark { flex: none; font-size: var(--size-body); line-height: 1.3; }
.train-group { margin-bottom: var(--space-5); }
/* The Love Kitchen block is homework for a handful of people, so it sits back
* from the two everybody has to do. */
.train-group--aside {
background: var(--card);
border-radius: var(--radius-card);
padding: var(--space-4);
}
.train-group-title {
font-size: var(--size-body);
font-weight: var(--weight-semibold);
margin: 0 0 2px;
}
.train-group-lead {
font-size: var(--size-small);
color: var(--soft);
line-height: 1.45;
margin: 0 0 var(--space-3);
max-width: 46em;
}
.train-group-foot {
font-size: var(--size-small);
color: var(--soft);
margin: var(--space-3) 0 0;
}
/* --- documents: wide rows you tap ------------------------------------------ */
.train-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* One child since the read-tick came off, and still a flex row: it is what makes
* `.train-doc-open` stretch the full width instead of shrinking to its text. */
.train-doc { display: flex; }
.train-doc-open {
flex: 1 1 260px;
display: flex;
gap: var(--space-3);
align-items: flex-start;
min-height: var(--tap-min);
padding: var(--space-3) var(--space-4);
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-card);
color: var(--ink);
text-decoration: none;
}
.train-doc-open:hover { border-color: var(--t-tea); }
.train-doc-open.is-dead { background: var(--card); border-style: dashed; }
.train-doc-icon {
flex: none;
width: 34px;
height: 34px;
border-radius: var(--radius-control);
background: var(--t-tea-t);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--size-body);
}
.train-doc-open.is-dead .train-doc-icon { background: var(--panel); }
.train-doc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.train-doc-name { font-size: var(--size-body); font-weight: var(--weight-semibold); }
.train-doc-desc {
font-size: var(--size-small);
color: var(--soft);
line-height: 1.45;
}
.train-doc-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
margin-top: 3px;
font-size: var(--size-micro);
color: var(--soft);
}
.train-doc-est { font-variant-numeric: tabular-nums; }
.train-dot { color: var(--line); }
/* Every outbound link says where it goes and that it leaves the app; a copy
* served off the box says so instead; and a material the box does not have is
* plainly not a link. Three different words, three different weights. */
.train-ext { font-weight: var(--weight-semibold); color: var(--t-tea-deep); }
.train-ext--local { font-weight: var(--weight-semibold); color: var(--live); }
/* A line of its own: it is a sentence about the material, not a label on it. */
.train-ext--dead {
flex: 1 1 100%;
font-weight: var(--weight-normal);
color: var(--soft);
font-style: italic;
}
/* --- videos: small tiles with a play mark ---------------------------------- */
.train-tiles {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
gap: var(--space-2);
}
.train-tiles > li { display: flex; }
.train-tile {
flex: 1;
display: flex;
flex-direction: column;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-card);
overflow: hidden;
color: var(--ink);
text-decoration: none;
}
.train-tile:hover { border-color: var(--t-tea); }
.train-tile.is-dead { background: var(--card); border-style: dashed; }
/* No thumbnails to fetch, so the poster is drawn: a tinted band, a play mark
* and the clip's number, which is enough to read as "video" at a glance. */
.train-tile-art {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 56px;
background: var(--t-tea-t);
}
.train-tile.is-dead .train-tile-art { background: var(--panel); }
.train-tile-play { font-size: 19px; color: var(--t-tea-deep); }
.train-tile-index {
position: absolute;
left: var(--space-2);
top: var(--space-2);
font-size: var(--size-kicker);
font-weight: var(--weight-bold);
color: var(--t-tea-deep);
font-variant-numeric: tabular-nums;
}
.train-tile-body {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-3);
}
.train-tile-name { font-size: var(--size-small); font-weight: var(--weight-semibold); }
.train-tile-desc {
font-size: var(--size-micro);
color: var(--soft);
line-height: 1.45;
}
.train-inline-link {
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--t-tea-deep);
font-weight: var(--weight-semibold);
text-decoration: underline;
cursor: pointer;
}
/* --- the on-playa calendar ------------------------------------------------ */
.train-days { display: flex; flex-direction: column; gap: 14px; }
.train-day-label {
font-size: var(--size-micro);
font-weight: var(--weight-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 7px;
}
.train-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.train-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: baseline;
background: var(--panel);
border-left: 3px solid var(--t-tea);
border-radius: var(--radius-control);
padding: 12px 14px;
}
/* A camp meeting is not a training — it is the whole camp in one place, and it
* is the one thing on here you cannot make up later. */
.train-row--meeting { background: var(--card); border-left-color: var(--ink); }
.train-row.is-now { background: var(--live-bg); }
.train-row.is-soon { background: var(--soon-bg); }
.train-row.is-next { border-left-width: 6px; }
.train-row-time {
font-size: var(--size-small);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
/* Wide enough for "12:00 pm–1:00 pm" on one line; the design's 128px folds
every ranged event onto two. */
width: 152px;
flex: none;
}
.train-row-body { flex: 1 1 200px; min-width: 0; }
.train-row-title { display: block; font-size: 15px; font-weight: var(--weight-semibold); }
.train-row-icon { margin-right: 5px; }
.train-row-what {
display: block;
font-size: var(--size-small);
color: var(--soft);
line-height: 1.45;
margin-top: 2px;
}
.train-row-where { flex: 0 1 190px; font-size: var(--size-micro); color: var(--soft); }
.train-row-flag {
font-size: var(--size-micro);
font-weight: var(--weight-bold);
white-space: nowrap;
color: var(--soon);
}
.train-row.is-now .train-row-flag { color: var(--live); }
.train-row.is-next .train-row-flag { color: var(--t-tea-deep); }
/* --- the roles ------------------------------------------------------------- */
.train-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-2);
}
.train-card {
background: var(--panel);
border-radius: var(--radius-card);
border-left: 3px solid var(--line);
padding: var(--space-3) var(--space-4);
}
.train-card-head {
display: flex;
flex-wrap: wrap;
gap: 4px 9px;
align-items: center;
margin: 0 0 5px;
font-size: 15px;
font-weight: var(--weight-normal);
}
.train-card-emoji {
flex: none;
width: 32px;
height: 32px;
border-radius: var(--radius-pill);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--size-body);
}
.train-card-heading { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.train-card-name {
font-size: var(--size-body);
font-weight: var(--weight-semibold);
min-width: 0;
}
.train-card-terr {
font-size: var(--size-kicker);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--soft);
}
.train-card-meta {
font-size: var(--size-micro);
font-weight: var(--weight-semibold);
color: var(--soft);
margin-left: auto;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.train-card-body {
font-size: var(--size-small);
color: var(--soft);
line-height: 1.45;
margin: 0;
}
/* --- good to know ---------------------------------------------------------- */
.train-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.train-note {
display: flex;
gap: var(--space-2);
font-size: var(--size-small);
line-height: 1.5;
}
.train-note::before { content: '·'; color: var(--soft); flex: none; }
/* `.train-empty` is gone — both "nothing here yet" cases are now
* `emptyState()` (`components/ui.js`), which drew this exact box
* (byte-identical to `directory.css`'s `.dir-empty`, apart from the class
* name). */
/* --- the tail ------------------------------------------------------------- */
.train-contact {
background: var(--card);
border-radius: var(--radius-card);
padding: 17px 19px;
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
justify-content: space-between;
}
.train-contact-copy {
font-size: var(--size-small);
color: var(--soft);
max-width: 30em;
margin: 0;
}
.train-contact-copy a { color: var(--t-tea-deep); }
.train-contact .btn { text-decoration: none; }
@media (max-width: 560px) {
/* The calendar stops being a table and becomes a stack: time, then what, then
where. Two columns of 152px do not fit a phone. */
.train-row-time { width: auto; }
.train-row-where { flex: 1 1 100%; }
}