/* The legacy pages, in the wireframe language. ============================================================ /testimonials, /feedback, /chats, /reports and /news carry this sheet and a gw-cards class on , both added by lib/legacy-chrome.mjs. It was one of three treatments mocked up for review; the other two are on the mockups/gallery-wire branch if they are ever wanted again. It takes three things from the walkthroughs and the deck: paper rather than a tinted card, a ruled edge with a hard offset cast rather than a soft shadow and a 16px radius, and mono for anything that labels rather than speaks. A quote gets a light box, its attribution under a dashed rule, three across. The ink itself (js/gallery-wire.js + js/hand-ink.js) draws those boxes. Without JS every box keeps the CSS edge below, which is the same design a shade quieter. */ body.gw-cards { /* The walkthroughs' own ink values, borrowed rather than imported. */ --gw-ink: #55555f; --gw-faint: #bab7b0; --gw-paper: #fffefb; --gw-cast: rgba(60, 50, 40, 0.16); --gw-hatch: rgba(60, 50, 40, 0.09); --gw-accent: #5a5ad1; /* What is legible on an accent fill. The light accent is a deep violet and takes paper on it at 5.5:1; the dark one is a pale violet, and paper on that was 2.9:1 — white lettering on lilac on the active filter pill, the /news section nav and the primary call to action. Ink on it in dark, 6.3:1. */ --gw-on-accent: #fffefb; --gw-strong: #111118; --gw-mono: "Roboto Mono", ui-monospace, Menlo, monospace; } body.gw-cards.dark-mode, html.dark-mode body.gw-cards { --gw-ink: #a8a8b4; --gw-faint: #4b4b5a; --gw-paper: #15151e; --gw-cast: rgba(226, 226, 255, 0.09); --gw-hatch: rgba(226, 226, 255, 0.06); --gw-accent: #8a8aff; --gw-on-accent: #15151e; --gw-strong: #f2f2f7; } /* ---- shared: the section head ---- A mono title over a rule. Centred where the title stands alone above a grid, as /testimonials has it: the eyebrows the deck's own heads carry are gone from the markup, and a lone title reads better centred over its rule than pushed to one edge of it. The centring is on the wrapper, so /news — which has six heads down one column and no wrapper — keeps its left. */ body.gw-cards .section-header { text-align: center; margin-bottom: 1.6rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--gw-faint); } body.gw-cards .section-title { font-family: var(--gw-mono); font-weight: 700; letter-spacing: -0.01em; } body.gw-cards .section-header .section-title { text-align: center; } /* ---- shared: the filter pills and the show-more button ---- Drawn chips: paper, a ruled edge, a small hard cast, mono. */ body.gw-cards .category-pill, body.gw-cards .show-more-btn { border-radius: 5px; border: 1.5px solid var(--gw-ink); background: var(--gw-paper); box-shadow: 2px 2px 0 var(--gw-cast); color: var(--text-strong, var(--gw-strong)); font-family: var(--gw-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; transition: box-shadow 0.18s ease, transform 0.18s ease; } body.gw-cards .category-pill:hover, body.gw-cards .show-more-btn:hover { box-shadow: 4px 4px 0 var(--gw-cast); transform: translate(-1px, -1px); } body.gw-cards .category-pill.active, body.gw-cards .category-pill[aria-pressed="true"] { background: var(--gw-accent); border-color: var(--gw-accent); color: var(--gw-on-accent); } /* ---- shared: the search field, as a wireframe input ---- */ body.gw-cards .search-container input, body.gw-cards input[type="search"], body.gw-cards input[type="text"] { border: 1.5px solid var(--gw-ink); border-radius: 5px; background: var(--gw-paper); box-shadow: 2px 2px 0 var(--gw-cast); font-family: var(--gw-mono); font-size: 0.82rem; } /* ---- shared: the feature tiles ---- The deck's fork cards, at tile size: paper, ruled, cast, mono. */ body.gw-cards .feature-tile { background: var(--gw-paper); border: 1.5px solid var(--gw-ink); border-radius: 5px; box-shadow: 3px 3px 0 var(--gw-cast); font-family: var(--gw-mono); font-weight: 500; font-size: 0.86rem; letter-spacing: -0.01em; } body.gw-cards .feature-tile i { color: var(--gw-accent); } /* Three tiles to a row, on one row. Mono is wider than the font this page was laid out in, and three of these labels set in it come to more than the column holds: the two longest rows — "Built for Viewpoint Diversity / Gives Students Time to Think / Low-Stakes, Text-Based, Scalable" and the three under "What Guide Does" — broke after the second tile and left the third stranded on a line of its own, while every shorter row further down the page sat on one line. Three across is the shape; a row that breaks reads as a row that ran out of things to say. Sized against the row rather than against the window, which is the only box that knows how much room the tiles actually have: one window gives this column roughly 200px more with the nav spine folded than with it open, so a viewport-width rule could only ever be right in one of those two states. The longest row needs about 74 times the type size to sit on one line, and 1.3cqi keeps under that at every width; the 0.86rem cap is what stops the type growing past the rest of the sheet on a wide window. The padding goes in em, so the box tightens with the type it holds rather than standing at a width the tile no longer needs — that padding was most of what overflowed. The floor is where this stops: on a window too narrow to hold three tiles at legible type, the row breaks rather than the type shrinking past reading. Below 769px none of it applies, where the page's own tile sizing and a wrapped row are what a phone should get. */ @media (min-width: 769px) { body.gw-cards .feature-tiles-row { container-type: inline-size; gap: 0.8rem; } body.gw-cards .feature-tile { padding: 1.15em 1.55em; gap: 0.6em; font-size: clamp(0.68rem, 1.3cqi, 0.86rem); white-space: nowrap; } body.gw-cards .feature-tile i { font-size: 1.15em; } } /* ---- shared: the quote mark ---- The galleries set a huge serif quote mark behind each card. In this language the mark is a mono one, small, in accent, and on the line rather than behind it. */ body.gw-cards .quote-card::before { font-family: var(--gw-mono); font-size: 1.6rem; color: var(--gw-accent); opacity: 0.55; top: 0.6rem; left: 1.1rem; } /* ---- the cards ---- One ruled box each: paper, a hard cast, and what the card carries under a dashed rule inside it, the way a walkthrough card carries its note. -- */ body.gw-cards .quote-card, body.gw-cards .feedback-card, body.gw-cards .thread-card, body.gw-cards .report-card { background: var(--gw-paper); border: 1.5px solid var(--gw-ink); border-radius: 5px; box-shadow: 3px 3px 0 var(--gw-cast); padding: 1.35rem 1.45rem 1.15rem; transition: box-shadow 0.2s ease, transform 0.2s ease; } body.gw-cards .quote-card:hover, body.gw-cards .feedback-card:hover, body.gw-cards .thread-card:hover, body.gw-cards .report-card:hover { box-shadow: 5px 5px 0 var(--gw-cast); transform: translate(-1px, -1px); } body.gw-cards .quote-text { font-style: normal; } body.gw-cards .quote-attribution { margin-top: 1.1rem; padding-top: 0.85rem; border-top: 1px dashed var(--gw-faint); } body.gw-cards .quote-attribution-text strong { font-family: var(--gw-mono); font-size: 0.82rem; } body.gw-cards .quote-attribution-text { font-size: 0.76rem; line-height: 1.5; } body.gw-cards .quote-avatar { border-radius: 4px; border: 1.5px solid var(--gw-ink); } /* ---- the attribution, level across the row ---- The grid already stretches every card in a row to the height of the tallest, but each card stacks its own contents from the top, so a short quotation and a long one put their dashed rule and their name at different heights and the row reads as ragged rather than ruled. Subgrid settles it at the source. A card spans two of the grid's own row tracks instead of laying its two children out itself: the quotation track is as tall as the longest quotation in that row and the attribution track as tall as the tallest attribution, so the rule, the avatar and the name land on one line across the row. The slack goes where it belongs — between the end of a short quotation and its rule — rather than under the name. The gaps: the card's own row-gap governs the one track boundary it spans, which is the space between quotation and rule; the boundary between one row of cards and the next is not spanned by any card, so it keeps the grid's 1.5rem. The margins the two children used to carry that space with come off, or it would be counted twice. Without subgrid this does nothing and the cards keep the flow layout they have now: ragged, but never broken. */ @supports (grid-template-rows: subgrid) { body.gw-cards .quote-grid > .quote-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 1.25rem; } /* Children of a card, not of anything else that carries these two names: the page's own full-width .proof-quote holds a .quote-text and a .quote-attribution of its own, and /news gives the class to the footer under the Senate testimony. Neither is in the grid, and neither should lose the margin that separates it from what it follows. */ body.gw-cards .quote-card > .quote-text { margin-bottom: 0; } /* Start rather than stretch: the block is only as tall as what it carries, so a one-line title sits on the same line as a three-line one instead of centring itself in the taller track. */ body.gw-cards .quote-card > .quote-attribution { margin-top: 0; align-self: start; } } /* Three up only where three fit: below the gallery's own breakpoint the page goes to one column, and forcing three there pushed the grid past the viewport. */ @media (min-width: 900px) { body.gw-cards .quote-grid { grid-template-columns: repeat(3, 1fr); } /* …except at four, which three columns set as a row of three and a straggler. Four goes two up, in two even rows. A section is showing four either because it holds exactly four, or because it is collapsed and the page's own rule hides the fifth card onward; "Show More" opens the rest and hands the section back to three columns. The two are separate rules rather than one list so that the collapsed case survives in a browser without :has(). */ body.gw-cards .section.collapsed .quote-grid { grid-template-columns: repeat(2, 1fr); } body.gw-cards .quote-grid:has(> .quote-card:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } } body.gw-cards .category-tag { border: 1px dashed var(--gw-faint); border-radius: 3px; background: none; font-family: var(--gw-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; } /* ---- the thread and report cards ---- Same box, different contents: these carry a title, a paragraph and a link out rather than a quotation and an attribution. The title takes the mono the deck gives a card heading, and the link out takes the go-line the "Up next" cards use — mono, uppercase, tracked, with the arrow that comes with it rather than a filled pill. */ body.gw-cards .thread-card, body.gw-cards .report-card { overflow: visible; } body.gw-cards .thread-title, body.gw-cards .report-title { font-family: var(--gw-mono); font-weight: 700; font-size: 1.02rem; line-height: 1.4; letter-spacing: -0.01em; } /* The statement a thread argued about, set as the marginal note the walkthroughs use: a rule down its left rather than a box around it, so it reads as quoted rather than as another card inside the card. */ body.gw-cards .thread-statement { border-left: 2px solid var(--gw-accent); border-radius: 0; background: none; padding: 0.1rem 0 0.1rem 0.85rem; margin: 0.75rem 0 0.85rem; font-style: normal; font-size: 0.88rem; } body.gw-cards .thread-description, body.gw-cards .report-description { font-size: 0.9rem; line-height: 1.6; } /* Who the two of them were, how long they talked, and how far each one moved. Mono, because every one of those is a label rather than a sentence — and the numbers are what a reader is scanning the grid for. Written by lib/legacy-galleries.mjs out of the extracted transcripts. */ body.gw-cards .thread-facts { margin-top: 0.7rem; font-family: var(--gw-mono); font-size: 0.68rem; line-height: 1.6; letter-spacing: 0.04em; color: var(--text-soft); } body.gw-cards .view-link { align-self: flex-start; margin-top: 1rem; padding: 0.75rem 0 0; border-top: 1px dashed var(--gw-faint); border-radius: 0; width: 100%; background: none; box-shadow: none; color: var(--gw-accent) !important; font-family: var(--gw-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } body.gw-cards .view-link:hover { background: none; box-shadow: none; } /* ---- shared: the call to action ---- The pills were the last soft-cornered, glowing thing on these pages. Drawn buttons instead: paper, a ruled edge, a hard cast that deepens on hover, and the mono the rest of the page labels in. The primary one keeps the accent as its fill, so which of the two is the ask stays obvious. */ body.gw-cards .cta-button { border-radius: 5px; padding: 0.85rem 1.5rem; font-family: var(--gw-mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; box-shadow: 3px 3px 0 var(--gw-cast); transition: box-shadow 0.18s ease, transform 0.18s ease; } body.gw-cards .cta-button.primary { background: var(--gw-accent); border: 1.5px solid var(--gw-accent); color: var(--gw-on-accent); } body.gw-cards .cta-button.secondary { background: var(--gw-paper); border: 1.5px solid var(--gw-ink); color: var(--text-strong, var(--gw-strong)); } body.gw-cards .cta-button:hover, body.gw-cards .cta-button:focus-visible { box-shadow: 5px 5px 0 var(--gw-cast); transform: translate(-1px, -1px); background: var(--gw-accent); color: var(--gw-on-accent); border-color: var(--gw-accent); } body.gw-cards .cta-title { font-family: var(--gw-mono); font-weight: 700; letter-spacing: -0.01em; } /* ---- the ink ---- Same arrangement as the up-next band: the script sets html.gw-ink, which is what takes the CSS edge off, so a page without JS keeps the ruled box and nothing here applies. */ html.gw-ink body.gw-cards .hi-box { position: relative; border-color: transparent; border-radius: 0; } body.gw-cards .hi-ink { position: absolute; left: -7px; top: -7px; overflow: visible; pointer-events: none; fill: none; z-index: 1; } body.gw-cards .hi-ink path { stroke: var(--gw-ink); stroke-width: 1.15; stroke-linecap: round; vector-effect: non-scaling-stroke; } body.gw-cards .hi-ink path.hi-p2 { stroke-width: 0.85; stroke-opacity: 0.5; } /* ---- no entrance ---- These are dense pages: /feedback carries 167 quotations, /news 58 items. Anything that animates per card animates dozens of times on one scroll, and the sum of it is movement rather than an effect. Nothing here fades in, rises, or draws itself — the boxes are simply there, and the only thing that moves is what the reader is pointing at. That includes each page's own entrance, which predates this sheet: all five scripts set opacity and a 20px offset inline on every card and then transition them back on intersection. Inline styles are what !important is for, and this is the one place in the sheet that uses it. The hover lift takes it too, so that it wins against the base rule rather than losing to it. */ body.gw-cards .quote-card, body.gw-cards .feedback-card, body.gw-cards .thread-card, body.gw-cards .report-card, body.gw-cards .feature-tile, body.gw-cards .news-item, body.gw-cards .featured-item { opacity: 1 !important; transform: none !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; } body.gw-cards .quote-card:hover, body.gw-cards .feedback-card:hover, body.gw-cards .thread-card:hover, body.gw-cards .report-card:hover, body.gw-cards .news-item:hover, body.gw-cards .featured-item:hover { transform: translate(-1px, -1px) !important; } /* ============================================================ /news — the same language on a page of items rather than cards ============================================================ The gw-news class is carried by this one page (lib/legacy-chrome.mjs), so the selectors below can use the page's own names — .news-item, .source, .award-badge — without reaching any other page that happens to share one. Nothing here is new design: a news item is the walkthroughs' card at full width, its badge is the galleries' dashed tag, its pull-quote is the marginal note the thread cards use, and the section nav is the filter row from /feedback with a different set of words in it. */ /* ---- the section heads ---- Six of them down one column, each opening a run of items. Ink rather than accent — in this language the accent points at things, it does not label them — over the same faint rule the galleries' single head sits on. */ body.gw-news .section-title { color: var(--gw-strong); font-size: 1.35rem; margin-bottom: 1.4rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--gw-faint); } /* ---- the section nav ---- Drawn chips, the same ones the galleries filter with. The row is sticky, so it needs a little headroom for the cast to sit in without being clipped by the scroll edge. It was also bled to the full width with `width: 100vw` and a negative half-viewport margin, which is the usual trick and is wrong here: the column it sits in is pushed right by the sidebar, so 50% of the container is not 50% of the viewport and the row hung 125px off the right of every desktop width, giving the whole page a horizontal scrollbar. Back inside the column, where the content it covers as it sticks already is. A box's ink overshoots its corners by seven pixels, which is outside the column and so outside the sticky row's background: without the fourteen px of bleed below, the corner of whatever item is passing underneath shows to the left and right of the row. */ body.gw-news .section-nav { width: auto; margin-left: -14px; margin-right: -14px; gap: 0.5rem; padding: 1.1rem 14px; } body.gw-news .section-nav a { border-radius: 5px; border: 1.5px solid var(--gw-ink); background: var(--gw-paper); box-shadow: 2px 2px 0 var(--gw-cast); color: var(--gw-strong); padding: 0.55rem 1.05rem; font-family: var(--gw-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; transition: box-shadow 0.18s ease, transform 0.18s ease; } body.gw-news .section-nav a:hover { box-shadow: 4px 4px 0 var(--gw-cast); transform: translate(-1px, -1px); } body.gw-news .section-nav a.active { background: var(--gw-accent); border-color: var(--gw-accent); color: var(--gw-on-accent); box-shadow: 2px 2px 0 var(--gw-cast); } /* ---- the sort toggle ---- The row's one control rather than one of its jumps, so it is the same drawn chip carrying both its words at once, with the accent block over the half that is on. Switching slides the block; the box stays put. The two halves are grid columns rather than flex items so they are exactly equal — the block is a flat 50% and has to land on a word either way. */ body.gw-news .sort-toggle { border-radius: 5px; border: 1.5px solid var(--gw-ink); background: var(--gw-paper); box-shadow: 2px 2px 0 var(--gw-cast); transition: box-shadow 0.18s ease, transform 0.18s ease; } body.gw-news .sort-toggle:hover { box-shadow: 4px 4px 0 var(--gw-cast); transform: translate(-1px, -1px); } /* Square where it meets the middle, drawn where it meets the edge. */ body.gw-news .sort-toggle::before { background: var(--gw-accent); border-radius: 3.5px 0 0 3.5px; } body.gw-news .section-nav.sort-date .sort-toggle::before { border-radius: 0 3.5px 3.5px 0; } body.gw-news .sort-toggle button { color: var(--gw-strong); font-family: var(--gw-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; padding: 0.55rem 1.05rem; border-radius: 3.5px; } body.gw-news .sort-toggle button[aria-pressed="true"] { color: var(--gw-on-accent); } body.gw-news .sort-toggle button:focus-visible { outline-color: var(--gw-accent); } body.gw-news .sort-toggle button[aria-pressed="true"]:focus-visible { outline-color: var(--gw-on-accent); } body.gw-news .search-input { width: 160px; } body.gw-news .search-input::placeholder { font-family: var(--gw-mono); } /* The row is full-bleed, and on a phone the page's own rules take its side padding to nothing — which put the first chip's drawn edge half off the screen. Enough gutter for the edge and its cast to sit in. */ @media (max-width: 768px) { /* Same bleed, less of it: on a phone the column's own gutter is 16px, so the row can only reach eight past the chips before it runs off. */ body.gw-news .section-nav { margin-left: -8px; margin-right: -8px; padding: 0.85rem 8px 0.9rem; gap: 0.45rem; } body.gw-news .section-nav a { padding: 0.5rem 0.85rem; font-size: 0.74rem; } body.gw-news .sort-toggle button { padding: 0.5rem 0.85rem; font-size: 0.74rem; } } /* Where the row parks itself when it sticks is the chrome's business, not this sheet's — see fragments/banner-metrics.css. What is this sheet's business is that a section jumped to from the row lands below it rather than behind it. The page already sets scroll-padding-top: 80px on , which the row is taller than; this makes up the difference. */ body.gw-news .news-section, body.gw-news .featured-section { scroll-margin-top: 84px; } /* ---- the highlights ---- Four boxes across the top. The gradient fill and the accent bar across the head both go: what marks these out from the items below is that they are short and side by side, which the grid already says. */ body.gw-news .featured-item { background: var(--gw-paper); border: 1.5px solid var(--gw-ink); border-radius: 5px; box-shadow: 3px 3px 0 var(--gw-cast); /* the ink overshoots the corners, so the box cannot clip its own edge */ overflow: visible; transition: box-shadow 0.2s ease, transform 0.2s ease; } body.gw-news .featured-item::before { content: none; } body.gw-news .featured-item:hover { box-shadow: 5px 5px 0 var(--gw-cast); transform: translate(-1px, -1px); } body.gw-news .featured-label { font-family: var(--gw-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; margin-bottom: 0.55rem; } body.gw-news .featured-item h3 { font-family: var(--gw-mono); font-weight: 700; font-size: 0.98rem; line-height: 1.4; letter-spacing: -0.01em; } /* ---- the items ---- One drawn box each, at the width of the column. */ body.gw-news .news-item { background: var(--gw-paper); border: 1.5px solid var(--gw-ink); border-radius: 5px; box-shadow: 3px 3px 0 var(--gw-cast); padding: 1.6rem 1.75rem 1.5rem; transition: box-shadow 0.2s ease, transform 0.2s ease; } body.gw-news .news-item:hover { border-color: var(--gw-ink); box-shadow: 5px 5px 0 var(--gw-cast); transform: translate(-1px, -1px); } body.gw-news .news-item h3 { font-family: var(--gw-mono); font-weight: 700; font-size: 1.08rem; line-height: 1.45; letter-spacing: -0.01em; margin-bottom: 0.35rem; } /* The date and outlet: a label, so mono — but not tracked and not shouted, because half of them run to a full line. */ body.gw-news .news-item .source { font-family: var(--gw-mono); font-style: normal; font-size: 0.72rem; letter-spacing: 0.02em; margin-bottom: 0.9rem; } /* Grant, Winner, Finalist. The galleries' dashed tag rather than a filled pill, and above the headline where the pill already sat. */ body.gw-news .award-badge { background: none; border: 1px dashed var(--gw-faint); border-radius: 3px; color: var(--gw-accent); padding: 0.22rem 0.6rem; margin-bottom: 0.9rem; font-family: var(--gw-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } /* ---- the pull-quote ---- The Senate testimony, set as the marginal note the thread cards use: a rule down its left rather than a tinted panel, and no serif quote mark the size of a headline. */ body.gw-news .quote-block { background: none; border-radius: 0; border-left: 2px solid var(--gw-accent); padding: 0.1rem 0 0.1rem 1rem; margin: 1.2rem 0 0.4rem; font-style: normal; } body.gw-news .quote-block::before { content: none; } body.gw-news .quote-block p { margin-left: 0; font-size: 0.95rem; } body.gw-news .quote-attribution { margin-left: 0; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dashed var(--gw-faint); text-align: left; font-family: var(--gw-mono); font-size: 0.7rem; letter-spacing: 0.06em; } /* ---- the furniture ---- */ body.gw-news .no-results { font-family: var(--gw-mono); font-size: 0.9rem; } body.gw-news .back-to-top { border-radius: 5px; border: 1.5px solid var(--gw-ink); background: var(--gw-paper); color: var(--gw-strong); box-shadow: 2px 2px 0 var(--gw-cast); } body.gw-news .back-to-top:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--gw-cast); } body.gw-news .search-highlight { background: none; border-bottom: 2px solid var(--gw-accent); border-radius: 0; padding: 0; }