/* Rendered in to keep the public header stable while route code loads. */ .route-loader { display: grid; min-height: calc(100vh - 120px); place-items: center; } .route-loader__spinner, .inline-loader__spinner { display: block; width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, 0.16); border-top-color: var(--primary); border-radius: 50%; animation: plg-loader-spin 0.72s linear infinite; } .inline-loader { display: inline-grid; min-height: 34px; place-items: center; vertical-align: middle; } .inline-loader__spinner { width: 24px; height: 24px; border-width: 2px; } .catalog-state--loading { min-height: 104px; place-items: center; } @keyframes plg-loader-spin { to { transform: rotate(1turn); } } @media (prefers-reduced-motion: reduce) { .route-loader__spinner, .inline-loader__spinner { animation-duration: 1.8s; } } /* Keep first paint identical to the public header after legacy CSS is ready. */ .topbar.public-topbar { --header-logo-width: 174px; --header-logo-height: 46px; --header-logo-column: 180px; grid-template-columns: var(--header-logo-column) auto minmax(0, 1fr) max-content; justify-content: stretch; gap: 16px; width: min(100%, var(--page-container)); min-height: 64px; margin-inline: auto; padding: 8px var(--container-padding); overflow: visible; } .topbar.public-topbar .brand { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: flex-start; width: var(--header-logo-column); height: var(--header-logo-height); min-width: var(--header-logo-column); overflow: hidden; } .topbar.public-topbar .brand-logo { display: block; width: var(--header-logo-width); height: var(--header-logo-height); object-fit: contain; object-position: left center; } .topbar.public-topbar .region-select { grid-column: 2; grid-row: 1; width: 56px; min-width: 56px; } .topbar.public-topbar .region-select select { min-height: 38px; padding: 6px 24px 6px 10px; text-align: center; } .topbar.public-topbar .top-actions { grid-column: 4; grid-row: 1; justify-self: end; justify-content: flex-end; flex-wrap: nowrap; gap: 12px; } .topbar.public-topbar .public-nav { grid-column: 3; grid-row: 1; justify-self: center; align-items: center; gap: 0; overflow: visible; padding: 0; } .topbar.public-topbar .public-nav a { position: relative; display: inline-flex; min-height: 38px; align-items: center; border: 0; border-radius: 0; background: transparent; color: var(--muted); padding: 0 16px; font-size: 0.9rem; font-weight: 800; white-space: nowrap; } .topbar.public-topbar .public-nav a + a::before { content: ""; position: absolute; top: 11px; bottom: 11px; left: 0; width: 1px; background: rgba(255, 59, 31, 0.48); } .topbar.public-topbar .public-nav a:hover, .topbar.public-topbar .public-nav a.active, .topbar.public-topbar .public-nav a[aria-current="page"] { color: #fff; } .topbar.public-topbar .public-nav a.active::after, .topbar.public-topbar .public-nav a[aria-current="page"]::after { content: ""; position: absolute; right: 16px; bottom: 3px; left: 16px; height: 2px; background: var(--primary); } .topbar.public-topbar .public-nav .public-nav-partner { margin-left: 14px; } .topbar.public-topbar .public-nav .public-nav-partner::before { background: rgba(255, 59, 31, 0.72); } .topbar.public-topbar .header-button { min-height: 38px; max-width: 148px; padding: 9px 14px; clip-path: none; box-shadow: none; } .topbar.public-topbar .header-login { background: rgba(16, 19, 24, 0.74); color: var(--ink); } .topbar.public-topbar .header-register { border-color: rgba(255, 59, 31, 0.72); background: rgba(16, 19, 24, 0.74); color: var(--ink); } .topbar.public-topbar .header-button:hover, .topbar.public-topbar .header-register:hover { border-color: rgba(255, 59, 31, 0.95); color: #fff; } .topbar.public-topbar .public-mobile-menu { display: none; } @media (max-width: 1400px) { .topbar.public-topbar { gap: 14px; padding-inline: var(--container-padding); } .topbar.public-topbar .public-nav a { padding-inline: 13px; font-size: 0.86rem; } .topbar.public-topbar .header-button { max-width: 142px; padding-inline: 12px; } } @media (max-width: 1040px) { .topbar.public-topbar { --header-logo-width: 158px; --header-logo-column: 164px; gap: 10px; } .topbar.public-topbar .public-nav a { padding-inline: 10px; font-size: 0.82rem; } .topbar.public-topbar .public-nav .public-nav-partner { margin-left: 6px; } .topbar.public-topbar .top-actions { gap: 8px; } .topbar.public-topbar .header-button { max-width: 128px; padding-inline: 10px; font-size: 0.84rem; } } @media (max-width: 860px) { .topbar.public-topbar { position: sticky; --header-logo-width: 156px; --header-logo-height: 42px; --header-logo-column: 162px; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; min-height: 60px; padding: 9px 12px; } .topbar.public-topbar .brand { width: var(--header-logo-column); height: var(--header-logo-height); min-width: 0; } .topbar.public-topbar .brand-logo { width: var(--header-logo-width); height: var(--header-logo-height); } .topbar.public-topbar .region-select { grid-column: 2; display: block; } .topbar.public-topbar .public-nav, .topbar.public-topbar .top-actions { display: none; } .topbar.public-topbar .public-mobile-menu { position: relative; grid-column: 3; display: block; } .topbar.public-topbar .public-mobile-menu summary { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; background: rgba(16, 19, 24, 0.74); color: var(--ink); padding: 8px 12px; font-weight: 800; list-style: none; cursor: pointer; } .topbar.public-topbar .public-mobile-menu summary::-webkit-details-marker { display: none; } .topbar.public-topbar .public-mobile-menu nav { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; display: grid; width: min(260px, calc(100vw - 24px)); gap: 2px; border: 1px solid rgba(255, 59, 31, 0.36); border-radius: 8px; background: rgba(5, 6, 9, 0.98); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.54); padding: 8px; } .topbar.public-topbar .public-mobile-menu a, .topbar.public-topbar .public-mobile-menu button { display: flex; min-height: 40px; align-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); padding: 9px 10px; font: inherit; font-weight: 800; text-align: left; } .topbar.public-topbar .public-mobile-menu a:hover, .topbar.public-topbar .public-mobile-menu button:hover, .topbar.public-topbar .public-mobile-menu a.active, .topbar.public-topbar .public-mobile-menu a[aria-current="page"] { background: rgba(255, 59, 31, 0.12); color: #fff; } } @media (max-width: 720px) { .topbar.public-topbar { --header-logo-width: 146px; --header-logo-column: 150px; } .topbar.public-topbar .region-select { width: 52px; min-width: 52px; } .topbar.public-topbar .region-select select { min-height: 36px; } }