/* ========================================================================== Law family — shared pieces, direction A (2026-09-17) ========================================================================== Loaded by every redesigned law page (templates_v2: laws_list, law_search, law_detail, law_as_of, law_article_detail, law_section_detail, law_version_history) in place of law-shared.css, together with v2/laws.css or v2/law-reader.css; law_version_compare and law_article_mapping load it too, for the legal-force pill, with v2/law-compare.css on top. * No :root block and no new tokens: colours come from ui-kit.css on body.ui2. Every rule is scoped under .ui2. * The markup these style is frozen elsewhere and only restyled here: .law-status-badge .is-in-force .is-repealed .is-pending .is-unverified (templates/core/_law_status_badge.html — the wording is inline ru/kk there; this file turns it into the kit's honest status pill) .law-type-label (templates/core/_law_type_label.html) .footnote-highlight .footnote-label .footnote-text (law_filters.py) .law-toast (law-reader-context.js appends it to ) * Pill tones follow the kit: in force = .ok, repealed = .void (grey), not yet in force / suspended = .pend, unverified = .na (hatched — "we do not know" must never look like a measured state). ========================================================================== */ /* ---------------------------------------------------- legal-force pill */ .ui2 .law-status-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 0; border-radius: 980px; background: var(--fill); color: var(--ink2); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0; white-space: nowrap; vertical-align: middle; } .ui2 .law-status-badge::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .ui2 .law-status-badge.is-in-force { background: rgba(31, 157, 85, 0.1); color: var(--ok-ink); } .ui2 .law-status-badge.is-repealed { background: var(--fill); color: var(--ink2); } .ui2 .law-status-badge.is-pending { background: rgba(224, 122, 0, 0.12); color: var(--warn-ink); } .ui2 .law-status-badge.is-unverified { background: repeating-linear-gradient(135deg, #f1f1f4 0 4px, #e6e6ea 4px 8px); color: var(--ink2); } .ui2 .law-status-badge.is-unverified::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; } /* The act type is a plain word next to the pill, not a second chip. */ .ui2 .law-type-label { display: inline; padding: 0; background: none; color: inherit; font: inherit; white-space: nowrap; } /* ------------------------------------------------------------ notices */ /* One notice component for the family. Tones: .is-void the act has no legal force (brand tint) .is-warn in force, but not today's text (amber) .is-info a neutral statement of fact (blue) (none) status unverified / data limits (grey) */ .ui2 .law-notice { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 18px; border: 0; border-radius: 14px; background: var(--fill); color: var(--ink); font-size: 15px; line-height: 1.47; } .ui2 .law-notice > .ui-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--ink2); } .ui2 .law-notice > i { flex: none; font-size: 18px; line-height: 1.3; color: var(--ink2); } .ui2 .law-notice strong, .ui2 .law-notice b { font-weight: 600; } .ui2 .law-notice a { color: var(--brand); font-weight: 500; text-decoration: none; white-space: nowrap; } .ui2 .law-notice a:hover { text-decoration: underline; text-underline-offset: 3px; } .ui2 .law-notice.is-void { background: var(--tint); } .ui2 .law-notice.is-void > .ui-ic, .ui2 .law-notice.is-void > i { color: var(--brand); } .ui2 .law-notice.is-warn { background: rgba(224, 122, 0, 0.1); } .ui2 .law-notice.is-warn > .ui-ic, .ui2 .law-notice.is-warn > i { color: var(--warn-ink); } .ui2 .law-notice.is-info { background: rgba(47, 111, 235, 0.08); } .ui2 .law-notice.is-info > .ui-ic, .ui2 .law-notice.is-info > i { color: #2459c6; } /* ------------------------------------------------ «ҚАЗ» / «ОРЫС» tag */ .ui2 .lw-kk-tag { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink2); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; } /* ---------------------------------------------------------- footnotes */ /* «Сноска.» blocks are provenance, not warnings: a quiet small aside. */ .ui2 .footnote-highlight { display: block; margin: 14px 0 0; color: var(--ink3); font-size: 13px; line-height: 1.5; letter-spacing: 0; } .ui2 .footnote-label { display: none; } .ui2 .footnote-text { color: inherit; } /* -------------------------------------------------------------- toast */ .ui2 .law-toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 1300; max-width: min(90vw, 460px); padding: 11px 18px; border-radius: 980px; background: rgba(29, 29, 31, 0.92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); color: #fff; font-size: 15px; line-height: 1.35; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; } .ui2 .law-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); } @media (max-width: 1023.98px) { /* Clear of the reader's bottom toolbar on a phone. */ .ui2.law-reader .law-toast { bottom: calc(76px + env(safe-area-inset-bottom)); } } /* -------------------------------------------------------- empty state */ .ui2 .law-empty { padding: 48px 24px; border-radius: 18px; background: var(--fill); color: var(--ink2); font-size: 15px; line-height: 1.47; text-align: center; } .ui2 .law-empty .ui-ic { display: block; width: 28px; height: 28px; margin: 0 auto 10px; color: var(--ink3); } @media print { .ui2 .law-status-badge { background: none !important; padding: 0; height: auto; color: #000 !important; font-weight: 600; } .ui2 .law-status-badge::before { display: none; } .ui2 .law-toast { display: none !important; } }