/* ============================================================ VisiKvepalai – VK Clean Theme Layer Default: Soft Pearl (light) Optional: Dark mode (add class "vk-theme-dark" on ) Built to override Premium-Lux/Gamma safely with minimal conflicts. ============================================================ */ /* ========================= 1) THEME TOKENS ========================= */ /* DEFAULT = Soft Pearl */ :root{ --bg:#F4F1EC; --panel:#FFFFFF; --panel2:#F7F4EF; --stroke:#E7E2DA; --text:#1B1B1F; --muted:#7A766F; /* Accent: champagne */ --gold:#C9A75F; --gold2:#E2C98B; --shadow: 0 18px 40px rgba(17,17,17,.10); --glow: 0 0 0.8rem rgba(201,167,95,.16), 0 0 2.2rem rgba(201,167,95,.10); --r: 18px; } /* OPTIONAL = Dark */ body.vk-theme-dark{ --bg:#0B0B0E; --panel:#121218; --panel2:#161622; --stroke:#242434; --text:#F5F5F7; --muted:#A7A7B0; --gold:#C8A45A; --gold2:#E7C77B; --shadow: 0 18px 40px rgba(0,0,0,.55); --glow: 0 0 0.8rem rgba(200,164,90,.25), 0 0 2.2rem rgba(200,164,90,.18); } /* ========================= 2) BASE ========================= */ html, body{ background:var(--bg) !important; color:var(--text) !important; } a{ color:inherit; } a:hover{ text-decoration:none; } ::selection{ background: color-mix(in srgb, var(--gold) 22%, transparent); } body *{ -webkit-tap-highlight-color: transparent; } /* Common surfaces */ .item, .card, .products .item, .products .simple .item, .products .standard .item{ background: var(--panel) !important; border: 1px solid var(--stroke) !important; border-radius: var(--r) !important; } /* Safer link color (optional) */ body a:hover{ color: var(--gold) !important; } /* ========================= 3) HEADER (light by default) ========================= */ header, .header, #header{ background: rgba(255,255,255,.78) !important; backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,.06); } body.vk-theme-dark header, body.vk-theme-dark .header, body.vk-theme-dark #header{ background: rgba(11,11,14,.80) !important; border-bottom: 1px solid rgba(36,36,52,.65); } /* Ensure logo/links are readable */ header .logo a, .logo a{ color: var(--text) !important; } body.vk-theme-dark header .logo a, body.vk-theme-dark .logo a{ color: var(--text) !important; } /* Hide mobile search block if needed */ @media (max-width: 767px){ #menu-search, .header-search-mobile{ display:none !important; } } /* uMessages button in header (tablet/desktop) */ @media (min-width: 768px){ header .vk-um-top a{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 14px; border-radius:999px; text-decoration:none !important; font-weight:700; font-size:13px; line-height:1; white-space:nowrap; border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent); background: color-mix(in srgb, var(--panel2) 78%, transparent); color: var(--text) !important; transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease; } @media (hover:hover){ header .vk-um-top a:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--gold) 55%, var(--stroke)); box-shadow: var(--shadow); } } } /* ========================= 4) BUTTONS / INPUTS ========================= */ .vk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:999px; border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent); background: linear-gradient(180deg, var(--panel2), var(--panel)); color: var(--text); font-weight:700; box-shadow: 0 10px 24px rgba(0,0,0,.10); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } @media (hover:hover){ .vk-btn:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--gold) 55%, var(--stroke)); box-shadow: var(--shadow), var(--glow); } } .vk-btn:active{ transform: translateY(0); } .vk-btn--gold{ border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--gold2) 22%, transparent), color-mix(in srgb, var(--gold) 10%, transparent) ); } /* Search inputs */ .vk-input{ flex: 1 1 80px; height: 46px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent); background: color-mix(in srgb, var(--panel) 65%, transparent); color: var(--text); padding: 0 16px; outline:none; transition: box-shadow .18s ease, border-color .18s ease; } .vk-input::placeholder{ color: color-mix(in srgb, var(--muted) 85%, transparent); } .vk-input:focus{ border-color: color-mix(in srgb, var(--gold) 60%, var(--stroke)); box-shadow: var(--glow); } /* ========================= 5) HERO (optional block you used) ========================= */ .vk-wrap{ max-width: 1180px; margin: 0 auto; padding: 0 14px; } h1,h2,h3{ letter-spacing:-0.02em; } .vk-h1{ font-size: clamp(30px, 4vw, 54px); line-height: 1.02; font-weight: 800; } .vk-sub{ color: var(--muted); font-size: 15px; line-height: 1.45; } .vk-hero{ position: relative; padding: 28px 0 18px; } .vk-heroCard{ position: relative; border-radius: calc(var(--r) + 6px); background: radial-gradient(1200px 340px at 20% 0%, color-mix(in srgb, var(--gold2) 18%, transparent), transparent 55%), radial-gradient(900px 320px at 85% 10%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 50%), linear-gradient(180deg, color-mix(in srgb, var(--panel2) 92%, transparent), color-mix(in srgb, var(--panel) 92%, transparent)); border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent); box-shadow: var(--shadow); overflow: hidden; } .vk-heroInner{ padding: 22px 18px; } .vk-heroGlow{ position:absolute; inset:-2px; pointer-events:none; background: radial-gradient(600px 220px at 50% 0%, color-mix(in srgb, var(--gold2) 18%, transparent), transparent 60%); mix-blend-mode: screen; opacity:.65; } .vk-search{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; } /* Mobile hero compaction */ @media (max-width: 767px){ .vk-hero{ padding: 10px 0 !important; } .vk-heroGlow{ display:none !important; } .vk-heroCard{ padding: 12px 14px !important; margin-bottom: 10px !important; border-radius: 14px !important; } .vk-heroInner{ padding: 0 !important; } .vk-h1{ font-size: 16px !important; margin-bottom: 4px !important; } .vk-sub{ font-size: 12px !important; } /* search form stacked */ .vk-search{ display:flex; flex-direction:column; gap:10px; } .vk-search .vk-input{ width:100%; box-sizing:border-box; height:46px !important; min-height:46px !important; padding:0 16px !important; line-height:46px !important; border-radius:24px !important; } .vk-search .vk-btn{ width:100%; height:44px; line-height:44px; white-space:nowrap; border-radius:24px; } } /* ========================= 6) VK CARD v2 (loop-single.php) ========================= */ .vk-card2{ background: var(--panel); border: 1px solid color-mix(in srgb, var(--stroke) 85%, transparent); border-radius: var(--r); overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.10); transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease; } @media (hover:hover){ .vk-card2:hover{ transform: translateY(-4px); border-color: color-mix(in srgb, var(--gold2) 55%, var(--stroke)); box-shadow: var(--shadow), var(--glow); } } .vk-card2__media{ display:block; position:relative; aspect-ratio: 4 / 5; background: color-mix(in srgb, var(--bg) 70%, transparent); } .vk-card2__media img{ width:100%; height:100%; object-fit:cover; display:block; } .vk-card2__media.no-image img{ object-fit:contain; opacity:.95; } .vk-badge2{ position:absolute; top:12px; left:12px; padding: 7px 10px; border-radius: 999px; font-weight: 900; font-size: 12px; letter-spacing: .02em; border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent); background: color-mix(in srgb, var(--panel) 70%, transparent); backdrop-filter: blur(8px); display:inline-flex; align-items:center; gap:8px; } .vk-badge2--prem{ border-color: color-mix(in srgb, var(--gold2) 55%, transparent); color:#111; background: linear-gradient(180deg, color-mix(in srgb, var(--gold2) 92%, white), color-mix(in srgb, var(--gold) 92%, black) ); } body.vk-theme-dark .vk-badge2--prem{ color:#0b0b0e; } .vk-card2__actions{ position:absolute; top:10px; right:10px; display:flex; gap:8px; align-items:center; } .vk-card2__actions .vk-act{ display:inline-flex; border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent); background: color-mix(in srgb, var(--panel) 60%, transparent); border-radius: 12px; padding: 6px 8px; backdrop-filter: blur(10px); } .vk-card2__time{ position:absolute; left:12px; bottom:12px; font-size: 12px; color: color-mix(in srgb, var(--text) 86%, transparent); padding: 7px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent); background: color-mix(in srgb, var(--panel) 60%, transparent); backdrop-filter: blur(10px); display:inline-flex; gap:8px; align-items:center; } .vk-card2__body{ padding: 12px 12px 14px; position:relative; } .vk-card2__title{ display:block; font-weight: 900; color: var(--text); letter-spacing: -0.01em; line-height: 1.25; font-size: 14px; max-height: 2.6em; overflow:hidden; } .vk-card2__bottom{ margin-top: 10px; display:flex; align-items:center; justify-content:space-between; gap: 10px; } .vk-card2__price{ color: var(--gold); font-weight: 900; font-size: 16px; letter-spacing: -0.01em; } .vk-card2__price--na{ color: color-mix(in srgb, var(--muted) 85%, transparent); } .vk-card2__loc{ color: color-mix(in srgb, var(--muted) 92%, transparent); font-size: 12px; display:inline-flex; gap:8px; align-items:center; } /* Disable hover lift on touch devices (prevents “mirksėjimą”) */ @media (hover: none){ .vk-card2:hover{ transform:none !important; } } /* ========================= 7) HOME / PREMIUM GRID (safe, no overflow) ========================= */ .home-container .inside, .home-container .inner{ width: 100% !important; max-width: 100% !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box !important; } /* Premium container (Gamma) */ #premium.products.grid{ width: 100% !important; max-width: 100% !important; } #premium .prod-wrap{ float:none !important; clear:none !important; width:100% !important; margin:0 !important; padding:0 12px !important; box-sizing:border-box !important; display:grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:10px !important; } @media (min-width: 768px){ #premium .prod-wrap{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap:12px !important; padding:0 16px !important; } } @media (min-width: 1200px){ #premium .prod-wrap{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap:14px !important; } } /* Ensure each card is a proper grid item */ #premium .prod-wrap > .vk-card2{ float:none !important; width:auto !important; margin:0 !important; min-width:0 !important; height:100%; } /* Watchlist button stays in top-right of media */ .vk-card2__actions .wl-btn{ position:absolute !important; top:10px; right:10px; z-index:5; } /* Prevent any horizontal scroll coming from premium block */ #premium, #premium .block, #premium .prod-wrap{ overflow-x: clip; } /* ========================= 8) SEARCH PAGE – make full width on mobile ========================= */ body#body-search .content, body#body-search .content .inside, body#body-search .content .inner, body#body-search #main, body#body-search .container, body#body-search .wrap{ width: 100% !important; max-width: 100% !important; } body#body-search .content .inside, body#body-search .content .inner{ padding-left: 8px !important; padding-right: 8px !important; margin-left: 0 !important; margin-right: 0 !important; } /* listings count badge */ body#body-search .search-top-bar .titles-top span{ display:inline-block !important; margin-top: 8px !important; padding: 6px 10px !important; border-radius: 999px !important; background: var(--panel2) !important; border: 1px solid var(--stroke) !important; color: var(--muted) !important; font-size: 12px !important; line-height: 1 !important; letter-spacing: .2px; } body#body-search .search-top-bar .titles-top span b, body#body-search .search-top-bar .titles-top span strong{ color: var(--gold) !important; } /* ========================= 9) SUB CATEGORY MENU ========================= */ #sub-cat{ background: var(--panel) !important; border-top: 1px solid var(--stroke) !important; border-bottom: 1px solid var(--stroke) !important; padding: 12px 8px !important; } #sub-cat .inside{ background: transparent !important; } #sub-cat a{ background: var(--panel2) !important; color: var(--text) !important; border: 1px solid var(--stroke) !important; border-radius: 14px !important; padding: 8px 14px !important; font-size: 14px; transition: all .2s ease; } @media (hover:hover){ #sub-cat a:hover{ background: color-mix(in srgb, var(--gold) 88%, white) !important; color: #111 !important; border-color: color-mix(in srgb, var(--gold) 65%, var(--stroke)) !important; } } #sub-cat a.active, #sub-cat a.current{ background: color-mix(in srgb, var(--gold) 88%, white) !important; color: #111 !important; border-color: color-mix(in srgb, var(--gold) 65%, var(--stroke)) !important; } /* remove old scroll arrows */ #sub-cat .nice-scroll-left, #sub-cat .nice-scroll-right{ display:none !important; } /* ========================= 10) LOAD MORE BUTTON ========================= */ #inf-more-wrap{ display:flex !important; justify-content:center !important; margin: 30px 0 40px !important; } #inf-more{ background: color-mix(in srgb, var(--gold) 88%, white) !important; color: #111 !important; border: none !important; padding: 14px 26px !important; border-radius: 20px !important; font-weight: 800 !important; font-size: 15px !important; min-width: 200px; transition: all .25s ease; box-shadow: 0 8px 20px rgba(201,167,95,.25); } @media (hover:hover){ #inf-more:hover{ background: color-mix(in srgb, var(--gold2) 92%, white) !important; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(201,167,95,.30); } } @media (max-width: 767px){ #inf-more{ width:100% !important; max-width:320px; } } /* ========================= 11) ITEM PAGE – description/readability ========================= */ body#body-item .text, body#body-item .description, body#body-item .desc, body#body-item .item-desc, body#body-item #description, body#body-item .item-description{ color: var(--text) !important; opacity: 1 !important; font-size: 15px !important; line-height: 1.6 !important; } body#body-item .text p, body#body-item .item-description p{ color: var(--text) !important; } body#body-item .text *, body#body-item .item-description *{ color: var(--text) !important; } /* Item title */ body#body-item #listing .item .basic h1{ color: var(--text) !important; font-size: 22px; line-height: 1.3; margin-bottom: 12px; letter-spacing: .3px; } body#body-item #listing .item .basic h1 span{ color: var(--gold); } /* ========================= 12) ITEM PAGE – ATTRIBUTES (custom-fields) FINAL ========================= */ body#body-item .custom-fields{ position: relative; background: linear-gradient(145deg, var(--panel), var(--panel2)) !important; border: 1px solid var(--stroke) !important; border-radius: 20px !important; padding: 18px 16px !important; box-shadow: var(--shadow); overflow: hidden; border-left: 4px solid var(--gold) !important; } /* Full width on mobile (one reliable method) */ @media (max-width: 767px){ body#body-item .custom-fields{ width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; border-radius: 0 !important; } } body#body-item .custom-fields h2{ color: var(--text) !important; font-size: 16px !important; margin: 0 0 14px 0 !important; } body#body-item .custom-fields .list{ background: transparent !important; max-width: 100% !important; } body#body-item .custom-fields .field{ display: grid !important; grid-template-columns: 1fr max-content !important; column-gap: 12px !important; row-gap: 4px !important; align-items: start !important; padding: 10px 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent) !important; background: transparent !important; } body#body-item .custom-fields .field:last-child{ border-bottom: none !important; } body#body-item .custom-fields .name{ color: var(--muted) !important; min-width: 0 !important; overflow-wrap: anywhere !important; } body#body-item .custom-fields .value{ color: var(--text) !important; font-weight: 700 !important; justify-self: end !important; text-align: right !important; max-width: min(60vw, 520px) !important; overflow-wrap: anywhere !important; } /* Allow some short values to stay on one line (brand/condition/transaction) */ body#body-item .custom-fields .field.nameBrendas .value, body#body-item .custom-fields .field.name.item-condition .value, body#body-item .custom-fields .field.name.item-transaction .value{ white-space: nowrap !important; } /* ========================= 13) CTA under price (chat + watchlist) FINAL ========================= */ /* Hide old price if you use vk-cta__price */ #listing .item .basic .price{ display:none !important; } .vk-cta{ margin: 14px 0 18px; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent); box-shadow: var(--shadow); } .vk-cta__price{ font-size: 32px; line-height: 1.1; font-weight: 900; color: var(--gold); margin: 0 0 12px 0; text-align: left; } .vk-cta__actions{ display:flex; gap:12px; align-items:center; } @media (max-width: 767px){ .vk-cta__actions{ flex-direction: column; } } .vk-cta__btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 14px 16px; min-height: 52px; width: 100%; border-radius: 14px; font-weight: 900; text-decoration:none !important; border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent); background: var(--panel2); color: var(--text) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } @media (hover:hover){ .vk-cta__btn:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--gold) 55%, var(--stroke)); box-shadow: var(--shadow); } } /* Chat (keep readable) */ .vk-cta__chat{ background: var(--panel2); } /* Watchlist button inside wrapper (span/a/button) */ .vk-cta__save{ padding:0 !important; background:transparent !important; border:none !important; width:100%; } .vk-cta__save .wl-btn, .vk-cta__save a, .vk-cta__save button{ display:flex !important; align-items:center; justify-content:center; width:100% !important; min-height:52px; padding: 14px 16px; border-radius: 14px; font-weight: 900; text-decoration:none !important; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--gold2) 92%, white), color-mix(in srgb, var(--gold) 92%, black) ) !important; color: #111 !important; } @media (hover:hover){ .vk-cta__save .wl-btn:hover, .vk-cta__save a:hover, .vk-cta__save button:hover{ transform: translateY(-1px); filter: brightness(1.02); } } /* ========================= 14) MOBILE TOP LINKS + USER MENU (single coherent set) ========================= */ .mobile-block.isMobile{ display:flex; align-items:center; gap:10px; } .mobile-block.isMobile a.m-login, .mobile-block.isMobile a.m-account, .mobile-block.isMobile a.m-messages{ padding:8px 10px; border-radius:12px; font-weight:700; font-size:13px; line-height:1; text-decoration:none; } .mobile-block.isMobile a.m-messages{ position:relative; } .mobile-block.isMobile a.m-messages .counter{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; padding:0 5px; } /* Mobile header links */ @media (max-width: 767px){ header .right.isDesktop.isTablet{ display:none !important; } header .mobile-block.isMobile{ display:flex !important; align-items:center; justify-content:flex-end; gap:12px; font-size:12px !important; height:auto; margin:0; float:none; } header .vk-m-toplinks{ display:flex; align-items:center; gap:12px; margin-right:6px; } header .vk-m-toplinks a.vk-m-link{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:6px 10px; border-radius:10px; font-size:13px !important; line-height:1 !important; white-space:nowrap; text-decoration:none; background: transparent !important; border: 0 !important; box-shadow:none !important; color: var(--text) !important; /* light default */ } body.vk-theme-dark header .vk-m-toplinks a.vk-m-link{ color: var(--text) !important; } /* hide extra items if they exist */ .vk-m-toplinks .vk-m-myitems, .vk-m-toplinks .vk-m-profile, .vk-m-toplinks .vk-m-alerts, .vk-m-toplinks .vk-m-logout{ display:none !important; } } /* Menu cover behavior */ #menu-cover{ display:none; pointer-events:none; } #menu-cover.active{ display:block; pointer-events:auto; } /* Allow dropdown user-menu on mobile (JS toggles .open) */ @media (max-width: 767px){ .user-menu{ display:block !important; } .user-menu{ position:absolute; top:60px; right:15px; width:220px; border-radius:14px; box-shadow: 0 10px 40px rgba(0,0,0,.18); display:none; z-index:9999; background: var(--panel) !important; border: 1px solid var(--stroke) !important; } body.vk-theme-dark .user-menu{ background: #1c1c1e !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 10px 40px rgba(0,0,0,.40); } .user-menu.open{ display:block; } header .user-menu .ins{ display:none !important; } header .user-menu.open .ins{ display:block !important; } header .user-menu .ins{ font-size:14px !important; line-height:1.25 !important; color: var(--text) !important; } header .user-menu .ins a, header .user-menu .ins strong{ font-size:14px !important; color: var(--text) !important; } header .user-menu .ins a{ display:block; padding:12px 16px; text-decoration:none; } header .user-menu .ins a:hover{ background: color-mix(in srgb, var(--stroke) 30%, transparent); } header .user-menu .ins .line{ height:1px; margin:8px 0; background: color-mix(in srgb, var(--stroke) 55%, transparent); } } /* ============================================================ SOFT PEARL PRO (override) - Cleaner white/grey - More contrast & depth Paste at the VERY END of vk-clean-softpearl-dark-optional.css ============================================================ */ /* 1) TOKENS – make it more Apple-like (less beige) */ :root{ --bg:#F7F7F8; --panel:#FFFFFF; --panel2:#F3F4F6; --stroke:#E5E7EB; --text:#111111; --muted:#6B7280; /* Accent: champagne but more subtle */ --gold:#C9A75F; --gold2:#E7D3A0; --shadow: 0 18px 45px rgba(0,0,0,.10); --glow: 0 0 0.7rem rgba(201,167,95,.14), 0 0 2rem rgba(201,167,95,.08); } /* 2) Header – crisp white, not creamy */ header, .header, #header{ background:#FFFFFF !important; border-bottom: 1px solid var(--stroke) !important; } /* 3) Cards – add depth (your cards were too flat) */ .vk-card2, .item, .card, .products .item, .products .simple .item, .products .standard .item{ box-shadow: 0 8px 25px rgba(0,0,0,.06) !important; } @media (hover:hover){ .vk-card2:hover{ box-shadow: 0 18px 40px rgba(0,0,0,.12) !important; } } /* 4) Search results page – make content look “clean” */ body#body-search{ background: var(--bg) !important; } /* 5) Hero card – more Apple “white card”, less creamy gradient */ .vk-heroCard{ background: #FFFFFF !important; border: 1px solid var(--stroke) !important; box-shadow: 0 20px 55px rgba(0,0,0,.08) !important; } .vk-heroGlow{ opacity: .35 !important; /* keep a hint, not too much */ } /* 6) Inputs – slightly clearer */ .vk-input{ background: #FFFFFF !important; border-color: var(--stroke) !important; } .vk-input:focus{ border-color: color-mix(in srgb, var(--gold) 55%, var(--stroke)) !important; box-shadow: 0 0 0 4px rgba(201,167,95,.14) !important; } /* 7) Prices – keep premium but readable */ .vk-card2__price, .vk-cta__price{ color: #B88D3D !important; /* a touch deeper than token gold */ } /* ================================= FIX: CATEGORY CTA BLOCK (remove black) ================================= */ .vk-ctaGrid .vk-cta{ background: #FFFFFF !important; border: 1px solid var(--stroke) !important; box-shadow: 0 12px 30px rgba(0,0,0,.08) !important; border-radius: 18px !important; } /* title */ .vk-ctaGrid .vk-cta h2, .vk-ctaGrid .vk-cta .vk-h1{ color: var(--text) !important; } /* subtitle */ .vk-ctaGrid .vk-cta p, .vk-ctaGrid .vk-cta .vk-sub{ color: var(--muted) !important; } @media (hover:hover){ .vk-ctaGrid .vk-cta:hover{ border-color: color-mix(in srgb, var(--gold) 55%, var(--stroke)) !important; box-shadow: 0 20px 45px rgba(201,167,95,.18) !important; } } /* ================================= FIX: content scrolling over header ================================= */ /* Header always above */ header, .header, #header{ position: sticky !important; top: 0 !important; z-index: 99999 !important; } /* If theme uses .sticky-header or similar */ .sticky, .sticky-header, .is-sticky{ z-index: 99999 !important; } /* Prevent any home cards/sections from floating above */ #content, #main, .content, .home-container, .vk-hero, .vk-ctaGrid{ position: relative; z-index: 1; } /* ================================= FIX: button text invisible on light theme ================================= */ /* Hero / home buttons inside vk-heroCard */ .vk-heroCard .vk-btn, .vk-heroCard button, .vk-heroCard .btn, .vk-heroCard a.btn{ color: #111 !important; } /* If there are specific CTA buttons with classes */ .vk-heroCard .vk-btn--gold{ color: #111 !important; } /* Also fix any "white text" forced by old dark styles */ .vk-heroCard *{ text-shadow: none !important; } /* ============================================================ /* =========================== ITEM-POST: main category buttons =========================== */ body#body-item-post .vk-maincats{ margin-top:12px; display:grid; grid-template-columns: 1fr 1fr; gap:12px; } body#body-item-post .vk-cat-btn{ border-radius:18px; padding:14px 14px; font-weight:800; text-transform:uppercase; border:1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.92); color:#111; cursor:pointer; } body#body-item-post .vk-cat-btn.is-active{ background:#111; color:#fff; } /* =========================== /* =========================== VINTED-LIKE CARDS (HOME + SEARCH) – MOBILE - 2 columns - full-bleed image - clean card + shadow =========================== */ @media (max-width: 767px){ /* Grid (HOME premium + SEARCH results) */ body#body-home #premium .prod-wrap, body#body-search .products.standard.grid{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; align-items: start !important; } /* Make sure wrappers don't constrain width */ body#body-home #premium .block, body#body-home #premium .prod-wrap, body#body-search .search-items-wrap .block, body#body-search .search-items-wrap .wrap, body#body-search .products.standard.grid{ width: 100% !important; min-width: 0 !important; } /* Card shell */ body#body-home #premium .vk-card2, body#body-search .products.standard.grid .vk-card2{ background: #fff !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 16px !important; box-shadow: 0 6px 18px rgba(0,0,0,.08) !important; overflow: hidden !important; width: auto !important; min-width: 0 !important; } /* Media full-bleed */ body#body-home #premium .vk-card2__media, body#body-search .products.standard.grid .vk-card2__media{ display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; aspect-ratio: 4 / 5 !important; /* change to 1 / 1 if you want square */ background: #f2f2f2 !important; overflow: hidden !important; border-radius: 0 !important; } body#body-home #premium .vk-card2__media img, body#body-search .products.standard.grid .vk-card2__media img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Content padding */ body#body-home #premium .vk-card2__wrap, body#body-search .products.standard.grid .vk-card2__wrap{ display: block !important; padding: 10px 10px 12px !important; } /* Title (2 lines) */ body#body-home #premium .vk-card2__title, body#body-search .products.standard.grid .vk-card2__title{ font-size: 14px !important; line-height: 1.2 !important; margin: 0 0 6px !important; font-weight: 700 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Price */ body#body-home #premium .vk-card2__price, body#body-search .products.standard.grid .vk-card2__price{ font-size: 14px !important; font-weight: 800 !important; margin: 0 !important; } /* Hide location/region like Vinted */ .vk-card2__loc, .vk-card2 .location, .vk-card2 .region{ display: none !important; } /* TOP badge smaller */ .vk-badge2, .vk-badge2__prem, .vk-badge2--prem{ transform: scale(.9) !important; transform-origin: top left !important; } } /* =========================== COMPACT cards (HOME + SEARCH) - MOBILE mažiau rėmų, mažiau tuščios vietos, mažesni tekstai =========================== */ @media (max-width: 767px){ /* mažesni tarpai tarp kortelių */ body#body-home #premium .prod-wrap, body#body-search .products.standard.grid{ gap: 6px !important; /* buvo 12 */ } /* pati kortelė: be storų rėmų ir be didelio šešėlio */ body#body-home #premium .vk-card2, body#body-search .products .vk-card2{ border-radius: 10px !important; /* buvo 16 */ border: 1px solid rgba(0,0,0,.06) !important; box-shadow: none !important; /* nuimam "storą" šešėlį */ background: #fff !important; } /* nuotraukos zona: mažesnis radius, be vidinių rėmelių */ body#body-home #premium .vk-card2__media, body#body-search .products .vk-card2__media{ border-radius: 0 !important; /* kad neatsirastų "rėmelis viduje" */ background: #f2f2f2 !important; aspect-ratio: 1 / 1 !important; /* kvepalams geriau kompaktiškas kvadratas */ } /* jei pas tave foto dar turi vidinį padding/border - nuimam */ body#body-home #premium .vk-card2__media img, body#body-search .products .vk-card2__media img{ border-radius: 0 !important; } /* mažiau tuščios vietos kortelės apačioje */ body#body-home #premium .vk-card2__wrap, body#body-search .products .vk-card2__wrap{ padding: 7px 8px 8px !important; /* buvo 10/12 */ } /* mažesnis pavadinimas */ body#body-home #premium .vk-card2__title, body#body-search .products .vk-card2__title{ font-size: 13px !important; line-height: 1.15 !important; margin: 0 0 4px !important; -webkit-line-clamp: 2 !important; } /* mažesnė kaina */ body#body-home #premium .vk-card2__price, body#body-search .products .vk-card2__price{ font-size: 13px !important; font-weight: 800 !important; margin: 0 !important; } /* "1 week ago" (time pill) – sumažinam, arba gali visai paslėpti */ body#body-home #premium .vk-card2__time, body#body-search .products .vk-card2__time{ font-size: 11px !important; padding: 4px 8px !important; border-radius: 999px !important; margin: 6px 0 6px !important; opacity: .75 !important; } /* jei nori visai išjungti laiką, atkomentuok: body#body-home #premium .vk-card2__time, body#body-search .products .vk-card2__time{ display:none !important; } */ /* TOP badge – mažesnis, kad neužimtų vietos */ body#body-home #premium .vk-badge2, body#body-search .products .vk-badge2{ transform: scale(.85); transform-origin: top left; } } /* Mobile search modal: nenuvažiuoja po headeriu ir leidžia spausti input */ @media (max-width: 767px){ body#body-search #gamModal.search-mobile-filter-box.modal-fullscreen .modal-inside{ margin-top: 110px !important; /* jei per daug/mažai – koreguosim */ height: calc(100vh - 110px) !important; } } @media (max-width: 767px){ body#body-search #gamModal.search-mobile-filter-box .modal-inside{ overflow: visible !important; } /* jei viršuje yra close elementas, paliekam jį klikintiną */ body#body-search #gamModal.search-mobile-filter-box .modal-close{ pointer-events: auto !important; } } @media (max-width: 767px){ /* kai modalas matomas – slepiam puslapio headerį po juo */ body#body-search #gamModal[style*="display: block"] ~ header, body#body-search #gamModal[style*="display:block"] ~ header, body#body-search .modal-cover[style*="display: block"] ~ header, body#body-search .modal-cover[style*="display:block"] ~ header { display: none !important; } } @media (max-width: 767px){ body#body-search #gamModal.search-mobile-filter-box.modal-fullscreen .modal-inside{ margin-top: 0 !important; padding-top: max(14px, env(safe-area-inset-top)) !important; height: 100vh !important; } } @media (max-width: 767px){ body#body-search #gamModal.search-mobile-filter-box .modal-inside{ background: #fff !important; color: #111318 !important; border-radius: 16px !important; /* jei nori – gali palikti */ box-shadow: 0 18px 60px rgba(0,0,0,.12) !important; } /* jei yra viršutinė "header" juosta modale */ body#body-search #gamModal.search-mobile-filter-box .modal-inside{ border-bottom: 1px solid rgba(17,19,24,.08) !important; } } @media (max-width: 767px){ /* MOBILE filter modal – priverstinai tamsūs tekstai ant balto fono */ body#body-search #gamModal.search-mobile-filter-box .modal-inside, body#body-search #gamModal.search-mobile-filter-box .modal-inside *{ color: #111318 !important; } /* Placeholder */ body#body-search #gamModal.search-mobile-filter-box input::placeholder, body#body-search #gamModal.search-mobile-filter-box textarea::placeholder{ color: rgba(17,19,24,.45) !important; opacity: 1 !important; } /* Input/select fonai (kad neliktų tamsių) */ body#body-search #gamModal.search-mobile-filter-box input, body#body-search #gamModal.search-mobile-filter-box select, body#body-search #gamModal.search-mobile-filter-box textarea{ background: #fff !important; border: 1px solid rgba(17,19,24,.14) !important; } /* Dropdown rodyklė, jei dingus */ body#body-search #gamModal.search-mobile-filter-box select{ color: #111318 !important; } } @media (max-width: 767px){ body#body-search #gamModal.search-mobile-filter-box label, body#body-search #gamModal.search-mobile-filter-box .label, body#body-search #gamModal.search-mobile-filter-box .title, body#body-search #gamModal.search-mobile-filter-box .text-muted{ color: rgba(17,19,24,.65) !important; } } /* Autocomplete results must be above modal/overlay */ .ui-autocomplete { z-index: 999999 !important; } /* Autocomplete above modal */ .ui-autocomplete { z-index: 999999 !important; position: fixed !important; } /* Fix seller autocomplete inside mobile filter */ .ui-autocomplete { z-index: 999999 !important; } body#body-search.dvc-ios .content, body#body-search.dvc-ios .filter, body#body-search.dvc-ios #filter { overflow: visible !important; } .ui-autocomplete { z-index: 999999 !important; max-height: 260px; overflow: auto; } .ui-front { z-index: 999999 !important; }