/* ========================================================================= elfsight.css — Google Reviews-widgeten stylet som våre egne kort Lastes på sidene som viser anmeldelser (index.html, index-dark.html). HVORFOR DETTE VIRKER: Elfsight rendrer i vanlig DOM — ingen iframe, ingen shadow DOM — så vi har full CSS-tilgang. ⚠ VIKTIG FOR SENERE VEDLIKEHOLD: Widgeten har TO slags klassenavn. styled-components-hashene (kBpXDi, hUXrDr, cHRicJ …) endrer seg ved HVER versjonsoppdatering av appen — ikke rør dem. De semantiske `es-*`-klassene er stabile, og er det eneste vi styler mot her. Sist verifisert mot google-reviews v3.48.2. !important brukes bevisst: styled-components injiserer sine regler i med høy spesifisitet og etter våre, så vanlige selektorer taper. ========================================================================= */ /* ---------- 0. rammen rundt ---------- */ .ri-reviews{position:relative;min-height:120px} .ri-reviews .elfsight-app-df11b29d-618b-490a-a122-1bf5fd6533be{width:100%} /* Elfsights egen topptekst («What Our Customers Say», engelsk) og deres «Review us on Google»-knapp skjules — vi har egen overskrift og egne CTA-er i sitens formspråk rett under. */ /* MERK: å skjule kun .es-header-container holdt IKKE — teksten ligger i en ytre wrapper (.es-header-component-top), så hele komponenten må vekk. */ .ri-reviews .es-header-component-top, .ri-reviews .es-header-container, .ri-reviews .es-header-info, .ri-reviews .es-header-write-review-button-container{display:none !important} /* Widget-tittelen («What Our Customers Say») har INGEN es-klasse — den bærer bare et styled-components-navn. Vi treffer komponentnavnet, som er stabilt selv om hash-suffikset bak endrer seg. ⚠ Dette er et sikkerhetsnett, ikke den egentlige fiksen: tittelen og hele widget-språket settes i Elfsight-dashbordet. Står språket på engelsk vil «4 days ago» / «Read more» fortsatt vises, og det kan CSS ikke oversette. */ .ri-reviews [class*="WidgetTitle__"]{display:none !important} /* ---------- 1. selve anmeldelseskortet ---------- */ /* Matcher .review-kortene som lå her før: papirflate, hårlinje, myk radius. */ .ri-reviews .es-review-container{ background:var(--paper) !important; border:1px solid var(--line) !important; border-radius:14px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.7) !important; padding:18px 18px 16px !important; height:100% !important} .ri-reviews .es-review-background-container{background:transparent !important; box-shadow:none !important;border:0 !important;padding:0 !important} /* ---------- 2. typografi ---------- */ .ri-reviews .es-review-container, .ri-reviews .es-review-content-text-container, .ri-reviews .es-review-info-date{ font-family:var(--sans) !important} .ri-reviews .es-review-author-name{ font-family:var(--gothic) !important; font-weight:600 !important;font-size:13px !important; letter-spacing:.1em !important;text-transform:uppercase !important; color:var(--ink) !important} .ri-reviews .es-review-info-date{ font-size:12px !important;color:var(--ink-faint) !important; letter-spacing:.02em !important} .ri-reviews .es-review-content-text-container, .ri-reviews .es-text-shortener{ font-size:14.5px !important;line-height:1.6 !important; font-weight:300 !important;color:var(--ink-soft) !important} /* «Read more»-lenka: dempet, understreket, ikke en blå systemlenke */ .ri-reviews .es-text-shortener-control{ color:var(--ink) !important;font-weight:500 !important; border-bottom:1px solid var(--line) !important} /* ---------- 3. stjerner i vår farge ---------- */ /* Googles gull kolliderer med den monokrome paletten. .stars på siden er var(--ink), så stjernene her følger etter. */ .ri-reviews .es-rating-item-filled svg, .ri-reviews .es-rating-item-filled path, .ri-reviews .es-rating-stars-item-filled svg, .ri-reviews .es-rating-stars-item-filled path{fill:var(--ink) !important} .ri-reviews .es-rating-item-unfilled svg, .ri-reviews .es-rating-item-unfilled path{fill:var(--line) !important} /* ---------- 4. avatar + kildeikon ---------- */ /* Alle portretter på siden er gråtonet — avatarene matcher det. */ .ri-reviews .es-review-avatar-container, .ri-reviews .es-avatar-image{border-radius:50% !important;filter:grayscale(1)} .ri-reviews .es-review-source-container{opacity:.75} /* Googles blå «verifisert»-merke er det eneste fargeinnslaget i en ellers monokrom seksjon og trekker blikket helt feil vei. Dempes til vår grå, men beholdes — det er et ekthetssignal. */ .ri-reviews .es-verified-badge, .ri-reviews .es-verified-badge-icon{filter:grayscale(1) opacity(.45)} /* ---------- 5. karusell-kontroller ---------- */ .ri-reviews .es-bullets-control-item{background:var(--line) !important} .ri-reviews .es-bullets-control-item[class*="active"], .ri-reviews .es-bullets-control-item.es-active{background:var(--ink) !important} /* Pilene lå halvveis utenfor panelet og leste som avkuttede hvite bokser. Trekkes inn i sporet og får sitens pille-uttrykk. */ .ri-reviews .es-carousel-arrow-control-container{overflow:visible !important} .ri-reviews .es-carousel-arrow-control{ background:var(--paper) !important; border:1px solid var(--line) !important; border-radius:50% !important; width:38px !important;height:38px !important; color:var(--ink) !important;box-shadow:none !important} .ri-reviews .es-carousel-arrow-control-icon svg, .ri-reviews .es-carousel-arrow-control-icon path{fill:var(--ink) !important} /* på smale skjermer er det ikke plass til piler ved siden av kortene — der holder det med sveip + prikker */ @media(max-width:900px){ .ri-reviews .es-carousel-arrow-control-container{display:none !important} } /* ---------- 6. skjelett mens data hentes ---------- */ .ri-reviews .es-skeleton-loader{ background:linear-gradient(90deg,var(--line-2),var(--line),var(--line-2)) !important; border-radius:8px !important} /* ---------- 7. instagram-feed ---------- */ /* Samme prinsipp som anmeldelsene: kun stabile es-klasser, aldri styled-components-hashene. Minimal overstyring — flisene er kvadratiske bilder, og de skal ligne .iggrid-rutenettet de erstattet. */ .ri-ig{position:relative;min-height:140px} .ri-ig .es-header-component-top, .ri-ig .es-header-container, .ri-ig [class*="WidgetTitle__"]{display:none !important} .ri-ig .es-instagram-feed-post, .ri-ig [class*="PostContainer"]{border-radius:10px !important;overflow:hidden !important} /* ---------- 8. mobil ---------- */ @media(max-width:760px){ .ri-reviews .es-review-container{padding:16px !important} .ri-reviews .es-review-content-text-container, .ri-reviews .es-text-shortener{font-size:14px !important} }