Hvorfor velge Svenn Kalkulasjon

by SvennMats

HTML

<section class="usp-section">
  <div class="usp-grid">
    
    <div class="usp-card">
      <div class="usp-card-image" style="background-image: url('https://cdn.sanity.io/images/kczjvvqi/production/42436cab2d266d968b0f1de14e4e3ba5bf450ab3-3840x2160.webp');">
        <div class="usp-badge">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Færre klikk
        </div>
      </div>
      <div class="usp-card-content">
        <div class="usp-card-top">
          <div class="usp-icon-wrapper">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
          </div>
          <h3 class="usp-title">Lynraskt og moderne</h3>
        </div>
        <p class="usp-description">Glem utdaterte, trege systemer. Vi gir deg et helt nytt og brukervennlig verktøy bygget for at du skal bli raskere ferdig med kalkylen.</p>
      </div>
    </div>

    <div class="usp-card">
      <div class="usp-card-image" style="background-image: url('https://cdn.sanity.io/images/kczjvvqi/production/5481710ca09a253877a10818ef40bafda713f7ea-1920x1080.webp');">
        <div class="usp-badge">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          Laget av fagfolk
        </div>
      </div>
      <div class="usp-card-content">
        <div class="usp-card-top">
          <div class="usp-icon-wrapper">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon...

CSS

/* --- Sikrer at padding ikke ødelegger bredden --- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* --- Brand Variabler --- */
:root {
  --svenn-orange: #F96529;
  --svenn-dark: #241D2D;
  --svenn-res-bg: #EDF3E3;
  --svenn-bg: #F8F9FA;
}

/* --- Grunnleggende oppsett --- */
.usp-section {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #ffffff; 
  padding: 60px 20px; 
  color: var(--svenn-dark);
  width: 100%;
  overflow-x: hidden;
}

/* --- Layout for kortene --- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* --- Selve designet på kortet --- */
.usp-card {
  background: #ffffff; 
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; 
  
  /* For fade-in animasjonen */
  opacity: 0;
  transform: translateY(30px);
}

.usp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(36, 29, 45, 0.08), 0 4px 6px -2px rgba(36, 29, 45, 0.04);
}

/* Bilde-hover effekt */
.usp-card:hover .usp-card-image {
  background-size: 105%;
}

/* Bildeseksjonen på toppen - henter nå bildet fra HTML-en */
.usp-card-image {
  position: relative; 
  width: 100%;
  height: 180px; 
  background-size: 100%; /* Settes til 100% for å muliggjøre jevn zoom-effekt */
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  transition: background-size 0.4s ease; /* Gjør zoomen myk */
}

/* Highlight-pille (usp-badge) flyttet opp på bildet */
.usp-badge {
  position: absolute;
  top: 16px; 
  left: 16px; 
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px; 
  background-color: var(--svenn-res-bg); 
  color:...

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  
  // Trigger animasjonen (fade-up) når kortene scroller inn i viewport
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        
        // Fade inn kortet
        entry.target.classList.add('is-visible');
        
        // Slutt å observere (animeres kun 1 gang)
        observer.unobserve(entry.target);
      }
    });
  }, { 
    threshold: 0.1, // Starter når 10% av kortet vises på skjermen
    rootMargin: "0px 0px -50px 0px" // Trigger litt før man er helt på elementet
  });

  // Knytt observeren til alle kort
  document.querySelectorAll('.usp-card').forEach(card => {
    observer.observe(card);
  });
});