landmark wraps the content block in layout.html (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-content { display: contents; } /* ============================================================================ Home page ============================================================================ */ .home-start { display: grid; gap: 1.25rem; padding: 1.25rem; margin-bottom: 1rem; background: var(--surface-alt); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .home-kicker { color: var(--brand-accent-fg); font-size: .875rem; font-weight: 700; text-transform: uppercase; } .home-title { margin: 0; color: var(--text); font-size: 2rem; line-height: 1.15; font-weight: 800; } .home-subtitle { max-width: 42rem; margin: .55rem 0 0; color: var(--text-muted); font-size: 1.05rem; } .home-actions { display: flex; flex-wrap: wrap; gap: .5rem; } .home-actions .btn { min-height: 44px; } .home-section { padding: 1rem 0; border-top: 1px solid var(--border); } .home-section-title { margin: 0 0 .75rem; color: var(--text); font-size: 1.125rem; font-weight: 700; line-height: 1.25; } .home-intro-body { white-space: pre-wrap; color: var(--text); } .home-legal { color: var(--text-muted); } @media (max-width: 767.98px) { .home-start { padding: 1rem; } .home-title { font-size: 1.7rem; } .home-subtitle { font-size: 1rem; } .home-actions { display: grid; grid-template-columns: 1fr; } .home-actions .btn { width: 100%; justify-content: center; } } /* 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); } #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: #fff; background-color: var(--brand); } #logoArea .navbar-nav .nav-link { padding: 10px; color: var(--text); 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 light header AND on the steel active state */ #logoArea a:focus-visible, #logoArea .navbar-brand:focus-visible, #logoArea .nav-link:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; } #logoArea .navbar-toggler { border-color: rgba(0, 0, 0, 0.35); margin: 21px 14px 0 0; } #logoArea .navbar-toggler-icon { filter: none; } /* 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(--text); } /* ============================================================================ 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; }