/* shows.css (magazine) — the sheet of the SHOWS package (design package S6: docs/design-kickoff/S6_BAUVORLAGE.md): the calendar leaf, the card of a show, the large row, the crumbs, tabs and the buttons with a number, the blocks of four, the months of the calendar — and the tiles of a show's own page. Load order in the magazine's layout: tailwind.css → the platform's components.css and shell.css → the magazine's components.css (the blocks its pages share) → article.css, issue.css, THIS file → app.css. The admin has its own layout and loads none of them. ⚠️ Loaded on EVERY page of the magazine, like the two sheets beside it. So: - every block is named `mag-…` (a colour version of the platform's pill `pill-…`), and a name belongs to ONE sheet: none that components.css or another package uses; - a block of components.css is restyled only under a class of this package, never by its bare name — that would change it on every page; - colours only as var(--mn-…): a colour without a name gets one in tailwind.base.js. How LARGE the blocks are built stands in ONE place: the block "The scale" right below, in the form of components.css — the phone's and the tablet's values on the root, what differs from 1024 in one media query, in whole pixels, each under a name `--mag-…` that no other sheet defines. A rule further down says `var(--mag-…)` where it sets a size; it may read a name of components.css as well. Never `--atom-…` or `--mn-size-…` (mineralica/tests/test_scale.py). Held by magazine/tests/test_shows_sheet.py (its table SIZES says what stands here) through magazine/tests/sheet_rules.py, and with the other sheets by test_package_sheets.py. */ /* ---------- The scale ---------- */ /* The sizes of this package's blocks, named in ONE place. Built is "Stufe C" — about three quarters of what the frames draw; every line says what the frame draws. */ :root { /* The calendar leaf (Figma set 5375:2109): the same at every width — in a card it stands beside a text column that has 196 px left on a phone of 360. */ --mag-date: 96px; /* how wide the leaf is — drawn 120 (decision G-2) */ --mag-date-days-size: 22px; --mag-date-days-line: 28px; /* its days, in the serif — drawn 28/36 */ /* The card of a show. */ --mag-show-pad: 12px; /* inside the card — drawn 16, 20 at the right */ --mag-show-gap: 12px; /* leaf · words — drawn 16 */ --mag-show-gap-wide: 16px; /* … of a card alone in its row — drawn 24 */ /* The large row (Figma 5418:6273). */ --mag-highlight-pad: 12px; /* inside the row — drawn 24, 28 at the right */ --mag-highlight-gap: 12px; /* leaf · words · link — drawn 28 */ --mag-highlight-date: 96px; /* its leaf — drawn 148 */ --mag-highlight-days-size: 22px; --mag-highlight-days-line: 28px; /* the leaf's days — drawn 34/42 */ /* Icons that stand beside a line of 16: in a tab (the facts of a head, the lines of a contact and what is on site read the same name). */ --mag-shows-glyph: 16px; /* — drawn 18 */ /* The two tabs of a page with a calendar. */ --mag-tabs-top: 16px; /* above the tabs — drawn 32 */ --mag-tabs-gap: 20px; /* between the two — drawn 40 */ /* The blocks of a page in blocks. */ --mag-block-apart: 24px; /* between two blocks — drawn 48 */ /* The calendar: a month that is folded. */ --mag-months-row: 44px; /* the least height of its row, all of it the trigger — not drawn */ /* The tiles of a show's page and the box of a show week. */ --mag-box-pad: 16px; /* inside a tile — drawn 24 */ --mag-box-gap: 12px; /* between two groups of a tile, the line in the middle — drawn 20 */ /* The head of an overview (the magazine's page head, components.css, with wider words). */ --mag-shows-head-text: 680px; /* how wide its words run — drawn 680 (the page stays 1120) */ --mag-facts-apart: 12px; /* between two facts under its title — drawn 24 */ --mag-guide: 120px; /* the printed guide's cover, by its height — drawn 218 */ --mag-guide-thumb: 48px; /* … in the narrow row — drawn 72 */ /* The entry page: its two cards. */ --mag-region-pad: 16px; /* inside a card — drawn 32, 28 below */ --mag-region-gap: 12px; /* between its groups; button · link — drawn 24 */ --mag-region-apart: 20px; /* the cards · "Other countries" — drawn 40 */ /* The pages: distances between their parts. */ --mag-shows-top: 20px; /* the tabs · what follows them — drawn 40 */ --mag-shows-else: 16px; /* above the ways on, beyond a head's distance — drawn 32 */ --mag-past-top: 20px; /* above "Past shows" — drawn 40 */ --mag-week-cols: 24px; /* a show week: introduction · box — drawn 94 */ /* A show's own page (Figma 5474:9443). */ --mag-show-cols: 24px; /* words · tiles, from 1024; below that the room above the tiles — drawn 64 */ --mag-show-aside-top: 32px; /* how far under the head's upper edge the tiles begin, from 1024 only — drawn 45 */ --mag-show-part: 24px; /* between two parts of the text — drawn 48 */ --mag-onsite-apart: 16px; /* between two facts of "On site" — drawn 32 */ --mag-dates-pad: 12px; /* a run's row, at its sides — drawn 24 */ --mag-dates-pad-open: 12px; /* … above and below an open one — drawn 20 */ --mag-map: 360px; /* the map's height, at every width (the script sets it on the frame) — drawn 480 */ } @media (min-width: 1024px) { :root { --mag-highlight-pad: 20px; --mag-highlight-gap: 20px; --mag-highlight-date: 112px; --mag-highlight-days-size: 26px; --mag-highlight-days-line: 32px; --mag-tabs-top: 24px; --mag-tabs-gap: 28px; --mag-block-apart: 36px; --mag-box-pad: 20px; --mag-box-gap: 16px; --mag-facts-apart: 16px; --mag-guide: 164px; --mag-guide-thumb: 56px; --mag-region-pad: 24px; --mag-region-gap: 16px; --mag-region-apart: 28px; --mag-shows-top: 28px; --mag-shows-else: 24px; --mag-past-top: 28px; --mag-week-cols: 64px; --mag-show-cols: 48px; --mag-show-part: 36px; --mag-onsite-apart: 24px; --mag-dates-pad: 16px; --mag-dates-pad-open: 14px; } } /* ---------- Marks ---------- */ /* The marks of the show pages: the platform's tag pill (24 high, 12/16, capitals — its geometry is the atoms') in four more colours. "Past" before the place of a show without a date ahead; "Canceled" in the meta row of a run that is called off; "Next" at the first run ahead on a show's page; and the marks of a day ("Trade visitors only"). No new colour name: the three tones the frames draw beside the scales fall on named ones — the error tint with its strong tone (text on a tint is `-strong`, the preset's rule), the warning tint with its. Rules of their own, not names in the list of `.pill-free` in components.css: a test holds that list as it is. */ .pill-past { background: var(--mn-gray-200); color: var(--mn-gray-700); } .pill-canceled { background: var(--mn-error-surface); color: var(--mn-error-strong); } .pill-next { background: var(--mn-green-100); color: var(--mn-green-700); } .pill-trade { background: var(--mn-warning-surface); color: var(--mn-warning-strong); } /* ---------- Small heading ---------- */ /* The small line over a group — "MAJOR SHOWS", "BY COUNTRY", "OTHER COUNTRIES", the groups of a tile: 12/18 (the class of the text scale in the markup), semibold, in spaced capitals by CSS — the markup keeps the words as they are written. It IS a heading of the outline (an

to

by its place) and has no step and no serif, like the mark of a year. 8 down to what it names. */ .mag-eyebrow { margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--mn-gray-700); } /* ---------- Calendar leaf ---------- */ /* A run as the leaf of a calendar (directory/_show_card.html, `date_leaf`): the month in spaced capitals, the days in the serif, a third line — the weekdays, "18 days", "last held". A