/* no-manual-width.css FULL BLEED FOR THE SIX MANUAL PAGES. Branch MANUALS-WIDTH, 2026-09-04. THE ASK. Bon: "the user manual pages on our live site arent full width, weird white bars on the side need to go away." THE CAUSE, MEASURED, NOT GUESSED. Every manual page body sits inside the theme's page template container: div.page-width.page-width--narrow.section-...__main-padding > div.rte > div.nom (the manual) The theme caps that container at `.page-width--narrow{max-width:72.6rem}`, which is 726px at this theme's 10px root. That cap is ALREADY defeated with `.page-width--narrow:has(.nom){max-width:none}`, so the cap is not the bug and has not been the bug for some time. What that same rule also does is REPLACE the theme's padding with its own: .page-width--narrow:has(.nom){max-width:none;padding-left:2rem;padding-right:2rem} @media (min-width:990px){ ... padding-left:4rem;padding-right:4rem } 2rem and 4rem at a 10px root are 20px and 40px. That surviving padding is the white bar. THAT RULE IS LIVE IN THREE FILES, NOT ONE, AND THIS MATTERS. Verified by fetching each file and grepping it: no-manual-v2.css on the worker (loaded by the three A6 pages) no-manual-v2.css on Shopify CDN (loaded by the three flipbook pages) no-polish-2026.css theme asset (loaded by EVERY page, from ) The theme asset is the one that decides the outcome, because it is a third independent owner of the same declaration and it is not a file this branch would otherwise have looked at. Any fix that only edits a manual stylesheet is competing with a rule of identical specificity in a file it did not change, so the fix below wins on `!important` rather than on source order. Source order is not a safe thing to bet on here: two of these three files are outside this branch's control and one of them is theme owned, so a theme update can move it. Measured on the live pages before this file existed: viewport .nom left .nom width gutter each side 390 20 350 20 768 20 728 20 1024 40 944 40 1440 40 1360 40 1920 40 1840 40 3440 40 3360 40 The A6 pages paint their grey ground (#8F8F8F) on `.nom` itself, so those 40px are literally white page showing beside a grey pamphlet: exactly the "weird white bars" in the report. The three flipbook pages are white on white, so the same gutter is invisible there but is still costing them width. WHAT THIS FILE DOES. It takes the padding off the container and puts the equivalent breathing room back INSIDE the manual, where the manual's own background is already painted. The ground then runs edge to edge and the content column stays exactly where it was designed to sit: nothing about the 680px leaf, the 1000px A6 shell or the 1760px scroll wrap is changed. WHY A SEPARATE FILE AND NOT AN EDIT TO no-manual-v2.css. Standing rule: a branch works in new files by default, and v2 is shared by six live pages plus three PDF print masters. A new stylesheet is also removable in one line, which a scattered edit never is. It loads AFTER v2 and after no-manual-a6.css, so every rule below except the container rule wins on plain source order. The container rule is the one exception and it carries `!important`, for the three file reason set out above. THE ONE TRAP THIS FILE HAD TO SOLVE. no-manual-v2.css bleeds the cover band of the three scroll and flipbook pages with .nom .cover{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} That negative margin is measured off the CONTAINER's content box, which today is inset by the theme's 40px. Removing the padding without touching it would make the cover overhang the viewport by 40px each side and put a horizontal scrollbar on three live pages. The reset below neutralises it, because once the container is edge to edge the cover is already full bleed with no negative margin at all. The A6 pages already reset this on `.leaf.cover` in no-manual-a6.css and are unaffected either way. NO EM DASHES OR EN DASHES ANYWHERE IN THIS FILE. */ /* ------------------------------------------------------- 1. the container Kill the last of the horizontal inset on manual pages only. The `:has(.nom)` scope means no other page on the storefront can see this rule, and it matches the selector the other three files already use so all four read as one decision. Vertical padding from the section's own `...__main-padding` class is left alone: that is spacing above and below, not a side gutter. `!important` IS DELIBERATE AND IS THE POINT. Three files already set this exact declaration at this exact specificity, one of them theme owned. Without `!important` the winner is whichever of the four loads last, which is a fact about Shopify's asset ordering rather than a decision anybody made, and it changes under a theme update. This is the narrowest possible use of it: one property pair, on one selector that cannot match a non manual page. */ .page-width--narrow:has(.nom){ max-width:none!important; padding-left:0!important; padding-right:0!important; } @media screen and (min-width:990px){ .page-width--narrow:has(.nom){ padding-left:0!important; padding-right:0!important; } } /* The rte wrapper the page body is dropped into carries no inset of its own today, but it is theme owned and one theme update away from gaining one. Pinning it costs nothing and removes a future silent regression. */ .page-width--narrow:has(.nom) > .rte{ max-width:none; margin-left:0; margin-right:0; } /* THE PAGE TITLE IS A SIBLING OF .rte, NOT A CHILD OF THE MANUAL, AND IT WAS RELYING ON THE PADDING THIS FILE JUST REMOVED. CAUGHT BY EYE, NOT BY THE WALKER, AND THAT IS THE POINT. The container holds two children: h1.main-page-title the theme's page heading, "NGAL User Manual" div.rte > div.nom the manual itself Every measurement in this branch was aimed at `.nom`, so every one of them was green while the h1 beside it ran hard into both edges of the screen and clipped its own text at 390. The before and after screenshots show it plainly: the title wrapped to two comfortable lines before, and after the first cut it was a single line running off both sides. So the inset the title lost is handed straight back to the title. It is given to the h1 rather than to the container, because the container has to stay at zero for the manual's ground to reach the edge, which is the entire ask. */ .page-width--narrow:has(.nom) > .main-page-title{ padding-left:20px; padding-right:20px; } @media screen and (min-width:990px){ .page-width--narrow:has(.nom) > .main-page-title{ padding-left:40px; padding-right:40px; } } /* --------------------------------------------------- 2. undo the cover bleed See the trap note in the header. `.cover` no longer needs to escape a container that no longer insets it. Written with the same two properties v2 sets so the override is exact, and scoped under `.nom` so it cannot reach a `.cover` belonging to any other part of the theme. */ .nom .cover{ margin-left:0; margin-right:0; } /* --------------------------------------- 3. put the breathing room back inside THE SCROLL AND FLIPBOOK PAGES (PREDATOR, NGAL, PVS-14 HEAT bridge). `.nom .wrap` already centres at max-width 1760px with 24px of padding. With the container inset gone it can now actually reach 1760px on a 1760px screen instead of 1840px minus 80px, and its own padding is what keeps text off the glass. Raise that padding to match what the theme was contributing so nothing moves closer to the edge than it does today. The cover band's inner rail `.cover-in` gets the same treatment so the cover text stays aligned with the body text below it, which is the whole point of both being capped at 1760. */ .nom .wrap, .nom .cover-in{ padding-left:20px; padding-right:20px; } @media screen and (min-width:990px){ .nom .wrap, .nom .cover-in{ padding-left:40px; padding-right:40px; } } /* THE A6 PAMPHLET PAGES (PVS-14, PVS-14 PRO, PVS-31 PRO). `.nom.a6 .wrap` is deliberately zeroed by no-manual-a6.css because on those pages the shell, not the wrap, does the centring. So the room goes on the shell instead. Above 1180px the shell is a 1000px centred grid and already has far more than 40px of grey on each side, so it needs nothing there; below 1180px the shell is a plain block and the leaf would otherwise sit hard against the viewport edge. Note `box-sizing:border-box` is already set by v2 on every `.nom` descendant, so this padding comes out of the shell's width and cannot widen the page. */ .nom.a6 .wrap, .nom.a6 .cover-in{ padding-left:0; padding-right:0; } .nom.a6 .a6shell{ padding-left:20px; padding-right:20px; } @media screen and (min-width:990px){ .nom.a6 .a6shell{ padding-left:40px; padding-right:40px; } } /* Above 1180px no-manual-a6.css turns the shell into a centred `grid-template-columns:200px minmax(0,1fr)` capped at 1000px with its own `padding:24px 0 60px`. That shorthand would be re-broken by the side padding above, so restore the intended zero there and let the grey ground do the spacing, which is what the A6 design already asks for. */ @media screen and (min-width:1180px){ .nom.a6 .a6shell{ padding-left:0; padding-right:0; } } /* The a6 cover leaf keeps the reset no-manual-a6.css gives it. Restated here only because section 2 above touches `.nom .cover` and this file must not leave the a6 cover leaf depending on source order between two of our own files. `.leaf.cover` is two classes, so it wins on specificity either way. */ .nom.a6 .leaf.cover{ margin-left:auto; margin-right:auto; } /* ---------------------------------------------------- 4. the phone, explicitly Below 700px no-manual-a6.css drops the grey ground, the leaf shadow and the A6 ratio and runs the leaves edge to edge with a hairline between them. That is the design and it is what Bon asked for on mobile. With the container inset gone the leaves now genuinely reach both edges, so the leaf's own 20px inner padding becomes the only thing holding the text off the glass and 20px is too tight at 390. The shell padding above already supplies it, so this block only has to make sure the leaf does not add a second inset on top. */ @media screen and (max-width:700px){ .nom.a6 .a6shell{ padding-left:0; padding-right:0; } .nom.a6 .leaf{ padding-left:20px; padding-right:20px; } } /* ------------------------------------------------------------------- 5. print None of the above may reach the printed sheet. v2 and a6 both set the page box and the margins for print, and a browser print of a manual is a supported route (the A6 pages are built to give one Letter sheet per leaf). THE SIDE PADDING THIS FILE ADDS IS IN PIXELS AND IS FOR A SCREEN. On paper the margin is v2's, in millimetres, and it must be handed straight back: @media print{ .nom .wrap{max-width:none;padding:0 16mm} } @media print{ .nom .cover-in{padding:15mm 16mm 12mm;max-width:none} } Because this file loads after v2, its unqualified rules would otherwise beat v2's print rules on source order alone. So the two values are RESTATED here rather than zeroed. Zeroing them would print the manual with no side margin at all, which is the opposite of leaving the print masters untouched. */ @media print{ .page-width--narrow:has(.nom){padding-left:0;padding-right:0} /* v2's print margins, restated so source order cannot lose them. */ .nom .wrap{padding-left:16mm;padding-right:16mm} .nom .cover-in{padding-left:16mm;padding-right:16mm} /* The A6 pages print a leaf per sheet with the page box supplying the margin, so the shell and the leaf carry none. The a6 cover leaf's own inner padding is set by `.nom.a6 .leaf.cover .cover-in`, three classes, and is left alone on purpose: it beats the two class rule above and is the pamphlet's cover inset, not a screen gutter. */ .nom.a6 .wrap{padding-left:0;padding-right:0} .nom.a6 .a6shell,.nom.a6 .leaf{padding-left:0;padding-right:0} }