/* THE LAUNCH STYLESHEET. RELEASE 0295 OPENS IT, AND IT IS A NEW FILE ON PURPOSE. `app/static/style.css` is 76,848 bytes against the project's 80 KB rule and this connector re-sends a whole file for every change, so the launch work goes here. It loads after `style.css` and after `walk.css`, so where it restates a selector on purpose it wins; everything it does is written beside the reason for it. NO BACKSLASH APPEARS IN THIS FILE. --------------------------------------------------------------------------- RELEASE 0295. THE PHONE HEADER IS ONE ROW. What was here before: below 700px the header turned into a column - the logo on one row, five to seven navigation links wrapping over two rows, and the token search on a row of its own. Measured at 390x844 that header took roughly a third of the first screen, and a visitor who had not yet been told what the site does was reading a bar of places to go instead. What it is now: one row, the logo at the left and a 44px button that says the word "Menu" at the right, with the whole navigation and the search in a panel that opens from that button directly under the header. The links are the same links, in the same order, in the same words; the search is first in the panel and full width, because it is the one thing in there a visitor might actually want on a phone. NOTHING CHANGES ABOVE 900px. Every rule below is inside a max-width query, and the desktop bar is the bar it has always been. AND NOTHING CHANGES WITHOUT THE SCRIPT. The toggle is hidden and the navigation is left exactly as it was unless `launch.js` has run and put `js-nav` on the root element. A header whose links are behind a button that cannot work is a header with no links at all, so a reader with scripts off gets the old wrapping bar rather than a dead end. */ /* The button exists in the markup on every page and is seen only where it can do something: below 900px, with the script running. */ .navtoggle{display:none} @media (max-width:899px){ /* The row. `position:relative` is what the panel below hangs from; the header is deliberately not sticky on this site, so the panel scrolls away with it rather than sitting over the page. */ html.js-nav header{position:relative;flex-direction:row;flex-wrap:nowrap; align-items:center;justify-content:space-between;gap:12px;padding:10px 16px} html.js-nav .navtoggle{display:inline-flex;align-items:center; justify-content:center;flex:0 0 auto;min-height:var(--tap,44px); min-width:var(--tap,44px);padding:10px 14px;font:inherit; font-size:var(--t-body,1rem);color:var(--text);background:var(--surface-1); border:1px solid var(--line);border-radius:8px;cursor:pointer} html.js-nav .navtoggle:hover{background:var(--surface-2)} html.js-nav .navtoggle:focus-visible{outline:2px solid var(--link); outline-offset:2px} /* The navigation is the panel. It is the same element and the same markup: hidden until the button opens it, and a column under the header when it is open. */ html.js-nav header nav{display:none} html.js-nav header nav.open{display:flex;flex-direction:column; align-items:stretch;gap:2px;position:absolute;left:0;right:0;top:100%; z-index:900;margin:0;padding:12px 16px 16px;background:var(--surface-2); border-bottom:1px solid var(--line);box-shadow:var(--elevation); max-height:calc(100vh - 100%);overflow-y:auto; transition:opacity .14s ease-out} /* The search first, and the full width of the panel. It is last in the markup - which is where the comment in `base.html` has always said it belongs, because anywhere earlier it breaks the line of links on the desktop bar - so it is moved to the top here rather than moved in the document. */ html.js-nav header nav.open .navsearch{order:-1;display:block;width:100%; margin:0 0 10px} html.js-nav header nav.open .navsearch input{width:100%; min-height:var(--tap,44px)} /* Every link in the panel is a 44px row with the word at its left, which is a thumb-sized target rather than an inline run of text. */ html.js-nav header nav.open a{display:flex;align-items:center; min-height:var(--tap,44px);padding:0 4px;line-height:1.3} /* The separators are punctuation for a row of links. In a column they would be a row of lone middots. */ html.js-nav header nav.open .navsep{display:none} } /* Reduced motion: the panel appears, it does not fade. `style.css` already zeroes every transition under this query; this says it again for the one transition this file adds, so the rule travels with the thing it governs. */ @media (prefers-reduced-motion:reduce){ html.js-nav header nav.open{transition:none} } /* --------------------------------------------------------------------------- RELEASE 0296. THE FOOTER IS AN INDEX, NOT A PARAGRAPH. Twenty links and nineteen middots in one run of text became five groups with a heading over each. The markup carries the headings and the lists; this is only their geometry. FIVE COLUMNS FROM 900px. `walk.css` already made the footer a grid at that width - the two sentences beside each other, the links in the widest of three tracks - and five columns do not fit in one of those tracks at any readable width. So the two sentences keep their row and the groups take a full-width row of their own underneath, five across. A SINGLE STACK BELOW, AND THAT IS ALL IT IS. Each heading sits above its own links, every link is a 44px row, and there is not a separator anywhere in it: a middot between items in a column is punctuation with nothing to punctuate. */ .footcols{display:grid;grid-template-columns:1fr;gap:16px 20px; margin:var(--s4,16px) 0 0} .footcol h2{margin:0 0 2px;font-size:.95rem;line-height:1.3;font-weight:700; color:var(--text)} .footcol ul{list-style:none;margin:0;padding:0} .footcol li{margin:0} .footcol a{display:flex;align-items:center;min-height:var(--tap,44px); color:var(--muted);text-decoration:none} .footcol a:hover,.footcol a:focus-visible{color:var(--text); text-decoration:underline} @media (min-width:900px){ /* The two sentences on one row, the five groups on the next. Written out rather than inherited, because the track this would otherwise land in was measured for a paragraph of links and not for five columns. */ footer{grid-template-columns:minmax(0,1fr) minmax(0,2fr)} footer .social{grid-column:1} footer>p:not(.social){grid-column:2} .footcols{grid-column:1 / -1;grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px} /* A 44px row per link is a thumb target on a phone and a gappy column on a desktop, where the pointer is precise and the eye wants the group read as one block. */ .footcol a{min-height:0;padding:3px 0} } /* --------------------------------------------------------------------------- RELEASE 0297. THE THREE STEPS UNDER THE FIGURES, AS ONE COMPACT ROW. Numbered from a counter and in the same treatment as the three steps further down the page - the leading-zero numeral in the accent colour, a hairline over each item - because they are the same kind of thing and a reader should not have to decide whether they are. THREE ACROSS AT EVERY WIDTH, which is the point of it: a path reads as a path, and a path broken over two rows on a phone reads as a list. They are three words and three short lines, so three columns still leaves every line above this project's twelve-pixel floor at 320px. */ .hero ol.flow{list-style:none;margin:var(--s4,16px) 0 0;padding:0; counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3,12px)} .hero ol.flow li{counter-increment:step;margin:0;padding-top:var(--s2,8px); border-top:1px solid var(--glass-line,var(--line))} .hero ol.flow li::before{content:counter(step,decimal-leading-zero); display:block;font-family:var(--font-mono);font-size:var(--t-small); font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:.04em; margin-bottom:2px} .hero ol.flow strong{display:block;font-size:.95rem;line-height:1.25; color:var(--text)} .hero ol.flow span{display:block;font-size:var(--t-small);line-height:1.4; color:var(--muted)} /* --------------------------------------------------------------------------- RELEASE 0299. THE MONITORING SECTION, THE POINTER AND THE CLOSE. Three small blocks and no new colour, no new border treatment and no new typeface: they are panels and lines of the kind this site already has, so the eye reads them as part of it rather than as something bolted on. THE MONITORING SECTION IS QUIET BY DESIGN. It is the one block on the page that could have carried a button, and it carries none, so it is styled as a statement and not as an offer: the same panel as everything else, the second sentence in the muted text the site uses for a limitation, and one text link. */ .guard-note p{margin:var(--s3,12px) 0 0} .guard-note p:first-of-type{margin-top:var(--s2,8px)} /* People and machines: one line, three links, and the same underline-on-hover treatment the rest of the page's prose links have. */ .machines{margin:var(--s5,20px) 0 0;color:var(--muted)} /* The pointer to the founders. Discreet means discreet: the muted size the site uses for a note, with a tap target that is still a tap target. */ .founders-pointer{margin:var(--s4,16px) 0 0} .founders-pointer a{display:inline-flex;align-items:center; min-height:var(--tap,44px)} /* The close. The line the page opened with, then two actions on one row where there is room and stacked where there is not - and the second action is a link rather than a second button, because two buttons side by side ask a reader to choose instead of to act. */ .closing{margin:var(--s6,24px) 0 0;padding-top:var(--s5,20px); border-top:1px solid var(--line)} .closing-line{margin:0;font-size:var(--t-h2,1.3rem);line-height:1.25; color:var(--text);font-weight:700} .closing-actions{display:flex;flex-wrap:wrap;align-items:center; gap:var(--s3,12px);margin:var(--s4,16px) 0 0} .closing-actions .closing-second{display:inline-flex;align-items:center; min-height:var(--tap,44px);color:var(--link)} /* --------------------------------------------------------------------------- RELEASE 0300. THE DATE UNDER THE THING IT DATES. Both cells in the collapses table now hold a value and the time it belongs to, and the time goes on its own line under it: beside it, the row reads as one long string at phone width and the eye cannot tell which date belongs to which column. */ .obituaries td .meta{display:block;margin-top:2px} /* --------------------------------------------------------------------------- RELEASE 0302. THE TWO EXPLAINING LINES IN THE FEATURED BOX, HELD TO A READABLE MEASURE. The box gained a line saying what confidence measures and a line naming the check that did not run. Unheld, each ran the full width of the panel - 860 CSS pixels at 1280, which is around 150 characters, and a reader loses the start of the next line somewhere in the middle of a long one. At 66 characters they measure 599px there and the full column width on a phone, where the column is already narrower than the limit. THE SPACE ABOVE THEM IS THE BOX'S OWN MARGIN and it is left alone: it belongs to `.verdictbox`, which the token page uses too, and 16px measured there is the rhythm of this page. No colour, no border, no weight either - they are the muted note the site already uses for a limitation. */ .daily-feature .coverage-words{max-width:66ch} /* --------------------------------------------------------------------------- RELEASE 0304. THE TWO FOUNDER CARDS, AND THE GEOMETRY IS THE ARGUMENT. TWO EQUAL FRACTIONS, NOT TWO CONTENT-SIZED COLUMNS. `1fr 1fr` through `minmax(0,1fr)` means each card is exactly half the row whatever is in it, and `align-items:stretch` - the grid default, said out loud here because the whole point rests on it - makes both cards the height of the taller one. One founder's sentence is a word longer than the other's; on a flex row or an auto-sized grid that difference becomes a wider card, and a wider card reads as a bigger job. TWO ACROSS FROM 480px, ONE BELOW. The founders' handoff names that width, and it measures right: at 480 each card has about 220px of text column, which still holds "Co-Founder" and the role line without breaking a word. Below it they stack in the document's order, same card, same lines. A PANEL LIKE THE DOSSIER PANELS, and nothing more. The surface, the hairline, the radius and the elevation are the site's own tokens, so these read as part of the page rather than as a bolted-on team section. No photograph frame, no accent bar, no hover lift: a card that animates under the pointer invites a click, and there is one link in here to click. THE PROFILE LINK IS A 44px ROW. It is the only tap target in the section and it sits at the bottom of a card a thumb reaches for. */ .founders{display:grid;grid-template-columns:1fr;align-items:stretch; gap:var(--s4,16px);margin:var(--s4,16px) 0 0} .founder{margin:0;padding:var(--s4,16px);background:var(--surface-1); border:1px solid var(--glass-line,var(--line));border-radius:12px; box-shadow:var(--elevation);display:flex;flex-direction:column} .founder h3{margin:0;font-size:var(--t-h3,1.1rem);line-height:1.25; color:var(--text)} .founder .founder-title{margin:2px 0 0;font-size:var(--t-small); letter-spacing:.04em;text-transform:uppercase;color:var(--accent)} .founder .founder-role{margin:var(--s2,8px) 0 0;font-weight:700; color:var(--text)} .founder .founder-what{margin:var(--s2,8px) 0 0;color:var(--muted)} /* The link to the bottom of the card, so both links sit on one line across the row however long the sentence above them runs. */ .founder .founder-link{margin:auto 0 0;padding-top:var(--s2,8px)} .founder .founder-link a{display:inline-flex;align-items:center; min-height:var(--tap,44px)} @media (min-width:480px){ .founders{grid-template-columns:repeat(2,minmax(0,1fr))} } /* --------------------------------------------------------------------------- RELEASE 0305. THE ONE THING THE ACCEPTANCE PASS FOUND. Six surfaces measured at 320, 360, 390 and 1280 came back clean on every item of the founders' list but one: the "Report what happened to you" form on the obituary page. Its text field measured 21 CSS pixels tall at all three phone widths - the browser's default input height, which no rule on this site had ever overridden because this is the only form on a public page outside the scan box. Twenty-one pixels is half a thumb, and this is the form a person uses after losing money, which is the worst moment on the site to hand somebody a target they have to aim at. Every control in that panel is now a 44px row, the field is full width so a transaction hash has room, and the font is inherited at 16px because anything smaller makes a phone browser zoom the page on focus - which looks, to the person typing, exactly like the layout breaking. */ .timeline form label{display:block;margin:var(--s3,12px) 0 0} .timeline form input[type="text"], .timeline form textarea{display:block;width:100%;box-sizing:border-box; margin-top:4px;min-height:var(--tap,44px);padding:10px 12px; font:inherit;font-size:var(--t-body,1rem);color:var(--text); background:var(--surface-1);border:1px solid var(--line);border-radius:8px} .timeline form textarea{min-height:calc(var(--tap,44px) * 2);resize:vertical} .timeline form button{min-height:var(--tap,44px);margin-top:var(--s3,12px)}