landmark wraps the content block in the sidebar layout (skip-link target) without altering the Bootstrap grid: display:contents drops its box, so the inner .col-lg-9 stays a direct child of the .row. */ main.main-with-sidebar { display: contents; } /* ============================================================================ Home page ============================================================================ */ .home-main { background: var(--surface-alt); } .home-landing { overflow: hidden; } .seller-hero { position: relative; padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 7vw, 6rem); background: linear-gradient(115deg, rgba(54, 95, 115, .08), transparent 50%), var(--surface-alt); } .seller-hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(54, 95, 115, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(54, 95, 115, .055) 1px, transparent 1px); background-size: 42px 42px; content: ""; mask-image: linear-gradient(to right, transparent 5%, #000 55%, #000 100%); pointer-events: none; } .seller-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; } .seller-hero--anonymous { display: flex; min-height: calc(88vh - var(--app-header-h)); min-height: calc(88svh - var(--app-header-h)); align-items: center; } .home-hero-container { position: relative; } .home-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(2rem, 7vw, 6rem); align-items: center; } .seller-hero-copy { max-width: 43rem; } .seller-hero-copy.home-hero-copy { max-width: 48rem; } .home-kicker { margin: 0 0 .9rem; color: var(--brand-accent-fg); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .home-title { margin: 0; color: var(--text); font-size: clamp(2.35rem, 5vw, 4.75rem); line-height: 1.02; font-weight: 800; letter-spacing: -.045em; } .home-subtitle { max-width: 39rem; margin: 1.35rem 0 0; color: var(--text-muted); font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.65; } .home-hero-subtitle { margin-top: 1.15rem; color: var(--brand-accent-fg); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 750; } .home-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } .home-actions .btn { min-height: 44px; padding: .7rem 1.1rem; font-weight: 700; } .home-actions--guest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 47rem; } .home-actions--guest .btn { width: 100%; } .home-brand-art { position: relative; display: grid; width: min(100%, 30rem); aspect-ratio: 1; place-items: center; justify-self: end; color: var(--brand); background: radial-gradient(circle, rgba(54, 95, 115, .09), transparent 66%); border: 1px solid rgba(54, 95, 115, .2); border-radius: 50%; opacity: .62; } .home-brand-art::before { position: absolute; inset: 13%; border: 1px solid rgba(54, 95, 115, .25); border-radius: 50%; content: ""; } .home-brand-art::after { position: absolute; width: 72%; height: 1px; background: rgba(54, 95, 115, .22); box-shadow: 0 -3.25rem rgba(54, 95, 115, .14), 0 3.25rem rgba(54, 95, 115, .14); content: ""; } .home-brand-art .brand-mark { position: relative; z-index: 1; width: 58%; height: 58%; } .home-brand-art--oil .brand-mark { width: 52%; height: 64%; } [data-bs-theme="dark"] .home-brand-art { background: radial-gradient(circle, rgba(143, 177, 193, .11), transparent 66%); border-color: rgba(143, 177, 193, .24); opacity: .72; } [data-bs-theme="dark"] .home-brand-art::before { border-color: rgba(143, 177, 193, .27); } [data-bs-theme="dark"] .home-brand-art::after { background: rgba(143, 177, 193, .24); box-shadow: 0 -3.25rem rgba(143, 177, 193, .16), 0 3.25rem rgba(143, 177, 193, .16); } .home-scroll-cue { position: absolute; bottom: 1.25rem; left: 50%; z-index: 2; display: inline-flex; gap: .55rem; align-items: center; padding: .5rem .7rem; transform: translateX(-50%); color: var(--text-muted); font-size: .88rem; font-weight: 700; text-decoration: none; } .home-scroll-cue:hover { color: var(--brand-accent-fg); } .seller-hero-visual { position: relative; min-height: 360px; padding: 1.25rem; overflow: hidden; color: #8fb1c1; background: #10191e; border: 1px solid #344f5b; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .seller-hero-visual::before, .seller-hero-visual::after { position: absolute; width: 62px; height: 62px; content: ""; border-color: #587684; } .seller-hero-visual::before { top: 12px; right: 12px; border-top: 2px solid; border-right: 2px solid; } .seller-hero-visual::after { bottom: 12px; left: 12px; border-bottom: 2px solid; border-left: 2px solid; } .seller-hero-brand { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .2rem; padding: .5rem .65rem; color: #edf3f5; border-left: 3px solid #8fb1c1; } .seller-hero-brand span { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; } .seller-hero-brand small { color: #aab8bf; } .seller-industrial-scheme { position: absolute; inset: 3.8rem 1rem .4rem; width: calc(100% - 2rem); height: calc(100% - 4.2rem); } .scheme-grid { opacity: .16; stroke-width: 1; } .scheme-main { stroke: #8fb1c1; stroke-width: 4; } .scheme-node { fill: #10191e; stroke: #dce6ea; stroke-width: 4; } .scheme-plate { fill: rgba(143, 177, 193, .1); stroke-width: 2; } .home-process { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--surface); border-block: 1px solid var(--border); } #home-process-title { scroll-margin-top: calc(var(--app-header-h) + 1rem); } .home-section-heading { max-width: 44rem; margin-bottom: 2rem; } .home-section-heading h2, .home-secondary-heading h2 { margin: 0; color: var(--text); font-size: clamp(1.65rem, 3vw, 2.45rem); font-weight: 800; letter-spacing: -.025em; } .home-process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } .home-process-grid li { display: flex; gap: 1rem; min-height: 184px; padding: 1.35rem; background: var(--surface-alt); border: 1px solid var(--border); border-top: 3px solid var(--brand); border-radius: var(--radius-lg); } .home-step-number { flex: 0 0 auto; color: var(--brand-accent-fg); font-size: .82rem; font-weight: 800; letter-spacing: .08em; } .home-process-grid h3 { margin: 0 0 .65rem; font-size: 1.1rem; font-weight: 800; } .home-process-grid p { margin: 0; color: var(--text-muted); line-height: 1.6; } .home-secondary { padding: 2.5rem 0; } .home-secondary-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .home-secondary-heading h2 { font-size: 1.2rem; } .home-info-list { display: grid; gap: .75rem; } .home-info-disclosure { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .home-info-disclosure summary { padding: 1rem 1.15rem; cursor: pointer; color: var(--text); font-weight: 700; } .home-info-disclosure[open] summary { border-bottom: 1px solid var(--border); } .home-info-body { padding: 1.15rem; color: var(--text); } .home-info-body > :last-child { margin-bottom: 0; } .home-intro-body { white-space: pre-wrap; } /* ============================================================================ User guide page (/guide) ============================================================================ */ .guide-steps { margin: 0; } .guide-step { padding: 1rem 0; border-top: 1px solid var(--border); } .guide-figure { margin: .75rem 0 0; } .guide-figure img { max-width: 100%; height: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .guide-figure figcaption { margin-top: .35rem; color: var(--text-muted); font-size: .875rem; } /* Screenshots are captured in the light theme; soften their glare on dark surfaces. */ [data-bs-theme="dark"] .guide-figure img { filter: brightness(.9); } @media (max-width: 767.98px) { .seller-hero { padding-top: 2.75rem; } .seller-hero--anonymous { min-height: calc(88vh - var(--app-header-h)); } .seller-hero--anonymous { min-height: calc(88svh - var(--app-header-h)); } .home-actions { display: grid; grid-template-columns: 1fr; } .home-actions .btn { width: 100%; justify-content: center; } .home-scroll-cue { position: static; width: max-content; margin: 2rem auto 0; transform: none; } .seller-hero-visual { min-height: 270px; } .home-process-grid { grid-template-columns: 1fr; } .home-process-grid li { min-height: 0; } } @media (max-width: 991.98px) { .seller-hero-grid { grid-template-columns: 1fr; } .seller-hero-visual { max-width: 42rem; width: 100%; } .home-hero-grid { display: block; isolation: isolate; } .home-brand-art { position: absolute; top: 50%; right: -18%; z-index: -1; width: min(72vw, 30rem); transform: translateY(-50%); opacity: .16; } [data-bs-theme="dark"] .home-brand-art { opacity: .2; } } @media (max-height: 699px) { .seller-hero--anonymous { min-height: auto; } .home-scroll-cue { position: static; width: max-content; margin: 2rem auto 0; transform: none; } } /* ============================================================================ Seller registration and listing-create flows ============================================================================ */ .seller-page { max-width: 76rem; margin: 0 auto; } .seller-page-heading { max-width: 48rem; margin: 0 0 1.5rem; } .seller-page-kicker, .seller-info-label { margin: 0 0 .55rem; color: var(--brand-accent-fg); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .seller-page-heading h1 { margin: 0; color: var(--text); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -.035em; } .seller-page-heading > p:last-child { max-width: 43rem; margin: .85rem 0 0; color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; } .seller-role-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.5rem; } .seller-role-option { display: flex; align-items: center; gap: .9rem; min-height: 76px; padding: .9rem 1rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; transition: color var(--transition), border-color var(--transition), background-color var(--transition), box-shadow var(--transition); } .seller-role-option:hover, .seller-role-option:focus-visible { color: var(--text); border-color: var(--brand); box-shadow: var(--shadow-sm); } .seller-role-option.active { background: var(--surface-steel); border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); } .seller-role-option > i { color: var(--brand-accent-fg); font-size: 1.45rem; } .seller-role-option span { display: flex; flex-direction: column; gap: .15rem; } .seller-role-option strong { font-size: .98rem; } .seller-role-option small { color: var(--text-muted); line-height: 1.35; } .seller-guest-option { display: flex; gap: .8rem; align-items: flex-start; margin: -.75rem 0 1.5rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius-lg); } .seller-guest-option > i { flex: 0 0 auto; margin-top: .1rem; color: var(--brand-accent-fg); font-size: 1.15rem; } .seller-guest-option a { font-weight: 750; } .seller-guest-option p { margin: .25rem 0 0; color: var(--text-muted); font-size: .9rem; line-height: 1.5; } .seller-form-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .8fr); grid-template-areas: "form info"; gap: 1.25rem; align-items: start; } .seller-form-card { grid-area: form; min-width: 0; padding: clamp(1rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .seller-info-rail { grid-area: info; padding: 1.25rem; color: #edf3f5; background: #10191e; border: 1px solid #344f5b; border-radius: var(--radius-lg); } .seller-info-rail h2 { margin: 0; font-size: 1.2rem; font-weight: 800; } .seller-info-steps { margin: 1.25rem 0 0; padding: 0; list-style: none; } .seller-info-steps li { display: grid; grid-template-columns: 2rem 1fr; gap: .65rem; padding: .85rem 0; border-top: 1px solid rgba(220, 230, 234, .15); } .seller-info-steps span { color: #8fb1c1; font-size: .75rem; font-weight: 800; letter-spacing: .06em; } .seller-info-steps p { margin: 0; color: #cbd6db; font-size: .9rem; line-height: 1.5; } .seller-info-note { display: flex; gap: .55rem; margin: 1rem 0 0; padding-top: 1rem; color: #aab8bf; border-top: 1px solid rgba(220, 230, 234, .15); font-size: .82rem; } .seller-info-note i { color: #8fb1c1; } .seller-fieldset { min-width: 0; margin: 0; padding: 0 0 1.75rem; border: 0; } .seller-fieldset + .seller-fieldset { padding-top: 1.75rem; border-top: 1px solid var(--border); } .seller-fieldset legend { display: flex; align-items: center; gap: .7rem; width: 100%; margin: 0 0 1.25rem; padding: 0; color: var(--text); font-size: 1.15rem; font-weight: 800; } .seller-fieldset legend span { color: var(--brand-accent-fg); font-size: .75rem; letter-spacing: .08em; } .seller-field { min-width: 0; margin-bottom: 1.15rem; } .seller-field:last-child { margin-bottom: 0; } .seller-field .form-label { color: var(--text); font-weight: 700; } .seller-field .form-text { color: var(--text-muted); } .seller-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .seller-inline-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; } .seller-quantity-control { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(8rem, .55fr); gap: .65rem; max-width: 25rem; } .seller-page .form-control, .seller-page .form-select, .seller-page .btn { min-height: 44px; } .seller-page .form-control, .seller-page .form-select { background-color: var(--surface); } .seller-legal-fieldset { padding-bottom: .5rem; } .seller-check-row { padding: .9rem; margin-bottom: .75rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); } .seller-check-row .form-check { margin: 0; } .seller-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .seller-form-actions .btn { padding-inline: 1.1rem; font-weight: 700; } @media (max-width: 991.98px) { .seller-form-layout { grid-template-columns: 1fr; grid-template-areas: "info" "form"; } .seller-info-rail { max-width: 46rem; } } @media (max-width: 767.98px) { .seller-role-switch, .seller-field-grid { grid-template-columns: 1fr; } .seller-inline-control { grid-template-columns: 1fr; } .seller-form-card { padding: 1rem; } .seller-page-heading h1 { font-size: 2rem; } } /* sticky header on a solid surface (was a repeating PNG from the Bootshop theme) */ #header { position: sticky; top: 0; z-index: 1020; background: var(--app-header-bg); border-bottom: 1px solid rgba(143, 177, 193, .28); box-shadow: 0 2px 12px rgba(7, 12, 15, .18); } #logoArea, #logoArea .navbar-brand { line-height: 49px; } #logoArea .btn, #logoArea .btn-group { margin-top: 0; } #logoArea.navbar { background: var(--app-header-bg); } #logoArea .navbar-nav .nav-link.active, #logoArea .navbar-nav .nav-link.show, #logoArea .navbar-nav .nav-link:focus, #logoArea .navbar-nav .nav-link:hover { color: var(--app-header-active-fg); background-color: var(--brand); } #logoArea .navbar-nav .nav-link { padding: 10px; color: var(--app-header-muted); font-size: 1rem; /* keep each top-menu label on a single line — short labels make this fit on desktop widths; in the collapsed (mobile) menu each item is its own row anyway */ white-space: nowrap; } /* focus ring stays visible on the graphite header and steel active state */ #logoArea a:focus-visible, #logoArea .navbar-brand:focus-visible, #logoArea .nav-link:focus-visible { outline: 2px solid #8fb1c1; outline-offset: 2px; } #logoArea .navbar-toggler { border-color: rgba(220, 230, 234, .48); margin: 21px 14px 0 0; } #logoArea .navbar-toggler-icon { filter: none; } #logoArea .btn-outline-secondary { --bs-btn-color: var(--app-header-muted); --bs-btn-border-color: #66808c; --bs-btn-hover-color: var(--brand-ink); --bs-btn-hover-bg: #8fb1c1; --bs-btn-hover-border-color: #8fb1c1; --bs-btn-active-color: var(--brand-ink); --bs-btn-active-bg: #8fb1c1; --bs-btn-active-border-color: #8fb1c1; } #logoArea .badge.text-bg-light { color: var(--app-header-fg) !important; background: rgba(255, 255, 255, .07) !important; border-color: #526974 !important; } /* brand wordmark (was an inline style attribute on the span) */ .brand-wordmark { font-weight: 800; font-size: 1.375rem; letter-spacing: -0.5px; line-height: 1.2; color: var(--app-header-fg); } /* ============================================================================ Sidebar (category menu) ============================================================================ */ #sidebar ul ul li a { font-size: 12px; } #sidebar ul { list-style: none; padding: 0; margin: 0; width: 100%; } #sidebar li a { font-weight: bold; background: transparent; color: var(--text); } #sidebar li a:hover, #sidebar li a:focus-visible { color: var(--sidebar-hover-fg); } #sidebar ul li li a { background: var(--surface-alt); padding-left: 14px; font-weight: normal; display: block; font-size: 13px; line-height: 26px; } /* Sidebar accordion (replaces jQuery slideUp/slideDown from bootshop.js) */ #sidebar .subMenu > ul { overflow: hidden; max-height: 0; transition: max-height 200ms ease; } #sidebar .subMenu.open > ul { max-height: 1000px; } /* sidebar.js adds .sidebar-no-anim while it restores the remembered open section on initial load, so that restore snaps into place — only real clicks animate. */ #sidebar.sidebar-no-anim .subMenu > ul { transition: none; } /* Active category highlight. Server-rendered on the page's own category (the listings-list .CategorySlug). The id-scoped selectors out-specify both the base sidebar rules above and Bootstrap's .nav-link.active, so no !important is needed. Colours come from --sidebar-active-{fg,bg} (per-theme, AA-checked). The inset bar keeps the brand steel as a non-text cue independent of the text contrast. */ #sidebar li a.active { color: var(--sidebar-active-fg); background: var(--sidebar-active-bg); box-shadow: inset 3px 0 0 var(--brand); } #sidebar ul li li a.active { color: var(--sidebar-active-fg); background: var(--sidebar-active-bg); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); } /* Mobile (=44px) tap targets. */ @media (max-width: 991.98px) { #sidebar.offcanvas-lg { --bs-offcanvas-width: min(82vw, 320px); } /* Comfortable >=44px touch targets: top-level toggles, child subcategories, and the buyer "Все объявления" link (an in a div directly under li.subMenu, so it matches neither .nav-link nor the ul li li a child selector). */ #sidebar .nav-link, #sidebar ul li li a, #sidebar .subMenu > div a { padding-top: .55rem; padding-bottom: .55rem; min-height: 44px; } } /* Desktop (lg+): keep the category list in view while scrolling long lot lists. */ @media (min-width: 992px) { #sidebar.offcanvas-lg { position: sticky; top: calc(var(--app-header-h) + 1rem); align-self: flex-start; max-height: calc(100vh - var(--app-header-h) - 2rem); overflow-y: auto; } } /* ============================================================================ Listings table → card layout on phones (<768px). The 7-column table would otherwise need horizontal scrolling; instead each row becomes a card and each cell shows its column label (from data-label="…") so a lot reads top-to-bottom. ============================================================================ */ @media (max-width: 767.98px) { .listings-table thead { display: none; } .listings-table, .listings-table tbody, .listings-table tr, .listings-table td { display: block; width: 100%; } .listings-table { border-collapse: separate; border-spacing: 0; } .listings-table tr { border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem; margin-bottom: .85rem; background: var(--surface); box-shadow: var(--shadow-sm); } .listings-table tr:last-child { margin-bottom: 0; } .listings-table td { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: .35rem 0; border: 0; box-shadow: none; text-align: right; overflow-wrap: anywhere; } .listings-table td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); text-align: left; flex: 0 0 7.25rem; font-size: .8125rem; line-height: 1.35; } /* first cell (address link) is the card title: full width, no label */ .listings-table td.cell-title { display: flex; justify-content: space-between; align-items: flex-start; text-align: left; font-weight: 600; border-bottom: 1px solid var(--border); padding: 0 0 .6rem; margin-bottom: .3rem; } .listings-table td.cell-title::before { display: none; } .listings-table td.cell-title .mw-24 { max-width: 100%; } .listing-card-title-link { flex: 1 1 auto; color: var(--text); font-size: 1rem; line-height: 1.3; text-decoration-thickness: 1px; text-underline-offset: .18em; white-space: normal; overflow: visible; text-overflow: clip; } .listing-note-badge { flex: 0 0 auto; margin-top: .05rem; } .listings-table .listing-cell-status { justify-content: flex-start; padding-top: 0; text-align: left; } .listings-table .listing-cell-status::before { display: none; } .listings-table .listing-cell-meta { justify-content: flex-start; flex-wrap: wrap; color: var(--text-muted); text-align: left; } .listings-table .listing-cell-meta::before { flex: 0 0 auto; } .listings-table .listing-cell-quantity { margin-top: .25rem; padding-top: .6rem; border-top: 1px solid var(--border); color: var(--text); font-size: 1.05rem; font-weight: 700; } .listings-table .listing-cell-time { color: var(--text); font-weight: 600; } .listings-table .listing-cell-time::before, .listings-table .listing-cell-quantity::before { color: var(--text-muted); font-size: .8125rem; } .listings-pagination .pagination { flex-wrap: wrap; gap: .35rem; } .listings-pagination .page-link { border-radius: var(--radius-sm); } } /* ============================================================================ Footer ============================================================================ */ #footerSection { background: var(--footer-bg); color: #fff; padding: 28px 0 44px; margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); } #footerSection a { color: #e6e6e6; font-size: .8125rem; padding: 0; line-height: 1.6; display: block; } #footerSection a:hover, #footerSection a:focus-visible { color: #fff; text-decoration: underline; } /* ============================================================================ Responsive (Bootshop-era breakpoints kept; search/carousel rules removed) ============================================================================ */ @media (min-width: 768px) and (max-width: 991px) { #logoArea .navbar-brand { margin-right: auto; } #sideManu, #topMenu { height: auto; } #logoArea .navbar-nav .nav-link { border-top: 1px solid var(--border); padding-top: 0.5rem; padding-bottom: 0.5rem; } } @media (max-width: 767px) { #logoArea .navbar-brand { margin-right: auto; } #header { margin: 0 -12px; } #sideManu, #topMenu { height: auto; } #logoArea .navbar-nav .nav-link { border-top: 1px solid var(--border); padding-top: 0.5rem; padding-bottom: 0.5rem; } } @media (max-width: 480px) { #header { margin: 0 -12px; } #sideManu, #topMenu { height: auto; } #logoArea .navbar-nav .nav-link { border-top: 1px solid var(--border); padding-top: 0.5rem; padding-bottom: 0.5rem; } } /* ============================================================================ Utilities ============================================================================ */ /* Max-width utility classes (extracted from inline style attributes) */ .mw-8 { max-width: 8rem; } .mw-10 { max-width: 10rem; } .mw-12 { max-width: 12rem; } .mw-16 { max-width: 16rem; } .mw-18 { max-width: 18rem; } .mw-22 { max-width: 22rem; } .mw-24 { max-width: 24rem; } .mw-28 { max-width: 28rem; } .mw-32 { max-width: 32rem; } .mw-36 { max-width: 36rem; } .mw-40 { max-width: 40rem; } .mw-48 { max-width: 48rem; } /* Cookie consent bar (extracted from footer_core.html for caching + CSP) */ .cookie-consent-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; padding: 12px 0; background: var(--footer-bg); color: #f5f5f5; border-top: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2); } .cookie-consent-bar .cookie-consent-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .cookie-consent-bar p { margin: 0; flex: 1 1 280px; font-size: 13px; line-height: 1.45; } .cookie-consent-bar .cookie-consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .cookie-consent-bar .btn { margin-bottom: 0; } /* ============================================================================ Collapsible report-listing form (

styled as a button) ============================================================================ */ .listing-report > summary { display: inline-block; list-style: none; cursor: pointer; } .listing-report > summary::-webkit-details-marker { display: none; } /* ============================================================================ Help "?" tooltip (Bootstrap tooltip via data-bs-custom-class="help-tooltip"). Bootstrap's default is 200px / centered — too narrow for a paragraph of help text, so widen and left-align. BS 5.3 CSS-var override; no fork of bootstrap. ============================================================================ */ .help-tooltip { --bs-tooltip-max-width: 320px; } .help-tooltip .tooltip-inner { text-align: start; }