/* ═══════════════════════════════════════════════════════════ App-level bridge styles. The visual language comes entirely from the Capplon Design System (wwwroot/design-system/*). This file only holds the few app-specific bits the design system doesn't cover: page padding and the Blazor error boundary. Component styling (buttons, cards, tables, forms, alerts, modals, nav…) lives in the design system — use the .tn-* classes rather than adding overrides here. ═══════════════════════════════════════════════════════════ */ /* THE PORTAL AND ADMIN PAGE MEASURE. Both layouts wrap @Body in .content and nothing else uses the class, so this is the one place a page width can be set for either shell. Until now there was none, and that is what "some pages are full width and others are not" actually was. No portal page sets its own width either, so the disagreement came from the CONTENT: AccountSettings, CompanySettings and Subscription lay out at col-lg-8 (two thirds of whatever the viewport happens to be), while Dashboard, MyProducts, TeamManagement, ActivityLog and ProductHub run edge to edge. With no cap above them, on a 2560px monitor that is a 1700px page next to a 2560px one — two different pages of the same product. 1120px is NOT a new number. It is the design system's existing measure for wide page content (.tn-split--full .tn-split-inner, split.css), which is what the funnel already renders at. Adopting it here makes the portal agree with the funnel rather than adding a third opinion — the value to change if this ever moves is that one, not this one. Gutters stay on the element (px-3 px-md-4 in both layouts) rather than being added here, so this does not double up on the padding that is already applied. */ .content { padding-top: 1.1rem; max-width: 1120px; margin-inline: auto; } h1:focus { outline: none; } /* ═══════════════════════════════════════════════════════════ Auth pages — NOTHING LIVES HERE ANY MORE, and that is the change. This block used to carry eleven rules — .auth-shell, .auth-card-wrap, .auth-brand, .auth-brand-mark, .auth-card-head/-title/-sub, .auth-row, .auth-link — under the note "app-specific page layout, so it lives here rather than in the shared component system". Every one of them had a .tn-auth-* counterpart in design-system components/auth.css, several declaration-for-declaration identical. They were not app-specific; they were a second copy, and a second copy is what silently stops matching when the system moves. The pages now use the system's own classes, and the shell is the split variant (form left, brand panel right) in Components/Layout/AuthLayout.razor. If an auth page needs something the system lacks, add it upstream in capplon/design-system and re-vendor — do not start this block again. ═══════════════════════════════════════════════════════════ */ /* The funnel split-frame bridge that lived here is GONE — it is upstream now. split.css:181 carries .tn-split--full .tn-split-inner { max-width:1120px; margin:0 auto; padding:0 var(--tn-page-pad-x) } verbatim as of 1187a69, so a local copy would be a second definition of the same rule that nothing keeps in step. Confirmed by design-system, and removed in the same sweep that re-vendored split.css — deleting it earlier would have dropped the cap entirely (#304). */ /* =========================================================== LIGHT SIDE NAV - GONE FROM HERE, and that is the point. This block used to hold five token re-points plus three restated rules, compensating for the fact that nav.css was written for a dark ground: --tn-text-on-dark / --tn-text-on-dark-bright, and three hardcoded values a token could not reach - rgba(255,255,255,0.28) on the section label, rgba(255,255,255,0.35) on the user email, and color:#fff on .is-active. It carried a note calling itself a liability, because it was: local CSS fighting a component it does not own, the same shape of thing that once put 77 Bootstrap !important utilities on top of this design system (#487). The design system owns it now. `.tn-sidebar--light` (nav.css, PR #97 / 2f0cb4c) carries scoped colours for the .tn-nav-item row set itself, so the portal sets one modifier and this file says nothing about the nav at all. The modifier is in Components/Layout/PortalNavMenu.razor. MEASURED AFTER THE SWAP, not assumed, against the real token values. The ground moved from --tn-bg-page (#F5F5F3) to --tn-bg-card (#FFFFFF), so every number changed - and all four improved: nav item text #1A1A1A on #FFFFFF 17.40:1 (was 8.27) hover #1A1A1A on #FAFAF8 16.65:1 (was 15.94) active label #2017DF on #EEF0FE 8.24:1 (was 7.11) section / email #454951 on #FFFFFF 9.03:1 (was 4.68) Two things this move DID need locally, and they are in their own components rather than here: the mobile hamburger was drawn in white-on-white alphas (PortalNavMenu.razor.css) and the column behind the sidebar still painted the dark chrome token (PortalLayout.razor.css). If the portal nav ever needs a colour it does not have, add it upstream in nav.css. Do not start this block again. =========================================================== */ /* ═══════════════════════════════════════════════════════════ BOTTOM NAV — do not let a long label widen the bar. .tn-bottom-nav-item is `flex: 1`, which distributes space equally but does NOT let an item shrink below its content: a flex item's default `min-width: auto` is its intrinsic width. So five Swedish labels ("Oversikt", "Produkter", "Aktivitet") can sum to more than a 360px viewport, the bar grows past the screen, and the whole document becomes horizontally scrollable — a fixed bar cannot overflow its own container, but its CONTENT can push it wide. min-width: 0 restores the ability to shrink; the label then ellipsises instead of forcing width. Belongs upstream with the light-sidebar request; local until then. ═══════════════════════════════════════════════════════════ */ .tn-bottom-nav-item { min-width: 0; } .tn-bottom-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* =========================================================== FUNNEL STEP 3 ON A PHONE: the order comes before the credentials. .tn-config-layout is `minmax(0,1fr) 360px` and collapses to one column at 960px, which puts the cart AFTER the form. On the configure step that is right - you are editing the thing the cart is totalling. On "Skapa konto" it inverts the one ordering #475 was filed to establish: customers going through the live funnel objected to handing over an email and a password before they had seen what they were buying, and below 960px that is exactly what they get. `order` on the two children, inside the same 960px query the grid collapses at, so the cart is first when stacked and unchanged when side by side. YES, THIS IS A LOCAL RULE ON A DESIGN-SYSTEM COMPONENT, which is the habit that put 77 Bootstrap !important utilities on top of this system (#487) and the reason the light-sidebar override above was worth deleting. Two things make it different, and if either stops being true it should go upstream: 1. It sets `order` only. It repaints nothing, overrides no colour, and cannot drift from what the component paints. 2. It is page-specific, not component-specific. Step 2 wants the opposite stacking, so this is not a missing variant of .tn-config-layout - it is one page's answer to which of two blocks matters more on a small screen. Scoped to .funnel-account-step so it cannot reach the configure step. If a third page ever needs it, that is the signal it belongs in the design system as a modifier rather than here. =========================================================== */ @media (max-width: 960px) { .tn-config-layout.funnel-account-step > .tn-cart { order: -1; } } /* ── Blazor error boundary (functional, not themed by the system) ── */ .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--tn-danger); padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: var(--tn-radius); } .blazor-error-boundary::after { content: "An error has occurred." }