Add FAQ page template and improve button styling

Update frontpage content and styling Add metadata for new FAQ pages
Implement consistent button styling across templates

content/faq/Hva-er-MC/metadata.ini

@@ -0,0 +1 @@
+summary = "Medisinsk cannabis er en medikamentgruppe med 19 ulike varianter tilgjengelig i Norge. Medikamentene inneholder virkestoffer som THC og CBD som virker på det endocannabinoide systemet i kroppen, og kan tilpasses individuelt til hver pasient."

content/faq/metadata.ini

@@ -1,4 +1,4 @@
 menu = true
 title = "FAQ"
-page_template = list-card-grid
+page_template = list-faq
 show_date = false

content/faq/resept-norge/metadata.ini

@@ -0,0 +1 @@
+summary = "Det er nesten umulig å få medisinsk cannabis på resept i Norge fordi det er definert som utprøvende behandling. Fastlege kan skrive ut produkter med under 1% THC, mens spesialist på sykehus kan skrive ut alle produkter, men med begrensede refusjonsordninger."

content/faq/typer-medisinsk-cannabis-norge/metadata.ini

@@ -0,0 +1 @@
+summary = "Det finnes 19 varianter av medisinsk cannabis tilgjengelig på resept i Norge, inkludert tørket plantemateriale, oljer og munnspray. Varianter med under 1% THC kan skrives ut av fastlege, mens resten krever spesialist på sykehus."

content/frontpage.php

@@ -6,7 +6,7 @@
 
 <section class="cta-section escape">
     <div class="cta-content">
-        <p>Last ned og print ut informative brosjyrer rettet mot ulike målgrupper</p>
+        <p>Vi har laget enkle brosjyrer som forklarer medisinsk cannabis til pasienter, fagpersoner, foreninger og politikere. Last ned, skriv ut og del!</p>
         <a href="/brosjyrer" class="button inverted bigger">Vis brosjyrer</a>
     </div>
 </section>
@@ -36,7 +36,6 @@
     <h2>6. Gjennomgang av helsekrav til førerkort</h2>
     <p>For at pasienter skal kunne delta i studien er det behov for en grundig gjennomgang av regelverket rundt førerkort og medisinsk cannabis. Som det eneste landet i Europa, har Norge et regelverk som fører til at de fleste pasienter mister førerretten når de får resept på medisinsk cannabis. Dette selv om de bruker varianter og doser som ikke påvirker kjøreevnen. For andre medikamenter som kan ha en midlertidig påvirkning av kjøreevne operer Norge med et tillitssystem. Dagens regelverk diskriminerende derfor pasienter som bruker medisinsk cannabis.</p>
 
-   
 </article>
 
 
@@ -51,7 +50,7 @@
     background-image: url(hero-bg.webp);
     background-size: cover;
     background-position: 30% 80%;
