/* ============================================================ Hifitorget — shared chrome (tokens + navbar + typography) Loaded on every public page for a consistent look and feel. Font: Inter (loaded from Google Fonts in page ) ============================================================ */ :root { /* Primary brand navy */ --ht-navy-900: #003A66; --ht-navy: #004A7F; --ht-navy-600: #1a5d90; --ht-navy-100: #e6f2ff; --ht-navy-050: #f0f7ff; /* Paid-ad accent */ --ht-accent: #4A90D9; /* Status */ --ht-success: #198754; --ht-success-h: #157347; --ht-danger: #dc3545; --ht-warning: #ffc107; --ht-info: #0dcaf0; /* Neutrals */ --ht-bg: #ffffff; --ht-bg-subtle: #f8f9fa; --ht-bg-soft: #F5F5F5; --ht-border: #dee2e6; --ht-border-mid:#cccccc; --ht-muted: #6c757d; --ht-fg: #212529; --ht-fg-soft: #495057; --ht-fg-dim: #666666; /* Typography */ --ht-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --ht-fs-xs: 0.75rem; --ht-fs-sm: 0.875rem; --ht-fs-base: 1rem; --ht-fs-lg: 1.125rem; --ht-fs-xl: 1.25rem; --ht-fs-2xl: 1.5rem; --ht-fs-3xl: 1.75rem; --ht-fs-4xl: 2rem; --ht-fs-5xl: 2.5rem; --ht-lh-tight: 1.2; --ht-lh-snug: 1.35; --ht-lh-base: 1.5; /* Layout */ --ht-container-max: 1300px; --ht-article-max: 720px; --ht-nav-h: 56px; --ht-radius: 0.375rem; --ht-radius-lg: 0.5rem; --ht-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05); } /* ============================================================ Base ============================================================ */ html { overscroll-behavior: contain; } html, body { overflow-x: hidden; overflow-x: clip; } body { font-family: var(--ht-font-sans); font-size: var(--ht-fs-base); line-height: var(--ht-lh-base); color: var(--ht-fg); background: var(--ht-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, .h1 { font-size: var(--ht-fs-5xl); font-weight: 700; line-height: var(--ht-lh-tight); } h2, .h2 { font-size: var(--ht-fs-4xl); font-weight: 700; line-height: var(--ht-lh-tight); } h3, .h3 { font-size: var(--ht-fs-3xl); font-weight: 600; line-height: var(--ht-lh-snug); } h4, .h4 { font-size: var(--ht-fs-2xl); font-weight: 600; line-height: var(--ht-lh-snug); } h5, .h5 { font-size: var(--ht-fs-xl); font-weight: 600; line-height: var(--ht-lh-snug); } h6, .h6 { font-size: var(--ht-fs-lg); font-weight: 600; line-height: var(--ht-lh-snug); } @media (max-width: 767.98px) { h1, .h1 { font-size: var(--ht-fs-4xl); } h2, .h2 { font-size: var(--ht-fs-3xl); } h3, .h3 { font-size: var(--ht-fs-2xl); } } a { color: var(--ht-navy); text-decoration: none; } a:hover { text-decoration: underline; } a:visited { color: var(--ht-navy); } img { max-width: 100%; height: auto; } /* WCAG 2.4.1 — skip link */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--ht-navy); color: #ffffff; padding: 8px 16px; z-index: 9999; transition: top 0.3s; text-decoration: none; } .skip-link:focus { top: 0; color: #ffffff; } /* WCAG 2.4.7 — focus rings */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--ht-navy); outline-offset: 2px; } /* ============================================================ Site navbar (shared across every public page) ============================================================ */ .ht-nav { background-color: var(--ht-navy); min-height: var(--ht-nav-h); padding: 8px 0; position: sticky; top: 0; z-index: 1030; } .ht-nav__inner { padding: 0 24px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; } .ht-nav__brand { display: inline-flex; align-items: center; flex-shrink: 0; } .ht-nav__brand img { width: clamp(150px, 40vw, 220px); height: auto; aspect-ratio: 236 / 36; display: block; } .ht-nav__actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-left: auto; } .ht-nav__actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; font-weight: 500; white-space: nowrap; } .ht-nav__actions .dropdown { display: inline-flex; align-items: center; } .ht-nav__btn { gap: 6px; } .ht-nav__btn-icon { font-size: 1rem; line-height: 1; } /* Make the login/new-ad/my-pages buttons match across pages */ .ht-nav .btn-success { background-color: var(--ht-success); border-color: var(--ht-success); color: #ffffff; } .ht-nav .btn-success:hover, .ht-nav .btn-success:focus { background-color: var(--ht-success-h); border-color: var(--ht-success-h); color: #ffffff; } .ht-nav .btn-outline-light { color: #ffffff; border-color: rgba(255, 255, 255, 0.55); background-color: transparent; } .ht-nav .btn-outline-light:hover, .ht-nav .btn-outline-light:focus { color: var(--ht-navy); background-color: #ffffff; border-color: #ffffff; } @media (max-width: 575.98px) { .ht-nav__btn--new-ad, .ht-nav__btn--my-pages, .ht-nav__btn--login, .ht-nav__btn--lang { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 8px; } .ht-nav__btn--lang::after { display: none; } } .ht-nav .btn-primary { background-color: #ffffff; border-color: #ffffff; color: var(--ht-navy); } .ht-nav .btn-primary:hover, .ht-nav .btn-primary:focus { background-color: #f0f0f0; border-color: #f0f0f0; color: var(--ht-navy-900); } /* ============================================================ Article / content pages (om.php, handlatryggt, /static/legal) ============================================================ */ .ht-article { max-width: var(--ht-article-max); margin: 0 auto; padding: 32px 16px 64px; } .ht-article h1 { margin: 0 0 1rem; font-size: var(--ht-fs-4xl); } .ht-article h2 { margin: 2.5rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--ht-border); font-size: var(--ht-fs-3xl); } .ht-article h2:first-of-type { border-top: 0; padding-top: 0; } .ht-article h3 { margin: 2rem 0 0.75rem; font-size: var(--ht-fs-2xl); } .ht-article h4, .ht-article h5 { margin: 1.5rem 0 0.5rem; color: var(--ht-fg); font-size: var(--ht-fs-lg); } .ht-article p { margin: 0 0 1rem; color: var(--ht-fg); } .ht-article ul, .ht-article ol { padding-left: 1.25rem; margin: 0 0 1rem; } .ht-article__lead { font-size: var(--ht-fs-lg); color: var(--ht-fg); margin-bottom: 1.5rem; } .ht-article__meta { color: var(--ht-muted); font-size: var(--ht-fs-sm); margin-bottom: 1.5rem; display: block; } /* Flat callouts (no emoji, no heavy shadows) */ .ht-callout { border: 1px solid var(--ht-border); border-left: 4px solid var(--ht-navy); background: var(--ht-bg-subtle); border-radius: var(--ht-radius); padding: 16px 18px; margin: 1.25rem 0; } .ht-callout--warning { border-left-color: #b58100; background: #fff8e6; } .ht-callout--success { border-left-color: var(--ht-success); background: #e8f5ef; } .ht-callout p:last-child { margin-bottom: 0; } /* Simple news-item card used on om.php */ .ht-news-item { border: 1px solid var(--ht-border); border-radius: var(--ht-radius); padding: 16px 18px; margin-bottom: 16px; background: var(--ht-bg); } .ht-news-item__title { margin: 0 0 4px; font-size: var(--ht-fs-lg); font-weight: 600; } .ht-news-item__date { color: var(--ht-muted); font-size: var(--ht-fs-sm); margin-bottom: 12px; display: block; } .ht-news-item p:last-child { margin-bottom: 0; } /* ============================================================ Marketplace UI-kit components (from .claude/skills/hifitorget-design/ui_kits/marketplace/kit.css) Lifted verbatim so pages can adopt .ht-* classes incrementally. Pages that use these don't need Bootstrap buttons/cards. ============================================================ */ /* Layout shell */ .ht-shell { display: flex; flex-direction: column; min-height: 100vh; } .ht-container { max-width: var(--ht-container-max); margin: 0 auto; padding: 24px 16px; width: 100%; } .ht-page { flex: 1; } /* Buttons */ .ht-btn { font: inherit; font-size: 0.9rem; font-weight: 500; padding: 8px 16px; border-radius: var(--ht-radius); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; line-height: 1.5; white-space: nowrap; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .ht-btn:hover { text-decoration: none; } .ht-btn--success, a.ht-btn--success, a.ht-btn--success:link, a.ht-btn--success:visited { background: var(--ht-success); color: #fff !important; border-color: var(--ht-success); } .ht-btn--success:hover, a.ht-btn--success:hover { background: var(--ht-success-h); border-color: var(--ht-success-h); color: #fff !important; } .ht-btn--navy, a.ht-btn--navy, a.ht-btn--navy:link, a.ht-btn--navy:visited { background: var(--ht-navy); color: #fff !important; border-color: var(--ht-navy); } .ht-btn--navy:hover, a.ht-btn--navy:hover { background: var(--ht-navy-900); border-color: var(--ht-navy-900); color: #fff !important; } .ht-btn--light, a.ht-btn--light, a.ht-btn--light:link, a.ht-btn--light:visited { background: #fff; color: var(--ht-fg) !important; border-color: var(--ht-border); } .ht-btn--light:hover, a.ht-btn--light:hover { background: var(--ht-bg-subtle); color: var(--ht-fg) !important; } .ht-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .ht-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; } .ht-btn--block { width: 100%; justify-content: center; padding: 10px 14px; font-size: 0.95rem; } .ht-btn + .ht-btn--block { margin-top: 8px; } .ht-btn.disabled, a.ht-btn.disabled, .ht-btn[aria-disabled="true"], a.ht-btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; cursor: not-allowed; } /* Inputs */ .ht-input { font: inherit; font-size: 0.9rem; padding: 8px 12px; border: 1px solid #ced4da; border-radius: var(--ht-radius); background: #fff; color: var(--ht-fg); width: 100%; } .ht-input:focus { outline: none; border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); } .ht-input--sm { padding: 6px 10px; font-size: 0.85rem; } select.ht-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; background-size: 14px 10px; padding-right: 1.8rem; } .ht-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 0.9rem; } .ht-field > span { font-weight: 500; color: var(--ht-fg); font-size: 0.875rem; } .ht-field-row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; } /* Search bar */ .ht-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; background: var(--ht-bg-subtle); padding: 12px; border-radius: var(--ht-radius); border: 1px solid var(--ht-border); margin-bottom: 16px; } @media (min-width: 768px) { .ht-search { grid-template-columns: 200px 1fr 180px auto; gap: 10px; } } /* Listing result card — .ht-ad */ .ht-ad { display: flex; gap: 14px; padding: 14px; background: #fff; border: 1px solid var(--ht-border); border-radius: var(--ht-radius); margin-bottom: 10px; align-items: center; transition: background-color .12s ease; box-sizing: border-box; max-width: 100%; } .ht-ad__title { overflow-wrap: anywhere; } .ht-ad:hover { background: var(--ht-bg-subtle); text-decoration: none; } .ht-ad__thumb { width: 160px; height: 128px; flex-shrink: 0; border-radius: 4px; background: linear-gradient(135deg, #e9ecef, #f8f9fa); display: flex; align-items: center; justify-content: center; color: #adb5bd; font-size: 32px; overflow: hidden; } .ht-ad__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ht-ad__mid { flex: 1; min-width: 0; } .ht-ad__title { font-size: 1rem; font-weight: 600; color: var(--ht-navy); margin: 0 0 2px; line-height: 1.3; } .ht-ad__sub { font-size: 0.875rem; color: var(--ht-muted); } .ht-ad__right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .ht-ad__price { font-size: 1.125rem; font-weight: 700; color: var(--ht-fg); } .ht-ad__loc { font-size: 0.75rem; color: var(--ht-muted); } /* Mobile: stack card vertically with image on top, full-width. */ @media (max-width: 575px) { .ht-ad { flex-direction: column; align-items: stretch; gap: 10px; } .ht-ad__thumb { width: 100%; height: auto; aspect-ratio: 5 / 4; } .ht-ad__right { text-align: left; flex-direction: row; align-items: center; justify-content: space-between; } } .ht-ad--featured { background: linear-gradient(135deg, #d6e7ff, #cce1ff); border-left: 3px solid var(--ht-accent); position: relative; } .ht-ad--featured:hover { background: linear-gradient(135deg, #c7defa, #b9d5f2); } /* Ad detail grid + gallery + seller card */ .ht-detail { padding: 4px 0 40px; } .ht-detail__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; } .ht-detail__main { min-width: 0; } .ht-detail__main .main-swiper { width: 100%; max-width: 100%; overflow: hidden; } .ht-detail__main .swiper-slide { box-sizing: border-box; } @media (min-width: 900px) { .ht-detail__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; } } .ht-gallery { background: var(--ht-bg-soft); border-radius: var(--ht-radius); padding: 16px; margin-bottom: 20px; } .ht-gallery__main { aspect-ratio: 4/3; background: #fff; border: 1px solid var(--ht-border); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #adb5bd; font-size: 140px; margin-bottom: 10px; } .ht-gallery__thumbs { display: flex; gap: 8px; flex-wrap: wrap; } .ht-gallery__th { width: 72px; height: 56px; background: #fff; border: 1px solid var(--ht-border); border-radius: 4px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #adb5bd; font-size: 22px; overflow: hidden; } .ht-gallery__th img { width: 100%; height: 100%; object-fit: cover; } .ht-gallery__th.is-active { border-color: var(--ht-navy); box-shadow: 0 0 0 1px var(--ht-navy) inset; } .ht-desc { background: #fff; border: 1px solid var(--ht-border); border-radius: var(--ht-radius); padding: 20px; } .ht-desc h2 { font-size: 1.25rem; margin: 0 0 12px; } .ht-desc p { color: var(--ht-fg-soft); } .ht-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin: 16px 0 0; border-top: 1px solid var(--ht-border); padding-top: 14px; } .ht-specs > div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.875rem; } .ht-sellcard { background: #fff; border: 1px solid var(--ht-border); border-radius: var(--ht-radius); padding: 20px; } @media (min-width: 900px) { .ht-sellcard { position: sticky; top: calc(var(--ht-nav-h) + 16px); } } /* Inline variant used in the main flow — never sticky, capped width, compact buttons. */ .ht-sellcard.ht-sellcard--inline, body .ht-sellcard.ht-sellcard--inline { position: static !important; top: auto !important; bottom: auto !important; max-width: 480px; margin-left: auto; margin-right: auto; background: var(--ht-bg-soft, #f7f9fb); border-color: var(--ht-border); } @media (min-width: 900px) { .ht-sellcard.ht-sellcard--inline, body .ht-sellcard.ht-sellcard--inline { position: static !important; top: auto !important; } } .ht-sellcard--inline .ht-cta-group { max-width: 260px; margin-left: auto; margin-right: auto; } .ht-sellcard--inline .ht-btn--block { width: 100%; } /* Två sellcards sida vid sida: annonsinfo + säljarinfo. */ .ht-sellcard-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; justify-content: center; margin: 0 0 20px; width: 100%; } .ht-sellcard-grid > .ht-sellcard, .ht-sellcard-grid > .ht-sellcard.ht-sellcard--inline, body .ht-sellcard-grid > .ht-sellcard.ht-sellcard--inline { margin: 0 !important; flex: 1 1 0; min-width: 280px; max-width: none !important; } @media (min-width: 768px) { .ht-sellcard-grid > .ht-sellcard { flex-basis: calc(50% - 10px); } } .ht-sellcard__title { font-size: 1rem; font-weight: 600; margin: 0 0 12px; color: var(--ht-fg); } .ht-sellcard--seller .ht-seller { margin-top: 12px; } /* Produktfakta (skick + kan skickas) som en horisontell chip-rad ovanför beskrivningen. */ .ht-product-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ht-border); border-bottom: 1px solid var(--ht-border); font-size: 0.9375rem; color: var(--ht-fg-soft); margin: 0 0 16px; } .ht-product-fact { display: inline-flex; align-items: center; gap: 6px; } .ht-product-fact__label { color: var(--ht-muted); } .ht-product-fact i { color: var(--ht-navy); } .ht-product-fact__info { color: var(--ht-muted); display: inline-flex; align-items: center; } .ht-product-fact__info:hover { color: var(--ht-navy); } .ht-product-fact__info i { color: inherit; } /* Skick + Frakt som en prydlig faktaruta inne i sellcarden. */ .ht-sellcard__facts { margin: 14px 0 0; border-top: 1px solid var(--ht-border); padding-top: 10px; font-size: 0.875rem; } .ht-sellcard__fact { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; } .ht-sellcard__fact-label { color: var(--ht-muted); } .ht-sellcard__fact-label i { margin-right: 4px; } .ht-sellcard__fact-value { font-weight: 600; color: var(--ht-fg); text-align: right; } /* Specifikationer som stängd accordion. */ .ht-spec-accordion { background: var(--ht-bg-soft, #f7f9fb); border: 1px solid var(--ht-border); border-radius: var(--ht-radius); padding: 0; } .ht-spec-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ht-fg); } .ht-spec-accordion__summary::-webkit-details-marker { display: none; } .ht-spec-accordion__title { font-size: 1rem; } .ht-spec-accordion__chevron { transition: transform 0.2s ease; color: var(--ht-muted); } .ht-spec-accordion[open] .ht-spec-accordion__chevron { transform: rotate(180deg); } .ht-spec-accordion__body { padding: 0 18px 16px; color: var(--ht-fg-soft); border-top: 1px solid var(--ht-border); padding-top: 14px; } /* Bookmark button — clear visual difference between saved and unsaved. */ .ht-btn--bookmark.is-saved, .ht-btn--bookmark.is-saved:link, .ht-btn--bookmark.is-saved:visited { background: var(--ht-navy-050, #f0f7ff); border-color: var(--ht-navy); color: var(--ht-navy) !important; font-weight: 600; } .ht-btn--bookmark.is-saved .bi { color: var(--ht-navy); } .ht-btn--bookmark.is-saved:hover { background: var(--ht-navy-100, #e6f2ff); } /* Dividers between sections and around ad slots — unified solid style. */ .ht-ad-divider, .ht-section-divider { border: 0; border-top: 1px solid var(--ht-border); margin: 24px 0; opacity: 1; } /* Prominent seller-type badge row at top of the sellcard. */ .ht-sellcard__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .ht-sellcard__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ht-border); background: #fff; } .ht-sellcard__badge--business { color: var(--ht-navy); border-color: var(--ht-navy); background: var(--ht-navy-050, #f0f7ff); } .ht-sellcard__badge--verified { color: #1a7a3b; border-color: #1a7a3b; background: #e8f7ee; } .ht-sellcard__badge--private { color: var(--ht-muted); } .ht-price-tag { font-size: 1.75rem; font-weight: 700; color: var(--ht-fg); margin-bottom: 4px; } .ht-loc-line { font-size: 0.9rem; color: var(--ht-muted); margin-bottom: 16px; } .ht-loc-line i { margin-right: 4px; } .ht-seller { display: flex; gap: 10px; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ht-border); } .ht-seller__avatar{ font-size: 36px; color: var(--ht-muted); line-height: 1; } .ht-seller__name { font-weight: 600; font-size: 0.95rem; } .ht-seller__meta { font-size: 0.8rem; color: var(--ht-muted); margin-top: 6px; } .ht-seller__name + .ht-seller__meta { margin-top: 8px; } /* Display ad slots (Google Ad Manager wrapper) */ .ht-adsense { background: var(--ht-bg-subtle); border: 1px dashed var(--ht-border-mid); border-radius: var(--ht-radius); position: relative; display: flex; align-items: center; justify-content: center; color: var(--ht-muted); margin-bottom: 14px; min-height: 110px; } .ht-adsense__label { position: absolute; top: 6px; left: 8px; font-size: 10px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ht-muted); background: #fff; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--ht-border); } .ht-adsense--leaderboard { min-height: 110px; } .ht-adsense--rectangle { min-height: 260px; } .ht-adsense--inline { min-height: 140px; } /* Fixed bottom anchor ad bar */ .ht-anchor { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.98); box-shadow: 0 -2px 10px rgba(0,0,0,0.1); padding: 12px 20px; display: flex; align-items: center; gap: 14px; z-index: 90; font-size: 0.9rem; } .ht-anchor__body { flex: 1; } .ht-anchor__body a { color: var(--ht-navy); font-weight: 500; } .ht-anchor__close { background: #fff; color: var(--ht-fg-dim); border: 1px solid var(--ht-border); border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.15); } /* Sponsored-label chip (used on infeed ads and featured rows) */ .ht-sponsored-badge { font-size: 11px; font-weight: 500; color: var(--ht-muted); text-transform: uppercase; letter-spacing: 0.5px; background: var(--ht-bg-subtle); padding: 2px 8px; border-radius: 3px; display: inline-block; line-height: 1.4; } /* Listing + sticky-sidebar grid used on homepage (desktop only) */ .ht-list-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; } .ht-list-grid__side { display: none; flex-direction: column; gap: 14px; } @media (min-width: 1200px) { .ht-list-grid { grid-template-columns: 1fr 300px; gap: 24px; } .ht-list-grid__side { display: flex; position: sticky; top: calc(var(--ht-nav-h) + 16px); } } /* Title strip (shared across listing views) */ .ht-title-strip { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0 16px; gap: 12px; flex-wrap: wrap; } .ht-title-strip h1 { margin: 0; font-size: 1.5rem; } .ht-title-strip .ht-count { color: var(--ht-muted); font-size: 0.9rem; } /* eID button (used inside login modal) */ .ht-eid { display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; border: 1px solid var(--ht-border); border-radius: var(--ht-radius); cursor: pointer; text-align: left; font: inherit; } .ht-eid:hover { background: var(--ht-bg-subtle); border-color: var(--ht-navy); } .ht-eid img { height: 32px; width: 48px; object-fit: contain; } .ht-eid span { flex: 1; font-weight: 500; font-size: 0.95rem; } .ht-eid i { color: var(--ht-muted); } /* ============================================================ Marketplace page-level blocks Used on index.php (listing) and visa_annons.php (detail). ============================================================ */ /* Category chip strip (homepage, logged-out landing). */ .ht-cat-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 20px; } @media (min-width: 576px) { .ht-cat-strip { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .ht-cat-strip { grid-template-columns: repeat(4, 1fr); gap: 10px; } } @media (min-width: 1200px) { .ht-cat-strip { grid-template-columns: repeat(6, 1fr); } } .ht-cat { background: #fff; border: 1px solid var(--ht-border); border-radius: var(--ht-radius); padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ht-fg); text-decoration: none; transition: border-color .12s ease, background-color .12s ease; text-align: center; font: inherit; } .ht-cat:hover { border-color: var(--ht-navy); background: var(--ht-bg-subtle); text-decoration: none; color: var(--ht-fg); } .ht-cat i { font-size: 24px; color: var(--ht-navy); margin-bottom: 4px; } .ht-cat__name { font-size: 0.875rem; font-weight: 500; line-height: 1.2; } .ht-cat__count { color: var(--ht-muted); font-size: 0.75rem; } /* Compact sidebar card used for popular searches / helper content. */ .ht-side-card { background: #fff; border: 1px solid var(--ht-border); border-radius: var(--ht-radius); padding: 14px 16px; } .ht-side-card h6 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ht-muted); margin: 0 0 8px; } .ht-side-card ul { list-style: none; padding: 0; margin: 0; } .ht-side-card li { padding: 4px 0; border-bottom: 1px solid var(--ht-border); font-size: 0.9rem; } .ht-side-card li:last-child { border-bottom: 0; } .ht-side-card a { color: var(--ht-navy); } /* Pagination (listings) — uses Bootstrap .pagination classes. */ .pagination .page-link { color: var(--ht-navy); } .pagination .page-item.active .page-link, .pagination .page-item.active > .page-link { background-color: var(--ht-navy); border-color: var(--ht-navy); color: #fff !important; } /* Ad-row anchor wrapper — lets the whole .ht-ad card be a link. */ a.ht-ad, a.ht-ad:hover, a.ht-ad:visited { color: inherit; text-decoration: none; } a.ht-ad:hover .ht-ad__title { text-decoration: underline; } /* Meta line inside .ht-ad__mid (ad type + badges). */ .ht-ad__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--ht-muted); margin-top: 2px; } .ht-ad__meta .ht-type-badge { font-weight: 600; } .ht-ad__meta .ht-type-sell { color: #2e8b57; } .ht-ad__meta .ht-type-buy { color: #c47200; } .ht-ad__meta .ht-type-other { color: var(--ht-muted); } .ht-ad__meta i { font-size: 1rem; color: var(--ht-navy); } .ht-ad__icons { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } /* Today timestamp highlight (keeps existing green meaning). */ .ht-ad__today { color: #198754; font-weight: 600; } /* In-feed sponsored card — used for infeed adsense inside the list. */ .ht-infeed { background: var(--ht-bg-subtle); border: 1px dashed var(--ht-border-mid); border-radius: var(--ht-radius); padding: 28px 16px 16px; margin: 10px 0; position: relative; min-height: 180px; display: flex; align-items: center; justify-content: center; } .ht-infeed::before { content: attr(data-sponsored-label); position: absolute; top: 8px; left: 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ht-muted); background: #fff; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--ht-border); } .ht-infeed__inner { width: 100%; display: flex; justify-content: center; } @media (min-width: 768px) { .ht-infeed { min-height: 220px; } } @media (min-width: 1024px) { .ht-infeed { min-height: 332px; } } /* Sponsored CLS placeholders — match ad breakpoints used in index.php. */ .ht-ad-leaderboard { min-height: 302px; } @media (min-width: 768px) { .ht-ad-leaderboard { min-height: 122px; } } @media (min-width: 1024px) { .ht-ad-leaderboard { min-height: 272px; } } /* Ad-detail extras on top of the marketplace kit. */ .ht-gallery__frame { position: relative; width: 100%; aspect-ratio: 4/3; background: #fff; border: 1px solid var(--ht-border); border-radius: 4px; overflow: hidden; } .ht-gallery__frame .swiper, .ht-gallery__frame .swiper-wrapper, .ht-gallery__frame .swiper-slide { width: 100%; height: 100%; } .ht-gallery__thumbs--scroll { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; scrollbar-width: thin; } .ht-gallery__thumbs--scroll .ht-gallery__th { flex: 0 0 80px; height: 60px; } .ht-desc__body { font-size: 1rem; color: var(--ht-fg); } .ht-desc__body p { margin: 0 0 1rem; } .ht-desc__body p:last-child { margin-bottom: 0; } .ht-specs dt, .ht-specs dd { margin: 0; } .ht-specs dt { color: var(--ht-muted); } .ht-specs dd { color: var(--ht-fg); font-weight: 500; text-align: right; } .ht-specs > div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.875rem; } .ht-sellcard .ht-price-tag { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ht-sellcard .ht-price-tag__ccy { font-size: 0.875rem; font-weight: 400; color: var(--ht-muted); } .ht-sellcard .ht-price-tag__approx { font-size: 0.875rem; font-weight: 400; color: var(--ht-muted); } .ht-sellcard .ht-cta-group { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; } .ht-sellcard .ht-sellcard__help { font-size: 0.8125rem; color: var(--ht-muted); margin: 6px 0 0; } .ht-sellcard .ht-verified { display: inline-flex; align-items: center; gap: 6px; color: var(--ht-navy); font-size: 0.8125rem; } .ht-sellcard .ht-verified i { font-size: 1rem; } /* Breadcrumb / category path on ad detail. */ .ht-crumb { font-size: 0.875rem; color: var(--ht-muted); margin: 0 0 4px; } .ht-crumb a { color: var(--ht-navy); } .ht-crumb .sep { color: var(--ht-border-mid); margin: 0 4px; }