` ABOVE it. One declaration, two readers, so the page and the renderer cannot disagree about them. */ --site-toc-width: 21.6rem; /* → --lw-b-toc-width: the ToC's own column (the package default 18rem, +20 %) */ --site-measure: 72ch; /* → --lw-b-measure: the reading column */ /* …and the column the renderer will ACTUALLY lay out, which is the reader's line width when they have set one: the same U → B chain `cascade.css` resolves, with the package default left out because the brand above always supplies it. Centring the brand's width while the renderer lays out the reader's puts the column off centre by half the difference. */ --site-column: var(--lw-u-measure, var(--site-measure)); /* The space between those two tracks is the ToC's `margin-inline-end` (document.css § Layout): `--lw-margin-width + --lw-highlight-pad-inline + 6 × --lw-space`, which is 1.5 + 0.6 + 1.5rem at the package defaults act-web does not override. Kept as one number rather than three: if a future renderer retunes them the column shifts by a fraction of a rem, which is invisible, and nothing else moves. */ --site-toc-gap: 3.6rem; --site-toc-track: calc(var(--site-toc-width) + var(--site-toc-gap)); /* The act's card padding (§ The act's card). At least 2.1rem: the renderer draws the `:target` arrow `--lw-margin-width + --lw-highlight-pad-inline` (1.5 + 0.6rem) BEFORE its text column, and that has to land on the card, not beside it. */ --site-act-pad: clamp(2.25rem, 4vw, 3rem); /* ── The page: veritium.net's landing/legal palette ───────────────── Dark is that site's, unchanged. Light is the act's light palette (the `--vt-*` block below) spent on the page, so the two sides of the theme are one set of colours and the act cannot look like a visitor from another design. */ /* ── Warmth: the reader's, spent on the PAGE ────────────────────── The renderer's settings menu writes `--lw-u-tint-amount` onto before first paint, exactly as it writes `--lw-u-color-scheme`, and this file reads it in exactly the same way and for the same reason: the renderer resolves that property on `.lw-root`, so a value read only there warms the act and nothing around it — a warm sheet laid on a cold page, which is the very thing the colour-scheme note above refuses to do. So warmth is applied HERE, to the page's own background, and the act is left transparent over it (`--lw-b-bg` below). One mix, on the surface everything else is painted on, so the bar's underside, the margin beside the ToC and the act's own column warm together. 0% when the reader has set nothing, which `color-mix` resolves to the plain palette colour — so an untouched page is byte-identical to what it was before the slider existed. */ --site-tint: var(--vt-tint); --site-tint-amount: var(--lw-u-tint-amount, 0%); /* THE PAGE, one colour, both themes: paper in the light, the brand's deep navy in the dark. Flat — no gradient, no glows. veritium.net's landing pages fade that navy from `--vt-navy-1` to #191f2e down a 195° axis and lay three soft blue glows over it, and this site used to paint the same fixed layer behind the act (the chrome's SiteBackground, since dropped from layout.tsx). That background is built for a page you scroll past once. An act is thousands of lines the reader scrolls for an hour, laid straight on the page with no card in between — so a ground that changes colour as you descend it, with blue light pooling in three places on the way, is a moving surface under a body of text that is not moving. A reading page holds still. */ --site-bg: color-mix( in oklab, light-dark(#f7f8fa, var(--vt-navy-1)), var(--site-tint) var(--site-tint-amount) ); /* The same colour on , opaque, in both themes: nothing is painted between the canvas and the body any more, so the body has nothing to cover and nothing to let through. */ --site-body-bg: var(--site-bg); --site-card: light-dark(#ffffff, rgb(28 34 55 / 0.7)); /* .legal-document-page__content */ --site-card-border: light-dark(#e4e7ec, transparent); --site-card-solid: light-dark(#ffffff, #1c2237); --site-raised: light-dark(#e4e7ec, #27304c); --site-text: light-dark(#1e2332, #e6e7ea); /* headings */ --site-text-soft: light-dark(#41485c, #cdcfd5); /* a lead paragraph */ --site-text-body: light-dark(#4b5264, #a8aab3); /* running text on a card */ --site-text-muted: light-dark(#5a6073, #9da1ad); /* metadata */ --site-text-faint: light-dark(#6f7686, #6c7180); --site-rule: light-dark(#e4e7ec, rgb(255 255 255 / 0.1)); /* Gold AS TEXT, so it clears 4.5:1 on the page it is on — the same step down the act's `--vt-accent-text` takes, and for the same reason. */ --site-accent: light-dark(#8a6544, #c9ad84); /* Gold as a FILL, under `#10131f` text: the brand's gradient, theme-free, because the two things it paints — the script switch in the dark navbar and the notice pages' primary button — look the same in both themes. */ --site-accent-hi: #e5c8a6; --site-accent-lo: #a57a57; --site-gradient: linear-gradient(180deg, var(--site-accent-hi) 0%, var(--site-accent-lo) 100%); --site-radius: 8px; /* buttons */ --site-radius-card: 6px; /* .legal-document-page__content */ /* ── The act: theme pairs for the brand layer only ─────────────────── */ --vt-navy-1: #141927; /* the dark page itself: --site-bg's dark half */ --vt-navy-3: #1c2237; --vt-navy-4: #27304c; --vt-gold-hi: #e5c8a6; --vt-gold-mid: #c9ad84; --vt-gold-lo: #a57a57; --vt-gold-deep: #8a6544; --vt-gold-ink: #10131f; /* text on a gold fill */ /* Surfaces. NONE, in either theme — the act is painted straight onto the page, so its background IS the page's and there is no card edge anywhere for the eye to catch. veritium.net puts a short legal notice on a translucent navy card inset by a 120px gutter (.legal-document-page__content); a statute is not that page — it runs the full width and thousands of lines down, so the same card became a slab lying over the page, lighter than it, with a hard vertical edge running the whole length of the act. A statute wants the page itself under it. Light: none either — `--site-bg` above turns the whole page paper, so there is nothing left for the act to lay a sheet on. `--vt-surface` is that page surface OPAQUE, for the hover band and anything else that has to occlude what is behind it. */ --vt-bg: transparent; --vt-surface: light-dark(#f7f8fa, var(--vt-navy-3)); --vt-bg-elevated: light-dark(#ffffff, var(--vt-navy-4)); --vt-rule: light-dark(#e4e7ec, rgb(229 200 166 / 0.14)); /* Text. All ≥ 4.5:1 on --vt-bg. */ --vt-text: light-dark(#1e2332, #eee4df); --vt-text-muted: light-dark(#5a6073, #9da1ad); --vt-text-faint: light-dark(#6f7686, #8f95a1); /* Gold, in two strengths: as a fill (decorative) and as text (readable). */ --vt-accent: light-dark(var(--vt-gold-lo), var(--vt-gold-hi)); --vt-accent-text: light-dark(var(--vt-gold-deep), var(--vt-gold-mid)); --vt-accent-contrast: light-dark(#ffffff, var(--vt-gold-ink)); --vt-link: var(--vt-accent-text); --vt-link-visited: light-dark(#96613a, #cb9a72); /* bronze */ --vt-focus: var(--vt-accent); --vt-tint-strong: light-dark(rgb(165 122 87 / 0.14), rgb(229 200 166 / 0.12)); /* Status: veritium.net's revision-trail colours (add / edit / remove), plus steel and sage for the two statuses that site has no word for. */ --vt-added: light-dark(#2c7a57, #7fc8a0); --vt-removed: light-dark(#b24a4a, #df9a9a); --vt-modified: light-dark(var(--vt-gold-deep), var(--vt-gold-hi)); --vt-moved: light-dark(#5a7194, #8ea2c0); --vt-renumbered: light-dark(#4f7d63, #9ec5a8); /* The renderer's "Warmth" preference mixes this into its surfaces. Gold, so warming the page warms it towards the brand. */ --vt-tint: light-dark(var(--vt-gold-hi), var(--vt-gold-lo)); --vt-font: var(--font-noto-sans), "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif; --vt-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; } /* Engines without light-dark() (Chromium < 123, Safari < 17.5) get the brand default, dark, as plain colours — the page as well as the act, so an old browser gets the dark site rather than a half-lit one. The renderer does the same for its own defaults in cascade.css. Kept in step with the block above by hand. */ @supports not (color: light-dark(#fff, #000)) { :root { --site-bg: #141927; --site-body-bg: #141927; --site-card: rgb(28 34 55 / 0.7); --site-card-border: transparent; --site-card-solid: #1c2237; --site-raised: #27304c; --site-text: #e6e7ea; --site-text-soft: #cdcfd5; --site-text-body: #a8aab3; --site-text-muted: #9da1ad; --site-text-faint: #6c7180; --site-rule: rgb(255 255 255 / 0.1); --site-accent: #c9ad84; --vt-surface: var(--vt-navy-3); --vt-bg-elevated: var(--vt-navy-4); --vt-rule: rgb(229 200 166 / 0.14); --vt-text: #eee4df; --vt-text-muted: #9da1ad; --vt-text-faint: #8f95a1; --vt-accent: var(--vt-gold-hi); --vt-accent-text: var(--vt-gold-mid); --vt-accent-contrast: var(--vt-gold-ink); --vt-link-visited: #cb9a72; --vt-tint-strong: rgb(229 200 166 / 0.12); --vt-added: #7fc8a0; --vt-removed: #df9a9a; --vt-modified: var(--vt-gold-hi); --vt-moved: #8ea2c0; --vt-renumbered: #9ec5a8; --vt-tint: var(--vt-gold-lo); } } /* ── 2. The brand layer the renderer reads ────────────────────────────── */ /* On `.lw-root` rather than `:root` so the values can reference `--lw-tint` and `--lw-tint-amount`, which the renderer resolves on its root: that is what keeps the reader's "Warmth" slider working on branded colours exactly as it does on the package defaults. Unlayered, so it wins over the package's `@layer lw.tokens` regardless of import order. */ .lw-root { /* The act is dark by default, like the site; the reader's settings menu (`--lw-u-color-scheme`) can make it light. */ --lw-b-color-scheme: dark; --lw-b-font-body: var(--vt-font); /* One face, differentiated by weight — the brand has no serif. A reader who picks "Serif" in the settings still gets one: `--lw-u-*` wins. */ --lw-b-font-heading: var(--lw-font-body); --lw-b-font-mono: var(--vt-font-mono); --lw-b-measure: var(--site-measure); --lw-b-toc-width: var(--site-toc-width); --lw-b-radius: var(--site-radius); /* Fixed navbar + breathing room: :target scroll and the sticky ToC clear it. */ --lw-b-header-offset: calc(var(--site-header-h) + var(--site-header-gap)); --lw-b-tint: var(--vt-tint); /* NOT mixed, unlike every other surface below. `--vt-bg` is `transparent`: the act is painted straight onto the page (§ Tokens, Surfaces), so mixing warmth in here would not warm the act's background — it would GIVE the act a background, a translucent gold rectangle over a page that stayed cold, ending at the renderer's edge. The warmth the reader asked for is on the page itself (§ Tokens, Warmth) and shows through this. */ --lw-b-bg: var(--vt-bg); --lw-b-bg-elevated: color-mix(in oklab, var(--vt-bg-elevated), var(--lw-tint) var(--lw-tint-amount)); --lw-b-text: color-mix(in oklab, var(--vt-text), var(--lw-tint) calc(var(--lw-tint-amount) / 3)); --lw-b-text-muted: color-mix(in oklab, var(--vt-text-muted), var(--lw-tint) calc(var(--lw-tint-amount) / 2)); --lw-b-text-faint: color-mix(in oklab, var(--vt-text-faint), var(--lw-tint) calc(var(--lw-tint-amount) / 2)); --lw-b-rule: color-mix(in oklab, var(--vt-rule), var(--lw-tint) calc(var(--lw-tint-amount) / 2)); /* OPAQUE, on purpose. The renderer draws the hover band as a background plus three spread box-shadows in this one colour; with an opaque colour they merge into a single flat rectangle, with a translucent one they stack (denser where they overlap, lighter at the fringe), which reads as a stroke. So the gold is pre-mixed into `--vt-surface`, the page's colour made OPAQUE — theme and warmth applied — rather than into `--vt-bg`, which has no colour at all and would make the band invisible. */ --lw-b-hover-bg: color-mix( in oklab, color-mix(in oklab, var(--vt-surface), var(--lw-tint) var(--lw-tint-amount)), var(--vt-accent) 8% ); /* The :target band is one `::before` layer and lies over guide lines that must stay visible, so this one stays translucent, as the default does. */ --lw-b-target-bg: var(--vt-tint-strong); --lw-b-link: var(--vt-link); --lw-b-link-visited: var(--vt-link-visited); --lw-b-accent: var(--vt-accent); --lw-b-accent-contrast: var(--vt-accent-contrast); /* ToC top level; it is text, so the readable gold. */ --lw-b-accent-warm: var(--vt-accent-text); --lw-b-focus: var(--vt-focus); --lw-b-change-added: var(--vt-added); --lw-b-change-removed: var(--vt-removed); --lw-b-change-modified: var(--vt-modified); --lw-b-change-moved: var(--vt-moved); --lw-b-change-renumbered: var(--vt-renumbered); } /* ── 3. The page ──────────────────────────────────────────────────────── */ html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; /* The canvas. Declared HERE and not only on , so that what shows is right in the moments the body's own paint is not: the body's box is rasterised in tiles along with the act, and a jump to a heading thousands of lines away lands on tiles that are not painted yet. For a frame or two the canvas is all the compositor has, and this is the same colour. */ background: var(--site-bg); } body { /* The page's one colour, opaque, in both themes (§ Tokens). */ background: var(--site-body-bg); color: var(--site-text); font-family: var(--vt-font); font-size: 16px; line-height: 1.55; min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } /* The footer sits at the foot of a short page (a 404), as it does under a long act. The chrome's footer has no opinion about the page around it. Clipped sideways: its watermark is a 350px SVG, absolutely placed, and on a phone narrower than that (a 320px iPhone SE) it made the whole page wider than the screen. `clip` on the inline axis only, so the watermark still hangs past the footer's top and bottom edges the way it was drawn. */ .landing-page-contact-us { margin-block-start: auto; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* The phone pills slide off the foot of the screen while the reader scrolls down, and back when they scroll up (src/components/pillsAway.ts sets the attribute). A transform, so the move is the compositor's and lays nothing out; the distance is the pills' own height plus the 24px they float above the edge (navbar.css), and the safe-area inset under a home indicator. Still focusable while away: the script brings them back on focus. */ @media (max-width: 768px) { .mobile-floating-nav { transition: transform 0.25s ease; } :root[data-site-pills="away"] .mobile-floating-nav { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); } } @media (max-width: 768px) and (prefers-reduced-motion: reduce) { .mobile-floating-nav { transition: none; } } /* The phone breakpoint of the chrome (navbar.css): the bar is gone, the floating pills are at the foot of the screen, so nothing needs clearing at the top. */ @media (max-width: 768px) { :root { --site-header-h: 0px; } } /* …and where the renderer draws its trail bar, no gap either. The bar sticks at the header offset, and is meant to be flush with the top of the screen when nothing is above it (trail.css): with the gap it floated a rem below the edge, the act scrolling past in the sliver over it. The bar's threshold is the renderer's 40rem, measured on `.lw-root`'s content box, which on a phone is the window less 4rem of padding (§ The act's gutters: 1rem each side on the root, 1rem each side on `.site-main`). Between here and 768px there is no bar, and the settings buttons keep their rem of air. */ @media (width < 44rem) { :root { --site-header-gap: 0px; } } /* Skip link: off-screen until focused, never display:none. Above the navbar (z-index 1000) when it shows. */ .site-skip { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .site-skip:focus-visible { background: var(--site-card-solid); border-radius: var(--site-radius); clip-path: none; color: var(--site-text); height: auto; inset: 0.5rem auto auto 0.5rem; padding: 0.5rem 0.75rem; width: auto; z-index: 1002; } /* Not the script segments in the act's reading-settings panel (`renditions`, ActPageHtml.tsx): they sit in the renderer's clipped segmented row, where a ring drawn 2px OUTSIDE the link is cut away and the focused segment shows nothing. The renderer rings them inside, as it does its radios; this rule is unlayered and would win, so it steps aside. */ .site-main :where(a, button):not(.lw-prefs-option):focus-visible, .site-skip:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; } /* ── The script switch: Latin ⇄ Cyrillic ─────────────────────────────── One pill-shaped link to the other script, led by the "translate" glyph, where veritium.net keeps its language flags. A gold outline and full- strength text so it reads as a control, not as a caption. It appears twice: in the navbar's controls slot (desktop, and the phone menu), and on phones also in `.script-bar` at the top of the page, since the phone has no top bar and the menu hides it. */ .script-switch { align-items: center; border: 1px solid rgb(229 200 166 / 0.45); border-radius: 999px; /* Dark-chrome colours, written out rather than taken from `--site-*`: this pill sits in the navbar, which stays dark while the page behind it turns. */ color: #e6e7ea; display: inline-flex; font-size: 13px; font-weight: 600; gap: 0.4rem; line-height: 1; padding: 0.5rem 0.85rem 0.5rem 0.65rem; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; white-space: nowrap; } .script-switch:hover { background: rgb(229 200 166 / 0.14); border-color: #e5c8a6; color: #e5c8a6; } .script-switch:focus-visible { outline: 2px solid var(--site-accent-hi); outline-offset: 2px; } .script-switch__glyph { block-size: 18px; color: #c9ad84; flex: none; inline-size: 18px; } .script-switch:hover .script-switch__glyph { color: inherit; } .script-switch__short { display: none; } /* The navbar runs out of room below ~1600px (seven section links, the switch, Log in, Register): the label shortens to "Ћир" / "Lat" there, and to the glyph alone below 1280px. The phone menu and the phone's own bar have the room, so they keep it whole. */ @media (max-width: 1600px) { .landing-page-navbar .script-switch__full { display: none; } .landing-page-navbar .script-switch__short { display: inline; } } /* Tighter still, the glyph alone; the link keeps its accessible name. */ @media (max-width: 1280px) { .landing-page-navbar .script-switch__short { display: none; } .landing-page-navbar .script-switch { padding-inline: 0.55rem; } } /* In the phone menu the switch gets a finger-sized target, as the language flags do on veritium.net. */ .mobile-menu-overlay__controls .script-switch { font-size: 15px; padding: 0.7rem 1.25rem 0.7rem 1rem; } /* The phone's own copy, at the top of the page and scrolling away with it. It sits on the page, not on the dark bar, so it takes the page's colours in either theme. */ .script-bar { display: none; } @media (max-width: 768px) { .script-bar { display: flex; justify-content: flex-end; padding: 0.75rem 1rem 0; } .script-bar .script-switch { background: var(--site-card-solid); border-color: color-mix(in oklab, var(--site-accent), transparent 45%); color: var(--site-text); font-size: 14px; padding: 0.6rem 1rem 0.6rem 0.8rem; } .script-bar .script-switch__glyph { color: var(--site-accent); } .script-bar .script-switch:hover { background: color-mix(in oklab, var(--site-accent), transparent 85%); color: var(--site-accent); } .script-bar .script-switch:focus-visible { outline-color: var(--site-accent); } } @media print { .script-bar { display: none; } } /* ── Main ── */ .site-main { flex: 1; inline-size: 100%; margin-inline: auto; max-inline-size: var(--site-max); /* Below the fixed navbar. */ padding: calc(var(--site-header-h) + 2.5rem) 1.5rem 4rem; box-sizing: border-box; } @media (max-width: 768px) { .site-main { /* The floating pills (navbar.css) sit 24px + 48px above the foot of the screen; the bottom padding keeps the last line of a page above them. */ padding: 1.5rem 1rem 6rem; } } /* ── The act: the reading column, centred on the page ────────────────── The act is centred on the PAGE, not inside the chrome's column, so it drops the `--site-max` cap and spans the window: the padding below is what places it, and a percentage there resolves against the full page width. The renderer lays its root out as three tracks — [ToC | text | § strip] — PACKED TO THE START (document.css § Layout), which is right for a root that is exactly as wide as its content and wrong for one that is wider: the reading column then sits a whole ToC to the right of the page's centre, with all the slack behind it. The renderer cannot fix that itself (it does not own the viewport, and its root is a `container-type: inline-size` box, so it cannot be shrink-wrapped either); centring is the host's job, and it is one declaration — the start padding that puts the middle of the TEXT on the middle of the page — less the card's own padding (§ The act's card), which moves the text by the same amount. Only that one side is ever set. Everything past the column — the § strip and the blank that balances the ToC — is the root's own leftover track space, so it needs no padding of its own and can never push the page sideways. `max()` is the graceful part: as the window narrows, the ideal padding shrinks to the page's ordinary gutter, and from there the column stops being centred rather than losing width. Below 40rem the phone block above keeps its tighter padding: there is no ToC beside the text and nothing to centre. `screen` because the print block at the end of this file resets `.site-main`'s padding to zero, and these selectors are the more specific ones. */ .site-main--act { max-inline-size: none; /* A narrow gutter above the act, 12px: right under the fixed navbar (whose height the first term is) and, on a phone, where that height is 0, just below the top of the screen. Later than both `.site-main` rules above, so it wins over each; the other sides keep theirs. */ padding-block-start: calc(var(--site-header-h) + 12px); /* `ch` in that padding has to be the ACT's `ch`, or the arithmetic centres the wrong width: the measure is quoted in characters, and the reader can change the size and the face they are characters of. `.lw-root` sets both properties for itself from the same values, so this is inherited by nothing and affects nothing but the calculation. */ font-family: var(--lw-u-font-body, var(--vt-font)); font-size: var(--lw-u-font-size-base, 1rem); } /* Stacked: the ToC sits above the text and takes no track, so the column is centred against nothing but itself. */ @media screen and (40rem <= width <= 65rem) { .site-main--act { padding-inline-start: max(1.5rem, calc(50% - var(--site-column) / 2 - var(--site-act-pad))); } } /* Beside: the renderer moves the ToC into the start margin once its ROOT is wider than 60rem, which is this 65rem of window less the padding around it. From here the ToC's track is what the column is centred against — the ToC ends up in the margin the centring opens up, which is the point. */ @media screen and (width > 65rem) { .site-main--act { padding-inline-start: max( 1.5rem, calc(50% - var(--site-toc-track) - var(--site-column) / 2 - var(--site-act-pad)) ); } } /* ── The act's gutters ────────────────────────────────────────────────── The act has no card: `--vt-bg` is `transparent` in the dark (§ Tokens), so what lies behind the statute is the page itself, unbroken. What it still needs is room — the renderer draws the `:target` arrow `--lw-margin-width + --lw-highlight-pad-inline` BEFORE its text column, and that has to land on the page rather than off the edge of it. On a phone the renderer asks for less — `--lw-margin-width-narrow`, 1.375rem — which the 1rem below plus `.site-main`'s own 1rem covers; the §, which on a phone comes back inside the column and hangs off the END of its line, is covered by that same gutter at the other edge. NONE AT THE TOP: the act's one top gutter is `.site-main--act`'s 12px (§ The act), so it is not doubled here. On a phone the settings buttons, which stick at the root's top edge, now share the first row with the back button (the renderer stops the breadcrumb short of them, prefs.css). Padding is the one thing a token cannot express, so it goes in `lw.overrides`, the layer the renderer reserves for its host; so do the few other `.lw-*` rules in this file, each where its reason is. */ @layer lw.overrides { .site-main--act .lw-root { padding: 0 var(--site-act-pad) 3rem; } @media (max-width: 768px) { .site-main--act .lw-root { padding: 0 1rem 2rem; } /* The renderer's back-to-top button is sticky at the foot of the § strip, where the chrome's floating menu button also lives on a phone (24px + 48px from the bottom); lift it clear. */ .lw-scroll-top-button { inset-block-end: calc(24px + 48px + 1rem); } } /* THE SETTINGS BUTTONS ON A PHONE, as far from the right edge of the screen as the back button's pill is from the left. The renderer's phone layout (its root under 40rem, the query here) centres the pair in its 3rem end strip. On a phone the back button hangs its pill out past the text's start edge by its own inset (§ The way back to the list), so its text lines up with the act's; the pair is pushed out past the root's end edge by that same `--site-back-inset`, and the two are mirror images of each other on the screen. The renderer stops the breadcrumb short of the pair with room to spare. */ @container (inline-size < 40rem) { .lw-prefs-anchor { margin-inline-end: calc(-1 * var(--site-back-inset)); } /* The phone's breadcrumb bar (the renderer's trail): its crumbs a step up from the renderer's small size, and the bar grown DOWN by `--site-trail-pad-end`, so the settings buttons, which the renderer sizes to within a pixel of its `--lw-trail-height`, have air above and below them. The crumbs are centred on the whole taller bar (it is a flex row, `align-items: center`). A deep link's scroll margin grows by the same amount, so the provision still lands clear of the bar. */ .lw-trail-bar { block-size: calc(var(--lw-trail-height) + var(--site-trail-pad-end)); font-size: 0.9375em; } /* …and the settings buttons centred on the whole taller bar, as the crumbs are, rather than on the renderer's `--lw-trail-height`: the same air above them as below, and one centre line for the row. */ .lw-root:has(> .lw-doc > .lw-trail) .lw-prefs-anchor { inset-block-start: calc( var(--lw-header-offset) + (var(--lw-trail-height) + var(--site-trail-pad-end) - var(--lw-prefs-button-size)) / 2 ); } .lw-doc:has(> .lw-trail) .lw-block { scroll-margin-top: calc( var(--lw-header-offset) + var(--lw-trail-height) + var(--site-trail-pad-end) + var(--lw-space) * 2 ); } } @media print { .site-main--act .lw-root { padding: 0; } } /* The act's breadcrumb is one link, back to the list of acts (src/lib/core/act.ts), drawn as § The way back to the list below. Here, in the host's layer, because the crumb is the renderer's markup; these declarations are the renderer's small breadcrumb text being replaced. */ .site-main--act .lw-breadcrumb { margin-block-end: 1rem; } } /* ── The way back to the list ─────────────────────────────────────────── The list of acts is where a reader goes next, and the act page used to offer it only as small print: a breadcrumb in the renderer's muted size, the navbar item (behind the menu on a phone) and a text link at the foot. Now the top of every act is a back button, "← Svi zakoni", and the foot ends on the same pill: one shape for one destination, at both ends of the page. It is the phone's `.script-bar` pill (that switch now lives in the reading settings), in the page's colours, so it reads as a control and not as a caption, in either theme. Unlayered, so it outranks the renderer's `:where(a)` link colours; the arrows are decoration, drawn with no text, so they are not read out. */ .site-main--act .lw-breadcrumb a, .continue-reading__all a { align-items: center; background: var(--site-card-solid); border: 1px solid color-mix(in oklab, var(--site-accent), transparent 45%); border-radius: 999px; color: var(--site-text); display: inline-flex; font-family: var(--vt-font); font-size: 15px; font-weight: 600; gap: 0.45rem; line-height: 1; padding: 0.6rem 1.05rem 0.6rem calc(var(--site-back-inset) - 1px); text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* On a phone the back button's TEXT, not its pill, starts on the act's start edge: the pill hangs out into the gutter by its rounded end, so the arrow lines up with the title and the text below it. The settings buttons mirror it at the other edge (§ The act's gutters). The same query as the renderer's phone layout, so the two move together. */ @container (inline-size < 40rem) { .site-main--act .lw-breadcrumb a { margin-inline-start: calc(-1 * var(--site-back-inset)); } } /* The arrows are drawn, not typed. The page's Noto Sans subsets (src/styles/fonts.css) carry ↑ and ↓ but not ← or →, so the glyph came from whatever font the device had: a heavy arrow on a desktop, a small hairline one on a phone. A mask in the accent colour is the same arrow everywhere, at the text's size and roughly its 600 weight. */ .site-main--act .lw-breadcrumb a::before, .continue-reading__all-arrow { background: var(--site-accent); block-size: 1em; content: ''; flex: none; inline-size: 1em; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 8h-11M7 3.5 2.5 8 7 12.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 8h-11M7 3.5 2.5 8 7 12.5'/%3E%3C/svg%3E") center / contain no-repeat; } .continue-reading__all-arrow { transform: scaleX(-1); } .site-main--act .lw-breadcrumb a:hover, .continue-reading__all a:hover { background: color-mix(in oklab, var(--site-accent), transparent 85%); border-color: var(--site-accent); color: var(--site-accent); } @media print { .site-main--act .lw-breadcrumb { display: none; } } /* ── Index page: veritium.net's legal-document page hero ── */ .index-hero { margin-block-end: 2.5rem; max-inline-size: 48rem; } .index-hero__kicker { color: var(--site-accent); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; margin: 0 0 0.75rem; text-transform: uppercase; } .index-hero__title { /* .legal-document-page__title: 900, 54px on a desktop, 36px on a phone. */ color: var(--site-text); font-size: clamp(36px, 2rem + 1.5vw, 54px); font-weight: 900; line-height: 1.3; margin: 0; text-wrap: balance; } .index-hero__lead { /* .legal-document-page__subtitle */ color: var(--site-text-soft); font-size: 18px; line-height: 1.5; margin: 1rem 0 0; max-inline-size: 42rem; text-wrap: pretty; } /* ── The act index: a search box over dense rows ──────────────────────── One row per act, no boxes: the title, its gazette citation and in-force date on the right, and the abstract as a single muted line. The whole row is the link. Built to stay scannable at hundreds of acts, which the cards it replaced were not. */ .act-index { max-inline-size: 60rem; } .act-search { margin-block-end: 1.25rem; } .act-search__field { align-items: center; background: var(--site-card-solid); border: 1px solid var(--site-rule); border-radius: var(--site-radius); display: flex; gap: 0.6rem; padding-inline: 0.9rem 0.6rem; transition: border-color 0.2s ease; } .act-search__field:focus-within { border-color: var(--site-accent); } .act-search__icon { block-size: 18px; color: var(--site-text-faint); flex: none; inline-size: 18px; } .act-search__input { appearance: none; background: none; border: 0; color: var(--site-text); flex: 1; font: inherit; font-size: 16px; /* 16px or iOS zooms on focus */ min-inline-size: 0; outline: none; padding-block: 0.75rem; } .act-search__input::placeholder { color: var(--site-text-faint); } .act-search__input::-webkit-search-cancel-button { appearance: none; } .act-search__clear { align-items: center; border: 1px solid var(--site-rule); border-radius: 4px; color: var(--site-text-faint); display: inline-flex; flex: none; font: inherit; font-size: 12px; justify-content: center; line-height: 1; min-block-size: 1.5rem; min-inline-size: 1.5rem; } .act-search__clear { background: none; cursor: pointer; font-size: 16px; } .act-search__clear:hover { color: var(--site-text); } .act-search__status { color: var(--site-text-muted); font-size: 13px; margin: 0.5rem 0 0; min-block-size: 1lh; } .act-index__empty { color: var(--site-text-muted); margin: 1.5rem 0; } .act-list { list-style: none; margin: 0; padding: 0; } .act-list > li + li { border-block-start: 1px solid var(--site-rule); } /* Stacked, not columns: the title leads, the gazette and date follow as a quiet byline, the abstract under that. Reads as a list of documents, not as a table of records. */ .act-row { border-radius: var(--site-radius-card); color: inherit; display: block; margin-inline: -1rem; padding: 1rem; text-decoration: none; transition: background 0.15s ease; } .act-row:hover { background: color-mix(in oklab, var(--site-accent), transparent 93%); } .act-row:focus-visible { outline: 2px solid var(--site-accent); outline-offset: -2px; } .act-row__title { color: var(--site-text); font-size: 18px; font-weight: 600; line-height: 1.35; margin: 0; text-wrap: balance; transition: color 0.15s ease; } .act-row:hover .act-row__title { color: var(--site-accent); } .act-row__meta { color: var(--site-text-muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 0 0.5em; line-height: 1.4; margin: 0.3rem 0 0; } .act-row__meta > span + span::before { color: var(--site-text-faint); content: '·'; margin-inline-end: 0.5em; } .act-row__abstract { color: var(--site-text-body); font-size: 14.5px; line-height: 1.5; margin: 0.4rem 0 0; max-inline-size: 72ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The query matched inside the abstract: show all of it, so no highlight is hidden behind the ellipsis. */ .act-row__abstract--open { white-space: normal; } .act-row mark { background: color-mix(in oklab, var(--site-accent), transparent 72%); border-radius: 2px; color: inherit; padding-inline: 0.05em; } @media (max-width: 640px) { .act-row__abstract { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; } .act-row__abstract--open { display: block; } } .sr-only { clip-path: inset(50%); block-size: 1px; inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; } /* ── Continue reading: onward links at the foot of an act ────────────── A quiet band between the act and the footer. It is navigation, not reading, so it is deliberately plainer than the index page's cards: titles and their gazette citation, nothing else. Two or three columns on a wide window, one on a phone — `auto-fit` does the choosing, so there is no breakpoint here to keep in step with the rest of the file. To make the band busier or quieter, this is the whole surface: `gap` for the spacing, `--site-card`/`--site-card-border` on `__link` for how much each entry looks like a card, and `minmax(18rem, 1fr)` for how early it wraps to one column. */ .continue-reading { border-block-start: 1px solid var(--site-rule); box-sizing: border-box; inline-size: 100%; margin-inline: auto; max-inline-size: var(--site-max); padding: 2.5rem 1.5rem 0; } .continue-reading__title { color: var(--site-text); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; margin: 0 0 1.25rem; text-transform: uppercase; } .continue-reading__list { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); list-style: none; margin: 0; padding: 0; } /* The whole entry is the link, so the target is one box and the citation is not a second, separate thing to aim at. */ .continue-reading__link { background: var(--site-card); border: 1px solid var(--site-card-border); border-radius: var(--site-radius-card); display: block; block-size: 100%; padding: 1rem 1.15rem; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; } .continue-reading__link:hover { border-color: color-mix(in oklab, var(--site-accent), transparent 60%); } .continue-reading__name { color: var(--site-text); display: block; font-size: 16px; font-weight: 600; line-height: 1.35; text-wrap: pretty; } .continue-reading__link:hover .continue-reading__name { color: var(--site-accent); } /* A consolidated act's citation is a long run of gazette issues; two lines of it is a reference, ten is a wall. `-webkit-box` is still the only way to clamp by line count, and it lays out as a block, so it is the display here. */ .continue-reading__citation { color: var(--site-text-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.45; margin-block-start: 0.35rem; } .continue-reading__all { margin: 1.25rem 0 0; } @media (max-width: 768px) { .continue-reading { padding-inline: 1rem; } } /* ── Notice pages (404, error) ── */ .site-main--notice { padding-block: calc(var(--site-header-h) + 5rem) 4rem; max-inline-size: 42rem; } .notice__title { color: var(--site-text); font-size: clamp(30px, 1.5rem + 1.5vw, 40px); font-weight: 900; line-height: 1.3; margin: 0 0 0.75rem; } .notice__body { color: var(--site-text-soft); font-size: 18px; margin: 0 0 1.5rem; } /* The notice pages' button is the chrome's `.btn.primary`; its colours come from the `--btn-*` variables, which the chrome declares on its own roots only, so the page declares the dark set for the button it renders itself. */ .site-main--notice { --btn-primary-background: var(--site-gradient); --btn-primary-hover-background: linear-gradient(180deg, var(--site-accent-lo) 0%, var(--site-accent-hi) 100%); --btn-primary-font-color: #10131f; --btn-primary-hover-font-color: #10131f; } .site-main--notice .btn.primary { font-weight: 700; } /* ── Print: the act only ── */ @media print { .landing-page-navbar, .mobile-floating-nav, .mobile-menu-overlay, .landing-page-contact-us, .site-skip, .continue-reading { display: none; } /* The sheet is white, and THE CANVAS IS THE HALF THAT IS EASY TO MISS. Clearing the body's background is not enough twice over: the page's one colour is declared on `html` as well (§ The page), and even with both cleared an `html` still in the dark `color-scheme` makes the browser paint its own dark canvas underneath — which is what a printed act came out on, dark navy behind black text, until this line. `light` here is the same decision the renderer's `print.css` makes for `.lw-root`; the element it has to be made on belongs to this page, not to the package. `:root`, not `html`: the declaration this has to beat is the one in § Tokens, which is written `:root` too, and a pseudo-class outranks a type selector — spelled `html` here the line lost the cascade and changed nothing at all. Back to block flow with it: on screen the body is a flex column with a `100dvh` floor, so the footer sits at the foot of a short page. In paged media that floor is a whole PAGE — the act gets a blank sheet before or after it — and a flex column is the wrong root to fragment across pages in the first place. */ :root { color-scheme: light; } :root, body { background: none; color: #000; } body { display: block; min-height: 0; } .site-main { padding: 0; max-inline-size: none; } }