-    min-height: 50vh;
+    min-height: 40vh;
     text-wrap: balance;
     .textbox {
       max-width: 42rem;
@@ -71,11 +70,10 @@
 
   .cta-section {
     background: linear-gradient(135deg, var(--color-green), var(--color-blue));
-    padding: 3rem 1rem;
+    padding: 2rem 1rem;
     text-align: center;
 
     .cta-content {
-      max-width: 42rem;
       margin: 0 auto;
 
       p {

custom/styles/base.css

@@ -18,7 +18,7 @@
 /* GLOBAL */
 html { font-family: var(--font-body); font-size: clamp(16px, 2.3vw, 20px); scroll-behavior: smooth; }
 body { margin: 0; color: var(--color-grey) }
-p, ul, ol { line-height: 1.5em; hyphens: auto }
+p, ul, ol, aside { line-height: 1.5em; hyphens: auto }
 img { max-width: 100%; height: auto; }
 h1 { color: var(--color-green); font-size: 2.3rem }
 h1, h2, h3, h4, h5, h6 {
@@ -119,35 +119,51 @@ main {
 .button {
   display: inline-block;
   text-decoration: none;
-  border-radius: 1rem;
+  border-radius: 2rem;
   padding: 0.35rem 1rem;
-  background-color: var(--color-grey);
-  color: white;
+  background-color: transparent;
+  color: var(--color-grey);
+  outline: 0.08rem var(--color-grey) solid;
 
-  &:hover, &.active {
+  &:hover {
+    background-color: var(--color-grey);
+    color: white;
+    outline: none;
+  }
+
+  &:active, &.active {
     background-color: var(--color-green);
     color: white;
+    outline: none;
   }
 
   &:focus {
-    outline: 0.1rem var(--color-green) solid;
-    color: var(--color-grey);
-    background-color: white;
+    background-color: var(--color-green);
+    color: white;
+    outline: none;
   }
 
   &.inverted {
-    background-color: white;
-    color: var(--color-grey);
+    background-color: transparent;
+    color: white;
+    outline: 0.08rem white solid;
 
-    &:hover, &.active {
+    &:hover {
+      background-color: white;
+      color: var(--color-green);
+      outline: none;
+    }
+
+    &:active, &.active {
       background-color: var(--color-green-light);
       color: var(--color-green);
+      outline: none;
     }
 
     &:focus {
-      outline: 0.1rem white solid;
       color: white;
       background-color: var(--color-grey);
+      outline: none;
     }
   }
 

custom/templates/list-card-grid.php

@@ -26,9 +26,9 @@
                 <?php endif; ?>
                 <div class="card-actions">
                     <?php if (!empty($item['pdf'])): ?>
-                        <a href="<?= htmlspecialchars($item['pdf']) ?>" class="btn-download" download>Last ned PDF</a>
+                        <a href="<?= htmlspecialchars($item['pdf']) ?>" class="button" download>Last ned PDF</a>
                     <?php endif; ?>
-                    <a href="<?= htmlspecialchars($item['url']) ?>" class="btn-read-more">Les mer</a>
+                    <a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les mer</a>
                 </div>
             </article>
         <?php endforeach; ?>
@@ -71,22 +71,6 @@ main > section.list-card-grid-wrapper {
 
       a {
         margin-top: 1.3rem;
-        border-radius: 1rem;
-        background-color: var(--color-grey);
-        padding: 0.35rem 1rem;
-        color: white;
-        text-decoration: none;
-
-        &:hover {
-          background-color: var(--color-green);
-          color: white;
-        }
-
-        &:focus {
-          outline: 0.1rem var(--color-green) solid;
-          color: var(--color-grey);
-          background-color: white;
-        }
       }
     }
   }

custom/templates/list-faq.php

@@ -0,0 +1,141 @@
+<?php if (!empty($pageContent)): ?>
+    <article class="list-intro">
+        <?= $pageContent ?>
+    </article>
+<?php endif; ?>
+
+<section class="list-faq-wrapper">
+    <div class="list-faq">
+        <?php foreach ($items as $item): ?>
+            <details class="faq-item">
+                <summary>
+                    <h2><?= htmlspecialchars($item['title']) ?></h2>
+                    <span class="toggle-icon" aria-hidden="true"></span>
+                </summary>
+                <div class="faq-content">
+                    <?php if ($item['summary']): ?>
+                        <p><strong>Kort oppsumert:</strong> <?= htmlspecialchars($item['summary']) ?></p>
+                    <?php endif; ?>
+                    <a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les hele svaret</a>
+                </div>
+            </details>
+        <?php endforeach; ?>
+    </div>
+</section>
+
+<style>
+main > section.list-faq-wrapper {
+  margin-top: 1.3em;
+
+  .list-faq {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .faq-item {
+    background-color: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    transition: border-color 0.2s ease;
+
+    &:hover {
+      border-color: var(--color-green);
+    }
+
+    &[open] {
+      border-color: var(--color-green);
+    }
+  }
+
+  summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    h2 {
+      margin: 0;
+      font-size: 1.3rem;
+      font-weight: 400;
+      color: var(--color-grey);
+      flex: 1;
+    }
+
+    .toggle-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      flex-shrink: 0;
+      position: relative;
+      margin-left: 1rem;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        background-color: var(--color-green);
+        transition: transform 0.3s ease;
+      }
+
+      &::before {
+        top: 50%;
+        left: 0;
+        right: 0;
+        height: 2px;
+        transform: translateY(-50%);
+      }
+
+      &::after {
+        left: 50%;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        transform: translateX(-50%);
+      }
+    }
+
+    &:hover h2 {
+      color: var(--color-green);
+    }
+  }
+
+  .faq-item[open] summary .toggle-icon::after {
+    transform: translateX(-50%) rotate(90deg);
+    opacity: 0;
+  }
+
+  .faq-content {
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    animation: slideDown 0.3s ease;
+
+    p {
+      margin-top: 0;
+      color: var(--color-grey);
+      line-height: 1.6;
+    }
+
+    .button {
+      margin-top: 1rem;
+    }
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+</style>

custom/templates/list.php

@@ -23,6 +23,7 @@
             <?php if ($item['summary']): ?>
                 <p><?= htmlspecialchars($item['summary']) ?></p>
             <?php endif; ?>
+            <a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les mer</a>
         </article>
     <?php endforeach; ?>
 </article>
@@ -44,6 +45,11 @@ main > article {
     h1 {
       margin-top: 1rem;
     }
+
+    > .button {
+      margin-left: 1rem;
+      margin-top: 1rem;
+    }
   }
 }
 </style>