/*-------------------------------------------------------------- SkyMarket.uk — brand stylesheet (BuddyBoss child) Loaded after the parent theme (priority 9999) with filemtime() versioning. Sections: 1. Design tokens (CSS variables) 2. Base / typography 3. Buttons 4. Layout helpers (container, sections) 5. Badges 6. Header 7. Footer 8. Homepage 9. Listing card (reusable) 10. Archive / search, single listing, seller dashboard, member profile --------------------------------------------------------------*/ /* ============================================================ 0. CUSTOM PAGES — kill the parent theme's default title/thumbnail Every page below renders its own hero/title inside a [shortcode], but the parent's content.php still renders entry-header + entry-media above it regardless, producing a duplicate title (and a giant blank box if the page happens to have a featured image). One rule, every custom page, so a newly added page can't slip through this again. ============================================================ */ body.skm-page-news .entry-header, body.skm-page-news .entry-media, body.skm-page-services .entry-header, body.skm-page-services .entry-media, body.skm-page-advertise .entry-header, body.skm-page-advertise .entry-media, body.skm-page-about .entry-header, body.skm-page-about .entry-media, body.skm-page-privacy .entry-header, body.skm-page-privacy .entry-media, body.skm-page-terms .entry-header, body.skm-page-terms .entry-media, body.skm-page-contact .entry-header, body.skm-page-contact .entry-media, body.skm-page-list-aircraft .entry-media, body.skm-page-listings .entry-header, body.skm-page-listings .entry-media, body.skm-page-dashboard .entry-header, body.skm-page-dashboard .entry-media, body.skm-page-my-listings .entry-header, body.skm-page-my-listings .entry-media, body.skm-page-map .entry-header, body.skm-page-map .entry-media, body.skm-page-search-alerts .entry-header, body.skm-page-search-alerts .entry-media, body.skm-page-saved-listings .entry-header, body.skm-page-saved-listings .entry-media, body.skm-page-listing-analytics .entry-header, body.skm-page-listing-analytics .entry-media, body.skm-page-account-settings .entry-header, body.skm-page-account-settings .entry-media, body.skm-page-list-service .entry-header, body.skm-page-list-service .entry-media, body.skm-page-billing .entry-header, body.skm-page-billing .entry-media { display: none !important; } /* #primary/.content-area carries a default 30px padding-top on top of #content's own 76px sticky-header offset — a 106px gap above any full-bleed hero, confirmed live on /listings/ and /syndicates/. These three pages were also missing the #content/.container/.bb-grid part of the full-bleed override every other custom page already has (see skm-page-list-aircraft below for the reference pattern) — without it the navy search/hero bar sits inside the theme's centered max-width container instead of running edge to edge like the mockup. */ body.skm-page-listings #content.site-content, body.skm-page-syndicates #content.site-content, body.skm-page-category-landing #content.site-content { padding: 0; } body.skm-page-listings #content .container, body.skm-page-syndicates #content .container, body.skm-page-category-landing #content .container { max-width: none; width: 100%; padding: 0; margin: 0; } body.skm-page-listings .bb-grid.site-content-grid, body.skm-page-syndicates .bb-grid.site-content-grid, body.skm-page-category-landing .bb-grid.site-content-grid { display: block; margin: 0; } body.skm-page-listings #primary, body.skm-page-listings .content-area, body.skm-page-syndicates #primary, body.skm-page-syndicates .content-area, body.skm-page-category-landing #primary, body.skm-page-category-landing .content-area { width: 100%; max-width: none; margin: 0; padding: 0; float: none; } /* ============================================================ 1. DESIGN TOKENS — mirror theme.json; single source of truth Palette locked to the supplied brand logo + mockups. ============================================================ */ :root { /* Brand */ --skm-navy: #0D1F33; /* hero / dark sections */ --skm-navy-2: #162840; /* stats strip / secondary dark */ --skm-blue: #2B7FE0; /* primary: buttons, links, accents */ --skm-blue-hover: #2456CC; --skm-blue-soft: #B5D4F4; /* light text on blue */ /* Surfaces */ --skm-white: #ffffff; --skm-bg: #ffffff; /* page background */ --skm-surface: #F5F7FA; /* light cards / sections */ --skm-surface-2: #F7F8FA; /* category pills */ --skm-border: #E2E6EA; /* hairline borders */ --skm-border-2: #E8ECF0; /* Text */ --skm-text-heading: #0F172A; --skm-text: #374151; --skm-text-muted: #6B7280; --skm-text-faint: #8A9BAC; /* card meta */ --skm-text-onnavy: #8FA8C0; /* Status */ --skm-success: #1D9E75; /* Share / Verified */ --skm-badge-dark: #1F2937; /* For sale */ --skm-amber: #D97706; /* Expiring */ /* Type */ --skm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --skm-h1: clamp(32px, 5vw, 48px); --skm-h2: clamp(22px, 3vw, 28px); --skm-card-title: 18px; --skm-body: 16px; --skm-small: 13px; --skm-label: 12px; /* Layout */ --skm-container: 1200px; --skm-section-pad: clamp(40px, 6vw, 80px); --skm-radius: 12px; --skm-radius-sm: 8px; --skm-radius-pill: 999px; /* Elevation */ --skm-shadow-card: 0 1px 2px rgba(13,31,51,.04), 0 4px 16px rgba(13,31,51,.06); --skm-shadow-pop: 0 8px 28px rgba(13,31,51,.14); /* Header height (used for sticky offset) */ --skm-header-h: 64px; } /* ============================================================ 2. BASE / TYPOGRAPHY Scoped lightly so we enhance — not fight — BuddyBoss defaults. ============================================================ */ body { font-family: var(--skm-font); color: var(--skm-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .skm h1, .skm h2, .skm h3, .skm h4, .skm-page h1, .skm-page h2, .skm-page h3, .skm-page h4 { color: var(--skm-text-heading); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; } /* Section eyebrow / labels */ .skm-eyebrow, .skm-label { font-size: var(--skm-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--skm-text-muted); } /* ============================================================ 3. BUTTONS ============================================================ */ .skm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--skm-font); font-size: var(--skm-small); font-weight: 600; line-height: 1; padding: 11px 18px; border-radius: var(--skm-radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease; white-space: nowrap; } .skm-btn:active { transform: translateY(1px); } .skm-btn--primary { background: var(--skm-blue); color: #fff; border-color: var(--skm-blue); } .skm-btn--primary:hover { background: var(--skm-blue-hover); border-color: var(--skm-blue-hover); color: #fff; } .skm-btn--outline { background: #fff; color: var(--skm-text-heading); border-color: var(--skm-border); } .skm-btn--outline:hover { border-color: var(--skm-blue); color: var(--skm-blue); } .skm-btn--ghost { background: transparent; color: var(--skm-text); border-color: transparent; } .skm-btn--ghost:hover { color: var(--skm-blue); } .skm-btn--white { background: #fff; color: var(--skm-blue); border-color: #fff; } .skm-btn--white:hover { background: var(--skm-surface); color: var(--skm-blue-hover); } .skm-btn--ghost-white, .skm-btn--ghost-white:hover { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.4) !important; } .skm-btn--ghost-white:hover { border-color: #fff !important; } .skm-btn--lg { padding: 13px 24px; font-size: 14px; } .skm-btn--block { width: 100%; } /* ============================================================ 4. LAYOUT HELPERS ============================================================ */ .skm-container { width: 100%; max-width: var(--skm-container); margin-inline: auto; padding-inline: 24px; } .skm-section { padding-block: var(--skm-section-pad); } .skm-section--tight { padding-block: clamp(28px, 4vw, 44px); } .skm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; scroll-margin-top: 90px; } .skm-section-head h2 { font-size: var(--skm-h2); } .skm-faq-heading { font-size: var(--skm-h2); font-weight: 600; color: var(--skm-text-heading); padding-top: clamp(28px, 4vw, 44px); padding-bottom: 0; margin-bottom: 8px; } .skm-link-more { color: var(--skm-blue); font-size: var(--skm-small); font-weight: 500; text-decoration: none; } .skm-link-more:hover { color: var(--skm-blue-hover); } /* ============================================================ 5. BADGES (listing cards + detail) ============================================================ */ .skm-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .66px; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; line-height: 1.4; } .skm-badge--featured { background: var(--skm-blue); color: #fff; } .skm-badge--sale { background: var(--skm-navy); color: #fff; } .skm-badge--wanted { background: var(--skm-amber); color: rgb(255, 255, 255); } .skm-ld__titlerow .skm-badge { display: block; width: fit-content; margin-bottom: 8px; } .skm-badge--share { background: var(--skm-success); color: #fff; } .skm-badge--verified { background: rgba(29,158,117,.12); color: var(--skm-success); } .skm-badge--live { background: rgba(29,158,117,.12); color: var(--skm-success); } .skm-badge--expiring { background: rgba(217,119,6,.12); color: var(--skm-amber); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ============================================================ 6. HEADER — restyle BuddyBoss native header to the mockup Targets parent classes: .site-header--bb, .site-header-container, #site-logo, #site-navigation, #header-aside. ============================================================ */ .site-header.site-header--bb { background: var(--skm-white); border-bottom: 1px solid var(--skm-border); box-shadow: none; position: sticky; top: 0; z-index: 999; } .site-header-container.default-header { max-width: var(--skm-container); margin-inline: auto; min-height: var(--skm-header-h); display: flex; align-items: center; gap: 20px; padding-inline: 24px; } #masthead .site-header-container { max-width: 1400px; } /* Hide the BuddyPanel side-toggle on desktop — marketplace header has no left hamburger */ .site-header-container .bb-toggle-panel { display: none; } /* Logo */ #site-logo.site-branding { margin: 0; flex: 0 0 auto; } #site-logo .site-title { margin: 0; line-height: 0; } .skm-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .skm-logo__box { width: 38px; height: 38px; background: var(--skm-blue); border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .skm-logo__box svg { width: 22px; height: 22px; } .skm-logo__name { font-size: 20px; font-weight: 700; color: var(--skm-text-heading); letter-spacing: -.3px; line-height: 1; } .skm-logo__name span { color: var(--skm-blue); } /* Primary nav — centered between logo and aside */ #site-navigation.main-navigation { flex: 1 1 auto; display: flex; justify-content: center; } #site-navigation .primary-menu { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; } #site-navigation .primary-menu > li { margin: 0; } /* Browsers draw their own focus ring (blue halo/glow) on click/keyboard focus by default — visible in some browsers (Safari) but not others (Chrome), which is why it showed up for the client but not in testing here. Suppress everywhere a click could leave focus behind. */ #site-navigation .primary-menu a, #site-navigation .primary-menu a *, #site-navigation .primary-menu > li { -webkit-tap-highlight-color: transparent; } #site-navigation .primary-menu a:focus, #site-navigation .primary-menu a:focus-visible, #site-navigation .primary-menu a:active, #site-navigation .primary-menu a *:focus, #site-navigation .primary-menu a *:focus-visible, #site-navigation .primary-menu > li:focus, #site-navigation .primary-menu > li:focus-within, #header-aside a:focus, #header-aside a:focus-visible, #header-aside button:focus, #header-aside button:focus-visible, .skm-archive__side a:focus, .skm-archive__side a:focus-visible, .skm-archive__side button:focus, .skm-archive__side button:focus-visible, .skm-archive__side input:focus, .skm-archive__side input:focus-visible, .skm-archive__side .facetwp-checkbox:focus, .skm-archive__side .facetwp-radio:focus, .skm-archive__results select:focus, .skm-archive__results select:focus-visible, .skm-archive__results button:focus, .skm-archive__results button:focus-visible, .skm-archive__results a:focus, .skm-archive__results a:focus-visible, .skm-archive__chips a:focus, .skm-archive__chips a:focus-visible { outline: none !important; box-shadow: none !important; } #site-navigation .primary-menu > li > a { font-size: 14px; font-weight: 500; color: var(--skm-text); text-decoration: none; padding: 8px 10px !important; border-radius: 8px; background: transparent !important; transition: color .15s ease, background-color .15s ease; } #site-navigation .primary-menu > li > a:hover { color: var(--skm-blue); background: none !important; } #site-navigation .primary-menu > li.current-menu-item > a, #site-navigation .primary-menu > li.current-menu-ancestor > a, #site-navigation .primary-menu > li.current-menu-parent > a { color: var(--skm-blue); background: none !important; font-weight: 500; border-bottom: none !important; } #site-navigation .primary-menu > li.current-menu-item > a:hover, #site-navigation .primary-menu > li.current-menu-ancestor > a:hover, #site-navigation .primary-menu > li.current-menu-parent > a:hover { background: none !important; } #site-navigation .primary-menu > li > a::before, #site-navigation .primary-menu > li > a:hover::before, #site-navigation .primary-menu > li.current-menu-item > a::before, #site-navigation .primary-menu > li.current-menu-ancestor > a::before, #site-navigation .primary-menu > li.current-menu-parent > a::before { background: none !important; background-color: transparent !important; } /* Mockup nav has no dropdown caret — BuddyBoss centers one absolutely on top of the link text (left:0;right:0;margin:auto), which collides with short labels like "Browse". Suppress it; the submenu still opens on hover. BuddyBoss separately draws a bb-icons glyph via ::after on the
  • itself (not the ) for items with children — a different pseudo-element, and that glyph reads as a stray checkmark at this size. Suppress both and draw our own small CSS chevron after the link text instead, consistently sized regardless of icon-font rendering. */ #site-navigation .primary-menu .menu-item-has-children > a:before, #site-navigation .primary-menu .menu-item-has-children > a i, #site-navigation .primary-menu .menu-item-has-children > a > span:not(:first-child) { display: none !important; } #site-navigation .primary-menu .menu-item-has-children::after { content: none !important; } #site-navigation .primary-menu .menu-item-has-children > a { display: inline-flex !important; align-items: center; gap: 5px; } #site-navigation .primary-menu .menu-item-has-children > a::after { content: "" !important; display: inline-block !important; width: 6px; height: 6px; flex-shrink: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px,-1px); opacity: .6; margin-left: 1px; } #site-navigation .primary-menu .ab-submenu { padding: 8px 0; } #site-navigation .primary-menu .ab-submenu .bb-sub-menu .menu-item > a { padding: 9px 18px; font-size: 13px; color: var(--skm-text); white-space: nowrap; } #site-navigation .primary-menu .ab-submenu .bb-sub-menu .menu-item > a:hover { color: var(--skm-blue); background: var(--skm-surface); } /* Right-side actions */ #header-aside.header-aside { flex: 0 0 auto; } #header-aside .header-aside-inner { display: flex; align-items: center; gap: 6px; } /* Reuse BuddyBoss native logged-out buttons, restyled to brand */ #header-aside .bb-header-buttons { display: flex; align-items: center; gap: 10px; margin: 0; } #header-aside .bb-header-buttons .signin-button.button { background: none !important; color: var(--skm-text-heading) !important; border: none !important; box-shadow: none !important; border-radius: 0; padding: 8px 12px !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1; text-transform: none; min-height: 0; } #header-aside .bb-header-buttons .signin-button.button:hover { color: var(--skm-blue) !important; } /* Register button — .signup is the itself */ #header-aside .bb-header-buttons .signup, #header-aside .bb-header-buttons .signup:visited { display: inline-flex !important; align-items: center; background: var(--skm-blue) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 9px 16px !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; } #header-aside .bb-header-buttons .signup:hover { background: var(--skm-blue-hover) !important; color: #fff !important; } /* Injected "List aircraft" CTA (added by custom.js into .header-aside-inner) */ .skm-list-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--skm-blue); color: #fff; border: none; border-radius: 8px; margin-left: 8px; padding: 9px 16px !important; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; } .skm-list-cta:hover { background: var(--skm-blue-hover); color: #fff; } /* BuddyBoss core: `.header-aside-inner > :last-child { padding-right: 0 }` — sensible when the last item is an icon flush to the edge, but this button is text and becomes :last-child in the logged-out state (no avatar after it), so the !important above is required to win. */ /* Header actions — reorder native BuddyBoss elements via `order` */ .skm-tier-badge-wrap { display: none !important; } #header-aside .cart-wrap { display: none !important; } #header-aside .header-aside-inner > .header-search-link { order: 0; } #header-aside .header-aside-inner > .bb-separator:not(.skm-tier-sep) { order: 2; width: 1px !important; height: 20px !important; background: var(--skm-border) !important; margin: 0 4px !important; } #header-aside .header-aside-inner > .notification-wrap:not(.messages-wrap):not(.cart-wrap) { order: 3; } #header-aside .header-aside-inner > .messages-wrap { order: 5; } #header-aside .header-aside-inner > .bb-separator.skm-divider-after-messages { order: 6 !important; } #header-aside .header-aside-inner > .skm-list-cta { order: 7; } #header-aside .header-aside-inner > .user-wrap { order: 8; } /* Icon buttons — bordered with white bg (matching mockup) */ #header-aside .notification-link, #header-aside .header-search-link { width: 36px !important; height: 36px !important; border-radius: 8px !important; border: 1px solid #E2E6EA !important; background: #fff !important; display: flex !important; align-items: center; justify-content: center; position: relative; transition: background-color .12s, border-color .12s; } #header-aside .notification-link i, #header-aside .header-search-link i { font-size: 18px !important; color: rgba(13,31,51,.55) !important; } #header-aside .header-search-link svg { width: 16px; height: 16px; color: rgba(13,31,51,.55); display: block; } #header-aside .notification-link:hover, #header-aside .header-search-link:hover { background: #F5F7FA !important; border-color: #D0D7E0 !important; } #header-aside .notification-link:hover i, #header-aside .header-search-link:hover i, #header-aside .header-search-link:hover svg { color: var(--skm-text-heading) !important; } #header-aside .notification-link .count { position: absolute; top: -5px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--skm-blue); color: #fff; font-size: 9px; font-weight: 700; line-height: 16px; text-align: center; border: 1.5px solid #fff; display: flex; align-items: center; justify-content: center; } /* Hide the search icon on desktop — inline search bar replaces it */ @media (min-width: 993px) { #header-aside .header-search-link { display: none !important; } #header-aside .header-aside-inner > .bb-separator:first-of-type { display: none !important; } } /* Inline header search bar — injected between nav and #header-aside */ .skm-header-search { flex: 1 1 160px; max-width: 360px; min-width: 140px; margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; border: 1px solid #E2E6EA; border-radius: 22px; background: #F5F7FA; padding: 0 14px; transition: border-color .15s, box-shadow .15s, background .15s; } .skm-header-search:focus-within { border-color: var(--skm-blue); box-shadow: 0 0 0 3px rgba(43,127,224,.1); background: #fff; } .skm-header-search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 13px; color: var(--skm-text-heading); padding: 9px 0; font-family: inherit; } .skm-header-search input::placeholder { color: rgba(13,31,51,.38); font-size: 13px; } .skm-header-search svg { flex-shrink: 0; color: rgba(13,31,51,.38); } @media (max-width: 992px) { .skm-header-search { display: none; } } /* Avatar trigger — bordered pill matching mockup */ #header-aside .header-aside-inner > .user-wrap { flex-shrink: 0; align-self: center; } /* BuddyBoss applies its own generic hover background to the .user-wrap menu-item wrapper (never targeted before — only .user-link, the pill itself, was styled), showing as a grey halo around the white pill on hover. Flagged by Helen/client as unwanted. Reset explicitly. */ #header-aside .header-aside-inner > .user-wrap:hover, #header-aside .header-aside-inner > .user-wrap:focus, #header-aside .header-aside-inner > .user-wrap.hover { background: transparent !important; } /* Same root cause already fixed once for #site-navigation (see the tap-highlight comment above that block) never got applied to this pill — on a touch device, tapping it shows the browser's own default grey tap-highlight overlay, which reads exactly like a "grey halo" in a screenshot. Also strip any focus ring for the same reason. */ #header-aside .user-wrap, #header-aside .user-wrap *, #header-aside .user-wrap .user-link { -webkit-tap-highlight-color: transparent; } #header-aside .user-wrap .user-link:focus, #header-aside .user-wrap .user-link:focus-visible, #header-aside .user-wrap .user-link:active { background: #fff !important; outline: none !important; box-shadow: none !important; } #header-aside .user-wrap .user-link { display: flex !important; align-items: center; gap: 8px; padding: 5px 12px 5px 5px !important; border: 1px solid #E2E6EA !important; border-radius: 999px !important; background: #fff !important; transition: background-color .12s; white-space: nowrap; height: auto !important; } /* Real root cause of the recurring "grey halo on hover" reports, finally found live: BuddyBoss renders a generic ::before hover-indicator behind every nav menu link (absolute-positioned, background #F2F4F5, z-index:-1, 7px corners, and — critically — inset well past this link's own edges: -15px left / -5px right / 22px top / -24px bottom). All the fixes tried before this (resetting .user-wrap's own hover background, tap-highlight- color) never touched this pseudo-element at all, which is exactly why the halo kept surviving every prior round. Only shows on real mouse hover, never at rest — matches every past report of it being hover-only. */ #header-aside .user-wrap .user-link::before { background: transparent !important; } /* Root cause finally isolated via live DevTools forced-:hover inspection with the client plus direct elementFromPoint pixel sampling: the "grey halo" was never a background/box-shadow bug (both confirmed transparent on the real element in every state, hover included) and wasn't actually hover-specific either — it was present with zero mouse interaction too. It was this pill's own permanent 1px border (#E2E6EA), which on a fully rounded (border-radius:999px) shape against a near-white header reads as a soft grey halo rather than a crisp line. Client's call: remove the border entirely rather than keep chasing a hover state that never existed. */ #header-aside .user-wrap .user-link:hover { background: #fff !important; } #header-aside .user-wrap .user-link:hover .user-name { color: var(--skm-blue); } #header-aside .user-wrap .user-link > img, #header-aside .user-wrap .user-link .avatar { width: 34px !important; height: 34px !important; border-radius: 50% !important; order: 1; flex-shrink: 0; object-fit: cover; } #header-aside .user-wrap .user-link .user-name { font-size: 13.5px !important; font-weight: 700 !important; color: var(--skm-text-heading); order: 2; white-space: nowrap; overflow: visible !important; text-overflow: unset !important; max-width: none !important; line-height: 1.2; } #header-aside .user-wrap .user-link i { order: 3; font-size: 11px !important; color: rgba(13,31,51,.45); margin-left: 2px; } #header-aside .user-wrap .user-link::after { display: none; } #header-aside .user-wrap .user-link .skm-user-info { display: flex; flex-direction: column; justify-content: center; line-height: 1; order: 2; gap: 2px; } #header-aside .user-wrap .user-link .skm-user-info .user-name { order: 0; } #header-aside .user-wrap .user-link .skm-pill-tier { font-size: 11px; font-weight: 500; color: rgba(13,31,51,.55); white-space: nowrap; order: 1; display: flex; align-items: center; gap: 3px; } #header-aside .user-wrap .user-link .skm-pill-tier img.emoji { width: 13px !important; height: 13px !important; margin: 0 !important; } /* BuddyBoss's header-profile-menu.php template is unconditional — it always prints its full default item set (Profile/Account/Timeline/Notifications/ Messages/Connections/Groups/Log Out) regardless of any custom menu, so our real skm-acct-item list (skymarket-header-polish.php) was rendering stacked underneath it instead of replacing it. Hide the native baseline by its stable IDs, scoped to the front-end header dropdown only — leaves the real #wpadminbar admin toolbar (which reuses the same IDs) untouched. */ #header-aside #wp-admin-bar-my-account-xprofile, #header-aside #wp-admin-bar-my-account-settings, #header-aside #wp-admin-bar-my-account-activity, #header-aside #wp-admin-bar-my-account-notifications, #header-aside #wp-admin-bar-my-account-messages, #header-aside #wp-admin-bar-my-account-friends, #header-aside #wp-admin-bar-my-account-groups, #header-aside .logout-link { display: none !important; } /* ============================================================ 7. FOOTER — custom simple footer (child template-parts/footer.php) ============================================================ */ .skm-footer { background: var(--skm-navy); color: #fff; } .skm-footer__inner { max-width: var(--skm-container); margin-inline: auto; padding: 28px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .skm-footer__logo { font-size: 17px; font-weight: 700; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; } .skm-footer__logo-name > span { color: var(--skm-blue); margin-left: 2px; } .skm-footer__logo-box { width: 30px; height: 30px; background: var(--skm-blue); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .skm-footer__logo-box svg { width: 17px; height: 17px; } .skm-footer__nav { display: flex; gap: 22px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .skm-footer__nav a { color: #8FA8C0; font-size: 13px; text-decoration: none; transition: color .15s ease; } .skm-footer__nav a:hover { color: #fff; } .skm-footer__copy { color: #5A7A95; font-size: 12px; } @media (max-width: 880px) { .skm-footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; } } /* ============================================================ HEADER — MOBILE BuddyBoss renders a separate mobile header (header-mobile.php) below its breakpoint; we just keep our desktop nav from cramping. ============================================================ */ /* BuddyBoss swaps to its own .bb-mobile-header at <=767px — that bar has its own hamburger+logo+search, so the full desktop header (incl. logo, icon cluster, sign-in) must hide entirely below that point, not just the center nav-links, or both bars render stacked on top of each other. */ @media (max-width: 767px) { .site-header-container.default-header { display: none !important; } } /* Sign in/out link injected by mobileAccountLink() — the mobile slide-out panel otherwise has no account access at all (no sign-in for guests, no sign-out for logged-in users). */ .skm-mobile-account-item { border-top: 1px solid var(--skm-border-2); margin-top: 8px; padding-top: 8px; } .skm-mobile-account-item__danger { color: #C0392B !important; } @media (min-width: 768px) and (max-width: 1024px) { #site-navigation.main-navigation { display: none; } .site-header-container.default-header { gap: 12px; } .skm-list-cta { padding: 8px 12px; } } @media (max-width: 1080px) { #site-navigation .primary-menu { gap: 0; } .site-header-container.default-header { gap: 14px; } } /* ============================================================ 8. HOMEPAGE (front-page.php → .skm-home) ============================================================ */ /* Let the homepage break out of BuddyBoss's constrained content grid */ body.home #content.site-content { padding: 0; } body.home #content .container { max-width: none; width: 100%; padding: 0; margin: 0; } body.home .bb-grid.site-content-grid { display: block; margin: 0; } body.home #primary, body.home .content-area { width: 100%; max-width: none; margin: 0; padding: 0; float: none; } .skm-home { background: var(--skm-bg); } /* Bulletproof full-bleed for dark/blue bands — escapes BuddyBoss's constrained .container/.site-content-grid wrapper regardless of its max-width. */ .skm-hero, .skm-stats, .skm-cta { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Browse + Featured keep page-width but lose the wrapper's side gutter */ .skm-cats, .skm-feat { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* --- Hero --- */ .skm-hero { background: var(--skm-navy); text-align: center; padding: clamp(44px,6vw,64px) 0 clamp(40px,5vw,56px); } .skm-hero__eye { font-size: 11px; font-weight: 500; letter-spacing: 3px; color: var(--skm-blue); text-transform: uppercase; margin-bottom: 16px; } /* parent-scoped to beat the base `.skm h1` heading colour rule */ .skm-hero .skm-hero__title { font-size: var(--skm-h1); font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -1px; margin-bottom: 12px; } .skm-hero .skm-hero__title span { color: var(--skm-blue); } .skm-hero__sub { font-size: 15px; color: var(--skm-text-onnavy); font-weight: 300; margin-bottom: 32px; } .skm-hero__search { background: #fff; border-radius: var(--skm-radius); padding: 6px 6px 6px 16px; display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 0 auto; box-shadow: var(--skm-shadow-pop); } .skm-hero__search select, .skm-hero__search input { border: none; outline: none; font-size: 13px; color: var(--skm-text); font-family: var(--skm-font); background: transparent; padding: 8px 4px; } .skm-hero__search input { flex: 1; min-width: 0; } .skm-hero__search input::placeholder { color: #A0B0C0; } .skm-hero__sdiv { width: 1px; height: 24px; background: var(--skm-border); flex: 0 0 auto; } .skm-hero__sbtn { padding: 10px 20px; } /* --- Stats --- */ .skm-stats { background: var(--skm-navy-2); } .skm-stats__inner { max-width: var(--skm-container); margin-inline: auto; display: flex; justify-content: center; gap: clamp(24px,5vw,48px); padding: 16px 24px; flex-wrap: wrap; } .skm-stat { text-align: center; } .skm-stat__n { font-size: 18px; font-weight: 700; color: #fff; } .skm-stat__l { font-size: 11px; color: var(--skm-text-onnavy); margin-top: 2px; } .skm-stat__note { font-size: 9px; font-style: italic; opacity: .7; } /* --- Browse by type --- */ .skm-cats { background: #fff; padding: 28px 0; border-bottom: 1px solid var(--skm-border-2); } .skm-cats__lbl { margin-bottom: 16px; } .skm-cat-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; } .skm-cpill { background: var(--skm-surface-2); border: 1px solid var(--skm-border); border-radius: 10px; padding: 16px 8px; text-align: center; text-decoration: none; display: block; transition: border-color .15s ease, transform .05s ease; } .skm-cpill:hover { border-color: var(--cpill-fg, var(--skm-blue)); transform: translateY(-1px); } .skm-cpill__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; color: var(--skm-blue); } .skm-cpill__icon svg { width: 28px; height: 28px; display: block; } .skm-cpill:hover .skm-cpill__icon { color: var(--skm-navy); } .skm-cpill__label { font-size: 11px; color: var(--skm-text); display: block; } /* --- Featured listings --- */ .skm-feat { padding: 32px 0 40px; } .skm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .skm-card { background: #fff; border: 1px solid var(--skm-border); border-radius: var(--skm-radius); overflow: hidden; text-decoration: none; display: block; transition: box-shadow .15s ease, transform .05s ease; } .skm-card:hover { box-shadow: var(--skm-shadow-card); transform: translateY(-2px); } .skm-card__img { height: 160px; display: flex; align-items: center; justify-content: center; position: relative; } .skm-card__ghost { opacity: .08; } .skm-card__img .skm-badge { position: absolute; top: 10px; left: 10px; } .skm-card__body { padding: 14px; } .skm-card__title { font-size: 13px; font-weight: 600; color: var(--skm-text-heading); margin-bottom: 3px; } .skm-card__sub { font-size: 11px; color: var(--skm-text-faint); margin-bottom: 10px; } .skm-card__price { font-size: 17px; font-weight: 700; color: var(--skm-blue); } .skm-card__info { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; } .skm-card__loc, .skm-card__seller { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--skm-text-faint); } .skm-card__loc svg, .skm-card__seller svg { flex-shrink: 0; color: #A0B0C0; } .skm-card__meta { display: flex; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #F0F2F4; flex-wrap: wrap; } .skm-card__meta span { font-size: 10px; color: var(--skm-navy); background: #EEF3FA; border-radius: 10px; padding: 3px 8px; } /* --- CTA --- */ .skm-cta { background: var(--skm-blue); } .skm-cta__inner { width: 100%; max-width: var(--skm-container); margin-inline: auto; padding: 32px clamp(24px, 6vw, 72px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .skm-cta h2 { font-size: 20px; font-weight: 700; color: #fff; } .skm-cta p { font-size: 13px; color: var(--skm-blue-soft); margin-top: 4px; } /* --- Homepage responsive --- */ @media (max-width: 900px) { .skm-cat-grid { grid-template-columns: repeat(4, 1fr); } .skm-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .skm-hero__search { flex-wrap: wrap; padding: 12px; gap: 6px; } .skm-hero__search select, .skm-hero__search input { width: 100%; padding: 10px 8px; border: 1px solid var(--skm-border); border-radius: 8px; } .skm-hero__sdiv { display: none; } .skm-hero__sbtn { width: 100%; } .skm-cat-grid { grid-template-columns: repeat(2, 1fr); } .skm-cards { grid-template-columns: 1fr; } .skm-cta__inner { flex-direction: column; align-items: flex-start; } } /* Single listing */ /* Safety net after a real overflow bug on this page pushed the whole viewport wider than the screen on mobile — belt-and-braces so any future long text value can't do the same again. */ body.skm-single-advert { overflow-x: hidden; } body.skm-single-advert #content.site-content { padding-top: 0; } body.skm-single-advert #content .container { max-width: none; width: 100%; padding: 0; } body.skm-single-advert .bb-grid.site-content-grid { display: block; } body.skm-single-advert #primary, body.skm-single-advert .content-area { width: 100%; max-width: none; margin: 0; padding: 0; float: none; } body.skm-single-advert .entry-content-wrap { padding: 0 !important; margin: 0 !important; } body.skm-single-advert .entry-content { margin: 0 !important; } body.skm-single-advert .sidebar, body.skm-single-advert #secondary { display: none; } /* Parent theme renders its own featured-image figure + entry-title above the_content — my custom template already has its own gallery + title, so hide the parent's default ones to stop the duplicate. */ body.skm-single-advert .entry-media, body.skm-single-advert .entry-header { display: none; } .skm-ld { max-width: var(--skm-container); margin-inline: auto; padding: 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; } .skm-ld > .skm-ld__similar-title, .skm-ld > .skm-ld__similar { flex: 0 0 100%; width: 100%; } .skm-ld > .skm-ld__similar-title { margin-top: 8px; } .skm-ld__main { flex: 1; min-width: 0; } .skm-ld__paused-notice { display: flex; align-items: center; gap: 8px; background: #F5F7FA; border: 1px solid var(--skm-border); border-radius: 8px; padding: 12px 14px; font-size: 13px; color: #5A6A7A; margin-bottom: 14px; } .skm-ld__paused-notice svg { flex-shrink: 0; } .skm-ld__paused-notice a { color: var(--skm-blue); font-weight: 600; text-decoration: none; } .skm-ld__hero { background: #E4EAF2; border-radius: var(--skm-radius); height: 360px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; overflow: hidden; } .skm-ld__hero-img { width: 100%; height: 100%; object-fit: cover; } .skm-ld__ghost { opacity: .07; } .skm-ld__thumbs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } .skm-ld__thumb { width: 72px; height: 54px; border-radius: 8px; border: 1px solid var(--skm-border); overflow: hidden; padding: 0; cursor: pointer; background: #EEF2F7; } .skm-ld__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .skm-ld__thumb.is-active { border: 2px solid var(--skm-blue); } .skm-ld__title { font-size: 24px; font-weight: 700; color: var(--skm-text-heading); letter-spacing: -.5px; margin-bottom: 6px; } .skm-ld__sub { font-size: 13px; color: #7A8A9A; margin-bottom: 16px; } .skm-ld__price { font-size: 28px; font-weight: 700; color: var(--skm-text-heading); margin-bottom: 24px; } /* Redesigned per mockup_single_listing.dc.html's "SHARE BAR — icon circles with labels" section — replaces the old bordered-pill row (client said it "wasn't working as we want"). Circular colored icon + label stacked underneath, transparent background until hover, Report pushed to the far right via margin-left:auto on that one item. */ .skm-ld__share { display: flex; align-items: center; gap: 4px; padding: 14px 0; margin-bottom: 22px; border-top: 1px solid #F0F2F4; border-bottom: 1px solid #F0F2F4; } .skm-ld__share-label { font-size: 11px; font-weight: 600; color: rgba(13,31,51,.35); text-transform: uppercase; letter-spacing: .08em; margin-right: 8px; flex-shrink: 0; } .skm-share-btn, .skm-share-btn:focus, .skm-share-btn:active { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 14px; border: none !important; background: transparent !important; border-radius: 10px; cursor: pointer; font-family: var(--skm-font); font-size: inherit; line-height: inherit; text-decoration: none; transition: background .12s; } .skm-share-btn:hover { background: #F5F7FA !important; } .skm-share-btn__icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .skm-share-btn__label { font-size: 11px; font-weight: 500; color: rgba(13,31,51,.55); white-space: nowrap; } .skm-share-btn.is-copied .skm-share-btn__icon { background: #E8F8EE !important; } .skm-share-btn.is-copied .skm-share-btn__label { color: #1F8A5B !important; } .skm-share-btn--report { margin-left: auto; } .skm-share-btn--report:hover { background: #FEF5F5 !important; } .skm-share-btn--report .skm-share-btn__label { color: #C0392B; } @media (max-width: 600px) { .skm-ld__share { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .skm-share-btn { padding: 8px 10px; } } .skm-ld__specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; } .skm-spec { background: var(--skm-surface-2); border: 1px solid var(--skm-border-2); border-radius: 10px; padding: 14px; } .skm-spec__lbl { font-size: 9px; font-weight: 600; letter-spacing: 1.5px; color: #A0B0C0; text-transform: uppercase; margin-bottom: 4px; } .skm-spec__val { font-size: 14px; font-weight: 600; color: var(--skm-text-heading); } .skm-spec__chk { color: var(--skm-success); } .skm-ld__desc-title { font-size: 14px; font-weight: 600; color: var(--skm-text-heading); margin-bottom: 8px; } .skm-ld__desc { font-size: 14px; color: #5A6A7A; line-height: 1.7; } .skm-ld__desc p { margin-bottom: 12px; } .skm-ld__videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 24px; } .skm-ld__video { width: 100%; aspect-ratio: 16/9; border-radius: 10px; border: none; background: #0D1F33; } .skm-ld__side { width: 280px; min-width: 280px; } .skm-side-card { background: #fff; border: 1px solid var(--skm-border); border-radius: var(--skm-radius); padding: 20px; margin-bottom: 14px; } .skm-side-card__lbl { font-size: 11px; font-weight: 600; letter-spacing: 1px; color: #A0B0C0; text-transform: uppercase; margin-bottom: 10px; } .skm-seller { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .skm-seller__avatar { width: 44px; height: 44px; border-radius: 50%; background: #E6F1FB; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #185FA5; overflow: hidden; flex: 0 0 auto; } .skm-seller__avatar img { width: 100%; height: 100%; border-radius: 50%; } .skm-seller__name { font-size: 14px; font-weight: 600; color: var(--skm-text-heading); } .skm-seller__meta { font-size: 11px; color: var(--skm-text-faint); margin-top: 2px; } .skm-seller__verified { font-size: 11px; color: var(--skm-success); margin-top: 3px; } .skm-seller__stats { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 10px; background: var(--skm-surface); border-radius: 8px; } .skm-seller__stats-div { width: 1px; align-self: stretch; background: var(--skm-border); } .skm-seller__stat { flex: 1; text-align: center; } .skm-seller__stat p { font-size: 16px; font-weight: 700; color: var(--skm-text-heading); margin: 0; } .skm-seller__stat span { font-size: 10px; color: rgba(13,31,51,.45); } .skm-seller__profile-link, .skm-seller__profile-link:hover, .skm-seller__profile-link:focus { display: block; text-align: center; font-size: 13px; font-weight: 500; color: var(--skm-blue) !important; margin-top: 14px; } .skm-seller__profile-link:hover, .skm-seller__profile-link:focus { text-decoration: underline; } .skm-side-btn { display: block; width: 100%; text-align: center; border: none; border-radius: 8px; padding: 11px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--skm-font); margin-bottom: 8px; text-decoration: none; } .skm-side-btn--primary, .skm-side-btn--primary:hover, .skm-side-btn--primary:focus { background: var(--skm-blue) !important; color: #fff !important; } .skm-side-btn--primary:hover, .skm-side-btn--primary:focus { background: var(--skm-blue-hover) !important; } .skm-side-btn--ghost, .skm-side-btn--ghost:hover, .skm-side-btn--ghost:focus { background: #fff !important; color: var(--skm-text-heading) !important; border: 1px solid var(--skm-border) !important; } .skm-side-btn--ghost:hover, .skm-side-btn--ghost:focus { border-color: var(--skm-blue) !important; color: var(--skm-blue) !important; } .skm-contact-reveal:empty { display: none; } .skm-contact-reveal { margin-top: 6px; font-size: 13px; color: var(--skm-text); } .skm-ref { list-style: none; margin: 0; padding: 0; } .skm-ref li { font-size: 12px; color: #5A6A7A; padding: 7px 0; border-bottom: 1px solid #F0F2F4; display: flex; justify-content: space-between; } .skm-ref li:last-child { border: none; } .skm-ref li span { font-weight: 500; color: var(--skm-text-heading); } .skm-contact-out { margin-top: 6px; padding: 10px 12px; background: var(--skm-surface); border-radius: 8px; font-size: 13px; color: var(--skm-text); } .skm-contact-out[hidden] { display: none; } .skm-side-btn.is-saved { color: var(--skm-blue); border-color: var(--skm-blue); } /* Breadcrumb */ .skm-ld__crumbs { max-width: var(--skm-container); margin-inline: auto; padding: 13px 24px; display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(13,31,51,.45); background: #fff; border-bottom: 1px solid var(--skm-border); } .skm-ld__crumbs a { color: rgba(13,31,51,.45); } .skm-ld__crumbs a:hover { color: var(--skm-blue) !important; } .skm-ld__crumbs svg { width: 11px; height: 11px; flex-shrink: 0; opacity: .5; } .skm-ld__crumbs span { color: var(--skm-text-heading); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Hero gallery extras */ .skm-ld__hero { position: relative; } .skm-ld__hero-badge { position: absolute; top: 12px; left: 12px; background: var(--skm-blue); color: #fff !important; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 4px; letter-spacing: .04em; } .skm-ld__hero-arrow, .skm-ld__hero-arrow:hover, .skm-ld__hero-arrow:focus { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; background: rgba(255,255,255,.9) !important; border: 1px solid rgba(13,31,51,.08) !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.1); color: #0D1F33 !important; } .skm-ld__hero-arrow:hover, .skm-ld__hero-arrow:focus { background: #fff !important; } .skm-ld__hero-arrow svg { width: 15px; height: 15px; flex-shrink: 0; } .skm-ld__hero-arrow--prev { left: 14px; } .skm-ld__hero-arrow--next { right: 14px; } .skm-ld__hero-counter { position: absolute; bottom: 14px; right: 14px; background: rgba(13,31,51,.6); color: #fff; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 5px; } /* Title row + price/views/saves */ .skm-ld__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .skm-ld__titleprice { text-align: right; flex-shrink: 0; } .skm-ld__titleprice .skm-ld__price { margin: 0 0 2px; } .skm-ld__stats { font-size: 11px; color: rgba(13,31,51,.4); margin: 0; } .skm-ld__verified-pill { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(31,138,91,.1); color: var(--skm-success); vertical-align: middle; } /* Generic white card wrapper (spec table / description / location) */ .skm-ld__card { background: #fff; border: 1px solid var(--skm-border); border-radius: var(--skm-radius); padding: 20px 22px; margin-bottom: 16px; } .skm-ld__card--flush { padding: 0; overflow: hidden; } .skm-ld__card-title { font-size: 14px; font-weight: 600; color: var(--skm-text-heading); margin-bottom: 14px; } /* Real mobile bug found live: flex children default to min-width:auto, which refuses to shrink below its own content's natural width — a long value like "Schleicher ASK-21 two-seat glider" forced this row (and the whole page along with it, since nothing above constrains it) wider than the viewport on a real phone, cutting off Technical Specification, the Share bar, and everything else on the page, not just this row. */ .skm-spec-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F0F2F4; font-size: 13px; } .skm-spec-row p { margin: 0; min-width: 0; overflow-wrap: break-word; } .skm-spec-row:last-child { border-bottom: none; } .skm-spec-row p:first-child { color: rgba(13,31,51,.5); flex-shrink: 0; } .skm-spec-row p:last-child { font-weight: 500; color: var(--skm-text-heading); text-align: right; } .skm-spec-row__ok { color: var(--skm-success) !important; font-weight: 600 !important; } /* Location card */ .skm-ld__loc-head { padding: 14px 18px; border-bottom: 1px solid #F0F2F4; } .skm-ld__loc-head .skm-ld__card-title { margin: 0 0 1px; } .skm-ld__loc-sub { font-size: 11px; color: rgba(13,31,51,.45); margin: 0; } .skm-ld__locmap { height: 180px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .skm-ld__locmap-fallback { position: absolute; inset: 0; background: linear-gradient(145deg,#D6E8F0,#E2EDF5 50%,#D6E8F0); } .skm-ld__leaflet { position: absolute; inset: 0; z-index: 0; } .skm-ld__leaflet .leaflet-control-zoom { display: none; } .skm-ld__locpin { position: relative; z-index: 1; background: #fff; border-radius: 10px; padding: 11px 15px; box-shadow: 0 2px 12px rgba(13,31,51,.15); display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--skm-text-heading); } .skm-ld__locpin-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--skm-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .skm-ld__locpin-dot svg { width: 13px; height: 13px; flex-shrink: 0; } .skm-ld__locmap-link, .skm-ld__locmap-link:hover, .skm-ld__locmap-link:focus { position: absolute; bottom: 12px; right: 12px; font-size: 12px; font-weight: 500; color: var(--skm-blue) !important; background: #fff !important; border: 1px solid rgba(43,127,224,.3) !important; border-radius: 6px; padding: 5px 11px; } .skm-ld__locmap-link:hover, .skm-ld__locmap-link:focus { background: rgba(43,127,224,.05) !important; } /* Similar aircraft */ .skm-ld__similar-title { font-size: 16px; font-weight: 600; color: var(--skm-text-heading); margin-bottom: 14px; } .skm-ld__similar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .skm-ld__similar-card, .skm-ld__similar-card:hover { display: block; background: #fff; border: 1px solid var(--skm-border); border-radius: 12px; overflow: hidden; color: inherit !important; } .skm-ld__similar-card:hover { box-shadow: 0 2px 12px rgba(13,31,51,.08); } .skm-ld__similar-img { height: 110px; background: var(--skm-surface-2); display: flex; align-items: center; justify-content: center; } .skm-ld__similar-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .skm-ld__similar-img svg { opacity: .12; width: 46px; height: 46px; } .skm-ld__similar-body { padding: 11px; } .skm-ld__similar-name { font-size: 12px; font-weight: 600; color: var(--skm-text-heading); margin: 0 0 2px; } .skm-ld__similar-sub { font-size: 10px; color: rgba(13,31,51,.45); margin: 0 0 6px; } .skm-ld__similar-price { font-size: 15px; font-weight: 700; color: var(--skm-text-heading); margin: 0; } /* Sidebar price + CTA card */ .skm-side-card--cta { padding: 20px; } .skm-cta__pricerow { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; gap: 12px; } .skm-cta__price { font-size: 25px; font-weight: 700; color: var(--skm-text-heading); letter-spacing: -.03em; margin: 0; } .skm-cta__drop { font-size: 11px; color: var(--skm-success); margin: 3px 0 0; font-weight: 500; } .skm-cta__heart { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--skm-border) !important; background: #fff !important; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 16px; color: rgba(13,31,51,.4) !important; line-height: 1; } .skm-cta__heart.is-saved { color: #C0392B !important; } /* Real bug found live: :hover and .is-saved shared the exact same red styling here. Real devices don't un-hover after a tap, so on touchscreens this made the button look permanently "saved" (or ambiguous — genuinely saved and just-tapped-but-nothing-happened were visually identical) after any tap, reported as "looks odd" + "not working" since there was no reliable way to tell the two states apart. Scoping :hover to devices that actually support it fixes both. */ @media (hover: hover) { .skm-cta__heart:hover, .skm-cta__heart:focus { border-color: #C0392B !important; } } .skm-cta__msgwrap { margin-bottom: 8px; } .skm-cta__textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--skm-border); border-radius: 8px; font-size: 13px; color: var(--skm-text-heading); resize: none; line-height: 1.5; background: var(--skm-surface); font-family: var(--skm-font); margin-bottom: 8px; } .skm-cta__textarea:focus { outline: none; border-color: var(--skm-blue) !important; } .skm-cta__send:disabled { opacity: .6; cursor: default; } .skm-cta__msgresult { margin-top: 8px; padding: 10px 12px; background: var(--skm-surface); border-radius: 8px; font-size: 13px; color: var(--skm-text); } .skm-cta__msgresult a { color: var(--skm-blue); font-weight: 500; } .skm-cta__msgresult[hidden] { display: none; } /* Safety note */ .skm-ld__safety { background: #FDF4E7; border: 1px solid rgba(229,193,122,.5); border-radius: 10px; padding: 14px 16px; display: flex; gap: 10px; } .skm-ld__safety svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; } .skm-ld__safety p { font-size: 12px; color: #6B3E0E; line-height: 1.6; margin: 0; } .skm-ld__safety a { color: #854F0B; font-weight: 500; } .skm-ld__safety a:hover { text-decoration: underline; } @media (max-width: 900px) { /* Real bug found live: .skm-ld's align-items:flex-start (needed on desktop so the two side-by-side columns don't stretch to match each other's height) also controls the CROSS-axis once flex-direction flips to column here — meaning it governs WIDTH instead of height on mobile. .skm-ld__side already got width:100% to counteract that; .skm-ld__main never did, so it was shrink-wrapping to its widest descendant's content width (the Share row, ~449px) instead of the container's actual width, pushing Share icons and Technical specification rows off the right edge of the screen. */ .skm-ld { flex-direction: column; } .skm-ld__main { width: 100%; } .skm-ld__side { width: 100%; min-width: 0; } .skm-ld__specs { grid-template-columns: repeat(2, 1fr); } .skm-ld__hero { height: 260px; } .skm-ld__similar { grid-template-columns: 1fr; } .skm-ld__titlerow { flex-direction: column; } .skm-ld__titleprice { text-align: left; } } /* Search / archive — navy full-bleed search bar (mockup_listings.dc.html) */ .skm-archive__searchbar-navy { background: var(--skm-navy); padding: 20px 24px 18px; } .skm-archive__searchbar-inner { max-width: var(--skm-container); margin-inline: auto; display: flex; align-items: center; gap: 12px; position: relative; } .skm-archive__searchbar-inner .facetwp-facet { flex: 1; min-width: 0; position: relative; } /* FacetWP wraps the keyword input in .facetwp-input-wrap, which has no explicit width of its own (auto-width inline-block) — width:100% on just the input is circular against an auto-width parent, confirmed live (stayed 240px regardless of how wide the flex:1 ancestor was). Force both the wrapper and the input to actually fill the bar. */ .skm-archive__searchbar-inner .facetwp-facet, .skm-archive__searchbar-inner .facetwp-input-wrap { display: block !important; width: 100% !important; } /* FacetWP's own default CSS puts a small search icon at the right edge of the input — mockup_listings.dc.html has it on the left, 14px in, with the input text padded clear of it. Override with our own icon instead of fighting FacetWP's background-image with !important. */ .skm-archive__searchbar-inner .facetwp-facet input { width: 100% !important; padding-left: 42px !important; background-position: 14px center !important; background-repeat: no-repeat !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(13,31,51,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; } /* Real bug found live on mobile: FacetWP renders its own real element inside .facetwp-input-wrap (not just a background-image, an actual DOM node) — invisible at desktop width but exposed and clipped past the input's right edge once the bar narrows enough. We already render our own left-side search icon below; hide FacetWP's native one outright instead of fighting it. */ .skm-archive .facetwp-icon { display: none !important; } .skm-archive .facetwp-facet-keyword::before { content: ""; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(13,31,51,0.4)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); pointer-events: none; } /* Real bug found live: the left search icon was rendered via a ::before pseudo-element on the OUTER .facetwp-facet-keyword wrapper, but the real (a normal sibling deeper in the DOM, not the pseudo's own element) paints on top of it in the same stacking context with its own opaque white background — so the icon was always fully hidden behind the input, never actually visible at any width. Put the icon on the input's own background instead (single element, no stacking conflict) rather than fighting DOM paint order. */ .skm-archive .facetwp-facet-keyword input[type="text"] { width: 100%; padding: 11px 16px 11px 42px !important; border: none !important; border-radius: 8px !important; font-size: 15px !important; color: var(--skm-text-heading); font-family: var(--skm-font); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(13,31,51,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 14px center !important; } .skm-save-search-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 11px 18px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.7); cursor: pointer; font-family: var(--skm-font); white-space: nowrap; transition: all .15s ease; } .skm-save-search-btn:hover, .skm-save-search-btn.is-saved { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.2); } .skm-save-search-msg { flex-shrink: 0; font-size: 12px; white-space: nowrap; color: #fff; } .skm-save-search-form { position: absolute; top: 100%; right: 0; margin-top: 8px; background: #fff; border: 1px solid var(--skm-border); border-radius: 8px; padding: 10px; display: flex; gap: 8px; box-shadow: var(--skm-shadow-pop); z-index: 20; } .skm-save-search-input { border: 1px solid var(--skm-border); border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: var(--skm-font); width: 220px; } .skm-save-search-confirm { background: var(--skm-blue); color: #fff; border: none; border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--skm-font); white-space: nowrap; } .skm-save-search-confirm:hover { background: var(--skm-blue-hover); } /* Search alerts page */ body.skm-page-search-alerts #content.site-content, body.skm-page-saved-listings #content.site-content { padding: 0; } body.skm-page-search-alerts #content .container, body.skm-page-saved-listings #content .container { max-width: none; width: 100%; padding: 0; margin: 0; } body.skm-page-search-alerts .bb-grid.site-content-grid, body.skm-page-saved-listings .bb-grid.site-content-grid { display: block; margin: 0; } body.skm-page-search-alerts #primary, body.skm-page-search-alerts .content-area, body.skm-page-saved-listings #primary, body.skm-page-saved-listings .content-area { width: 100%; max-width: none; margin: 0; padding: 0; float: none; } .skm-alerts__hero { background: var(--skm-navy); padding: 56px 24px 48px; text-align: center; } .skm-alerts__hero h1 { font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -.5px; margin-bottom: 10px; } .skm-alerts__hero p { font-size: 14px; color: #7A9AB5; } .skm-alerts__hero p a { color: var(--skm-blue-soft); } .skm-alerts__body { padding-block: 32px; max-width: 760px; } .skm-alert-row { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--skm-border); border-radius: var(--skm-radius); padding: 16px 20px; margin-bottom: 12px; } .skm-alert-row__info { flex: 1; min-width: 0; } .skm-alert-row__label { font-size: 14px; font-weight: 600; color: var(--skm-text-heading); margin-bottom: 2px; } .skm-alert-row__meta { font-size: 12px; color: var(--skm-text-faint); } .skm-alert-row__view { font-size: 13px; color: var(--skm-blue); text-decoration: none; font-weight: 500; flex-shrink: 0; } .skm-alert-row__delete { background: none; border: none; color: #C0392B; font-size: 13px; cursor: pointer; font-family: var(--skm-font); flex-shrink: 0; } @media (max-width: 640px) { /* Real bug found live on a real phone: "Save this search" ran off the right edge of the screen. This rule already existed to fix exactly that, but targeted a class name (.skm-archive__searchbar) that doesn't exist anywhere in the markup — the real wrapper is .skm-archive__searchbar-inner — so it silently never matched. */ .skm-archive__searchbar-inner { flex-wrap: wrap; row-gap: 10px; } .skm-archive__searchbar-inner .facetwp-facet { flex-basis: 100%; } .skm-save-search-btn { flex: 1; justify-content: center; } .skm-alert-row { flex-wrap: wrap; } } /* Map view page */ body.skm-page-map #content.site-content { padding: 0; } body.skm-page-map #content .container { max-width: none; width: 100%; padding: 0; margin: 0; } body.skm-page-map .bb-grid.site-content-grid { display: block; margin: 0; } body.skm-page-map #primary, body.skm-page-map .content-area { width: 100%; max-width: none; margin: 0; padding: 0; float: none; } .skm-map-page__hero { background: var(--skm-navy); padding: 40px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .skm-map-page__hero h1 { font-size: 28px; font-weight: 700; color: #fff !important; letter-spacing: -.5px; margin-bottom: 8px; } .skm-map-page__hero p { font-size: 14px; color: #7A9AB5; } .skm-map-page__listview { display: flex; align-items: center; gap: 7px; padding: 9px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; font-size: 13px; font-weight: 500; color: #fff !important; flex-shrink: 0; } .skm-map-page__listview:hover { background: rgba(255,255,255,.16) !important; color: #fff !important; } .skm-map-page__body { display: grid; grid-template-columns: 280px 1fr; gap: 0; align-items: stretch; min-height: calc(100vh - 152px); } .skm-map-page__body .skm-archive__side { position: static; height: auto; max-height: calc(100vh - 152px); overflow-y: auto; border: none; border-right: 1px solid var(--skm-border); border-radius: 0; } .skm-map-page__main { min-width: 0; height: 100%; } .skm-map-page__map { width: 100%; height: 100%; z-index: 0; } @media (max-width: 900px) { .skm-map-page__body { grid-template-columns: 1fr; min-height: auto; } .skm-map-page__body .skm-archive__side { max-height: none; border-right: none; border-bottom: 1px solid var(--skm-border); } .skm-map-page__mapwrap { min-height: 480px; } } /* Map view filters (mockup_listings_map) */ .skm-map-page__resultsmeta { font-size: 12px; font-weight: 400; color: rgba(13,31,51,.45); } .skm-map-page__catcheck { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; } .skm-map-page__catcount { font-size: 11px; color: rgba(13,31,51,.35); flex-shrink: 0; } .skm-map-page__radiuspills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; } .skm-map-page__pill { padding: 4px 10px; border: 1px solid var(--skm-border); border-radius: 20px; font-size: 11px; color: rgba(13,31,51,.6); background: #fff; cursor: pointer; display: inline-flex; align-items: center; } .skm-map-page__pill input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .skm-map-page__pill:hover { border-color: var(--skm-blue) !important; } .skm-map-page__pill.is-active { border-color: var(--skm-blue) !important; color: var(--skm-blue) !important; background: rgba(43,127,224,.06) !important; } .skm-map-page__mapwrap { position: relative; height: 100%; min-height: calc(100vh - 152px); border-radius: 0; border: none; overflow: hidden; } .skm-map-page__countchip { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--skm-border); border-radius: 20px; padding: 7px 16px; box-shadow: 0 2px 8px rgba(13,31,51,.1); font-size: 13px; font-weight: 500; color: var(--skm-text-heading); z-index: 5; white-space: nowrap; } .skm-map-page__tiletoggle { position: absolute; top: 16px; right: 16px; display: flex; background: #fff; border: 1px solid var(--skm-border); border-radius: 7px; overflow: hidden; box-shadow: 0 1px 4px rgba(13,31,51,.1); z-index: 5; } .skm-map-page__tiletoggle button { padding: 6px 14px; font-size: 12px; font-weight: 400; color: rgba(13,31,51,.6); background: #fff !important; border: none; cursor: pointer; border-left: 1px solid var(--skm-border); } .skm-map-page__tiletoggle button:first-child { border-left: none; } .skm-map-page__tiletoggle button.is-active { background: var(--skm-navy) !important; color: #fff !important; font-weight: 600; } .skm-map-page__tiletoggle button:hover:not(.is-active) { background: var(--skm-surface) !important; } .skm-map-page__legend { position: absolute; bottom: 24px; left: 352px; background: #fff; border: 1px solid var(--skm-border); border-radius: 8px; padding: 10px 14px; box-shadow: 0 1px 4px rgba(13,31,51,.08); z-index: 5; } .skm-map-page__legend-title { font-size: 10px; font-weight: 600; color: rgba(13,31,51,.4); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; } .skm-map-page__legend-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: rgba(13,31,51,.6); margin-bottom: 5px; } .skm-map-page__legend-row:last-child { margin-bottom: 0; } .skm-map-page__legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 700; color: #fff; } @media (max-width: 900px) { .skm-map-page__legend { display: none; } } /* Real gap found via audit: count chip is horizontally centered while the tile toggle is right-anchored — on desktop-width maps there's room for both, but on a phone-width map (~360px) the centered chip's right edge overlaps the toggle's left edge, clipping "3 listings in view" behind it. */ @media (max-width: 640px) { .skm-map-page__countchip { left: 12px; transform: none; } } .skm-map-page__card { position: absolute; bottom: 24px; left: 16px; width: 320px; max-width: calc(100% - 32px); background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(13,31,51,.18); overflow: hidden; z-index: 6; } .skm-map-page__card-img { width: 100%; height: 90px; background: linear-gradient(135deg,#ECF1F8,#E0E8F4); background-size: cover; background-position: center; } .skm-map-page__card-badge { position: absolute; top: 7px; left: 7px; background: var(--skm-blue); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 3px; } .skm-map-page__card-close { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(13,31,51,.08) !important; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(13,31,51,.5) !important; } .skm-map-page__card-close:hover { background: rgba(13,31,51,.15) !important; } .skm-map-page__card-body { padding: 12px 14px; } .skm-map-page__card-title { font-size: 13px; font-weight: 600; color: var(--skm-text-heading); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .skm-map-page__card-meta { font-size: 11px; color: rgba(13,31,51,.45); margin-bottom: 2px; } .skm-map-page__card-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .skm-map-page__card-price { font-size: 16px; font-weight: 700; color: var(--skm-text-heading); } .skm-map-page__card-btn { font-size: 12px; font-weight: 500; color: #fff !important; background: var(--skm-blue) !important; padding: 5px 12px; border-radius: 6px; } .skm-map-page__card-btn:hover { background: var(--skm-blue-hover) !important; color: #fff !important; } .skm-map-page__card-foot { padding: 8px 14px; border-top: 1px solid #F0F2F4; background: var(--skm-surface); font-size: 11px; color: rgba(13,31,51,.5); } .skm-map-pin__dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(13,31,51,.3); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; } .marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background-color: rgba(43,127,224,.75) !important; } .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: rgba(43,127,224,.35) !important; } .marker-cluster span { color: #fff !important; font-weight: 700 !important; } /* Listing analytics page */ body.skm-page-listing-analytics #content.site-content { padding: 0; } body.skm-page-listing-analytics #content .container { max-width: none; width: 100%; padding: 0; margin: 0; } body.skm-page-listing-analytics .bb-grid.site-content-grid { display: block; margin: 0; } body.skm-page-listing-analytics #primary, body.skm-page-listing-analytics .content-area { width: 100%; max-width: none; margin: 0; padding: 0; float: none; } .skm-analytics__hero { background: var(--skm-navy); padding: 56px 24px 48px; text-align: center; } .skm-analytics__hero h1 { font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -.5px; margin-bottom: 10px; } .skm-analytics__hero p { font-size: 14px; color: #7A9AB5; } .skm-analytics__body { padding-block: 32px; max-width: 760px; } .skm-analytics__summary { display: flex; gap: 14px; margin-bottom: 28px; } .skm-analytics__summary .skm-metric { flex: 1; } .skm-analytics__table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--skm-border); border-radius: var(--skm-radius); overflow: hidden; } /* Real gap found via audit: a real , no overflow handling and no wrap on the "Listing" column's title link — a long real aircraft title (these run long: "Schleicher ASK-21 two-seat glider", etc.) would force the table wider than the viewport on mobile with nowhere to scroll. */ @media (max-width: 640px) { .skm-analytics__table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .skm-analytics__table td:first-child { max-width: 180px; overflow-wrap: break-word; } } .skm-analytics__table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--skm-text-faint); padding: 12px 16px; border-bottom: 1px solid var(--skm-border); background: var(--skm-surface); } .skm-analytics__table td { padding: 14px 16px; font-size: 14px; color: var(--skm-text); border-bottom: 1px solid #F0F2F4; } .skm-analytics__table tr:last-child td { border-bottom: none; } .skm-analytics__table td a { color: var(--skm-text-heading); font-weight: 500; text-decoration: none; } .skm-analytics__table td a:hover { color: var(--skm-blue); } .skm-analytics__expired { font-size: 10px; color: var(--skm-amber); font-weight: 600; text-transform: uppercase; } @media (max-width: 640px) { .skm-analytics__summary { flex-wrap: wrap; } } .skm-archive__body { display: grid; grid-template-columns: 268px 1fr; gap: 28px; align-items: flex-start; padding-block: 32px; } /* Sidebar filter panel */ .skm-archive__side { position: sticky; top: 72px; background: #fff; border: 1px solid var(--skm-border); border-radius: 12px; overflow: hidden; padding: 0; } .skm-archive__side-head { padding: 16px 20px; border-bottom: 1px solid var(--skm-border); display: flex; align-items: center; justify-content: space-between; } .skm-archive__side-head p { margin: 0; font-size: 14px; font-weight: 600; color: var(--skm-text-heading); } .skm-clear-filters { background: none !important; border: none; font-size: 13px; color: var(--skm-blue); cursor: pointer; font-weight: 500; font-family: var(--skm-font); } .skm-clear-filters:hover, .skm-clear-filters:focus { background: none !important; color: var(--skm-blue-hover) !important; } .skm-facet { padding: 16px 20px; border-bottom: 1px solid var(--skm-border); margin-bottom: 0; } .skm-facet--last { border-bottom: none; } .skm-facet__title { font-size: 11px; font-weight: 600; letter-spacing: .09em; color: rgba(13,31,51,.35); text-transform: uppercase; margin-bottom: 12px; } .skm-eyebrow--icon, .skm-facet__title--icon { display: inline-flex; align-items: center; gap: 6px; } .skm-eyebrow__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(43,127,224,.08); flex-shrink: 0; } /* Year facet (FacetWP number_range) — native output is two stacked s plus an ; lay out as a 2-col grid with a full-width "Apply" button matching the mockup (the "Go" text itself is hardcoded by FacetWP and gets renamed via JS in custom.js). */ .skm-archive__side .facetwp-facet-year, .skm-archive__side .facetwp-facet-hours, .skm-archive__side .facetwp-facet-smoh, .skm-archive__side .facetwp-facet-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 8px; } .skm-archive__side .facetwp-number { padding: 8px 10px; border: 1px solid var(--skm-border); border-radius: 6px; font-size: 13px; color: var(--skm-text-heading); background: #fff; font-family: var(--skm-font); width: 100%; box-sizing: border-box; } .skm-archive__side .facetwp-submit { grid-column: 1 / -1; margin-top: 2px; width: 100%; padding: 9px; background: var(--skm-surface) !important; border: 1px solid var(--skm-border) !important; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--skm-text-heading) !important; cursor: pointer; font-family: var(--skm-font); transition: background .12s; -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important; } .skm-archive__side .facetwp-submit:hover, .skm-archive__side .facetwp-submit:focus, .skm-archive__side .facetwp-submit:active { background: var(--skm-border) !important; color: var(--skm-text-heading) !important; box-shadow: none !important; outline: none !important; } /* FacetWP's slider facet (Max Price) ships its own default reset button — solid dark-blue gradient with a box-shadow, real class confirmed against the plugin source (includes/facets/slider.php: facetwp-slider-reset) — never styled by us, so it was always showing that raw default rather than a regression. Matched to the same neutral/bordered look as the Year facet's Apply button above for visual consistency across facets. */ .skm-archive__side .facetwp-slider-reset { width: 100% !important; margin-top: 8px !important; padding: 9px !important; background: var(--skm-surface) !important; background-image: none !important; border: 1px solid var(--skm-border) !important; border-radius: 7px !important; box-shadow: none !important; font-size: 13px !important; font-weight: 500 !important; color: var(--skm-text-heading) !important; font-family: var(--skm-font) !important; transition: background .12s !important; -webkit-appearance: none !important; appearance: none !important; } .skm-archive__side .facetwp-slider-reset:hover, .skm-archive__side .facetwp-slider-reset:focus, .skm-archive__side .facetwp-slider-reset:active { background: var(--skm-border) !important; box-shadow: none !important; outline: none !important; } .skm-archive .facetwp-facet { margin: 0; } /* FacetWP draws its checkbox/radio indicator as a background-image on this div itself (not a real ), positioned left/vcenter at 14x14 — it needs padding-left to clear the text, not a flex gap (gap does nothing for a background-image, so without this padding the indicator renders underneath the first letter of the label). */ .skm-archive__side .facetwp-checkbox, .skm-archive__side .facetwp-radio { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #3D5166; margin-bottom: 8px; cursor: pointer; padding: 0 0 0 22px !important; background-position: left center !important; } .skm-archive__side .facetwp-checkbox:last-child, .skm-archive__side .facetwp-radio:last-child { margin-bottom: 0; } .skm-archive__side .facetwp-checkbox:hover, .skm-archive__side .facetwp-radio:hover { color: var(--skm-text-heading); } .skm-archive__side .facetwp-counter { margin-left: auto; font-size: 12px; color: rgba(13,31,51,.35); } .skm-archive .facetwp-search, .skm-archive .facetwp-search-wrap { width: 100%; } .skm-archive__side .facetwp-search-wrap input { width: 100%; border: 1px solid var(--skm-border); border-radius: 6px; padding: 8px 10px; font-family: var(--skm-font); font-size: 13px; } .skm-archive .facetwp-slider-wrap .noUi-connect { background: var(--skm-blue) !important; } .skm-archive .facetwp-slider-wrap .noUi-handle { border-color: var(--skm-blue) !important; } /* A pre-existing, older duplicate .facetwp-slider-reset rule used to live here (solid blue fill + navy hover) — same selector specificity as the real fix above, but declared later in the cascade so it silently won on the background property (border still came from the fix above, only background lost — confirmed live via computed-style inspection). Flagged by the client as an inconsistent button color. Removed outright rather than left to fight the real styled version above. */ /* Results header — count, active-filter chips, sort, view toggle */ .skm-archive__results { min-width: 0; } .skm-archive__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; } .skm-archive__meta-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .skm-archive__meta-right { display: flex; align-items: center; gap: 10px; } .skm-archive__count { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; font-size: 15px; color: var(--skm-text-heading); } .skm-archive__count strong { font-weight: 600; } .skm-archive__count-label { color: rgba(13,31,51,.5); } .skm-archive__chips { display: inline-flex; gap: 6px; flex-wrap: wrap; } .skm-archive__chips .facetwp-selections { display: flex; gap: 6px; flex-wrap: wrap; } .skm-archive__chips .facetwp-selection-value, .skm-archive__chips .facetwp-selection { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(43,127,224,.08); border: 1px solid rgba(43,127,224,.2); border-radius: 20px; font-size: 12px; font-weight: 500; color: var(--skm-blue); text-decoration: none; cursor: pointer; } .skm-archive__chips .facetwp-selection-value::after, .skm-archive__chips .facetwp-selection::after { content: "×"; margin-left: 5px; font-size: 14px; line-height: 1; } .skm-archive select.facetwp-sort { padding: 8px 32px 8px 12px; border: 1px solid var(--skm-border); border-radius: 7px; font-size: 13px; color: var(--skm-text-heading); background: #fff; cursor: pointer; font-family: var(--skm-font); } .skm-view-toggle { display: flex; border: 1px solid var(--skm-border); border-radius: 7px; overflow: hidden; } .skm-view-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; background: #fff; cursor: pointer; color: rgba(13,31,51,.45); transition: background .12s; } .skm-view-btn + .skm-view-btn { border-left: 1px solid var(--skm-border); } /* Separate pill, not merged into the list/grid toggle group — matches mockup_listings.dc.html exactly (icon + "Map view" text, own border). */ .skm-mapview-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--skm-border) !important; border-radius: 7px; font-size: 13px; font-weight: 500; color: rgba(13,31,51,.6) !important; background: #fff !important; } .skm-mapview-btn:hover { border-color: var(--skm-blue) !important; color: var(--skm-blue) !important; } .skm-view-btn.is-active { background: var(--skm-navy); color: #fff; } /* Card rows */ .skm-row { background: #fff; border: 1px solid var(--skm-border); border-radius: 12px; display: flex; margin-bottom: 12px; overflow: hidden; transition: box-shadow .15s, transform .15s; } .skm-row:hover { box-shadow: 0 6px 24px rgba(13,31,51,.1); transform: translateY(-1px); } .skm-row__img { width: 212px; min-width: 212px; background: #F0F2F5; display: flex; align-items: center; justify-content: center; position: relative; } .skm-row__img .skm-card__ghost { opacity: 1; } .skm-row__type-badge { position: absolute; top: 10px; left: 10px; background: #fff; border: 1px solid var(--skm-border); padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #3D5166; } .skm-row__corner-badge { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; } .skm-row__corner-badge--share { background: #7C3AED; } .skm-row__corner-badge--new { background: #1F8A5B; } .skm-row__info { flex: 1; min-width: 0; padding: 18px 22px; display: flex; flex-direction: column; justify-content: space-between; } .skm-row__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 5px; } .skm-row__title { font-size: 16px; font-weight: 600; color: var(--skm-text-heading); text-decoration: none; line-height: 1.3; } .skm-row__title:hover { color: var(--skm-blue); } .skm-row__loc { flex-shrink: 0; font-size: 12px; color: rgba(13,31,51,.4); padding-top: 2px; } .skm-row__sub { font-size: 13px; color: rgba(13,31,51,.45); margin-bottom: 12px; } .skm-row__tags { display: flex; gap: 6px; flex-wrap: wrap; } .skm-tag { font-size: 12px; padding: 4px 10px; border-radius: 5px; background: var(--skm-surface); color: #3D5166; border: 1px solid var(--skm-border); } .skm-tag--arc { background: rgba(43,127,224,.06); color: var(--skm-blue); border-color: rgba(43,127,224,.18); font-weight: 500; } .skm-row__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--skm-surface); } .skm-row__price { font-size: 22px; font-weight: 700; color: var(--skm-text-heading); letter-spacing: -.02em; } .skm-row__share { font-size: 13px; font-weight: 400; color: rgba(13,31,51,.4); } .skm-row__cta { display: flex; align-items: center; gap: 8px; } .skm-row__save { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--skm-border); border-radius: 7px; background: #fff; cursor: pointer; color: rgba(13,31,51,.4); transition: border-color .12s, color .12s; } .skm-row__save svg { width: 15px; height: 15px; flex-shrink: 0; } .skm-view-btn svg { width: 14px; height: 14px; flex-shrink: 0; } /* Real bug found live: same as .skm-cta__heart above — this shared the exact same red styling as :hover, so on real touchscreens a tap left it permanently looking "saved" whether the save actually succeeded or not. */ @media (hover: hover) { .skm-row__save:hover { border-color: #C0392B; color: #C0392B; } } .skm-row__save.is-saved { border-color: #C0392B; color: #C0392B; } .skm-row__save.is-saved svg { fill: #C0392B; } .skm-row__view { padding: 8px 18px; background: var(--skm-blue); border-radius: 7px; font-size: 13px; font-weight: 500; color: #fff; text-decoration: none; transition: background .12s; } .skm-row__view:hover { background: var(--skm-blue-hover); color: #fff; } .skm-noresults { color: var(--skm-text-muted); padding: 24px 0; } .skm-noresults { text-align: center; padding: 48px 24px; } .skm-noresults__title { font-size: 18px; font-weight: 700; color: var(--skm-navy); margin: 0 0 8px; } .skm-noresults__body { font-size: var(--skm-small); color: var(--skm-text-muted); max-width: 440px; margin: 0 auto 20px; line-height: 1.5; } .skm-noresults__cta { margin: 0 auto; } /* Syndicates landing page (mockup_syndicate_landing) + category landing pages (mockup_category_landing) reuse the same .skm-syn__* classes — same hero/sidebar/results shape, different filters underneath. */ body.skm-page-syndicates .entry-header, body.skm-page-category-landing .entry-header { display: none; } .skm-syn__pricegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .skm-syn__minilabel { display: block; font-size: 10px; color: rgba(13,31,51,.5); margin-bottom: 4px; } .skm-syn__hero { background: var(--skm-navy); padding: 28px 0 24px; } .skm-syn__crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .skm-syn__crumb a { font-size: 12px; color: rgba(255,255,255,0.45); } .skm-syn__crumb a:hover { color: rgba(255,255,255,0.75); } .skm-syn__crumb span { font-size: 12px; color: rgba(255,255,255,0.7); } .skm-syn__hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .skm-syn__title { font-size: 26px; font-weight: 700; color: #fff !important; letter-spacing: -0.02em; margin-bottom: 6px; } .skm-syn__sub { font-size: 14px; color: rgba(255,255,255,0.5); } .skm-syn__searchbar { display: flex; background: #fff; border-radius: 10px; overflow: hidden; flex: 1; max-width: 480px; min-width: 280px; } .skm-syn__searchbar input[type="text"] { flex: 1; min-width: 0; padding: 11px 14px; border: none; font-size: 14px; color: var(--skm-text-heading); } .skm-syn__searchbar select { padding: 11px 12px; border: none; border-left: 1px solid var(--skm-border); font-size: 13px; color: var(--skm-text-muted); background: #fff; cursor: pointer; } .skm-syn__searchbar button { padding: 11px 18px; background: var(--skm-blue); color: #fff; border: none; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; } .skm-syn__searchbar button:hover { background: var(--skm-blue-hover); } .skm-syn__check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--skm-text-heading); cursor: pointer; margin-bottom: 8px; } .skm-syn__check:last-child { margin-bottom: 0; } .skm-syn__check input { accent-color: var(--skm-blue); width: 14px; height: 14px; } .skm-syn__input { width: 100%; padding: 8px 12px; border: 1px solid var(--skm-border); border-radius: 7px; font-size: 13px; color: var(--skm-text-heading); margin-bottom: 10px; } .skm-syn__filterbtn, .skm-syn__filterbtn:hover, .skm-syn__filterbtn:focus, .skm-syn__filterbtn:active { width: 100%; padding: 9px; border: 1px solid var(--skm-border) !important; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--skm-text-heading) !important; cursor: pointer; font-family: var(--skm-font); } .skm-syn__filterbtn { background: var(--skm-surface) !important; } .skm-syn__filterbtn:hover, .skm-syn__filterbtn:focus { background: var(--skm-border) !important; } .skm-syn__intro { background: #fff; border: 1px solid var(--skm-border); border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; } .skm-syn__intro p { font-size: 13px; color: var(--skm-text-muted); line-height: 1.7; } .skm-syn__cta { margin-top: 28px; background: var(--skm-navy); border-radius: 12px; padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .skm-syn__cta-title { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 4px; } .skm-syn__cta-sub { font-size: 13px; color: rgba(255,255,255,0.5); } @media (max-width: 900px) { .skm-syn__hero-row { flex-direction: column; align-items: stretch; } .skm-syn__searchbar { max-width: none; } .skm-syn__cta { flex-direction: column; align-items: flex-start; } } /* Grid view */ .skm-archive__results.is-grid .facetwp-template { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .skm-archive__results.is-grid .skm-row { flex-direction: column; margin-bottom: 0; } .skm-archive__results.is-grid .skm-row__img { width: 100%; min-width: 0; height: 160px; } /* .skm-adzone-wrap sits inside .facetwp-template (the same container that becomes the grid) so it can host a real ad banner above the results — skymarket_ad_zone() echoes nothing at all when no campaign is eligible (confirmed in skymarket-ad-platform.php: `if ( ! $ad ) { return; }`), so the wrapper div is genuinely :empty in that case, but CSS grid still gives it its own cell, showing as a blank box before the first real listing — flagged by Helen. Drop it from grid flow when actually empty; when a real ad IS running, span it full-width like a banner instead of squeezing it into one narrow listing-sized cell. */ .skm-archive__results.is-grid .skm-adzone-wrap:empty { display: none; } .skm-archive__results.is-grid .skm-adzone-wrap:not(:empty) { grid-column: 1 / -1; } @media (max-width: 900px) { .skm-archive__body { grid-template-columns: 1fr; } .skm-archive__side { position: static; } .skm-row { flex-direction: column; } .skm-row__img { width: 100%; height: 160px; } .skm-archive__results.is-grid .facetwp-template { grid-template-columns: 1fr; } .skm-view-toggle { display: none; } .skm-archive__side-head { justify-content: flex-start; gap: 10px; flex-wrap: wrap; } .skm-archive__side-head .skm-mapview-btn { margin-left: auto; } } @media (max-width: 480px) { /* Sort dropdown + list/grid toggle + Map view link were squeezing into one unwrapped flex row on iPhone-width viewports, misaligning against each other — flagged by Helen. Let the row wrap onto two lines instead of forcing everything to shrink into misalignment. */ .skm-archive__meta-right { flex-wrap: wrap; row-gap: 8px; } .skm-mapview-btn { padding: 8px 12px; font-size: 12px; } } /* Submission form */ .adverts-form.adverts-form-aligned { max-width: 720px; margin: 0 auto; } .adverts-form .adverts-control-group { margin-bottom: 16px; } .adverts-form label { font-size: 13px; font-weight: 500; color: var(--skm-text-heading); } .adverts-form input[type="text"], .adverts-form input[type="email"], .adverts-form input[type="tel"], .adverts-form input[type="number"], .adverts-form select, .adverts-form textarea { width: 100%; border: 1px solid var(--skm-border); border-radius: 8px; padding: 10px 12px; font-family: var(--skm-font); font-size: 14px; color: var(--skm-text); background: #fff; } .adverts-form input[type="text"]:focus, .adverts-form input[type="email"]:focus, .adverts-form input[type="tel"]:focus, .adverts-form select:focus, .adverts-form textarea:focus { border-color: var(--skm-blue); outline: none; box-shadow: 0 0 0 3px rgba(43,127,224,.12); } .adverts-form .adverts-field-header { margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--skm-border); font-size: 15px; font-weight: 700; color: var(--skm-text-heading); } /** * Category multiselect — WPAdverts' own widget, real bug found live: it * ships with zero styling from us (it's a div-based fake input, not a * real , so the generic .adverts-form input skin above never * touched it) and no flex layout, so the checkbox and label text stacked * instead of sitting side by side. Brought in line with the rest of the * wizard's field skin (same border/radius/padding/focus pattern used * throughout .adverts-form). */ /** * Real bug found live: adding position:relative here broke the dropdown * entirely. Its parent .adverts-control-group has overflow:hidden (a * WPAdverts float-clearfix), and without a closer positioned ancestor the * options panel's containing block was .site-main way up the tree — * outside that overflow:hidden box, so it escaped the clip. Giving the * holder position:relative made it the new (closer) containing block, * which sits INSIDE the clipped box, so the panel silently got clipped * to zero visible height. No position rule needed here at all — leave * default static and let it resolve the same way it always did. */ .adverts-multiselect-input { width: 100% !important; border: 1px solid var(--skm-border); border-radius: 8px; padding: 10px 12px; font-family: var(--skm-font); font-size: 14px; color: var(--skm-text); background: #fff; cursor: pointer; box-sizing: border-box; } .adverts-multiselect-input:focus { border-color: var(--skm-blue); outline: none; box-shadow: 0 0 0 3px rgba(43,127,224,.12); } .adverts-multiselect-options { background: #fff; border: 1px solid var(--skm-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(13,31,51,.10); padding: 6px; margin-top: 4px; max-height: 280px; overflow-y: auto; z-index: 20; } .adverts-multiselect-options label { display: flex !important; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 13px; font-weight: 400; color: var(--skm-text); cursor: pointer; } .adverts-multiselect-options label:hover { background: var(--skm-surface); } .adverts-multiselect-options input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--skm-blue); flex-shrink: 0; margin: 0; } .adverts-multiselect-options .adverts-option-depth-0 { font-weight: 600; color: var(--skm-text-heading); margin-top: 6px; } .adverts-multiselect-options .adverts-option-depth-0:first-child { margin-top: 0; } .adverts-multiselect-options .adverts-option-depth-1 { padding-left: 28px; } .adverts-multiselect-options .adverts-option-depth-2 { padding-left: 44px; } .adverts-form .adverts-field-actions .adverts-button, .adverts-form .adverts-field-actions input[type="submit"], .adverts-form button[type="submit"] { background: var(--skm-blue); color: #fff; border: none; border-radius: 8px; padding: 12px 26px; font-size: 14px; font-weight: 600; font-family: var(--skm-font); cursor: pointer; } .adverts-form .adverts-field-actions .adverts-button:hover, .adverts-form button[type="submit"]:hover { background: var(--skm-blue-hover); } /* Member profile additions */ .skm-bp-badges { margin-top: 6px; } .skm-bp-badge { display: inline-block; font-size: 10px; font-weight: 500; padding: 3px 10px; border-radius: 5px; } .skm-bp-badge--verified { background: #E1F5EE; color: #0F6E56; } .skm-bp-body { display: flex; gap: 20px; align-items: flex-start; max-width: var(--skm-container); margin-inline: auto; padding: 0 24px; } .skm-bp-left { width: 240px; min-width: 240px; } .skm-bp-right { flex: 1; min-width: 0; } .skm-bp-widget { background: #fff; border: 1px solid var(--skm-border); border-radius: 10px; padding: 16px; margin-bottom: 14px; } .skm-bp-widget__title { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; color: #A0B0C0; text-transform: uppercase; margin-bottom: 12px; } .skm-bp-stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #F0F2F4; font-size: 12px; } .skm-bp-stat-row:last-child { border: none; } .skm-bp-stat-row span { color: var(--skm-text); } .skm-bp-stat-row strong { color: var(--skm-text-heading); } .skm-bp-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .skm-bp-mini { background: var(--skm-surface-2); border: 1px solid var(--skm-border-2); border-radius: 8px; padding: 12px; text-decoration: none; display: block; } .skm-bp-mini__title { font-size: 12px; font-weight: 600; color: var(--skm-text-heading); margin-bottom: 3px; } .skm-bp-mini__price { font-size: 15px; font-weight: 700; color: var(--skm-blue); margin-bottom: 3px; } .skm-bp-mini__sub { font-size: 10px; color: var(--skm-text-faint); } @media (max-width: 900px) { .skm-bp-body { flex-direction: column; } .skm-bp-left { width: 100%; min-width: 0; } } /* List aircraft submission form */ body.skm-page-list-aircraft #content.site-content { padding: 0; } body.skm-page-list-aircraft #content .container { max-width: none; width: 100%; padding: 24px; margin: 0; } body.skm-page-list-aircraft .bb-grid.site-content-grid { display: block; margin: 0; } body.skm-page-list-aircraft #primary, body.skm-page-list-aircraft .content-area { width: 100%; max-width: none; margin: 0; padding: 0; float: none; } /* List aircraft — redesign (mockup_list_aircraft): wizard starts right at the progress bar, no page-title card above it, matches mockup exactly. */ body.skm-page-list-aircraft .entry-header { display: none; } /* -------------------------------------------------------------------------- Preview + Thank-you screens — WPAdverts' own real two-step preview-then- publish flow (kept as-is per the established decision earlier this build, not skipped), but its raw templates/single.php + templates/add-save.php output was completely unstyled (plain browser submit buttons, default flash banner). Restyled in place — confirmed exact real classes by reading the plugin's own template files via FTP rather than guessing. -------------------------------------------------------------------------- */ body.skm-page-list-aircraft .wpadverts-single { max-width: 640px; margin: 40px auto; background: #fff; border: 1px solid var(--skm-border); border-radius: 12px; padding: 32px; } body.skm-page-list-aircraft .wpadverts-single .adverts-single-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--skm-border-2); margin-bottom: 20px; } body.skm-page-list-aircraft .adverts-single-author { display: flex; align-items: center; gap: 12px; } body.skm-page-list-aircraft .adverts-single-author-avatar img { border-radius: 50%; } body.skm-page-list-aircraft .adverts-single-author-name { font-size: 13px; color: var(--skm-text-faint); line-height: 1.5; } body.skm-page-list-aircraft .adverts-single-author-name strong { color: var(--skm-text-heading); } body.skm-page-list-aircraft .adverts-price-box { font-size: 22px !important; font-weight: 700 !important; color: var(--skm-blue) !important; background: none !important; padding: 0 !important; } body.skm-page-list-aircraft .adverts-single-grid-details { margin-bottom: 20px; } body.skm-page-list-aircraft .adverts-single-grid-details .adverts-grid-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F0F2F4; font-size: 14px; } body.skm-page-list-aircraft .adverts-single-grid-details .adverts-col-30 { width: 140px; flex-shrink: 0; color: var(--skm-text-faint); display: flex; align-items: center; gap: 8px; } body.skm-page-list-aircraft .adverts-single-grid-details .adverts-col-65 { color: var(--skm-text-heading); } body.skm-page-list-aircraft .adverts-round-icon { display: none; } body.skm-page-list-aircraft .adverts-content { font-size: 14px; line-height: 1.7; color: var(--skm-text); margin-bottom: 20px; } body.skm-page-list-aircraft .wpadverts-single hr { display: none; } body.skm-page-list-aircraft .wpadverts-single + hr { display: none; } body.skm-page-list-aircraft .entry-content:has(.wpadverts-single) { text-align: center; } body.skm-page-list-aircraft form input.adverts-cancel-unload[type="submit"] { font-size: 14px !important; font-weight: 500; padding: 12px 24px; border-radius: 8px; cursor: pointer; background: var(--skm-surface); border: 1px solid var(--skm-border); color: var(--skm-text-heading); margin: 0 8px 0 0; } body.skm-page-list-aircraft form:last-of-type input.adverts-cancel-unload[type="submit"] { background: var(--skm-blue); border-color: var(--skm-blue); color: #fff; } body.skm-page-list-aircraft form:last-of-type input.adverts-cancel-unload[type="submit"]:hover { background: var(--skm-blue-hover); } body.skm-page-list-aircraft form:first-of-type input.adverts-cancel-unload[type="submit"]:hover { border-color: var(--skm-blue); color: var(--skm-blue); } body.skm-page-list-aircraft .adverts-flash-messages { max-width: 640px; margin: 40px auto 0; border-radius: 10px; padding: 18px 22px; display: flex; align-items: center; gap: 12px; font-size: 14px; } body.skm-page-list-aircraft .adverts-flash-info { background: #E6F6EE; color: #0F6E56; } body.skm-page-list-aircraft .adverts-flash-error { background: #FDECEC; color: #B3261E; } body.skm-page-list-aircraft .adverts-flash-single { display: flex; align-items: center; gap: 10px; } body.skm-page-list-aircraft .adverts-flash-message-icon { width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.08); flex-shrink: 0; } body.skm-page-list-aircraft .adverts-flash-message-text a { color: inherit; font-weight: 600; text-decoration: underline; } body.skm-page-list-aircraft .adverts-flash-messages + div { max-width: 640px; margin: 0 auto; padding: 0 22px; } /* * Real bug (Nauman, 3 Aug 2026): the raw WPAdverts native confirmation page * (templates/add-preview.php) still flashes for ~1-2s before * skmAutoAdvancePreviewStep() in custom.js can auto-submit it — JS only * runs after the browser has already painted the unstyled page. Pure-CSS * mask covers it the instant the page paints, before any JS executes, so * the raw form/preview is never actually visible — the auto-submit then * fires underneath and navigates on. :has() unsupported = graceful * fallback to the pre-fix flash, not breakage. */ body.skm-page-list-aircraft:has(input[name="_adverts_action"][value="save"])::before { content: ""; position: fixed; inset: 0; background: #fff; z-index: 999998; } body.skm-page-list-aircraft:has(input[name="_adverts_action"][value="save"])::after { content: ""; position: fixed; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid #E5E9EE; border-top-color: var(--skm-blue); border-radius: 50%; z-index: 999999; animation: skm-publish-spin .8s linear infinite; } @keyframes skm-publish-spin { to { transform: rotate(360deg); } } /* ===== List Aircraft step wizard (Module 2) ===== */ .skm-law [hidden] { display: none !important; } .skm-law { max-width: var(--skm-container); margin: 0 auto 40px; } .skm-law__contact-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* Progress bar: full bleed sticky bar, matches mockup, not a boxed card */ .skm-law__progress-outer { background: #fff; border-bottom: 1px solid var(--skm-border); position: sticky; top: 64px; z-index: 99; padding: 14px 0; margin: 0 calc(50% - 50vw); width: 100vw; max-width: 100vw; } .skm-law__progress { display: flex; align-items: center; max-width: var(--skm-container); margin: 0 auto; padding: 0 24px; } .skm-law__pstep { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .skm-law__pcircle { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--skm-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--skm-text-faint); transition: all .15s; } .skm-law__pcircle.is-active { background: var(--skm-blue); border-color: var(--skm-blue); color: #fff; } .skm-law__pcircle.is-done { background: #1F8A5B; border-color: #1F8A5B; color: #fff; } .skm-law__plabel { font-size: 13px; color: var(--skm-text-faint); font-weight: 400; white-space: nowrap; } .skm-law__plabel.is-active { color: var(--skm-text-heading); font-weight: 600; } .skm-law__pline { flex: 1; height: 1px; background: var(--skm-border); min-width: 32px; max-width: 80px; margin: 0 16px; } .skm-law__pline.is-done { background: #1F8A5B; } .skm-law__grid { display: grid; grid-template-columns: 1fr 296px; gap: 28px; align-items: start; margin-top: 28px; } .skm-law__card { background: #fff; border: 1px solid var(--skm-border); border-radius: var(--skm-radius); padding: 28px 32px; } .skm-law__card + .skm-law__card { margin-top: 16px; } .skm-law__stepnum { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--skm-text-faint); margin-bottom: 14px; } .skm-law__steptitle { font-size: 18px; font-weight: 700; color: var(--skm-text-heading); margin-bottom: 6px; } .skm-law__stepdesc { font-size: 13px; color: var(--skm-text-muted); line-height: 1.55; margin-bottom: 24px; } /* Step 1: registration */ .skm-law__reg-row { display: flex; gap: 10px; margin-bottom: 12px; } .skm-law__reginput { width: 180px; padding: 11px 14px; border: 1px solid var(--skm-border); border-radius: 8px; font-size: 20px; font-weight: 600; color: var(--skm-text-heading); letter-spacing: .06em; text-transform: uppercase; } .skm-law__reginput:focus { outline: none; border-color: var(--skm-blue); box-shadow: 0 0 0 3px rgba(43,127,224,.12); } .skm-law__lookupbtn { padding: 11px 22px; background: var(--skm-blue); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; } .skm-law__lookupbtn:hover { background: #1a6fd0; } .skm-law__idle-note { font-size: 12px; color: var(--skm-text-faint); margin-top: 4px; } .skm-law__idle-note a { color: var(--skm-blue); } .skm-law__idle-note a:hover { text-decoration: underline; } .skm-law__manuallink { color: var(--skm-blue); } .skm-law__reg-state:empty { display: none; } /* Step 1: listing type buckets */ .skm-law__bucket-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .skm-law__bucket-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; background: #fff; border: 1px solid var(--skm-border); border-radius: 10px; padding: 18px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .skm-law__bucket-card:hover, .skm-law__bucket-card:focus { background: #fff !important; border-color: var(--skm-blue); box-shadow: 0 0 0 3px rgba(43,127,224,.08); } .skm-law__bucket-card:hover .skm-law__bucket-label, .skm-law__bucket-card:focus .skm-law__bucket-label { color: var(--skm-text-heading); } .skm-law__bucket-card:hover .skm-law__bucket-desc, .skm-law__bucket-card:focus .skm-law__bucket-desc { color: var(--skm-text-muted); } .skm-law__bucket-card:hover .skm-law__bucket-icon, .skm-law__bucket-card:focus .skm-law__bucket-icon { color: var(--skm-blue); } .skm-law__bucket-icon { color: var(--skm-blue); } .skm-law__bucket-label { font-size: 14px; font-weight: 600; color: var(--skm-text-heading); } .skm-law__bucket-desc { font-size: 12px; color: var(--skm-text-muted); line-height: 1.4; } .skm-law__bucket-back { background: none; border: none; padding: 0; margin-bottom: 14px; color: var(--skm-blue); font-size: 13px; font-weight: 500; cursor: pointer; } .skm-law__bucket-back:hover { text-decoration: underline; } @media (max-width: 640px) { .skm-law__bucket-grid { grid-template-columns: 1fr 1fr; } } .skm-law__loadingbox { text-align: center; padding: 40px 0 10px; } .skm-law__spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--skm-border); border-top-color: var(--skm-blue); animation: skmLawSpin 0.8s linear infinite; margin: 0 auto 16px; } @keyframes skmLawSpin { to { transform: rotate(360deg); } } .skm-law__loading-title { font-size: 14px; font-weight: 600; color: var(--skm-text-heading); margin-bottom: 4px; } .skm-law__loading-sub { font-size: 12px; color: var(--skm-text-faint); } .skm-law__notfound { background: #FDF4E7; border: 1px solid #E5C17A; border-radius: 8px; padding: 16px 18px; margin-top: 10px; } .skm-law__notfound-head { display: flex; align-items: center; gap: 8px; color: #854F0B; margin-bottom: 8px; } .skm-law__notfound-title { font-size: 13px; font-weight: 600; margin: 0; } .skm-law__notfound-msg { font-size: 12px; color: #6B3E0E; line-height: 1.6; margin: 0 0 12px; } .skm-law__notfound-actions { display: flex; gap: 8px; } .skm-law__retrybtn { padding: 7px 14px; border: 1px solid #E5C17A; border-radius: 7px; font-size: 12px; color: #854F0B; background: #fff; cursor: pointer; } .skm-law__manualbtn { padding: 7px 14px; background: var(--skm-blue); color: #fff; border: none; border-radius: 7px; font-size: 12px; font-weight: 500; cursor: pointer; } .skm-law__found { background: rgba(31,138,91,.05); border: 1.5px solid rgba(31,138,91,.2); border-radius: 8px; padding: 18px 20px; margin-top: 10px; } .skm-law__found-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .skm-law__found-icon { width: 36px; height: 36px; border-radius: 50%; background: #1F8A5B; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; } .skm-law__found-label { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #1F8A5B; margin: 0 0 2px; } .skm-law__found-name { font-size: 17px; font-weight: 700; color: var(--skm-text-heading); margin: 0; } .skm-law__found-tags { display: flex; gap: 6px; margin-bottom: 16px; } .skm-law__found-tags span { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 5px; background: #fff; border: 1px solid #D0D7E0; color: var(--skm-text-heading); } .skm-law__confirmbtn { width: 100%; padding: 12px; background: var(--skm-blue); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; } .skm-law__confirmbtn:hover { background: #1a6fd0; } /* Aircraft confirmed strip (step 2, shown after a real lookup match) */ .skm-law__aircraft-strip[hidden] { display: none; } .skm-law__aircraft-strip { display: flex; align-items: center; gap: 10px; background: var(--skm-surface); border: 1px solid var(--skm-border); border-radius: 8px; padding: 10px 14px; margin-bottom: 24px; font-size: 13px; } .skm-law__strip-check { width: 18px; height: 18px; border-radius: 50%; background: #1F8A5B; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; } .skm-law__strip-name { font-weight: 500; color: var(--skm-text-heading); } .skm-law__strip-meta { color: var(--skm-text-faint); } .skm-law__strip-change { margin-left: auto; color: var(--skm-blue); font-size: 12px; } .skm-law__strip-change:hover { text-decoration: underline; } /* Step 2/3: native WPAdverts field groups re-skinned inside the grid. Grid, not flex-wrap — flex-wrap let rows go ragged because native field groups have uneven internal heights (some have help text, some don't), so two "half" fields side by side didn't line up. Grid keeps both columns' rows aligned regardless of individual field height. */ /* WPAdverts core CSS lays fields out label-left/input-right (label display:inline-block;width:30%, input/wrapper float:left;width:60%) for classic horizontal forms. That's why the Price field's label sat beside its £ box instead of above it — text inputs looked fine by accident (our width:100% rule forces a block-level line break regardless), but anything wrapped in an extra div (price prefix box, segmented control) kept the float and broke. Normalize every field in the wizard to a plain stacked label-above-input layout, full stop. */ .skm-law .adverts-control-group label { display: block !important; width: auto !important; float: none !important; margin: 0 0 8px; } .skm-law .adverts-control-group input, .skm-law .adverts-control-group select, .skm-law .adverts-control-group textarea, .skm-law .adverts-control-group > div { float: none !important; width: 100% !important; } /** * Real bug found live: the two rules just above (same specificity, later * in the file) were beating the category-checklist styling — every * checkbox got stretched to width:100% and every option label forced back * to display:block, undoing the flex row layout. Same selector weight, * placed after, so these win the tie. */ .skm-law .adverts-control-group.adverts-field-select label.adverts-option-depth-0, .skm-law .adverts-control-group.adverts-field-select label.adverts-option-depth-1, .skm-law .adverts-control-group.adverts-field-select label.adverts-option-depth-2 { display: flex !important; align-items: center; width: auto !important; margin: 0; } .skm-law .adverts-control-group.adverts-field-select .adverts-multiselect-options input[type="checkbox"] { width: 15px !important; flex-shrink: 0; } .skm-law .adverts-control-group.adverts-field-select .adverts-multiselect-input { width: 100% !important; } .skm-law__fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; align-items: start; } .skm-law__fieldgrid:not(:last-child) { margin-bottom: 20px; } .skm-law__fieldgrid .adverts-control-group { margin: 0; min-width: 0; } .skm-law__fieldgrid .skm-la__field--full, .skm-law__fieldgrid .adverts-field-name-gallery, .skm-law__fieldgrid .adverts-field-name-post_content { grid-column: 1 / -1; } /* Listing type is a real adverts_field_radio now (was a