/* Theme Name: HighendWP Child Template: HighendWP Author: SoldF Version: 2026-06-24 Description: SoldF child theme. Äger all custom non-AMP presentations-CSS, migrerad från spridda mu-plugins + Customizer Additional CSS. AMP-specifik CSS ligger kvar i mu-plugin amp_post_template_css-hooks (AMP laddar inte temats stylesheet). Se minne: project-soldf-childtheme-amp-plan. */ /* ============================================================ 1. Typografi & teckensnitt (från Customizer 4601) ============================================================ */ /* Roboto/Lato läggs till här eftersom temats egna Google Fonts-inladdning (hb_font_navigation_face=Roboto, hb_font_body_face=Lato) av okänd anledning slutat leverera länken i - font-family-reglerna fanns men fonterna laddades aldrig, så menyn och brödtexten föll tillbaka på systemets sans-serif. */ @import url("https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Lato:wght@400;700&family=Roboto:wght@400;500&display=swap"); h1,h2,h3,h4,.entry-title,.hb-main-title,.hb-page-title,.widget-item-title{ font-family:"Allerta Stencil",sans-serif !important; } body,p,li,input,textarea,select,button{ font-family:"Lato",sans-serif; } h2{margin-top:15px;margin-bottom:15px;} h3{margin-top:15px;margin-bottom:10px;} /* diverse småfix från Customizer */ .grecaptcha-badge{visibility:collapse !important;} #header-inner.nav-type-2 #main-nav>li>a{padding-right:10px !important;padding-left:10px !important;} .vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_excerpt{height:130px;overflow:hidden;} /* ============================================================ 2. Callouts: säkerhetsvarning & tips (från Customizer 4601) ============================================================ */ .soldf-safety-warning{color:#b30000;font-weight:700;display:block;margin:0 0 1em;} .soldf-safety-warning a{color:#8f0000;text-decoration:underline;} .soldf-tip{color:#4b5320;font-weight:700;display:block;margin:0 0 1em;} .soldf-tip a{color:#3b421a;text-decoration:underline;} /* ============================================================ 3. Faktaruta (.hb-box-cont) — ljust läge (från soldf-factbox-light-responsive; body-prefix för stabil kaskad) ============================================================ */ @media (max-width:1024px) and (prefers-color-scheme: light){ body .hb-box-cont{background:#fff !important;border-color:#ebebeb !important;} body .hb-box-cont-header{background:#f9f9f9 !important;color:#323436 !important;border-bottom-color:#ebebeb !important;} body .hb-box-cont-body, body .hb-box-cont-body p, body .hb-box-cont-body a, body .hb-box-cont-body li{background:#fff !important;color:#323436 !important;text-shadow:none !important;} } /* ============================================================ 4. Dark mode: faktaruta + brödtext-länkar (från soldf-darkmode) ============================================================ */ /* ============================================================ 5. Meny-brytpunkt 1140px (från soldf-menu-breakpoint-1140) ============================================================ */ @media handheld,only screen and (max-width:1140px){ #main-nav,#sticky-shop-button{display:none !important;} #show-nav-menu{display:inline-flex !important;float:left !important;margin-left:0 !important;justify-content:flex-start;align-items:center;} #header-inner.nav-type-2 .main-navigation{display:block !important;text-align:left !important;} #header-inner.nav-type-2 .main-navigation .container{display:block !important;text-align:left !important;} #header-inner.nav-type-2 #show-nav-menu{display:inline-flex !important;float:left !important;text-align:left !important;margin-left:0 !important;} #header-inner.nav-type-2 #logo{float:none !important;text-align:center;} #mobile-menu-wrap{left:0 !important;right:auto !important;transform:translateX(-100%) !important;} body.mobile-menu-open #mobile-menu-wrap{transform:translateX(0) !important;} } /* ============================================================ 6. Post grid (desktop) — WPBakery (från soldf-amp-postgrid-fixes, desktop-delen) ============================================================ */ .vc_grid .vc_grid-item .wpb_single_image, .vc_grid .vc_grid-item .wpb_single_image .vc_figure, .vc_grid .vc_grid-item .wpb_single_image .vc_single_image-wrapper{display:flex;align-items:center;justify-content:center;width:100%;} .vc_grid .vc_grid-item .wpb_single_image .vc_single_image-wrapper{height:120px;overflow:hidden;} .vc_grid .vc_grid-item .wpb_single_image .vc_single_image-img, .vc_grid .vc_grid-item .wpb_single_image img, .vc_grid .vc_grid-item .vc_gitem-zone-mini img{width:auto !important;max-width:100% !important;height:auto !important;max-height:118px !important;object-fit:contain !important;object-position:center center !important;margin:0 auto !important;} /* ============================================================ 7. Hero-bildtext — CSS; logiken i functions.php (från soldf-hero-caption-desktop). Visas på alla skärmstorlekar sedan AMP stängdes av för mobil 2026-06-28 (tidigare bara >=1025px eftersom mobilen då gick via AMP med egen bildtext-CSS). ============================================================ */ .soldf-hero-caption-desktop{display:block;margin:8px auto 0;padding:0 16px;max-width:1240px;font-size:12px;line-height:1.45;color:#666;text-align:left;} .soldf-hero-caption-desktop p{margin:0;} .soldf-hero-caption-desktop em{font-style:italic;} /* ============================================================ 8. Sök: dark mode för sökträffar (non-AMP) (migrerad från mu-plugin soldf-search; AMP-motsv. i functions.php) ============================================================ */ /* ============================================================ 9. Link Library kategori-lista ([link-library-cats] -> ul.linksubcatlist) Mindre fet (Allerta läsbar) + tydligt klickbara länkar. Override med body-prefix (specificitet 0,2,3) så den vinner över mu-plugin soldf-linklibrary-redesign utan att röra den filen. ============================================================ */ body ul.linksubcatlist .linkcatname, body ul.linksubcatlist .linkcatname a{ font-weight:500 !important; font-size:clamp(16px,1.6vw,20px) !important; } body ul.linksubcatlist .linkcatname a{ text-decoration:underline !important; text-underline-offset:2px !important; color:#4b7a1e !important; /* länkblå på ljus bakgrund (desktop light) */ } body ul.linksubcatlist .linkcatname a:hover, body ul.linksubcatlist .linkcatname a:focus{ color:#3a6015 !important; /* temats primärfärg vid hover */ } /* Listan blir mörkt kort på mobil + i OS-dark -> ljusare länkfärg där */ @media (max-width:900px){ body ul.linksubcatlist .linkcatname a{color:#cfe4ff !important;} } /* ============================================================ 10. Allerta Stencil = endast vikt 400 -> h1-sidrubriker 400 (annars webbläsar-fetstil = fejk-fet, stencil-uttrycket syns ej) ============================================================ */ h1, .single article h1.title, #hb-page-title h1, .hb-main-title{ font-weight:400 !important; } /* ============================================================ 11. Brödtext-länkar tydligt klickbara Temats bas-regel är a{text-decoration:none;color:#111} -> länkar ser ut som vanlig text, och temats a:hover{color:00aeef} saknar # (ogiltig) så hover gör inget. Här ges brödtext-/faktarutelänkar egen färg + understrykning. Ovillkorlig färg så även "no-preference" och OS-light täcks; dark mode överstyr. Bild-/captionlänkar nollas. INGEN :has() (slängs i vissa miljöer -> hela regeln dog tidigare). ============================================================ */ body .hb-main-content a, body .hb-box-cont-body a{ color:#4b7a1e !important; text-decoration:underline !important; text-underline-offset:2px; } body .hb-main-content a:hover, body .hb-main-content a:focus, body .hb-box-cont-body a:hover, body .hb-box-cont-body a:focus{ color:#3a6015 !important; } /* Dark mode: ljusare länkfärg (ersätter avsnitt 4:s döda .hb-main-content-regel) */ /* Behåll callout-länkarnas egna färger (avsnitt 2) */ body .hb-main-content .soldf-safety-warning a{ color:#8f0000 !important; } body .hb-main-content .soldf-tip a{ color:#3b421a !important; } /* Bild-/captionlänkar ska inte ha understrykning */ body .hb-main-content .wp-caption a, body .hb-main-content figure a, body .hb-box-cont-body .wp-caption a{ text-decoration:none !important; } /* ============================================================ 11. Responsiva embeds (YouTube m.fl.) — spränger ej mobilbredd (AMP gjorde detta automatiskt; nu fixat responsivt för icke-AMP) ============================================================ */ .hb-main-content iframe, .entry-content iframe, .wpb_text_column iframe, .wpb_video_widget iframe, iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="player.vimeo"]{ max-width:100% !important; } iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="player.vimeo"]{ width:100% !important; aspect-ratio:16/9; height:auto !important; } .wpb_video_wrapper{max-width:100% !important;} /* ============================================================ 12. SoldF Shop-carousell på mobil (≤700px) Var .hide-on-mobile -> visa den + gör cellen responsiv så den ROTERAR som på desktop (en produkt i taget, direktlänkad). Ingen rutnäts-override -- carousell-JS sköter rotationen. ============================================================ */ @media screen and (max-width:700px){ .wpb_images_carousel.hide-on-mobile{display:block !important;} .wpb_images_carousel .vc_slide, .wpb_images_carousel .vc_images_carousel{width:auto !important;max-width:100% !important;} .wpb_images_carousel .vc_carousel-inner{max-width:100% !important;} .wpb_images_carousel img{max-width:100% !important;height:auto !important;} } /* ============================================================ 13. RevSlider hero (startsidan): dölj thumbnail-navigeringen på mobil (täckte ~80% av höjden). Renderade element är .sr7-thumb (RS6.7, skin "gyges"). Döljer både wrapper OCH själva thumb-elementen. Endast ≤768px. Shop-carousell berörs ej. ============================================================ */ @media screen and (max-width:768px){ sr7-thumbs, rs-thumbs, .sr7-thumbs, .rs-thumbs, .tp-thumbs, .sr7-thumbs-wrap, .rs-thumbs-wrap, sr7-thumb, rs-thumb, .sr7-thumb, .rs-thumb, .tp-thumb, .sr7-thumb-img, .tp-thumb-image{ display:none !important; visibility:hidden !important; height:0 !important; } } /* ============================================================ 14. Breadcrumbs — mindre typsnitt + löst överlapp med långa sidrubriker. Temats .breadcrumbs-wrapper är position:absolute, centrerad vertikalt över titelraden; H1 ligger i normalt flöde bredvid. Med en tillräckligt lång H1 (vanligt på SoldF, t.ex. "Motorcykel 810 (MC 810) – BMW F800 GS Adventure") och en container som ännu inte nått sin bredaste brytpunkt (uppmätt överlapp 768–1300px brett, ej bara mobil) skriver brödsmulan rakt över titeln. Löst genom att lägga brödsmulan i normalt flöde (position:static) under titeln på dessa breddder i stället för att flytta H1. .aligncenter-varianten har redan egen, icke överlappande positionering (bottom:-30px, se p.9 ovan) och lämnas orörd. ============================================================ */ .breadcrumbs-wrapper .breadcrumbs-inside{ font-size:12px !important; line-height:1.4 !important; } @media screen and (max-width:1300px){ #hb-page-title:not(.aligncenter) .breadcrumbs-wrapper{ position:static !important; display:block !important; right:auto !important; top:auto !important; margin:6px 0 0 !important; text-align:left !important; } } /* ============================================================ 15. Gemensamt kortrutnät ([soldf_card_grid], functions.php). Används både av kategorisidornas underkategori-rutnät (Vapen, Fordon, Flyg, Fartyg, Personlig Utrustning, Gemensam Materiel - ersätter WPBakerys vc_basic_grid + den delade grid-item-mallen, post 9125, som aldrig gav en fungerande responsiv layout) och av startsidans "Nytt på SoldF" (samma kort, bara sorterat på datum i stället för titel - se shortcodens PHP-kommentar). Ett enda kort-utseende överallt, medvetet EJ byggt som vc_basic_grid (se motivering vid shortcoden). ============================================================ */ /* Tajt mot beskrivningen ovanför (rubrik+beskrivning+kort hör ihop), rymligt mot nästa rubrik under (skiljer sektionerna åt) - motsatsen till hur det såg ut innan: margin-bottom ärvde temats ".wpb_wrapper > *:last-child {margin-bottom:0}"-nollning eftersom rutnätet oftast är sista elementet i sin kolumn, så bara margin-top slog igenom. !important + explicit 0 på marginbottom-elementet före löser det. */ .soldf-card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px; margin:4px 0 40px !important; } /* Kortet är en inne i .hb-main-content. Temats egen `body .hb-main-content a{text-decoration:underline!important}` (specificitet 0,1,2) slog annars .soldf-card (0,1,0) trots !important - vid en !important-krock avgör specificiteten, inte vem som deklarerades sist. Body+.hb-main-content-prefix ger 0,2,1/0,2,0 här, som vinner. Samma krock finns latent för allt brödtextinnehåll, se p.11 ovan. */ body .hb-main-content .soldf-card{ display:flex; flex-direction:column; text-decoration:none !important; background:#fff; border:none; border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); transition:box-shadow .18s ease, transform .18s ease; } body .hb-main-content .soldf-card:hover, body .hb-main-content .soldf-card:focus{ box-shadow:0 10px 24px rgba(0,0,0,.14); transform:translateY(-3px); } /* aspect-ratio (inte fast höjd i px) håller alla bilder i samma proportion oavsett källbildens ursprungliga mått - en enda WP-bildstorlek (medium) återanvänds för alla kort. position:absolute+inset:0 i stället för height:100% på img: en procentuell höjd litar på att förälderns höjd är "definite", vilket en aspect-ratio-höjd inte alltid räknas som - bilden föll då tillbaka till sin egna bildkvot (auto-höjd) och lämnade ett tomt fält under bilden. Absolut positionering är entydig oavsett detta. */ .soldf-card-img{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:#eee;} .soldf-card-img img{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover !important;display:block;} .soldf-card-body{display:flex;flex-direction:column;padding:14px 16px 18px;flex:1;} body .hb-main-content .soldf-card-title{ display:block;font-weight:600;font-size:16px;line-height:1.35; color:#181818 !important;text-decoration:none !important;-webkit-text-decoration:none !important; margin-bottom:8px; } /* line-clamp begränsar till 3 rader så kort i samma rad blir lika höga oavsett hur lång meningen råkar vara. */ body .hb-main-content .soldf-card-excerpt{ display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; font-size:13.5px;line-height:1.5;color:#666 !important; text-decoration:none !important;-webkit-text-decoration:none !important; } /* Liten, tonad "Uppdaterad "-rad längst ner - senast ändrad-datum (inte publiceringsdatum), så samma kort både visar färskhet på en kategorisidas äldre sidor och förstärker "nytt"-känslan på startsidan. Egen topmarginal (inte i card-body:s padding) så den hamnar konsekvent längst ner även när excerpten är kortare än 3 rader. */ body .hb-main-content .soldf-card-date{ display:block;margin-top:auto;padding-top:8px; font-size:11px;line-height:1.4;color:#9a9a9a !important; text-decoration:none !important;-webkit-text-decoration:none !important; } /* "Visa fler" (soldf_card_grid collapse=""): korten döljs bara med CSS, de finns kvar i HTML:en från start - crawlbara direkt, ingen carousel. */ body .hb-main-content .soldf-card--extra{display:none !important;} .soldf-card-grid-more-wrap{text-align:center;margin-top:4px;} .soldf-card-grid-more{ display:inline-block;padding:10px 26px;border-radius:999px;border:none; background:#2f3626;color:#fff;cursor:pointer; font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px; transition:background .15s ease; } .soldf-card-grid-more:hover{background:#4b5343;} /* Medvetet INGEN prefers-color-scheme:dark-variant för dessa kort (fanns här tidigare, borttagen 2026-09-05): övriga sajten (kamouflagebakgrund, header, meny) följer inte OS mörkt läge, så bara korten som svartnar blir en fläckvis, inkonsekvent upplevelse snarare än en sammanhållen dark mode. Att göra hela sajten dark mode-medveten är ett separat, större jobb (se [[project_soldf_darkmode_css]]) - inte gjort här. */ /* ============================================================ 16. Google AdSense: kollapsa outfyllda annonsplatser AdSense reserverar annonsutrymmets fulla höjd i förväg (t.ex. 390×390 på mobil, 1240×280 på desktop) och behåller den reserverade ytan tom om ingen annons vinner budgivningen - upplevs som ett stort, oförklarat vitt hål (bekräftat på Vapen: direkt under brödsmulan på mobil, direkt under H1 på desktop). Google flaggar detta självt på annonselementet med data-ad-status="unfilled" när så sker; standardåtgärden Google själva rekommenderar är att dölja elementet helt i det läget. ============================================================ */ ins.adsbygoogle[data-ad-status="unfilled"]{ display:none !important; } /* ============================================================ 17. Startsidans shop-rutnät (ersätter vc_images_carousel). Karusellen visade en fast 350×350-bild i taget i en halv kolumn bredvid det mycket längre forum-widget-blocket - mest tomrum, tunna pilar, ingen produkttitel synlig utan att hovra/klicka. Samma kortspråk som soldf-card (skugga, rundade hörn, hover-lyft) men kvadratiska produktbilder och centrerad titel. ============================================================ */ .soldf-shop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; margin:16px 0; } body .hb-main-content .soldf-shop-card{ display:flex; flex-direction:column; text-decoration:none !important; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); transition:box-shadow .18s ease, transform .18s ease; } body .hb-main-content .soldf-shop-card:hover, body .hb-main-content .soldf-shop-card:focus{ box-shadow:0 10px 24px rgba(0,0,0,.14); transform:translateY(-3px); } .soldf-shop-card-img{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:#f2f2f2;} .soldf-shop-card-img img{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:contain !important;padding:10px;box-sizing:border-box;display:block;} body .hb-main-content .soldf-shop-card-title{ display:block;padding:8px 10px 12px;text-align:center; font-size:12.5px;line-height:1.35;font-weight:600; color:#333 !important;text-decoration:none !important;-webkit-text-decoration:none !important; } /* Samma specificitetskrock som .soldf-card ovan (se p.11/rad 263-268): temats `body .hb-main-content a{color:#4b7a1e!important}` (0,1,2) slog annars .soldf-shop-cta (0,1,0) och gjorde knapptexten grön i stället för vit. body .hb-main-content-prefix ger samma specificitet som temats regel och vinner tack vare källordningen (child-CSS laddas sist). Samma sak gäller hover: temats `body .hb-main-content a:hover{color:#3a6015 !important}` har specificitet (0,2,2) - högre än (0,2,1) på vår vanliga .soldf-shop-cta-regel eftersom den har fler element-selektorer (body+a mot bara body). Löst genom att lägga till "a" i hover-selektorn så vår klass får (0,3,2), och sätta color explicit där i stället för att förlita sig på grundregeln. */ body .hb-main-content .soldf-shop-cta{ display:inline-block;margin-top:6px;padding:10px 24px;border-radius:999px; background:#2f3626;color:#fff !important;text-decoration:none !important; font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px; } body .hb-main-content a.soldf-shop-cta:hover{background:#4b5343;color:#fff !important;} /* ============================================================ 18. [soldf_promo_banner] - startsidans rea-/kampanjruta. Ersätter det handskrivna vc_message-blocket (h1/h2/span med inline style="color:#ffffff" på varje enskilt ord) som Henrik byggde om för hand varje gång en ny rea skulle in. Samma vecko-jobb, bara ifyllda attribut denna gång: [soldf_promo_banner heading="20% RABATT PÅ ALLT" text="Gäller t.o.m. 6 sep 2026" url="https://shop.soldf.com"] ============================================================ */ /* Eldig röd-orange gradient, samma känsla som Spreadshirts egen "20% rabatt"-kampanjruta (soldf.myspreadshop.se) - dock en ren CSS- gradient, inte deras lagerfoto, så den inte är knuten till en specifik bild och alltid ser skarp ut oavsett skärmstorlek. */ body .hb-main-content .soldf-promo-banner{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; text-decoration:none !important; background:linear-gradient(135deg,#b3161a 0%,#e8590c 55%,#ff9500 100%); border-radius:12px; padding:28px 20px; text-align:center; box-shadow:0 4px 14px rgba(179,22,26,.35); transition:transform .15s ease, box-shadow .15s ease; } body .hb-main-content .soldf-promo-banner:hover, body .hb-main-content .soldf-promo-banner:focus{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(179,22,26,.45); } body .hb-main-content .soldf-promo-banner-heading{ font-family:"Allerta Stencil",sans-serif;font-weight:400; font-size:28px;letter-spacing:.5px;color:#fff !important;text-decoration:none !important; text-shadow:0 1px 3px rgba(0,0,0,.25); } body .hb-main-content .soldf-promo-banner-text{ font-size:14px;color:#fff0e6 !important;text-decoration:none !important; } body .hb-main-content .soldf-promo-banner-cta{ margin-top:6px;padding:8px 24px;border-radius:999px;background:#fff; color:#b3161a !important;font-weight:700;font-size:13px; text-transform:uppercase;letter-spacing:.5px;text-decoration:none !important; } /* ============================================================ Innehållsförteckning / snabbhopp på långa faktasidor (.soldf-toc) Samma utseende som snabbmenyn på länksidorna (#linktable .linksubcatlist, som bor i Link Library-inställningen och bara laddas där). Markup:

Innehåll

    …
Rubrikerna får id-ankare, t.ex.

. 2026-09-27 ============================================================ */ .soldf-toc{ margin:0 0 28px;padding:14px 20px 10px; border:1px solid #d6d9cc;border-left:4px solid #4b7a1e;border-radius:4px; background:#f6f7f2; } .soldf-toc > p{margin:0 0 6px;} .soldf-toc > p strong{ font-family:"Allerta Stencil",sans-serif;font-weight:400; font-size:20px;color:#27350f; } .soldf-toc ul{margin:0;padding-left:22px;list-style:disc;} .soldf-toc ul ul{margin:4px 0 6px;padding-left:20px;list-style:circle;} .soldf-toc li{margin:0 0 5px;line-height:1.4;} .soldf-toc a{color:#4b7a1e;text-decoration:underline;text-underline-offset:2px;} .soldf-toc a:hover,.soldf-toc a:focus{color:#3a6015;} @media (max-width:600px){ .soldf-toc{padding:12px 14px 8px;} .soldf-toc ul{padding-left:18px;} }