/* LocalModels.com — Profile page desktop styles (Phase 2.1 → Round 2) Adapted from designs/styles-v2.css. All custom variables prefixed --lm-*. */ /* ══════════════════════════════════════════════════════════════ SNGINE CHROME OVERRIDE — hide Sngine sidebar/topbar everywhere Fires for any page that has Profile-only specific rules use .lm-profile-active. ══════════════════════════════════════════════════════════════ */ /* R7 #1: scrollbar gutter mirrored on both edges keeps frame centered at >1440px */ html.lm-active { /* `stable` reserves the right scrollbar gutter so layout doesn't shift when content grows past the viewport. We previously used `both-edges` which ALSO reserved a gutter on the LEFT — that left gutter showed the html background as a vertical strip ~17px wide, and on every scroll the browser repainted it (visible flicker, scroll-triggered). Right-edge-only `stable` removes the left strip entirely. */ scrollbar-gutter: stable; } html.lm-chrome-active .x-sidebar-width, html.lm-chrome-active .x-sidebar-fixed, html.lm-chrome-active .x-sidebar-width + *[class*="x-sidebar"] { display: none !important; } html.lm-chrome-active .x-content-width { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } /* Remove Sngine's content-column top border + 5px row gap on chrome pages. The fixed .lm-topbar already draws the top frame line; the legacy .col-lg-* border-top (style.css) was stacking just below it as a visible "double line" under the header (contact / home / booking / about, etc.). */ html.lm-chrome-active .x-content-width > .x_content_row { margin-top: 0 !important; } html.lm-chrome-active .x-content-width > .x_content_row > .col-lg-8, html.lm-chrome-active .x-content-width > .x_content_row > .col-lg-12 { border-top: none !important; } html.lm-chrome-active .main-wrapper { padding-right: 0 !important; } html.lm-chrome-active .top-bar { display: none !important; } /* NOTE: .bottom-bar is the admin "logged in as / Switch Back" banner — it must stay visible under the LM chrome. Center it within the content area (clear of the 240px sidebar on desktop) and lift it above the mobile bottom nav. */ html.lm-chrome-active .bottom-bar { left: calc(50% + 120px); z-index: 1100; } @media (max-width: 768px) { html.lm-chrome-active .bottom-bar { left: 50%; bottom: 76px; /* clear the mobile bottom nav */ } } /* Hide Sngine's topbar search wrapper */ html.lm-chrome-active .search-wrapper-prnt, html.lm-chrome-active .hdr_multi_btns, html.lm-chrome-active .x_upgrade_btn_wrp { display: none !important; } /* R15 #5: Hide ONLY the right-side online users widget. Keep chat-sidebar so opening chat works. */ html.lm-chrome-active [class*="x_online"], html.lm-chrome-active [class*="online_users"] { display: none !important; } /* Chat sidebar: keep visible (Sngine handles its own slide-in/out) but ensure it's pinned to viewport bottom */ html.lm-chrome-active .chat-sidebar { bottom: 0 !important; z-index: 250; } /* Prevent Sngine's row from adding spacing */ html.lm-chrome-active .row.m-0 { display: block !important; } /* R17 fix v2: body itself is gray (outside frame). body::after paints white centered 1440px frame on top. */ html.lm-chrome-active body { background: #eef2f6 !important; } /* Reset container padding/max-width inside non-profile pages */ html.lm-chrome-active .container { max-width: none !important; padding: 0 !important; } /* Global chrome layout — sidebar 240px + topbar 64px reserved */ html.lm-chrome-active body { padding-left: max(240px, calc((100vw - 1440px) / 2 + 240px)); padding-right: max(0px, calc((100vw - 1440px) / 2)); padding-top: 64px; } /* R18 fix: body bg gray; body::after paints white centered frame WITH border-box so the 1px borders sit INSIDE the 1440 width (visible even when viewport == 1440) */ html.lm-chrome-active body::before { display: none; } html.lm-chrome-active body::after { content: ""; display: block; position: fixed; top: 0; bottom: 0; left: max(0px, calc((100vw - 1440px) / 2)); width: min(1440px, 100vw); background: #ffffff; border-left: 1px solid #cbd5e1; border-right: 1px solid #cbd5e1; box-sizing: border-box; z-index: -1; } /* R17 fix: profile page also uses chrome-active body::before/::after — DON'T hide them. Profile page padding is handled by .lm-profile-page itself, so reset body padding for profile only. */ html.lm-profile-active body { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; } /* ══════════════════════════════════════════════════════════════ CENTERED FRAME — entire app max-width 1440px centered At viewports > 1440px: equal whitespace on both sides ══════════════════════════════════════════════════════════════ */ /* The sidebar and topbar use CSS calc() to offset from viewport center */ /* At ≤1440px: margin = 0, sidebar at left:0, topbar at left:240px */ /* At >1440px: margin = (vw-1440)/2, elements shift right proportionally */ /* ══════════════════════════════════════════════════════════════ LM SIDEBAR (240px, position: fixed) ══════════════════════════════════════════════════════════════ */ .lm-sidebar { position: fixed; /* Center the frame: sidebar starts at (viewport - 1440px)/2, min 0 */ left: max(0px, calc((100vw - 1440px) / 2)); top: 0; bottom: 0; width: 240px; background: #fff; /* R20b: explicit left+right borders so frame edges stay visible at top (above topbar/sidebar would otherwise hide body::after's borders) */ border-left: 1px solid var(--lm-border); border-right: 1px solid var(--lm-border); display: flex; flex-direction: column; padding: 18px 12px 14px; gap: 8px; overflow: visible auto; z-index: 200; scrollbar-width: none; } .lm-sidebar::-webkit-scrollbar { display: none; } .lm-sidebar > .lm-account-wrap { flex-shrink: 0; margin-top: auto; } .lm-sidebar > .lm-nav { flex-shrink: 0; } .lm-sidebar > .lm-create-wrap { flex-shrink: 0; } .lm-sidebar > .lm-brand { flex-shrink: 0; } .lm-sidebar > .lm-sidebar-spacer { flex: 1 1 0; min-height: 0; } .lm-sidebar::-webkit-scrollbar { display: none; } /* Brand */ /* R20b: no divider between logo and nav; logo sits naturally with small top breathing room */ .lm-brand { display: flex; align-items: center; gap: 10px; padding: 6px 6px 8px; border-bottom: none; margin-bottom: 4px; color: var(--lm-text); text-decoration: none; } .lm-brand:hover { text-decoration: none; color: var(--lm-text); } .lm-brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--lm-primary-soft); color: var(--lm-primary-strong); border: 1px solid var(--lm-primary-soft-2); flex-shrink: 0; } .lm-brand-name { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--lm-text); line-height: 1.2; } .lm-brand-name span { color: var(--lm-muted-2); font-weight: 600; font-size: 0.72em; } .lm-brand-name .lm-brand-tm { font-size: 0.58em; vertical-align: super; font-weight: 600; color: var(--lm-muted-2); margin-left: 1px; line-height: 0; } .lm-brand-tag { font-size: 10.5px; color: var(--lm-muted); font-family: var(--lm-font-mono); letter-spacing: 0.02em; } /* Nav */ .lm-nav { display: flex; flex-direction: column; gap: 2px; } .lm-nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--lm-text); font-weight: 500; font-size: 13.5px; position: relative; cursor: pointer; } .lm-nav-item:hover { background: var(--lm-primary-soft); text-decoration: none; color: var(--lm-text); } .lm-nav-item.is-active { background: var(--lm-primary-soft); color: var(--lm-primary-strong); } .lm-nav-item.is-active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; background: var(--lm-primary-strong); border-radius: 0 3px 3px 0; } /* ── Brands nav: inline-accordion submenu (mirrors the "More" button pattern above). The Brands row has the main nav-item + a chevron caret; click on the caret toggles `.is-open` on the wrap and the submenu expands inline, pushing siblings down. */ .lm-nav-row-wrap { position: relative; } .lm-nav-row { display: flex; align-items: stretch; gap: 2px; } .lm-nav-row .lm-nav-item-grow { flex: 1; min-width: 0; } .lm-nav-row-caret { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 36px; background: transparent; border: none; border-radius: 8px; color: var(--lm-muted); cursor: pointer; flex: none; transition: background .12s, color .12s, transform .15s; } .lm-nav-row-caret:hover { background: var(--lm-primary-soft, #f3f8f5); color: var(--lm-text); } .lm-nav-row-caret svg { transition: transform .15s ease; } .lm-nav-row-caret.is-open svg { transform: rotate(180deg); } /* Submenu — reuses the .lm-nav-submenu / .lm-nav-subitem styles already defined for the More button, plus a few additions for the picture thumbnails specific to the Brands submenu. */ .lm-nav-row-wrap .lm-nav-submenu { display: none; } .lm-nav-row-wrap.is-open .lm-nav-submenu { display: block; } .lm-nav-subitem-primary { color: var(--lm-primary-strong, #00363f) !important; font-weight: 600 !important; } .lm-nav-subitem-primary strong { color: inherit; font-weight: 700; } .lm-nav-subitem-pic { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; background: var(--lm-surface-2, #f1f5f9); flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: var(--lm-text); } .lm-nav-subitem-create { color: var(--lm-primary-strong, #00363f) !important; font-weight: 600 !important; } .lm-nav-subitem-create svg { color: currentColor; } .lm-nav-badge { margin-left: auto; font-size: 11px; font-weight: 600; background: var(--lm-primary); color: #fff; padding: 1px 7px; border-radius: 999px; } .lm-nav-badge-gold { background: var(--lm-gold); } /* More submenu */ /* R9 quick: remove default