/* Magazine-only rules, layered on top of the shared Tailwind + DaisyUI build (§29). * * ⚠️ Everything this file used to carry — its own colour variables, its own body font, the nav, the * container — is GONE (2026-08-14). It defined a second design next to the marketplace's: a warm * orange accent against the platform's green, system-ui against Inter/Baskervville. On one origin * with one login that read as two websites. Colours, fonts, spacing and components now come from * the shared preset (tailwind.base.js); base.html uses DaisyUI classes directly. * * What is left are page-level shells that have no design yet. They use the platform's token values * so they look like they belong, and they will be replaced — not restyled — when PF3b brings the * real page design. Keep this file small: a rule that would suit the marketplace too belongs in the * shared layer, not here. */ /* Alpine only evaluates x-show after it boots; without this the billing block flashes open. */ [x-cloak] { display: none !important; } /* --- article: jumping to a heading (ARTICLE_OUTLINE_PLAN O5) ------------------------------ */ /* A heading reached through the table of contents (or a shared #anchor) gets some air above it instead of sticking to the top edge of the window. Only headings that CARRY an anchor. */ article :is(h2, h3, h4)[id] { scroll-margin-top: 1.5rem; } /* The jump glides — unless the reader has asked the system for less motion. */ @media (prefers-reduced-motion: no-preference) { html:has(#toc) { scroll-behavior: smooth; } } /* (The legal texts had a placeholder here, `.legal-text`. Since the design package S7 they stand on the template of the text pages — text_page.html, `mag-prose` in components.css.) */ /* --- auth pages (placeholder) ------------------------------------------------------------ */ .auth { max-width: 24rem; } .auth label { display: block; margin: .75rem 0; font-size: .875rem; } .auth input { display: block; width: 100%; padding: .45rem .55rem; margin-top: .2rem; border: 1px solid #DCDAD6; border-radius: .625rem; font: inherit; } .auth button { margin-top: .5rem; padding: .45rem .9rem; border: 1px solid #37605D; background: #37605D; color: #FBFCFC; border-radius: .625rem; font: inherit; cursor: pointer; } .auth button:hover { background: #2D4F4D; border-color: #2D4F4D; } /* green 700 */ /* --- directory (placeholder until PF3b) -------------------------------------------------- */ .directory-list { list-style: none; padding: 0; } .directory-list li { padding: .5rem 0; border-bottom: 1px solid #ECEAE6; } /* gray 200 */ /* A show without a date ahead: still listed, below the upcoming ones, "slightly greyed" (SHOW_HUBS_PLAN N5). */ .directory-list li.is-past { opacity: .6; } .meta { color: #7A7A7A; font-size: .875rem; } /* --- account: the shell (rail, tiles) is platform CSS in tailwind.css (ACCOUNT_PLATFORM_PLAN.md A4); only the form bits below stay magazine-side until R6c/PF3b restyle them. --------------------- */ .account-ok { padding: .5rem .7rem; border: 1px solid #C7DDDA; background: #E6F0EE; border-radius: .625rem; color: #2D4F4D; } /* A checkbox reads as a row, not as the stacked label/field the other .auth inputs use. */ .account-check { display: flex; gap: .45rem; align-items: center; margin: 1rem 0; } .account-check input { width: auto; } /* The flipbook (VIEWER_PLAN §8, P4). ⚠️ `position: relative` on the book is load-bearing: the engine inserts its wrapper as `position: absolute`, and without a positioned ancestor that resolves against the initial containing block — the book lays itself out at viewport size, outside this element, and the reader sees a grey rectangle. Cost me a screenshot to find; it is why this is a class with a comment and not an inline style. */ /* In its design since the package issues and search (docs/design-kickoff/S3_BAUVORLAGE.md §2.3, decisions S3-2, S3-3): the book stands on a dark field with rounded corners, as wide as its place; the engine's bar has the field's tone (viewer.js hands the engine the same named colours); below it, on a phone, which page lies open and the way to the full screen. ⚠️ In the rules of the field, the book, the hint and the row below, a colour is a name (`var(--mn-…)`, `color-mix` for a see-through one) and a type size a name of the magazine's scale (`var(--mag-…)`, defined in components.css) — magazine/tests/test_viewer.py reads them. The search panel and the marker of a hit further down keep their own values: they sit INSIDE the engine's skin and follow it. */ /* ⚠️ The frame, not the section, is the hint's coordinate system until the script has moved the hint into the engine's wrapper: the section also holds the search panel, and a hint positioned against it drifts down over the hit list. `overflow: hidden` rounds the engine's corners with the frame's; on the full screen the book is the screen's own layer and nothing here cuts it. */ .viewer-frame { position: relative; overflow: hidden; border-radius: var(--rounded-box); background: var(--mn-gray-900); } /* The viewer breaks OUT of the prose column it sits in (user, 2026-09-12: "sehr klein"). A column set for reading is ~65ch — around 650px — and a spread squeezed into that is a postcard. The classic centring trick widens it to the site's content width without moving the section in the markup, so the article keeps reading as one column around it. ⚠️ "The site's content width" is the shell's grid (shell.css, `.shell-page`): 1120, or the window less the shell's side padding on both sides. With a fixed 2rem — the page's margin before DP2b — the viewer stood up to 32 outside the page's content on each side between 768 and 1215, left of both logos. The fallback is that old margin, for a layout that would load this sheet alone. */ .viewer { width: min(1120px, 100vw - 2 * var(--shell-pad, 1rem)); margin-left: 50%; transform: translateX(-50%); } /* A page that gives the viewer a place of the grid's width says so (`viewer_fill` at the include, _viewer.html): the viewer then fills that place and breaks out of nothing. After the rule above, which it outweighs by coming later. */ .viewer--fill { width: auto; margin-left: 0; transform: none; } .viewer-book { position: relative; width: 100%; /* A spread is about 1.41 wide for its height, so at 1120px it wants ~790px. Height is what limits the book on a laptop, which is why this is not simply 80vh. ⚠️ Only a placeholder until the book comes into the window: the engine then sets a height of its own from the WIDTH, inline (a spread at 1120 is about 792 high, a single page at 343 about 485). Whoever wants another height changes the width. */ height: min(85vh, 820px); /* `#flipbook` is what "Read the issue" and a hit of the search jump to (S3-N1): the book stands at the top of the window, with a little air above it. */ scroll-margin-top: var(--mag-gap); } /* The paywall hint — one line above the engine's toolbar while a gated page is on screen. `bottom` is a starting value only: viewer.js measures the toolbar and corrects it, because the engine's small view has no bar at all (the line then sits at the field's lower edge) and the full screen has it again. Half-transparent on purpose, in the field's own tone: it should read as a note on the page, not as a dialog in front of it. ⚠️ viewer.js moves the line into the engine's wrapper (so that it is on the full screen too, S3-3): there it lies over the book and has to lie over the bar as well, which the engine puts on layer 2. ⚠️ Plain CSS, not Tailwind classes: this is toggled by script and the Tailwind CLI only emits classes it finds in a template it scans. */ .viewer-hint { position: absolute; left: 0; right: 0; bottom: 52px; z-index: 3; margin: 0; padding: 0.5rem 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; justify-content: center; background: color-mix(in srgb, var(--mn-gray-900) 70%, transparent); color: var(--mn-white); font-size: var(--mag-meta-size); line-height: var(--mag-meta-line); text-align: center; backdrop-filter: blur(2px); pointer-events: auto; } /* ⚠️ `[hidden]` only carries `display: none` at the lowest specificity, and the `display: flex` above beats it — the bar stayed on screen while the script believed it had hidden it. Caught by a screenshot disagreeing with the DOM state, which is the only way this kind of bug shows up. */ .viewer-hint[hidden] { display: none; } /* (The same trap caught the withdrawal link of the map gate in the footer, 2026-10-05: its rule stands with the foot now, in the platform's shell.css, and a test of the shell holds it.) */ /* The link is one line of 18: it reaches 9 further above and below for a finger (36) — a padding, taken back by a margin, so that the line stays as high as it is. */ .viewer-hint a { padding: 9px 0; margin: -9px 0; color: var(--mn-white); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; white-space: nowrap; } /* Below the field, while the engine runs without its bar (a phone, S3-3): which page lies open, in the middle, and under it the button to the full screen, as wide as the field. viewer.js shows the row from the ENGINE's state — no width is asked here, the engine decides by its own measure — and without JavaScript it stays hidden. The button is the platform's atom (44 high). */ .viewer-below { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .viewer-below[hidden] { display: none; } .viewer-count { margin: 0; text-align: center; color: var(--mn-gray-700); font-variant-numeric: tabular-nums; } /* The search panel (VIEWER_PLAN §8c ②, P4b). Its frame, colours and border come from the engine's own `flipbook-side-menu skin-color-bg skin-color flipbook-border` — what is styled here is only the part the engine has no equivalent for: the query box and the hit list. ⚠️ No rule here gives the count, an article's line or a hit a colour: they INHERIT the skin's from the panel (viewer.js hangs `skin-color` on it), so they follow the skin when it changes. A colour written here stayed behind once already — dark type on the panel that S3-2 made dark. A