/* ============================================================ 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; } 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 { background: var(--ht-success); color: #fff; border-color: var(--ht-success); } .ht-btn--success:hover { background: var(--ht-success-h); border-color: var(--ht-success-h); color: #fff; } .ht-btn--navy { background: var(--ht-navy); color: #fff; border-color: var(--ht-navy); } .ht-btn--navy:hover { background: var(--ht-navy-900); border-color: var(--ht-navy-900); color: #fff; } .ht-btn--light { background: #fff; color: var(--ht-fg); border-color: var(--ht-border); } .ht-btn--light:hover { background: var(--ht-bg-subtle); color: var(--ht-fg); } .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; } /* 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; } .ht-ad:hover { background: var(--ht-bg-subtle); text-decoration: none; } .ht-ad__thumb { width: 110px; height: 82px; 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); } .ht-ad--featured { background: linear-gradient(135deg, var(--ht-navy-050, #f0f7ff), var(--ht-navy-100, #e6f2ff)); border-left: 3px solid var(--ht-accent); position: relative; } .ht-ad--featured::after { content: ""; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--ht-accent); opacity: .75; } .ht-ad--featured:hover { background: linear-gradient(135deg, #e8f2fd, #daeaf8); } /* Ad detail grid + gallery + seller card */ .ht-detail { padding: 4px 0 40px; } .ht-detail__grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; } @media (min-width: 900px) { .ht-detail__grid { grid-template-columns: 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); } } .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); } /* 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: flex; flex-direction: column; gap: 14px; } @media (min-width: 1200px) { .ht-list-grid { grid-template-columns: 1fr 300px; gap: 24px; } .ht-list-grid__side { 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); }