/* Fagområde FAQ */ .fagomrade-faq { max-width: 800px; margin: 80px auto; } .fagomrade-faq__item { border-bottom: 1px solid rgba(0,0,0,.15); } .fagomrade-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; cursor: pointer; font-weight: 600; list-style: none; } .fagomrade-faq__item summary::-webkit-details-marker { display: none; } .fagomrade-faq__item summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* Plus that rotates into an X */ .fagomrade-faq__item summary::after { content: ""; flex: 0 0 14px; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .4s cubic-bezier(.4, 0, .2, 1); } .fagomrade-faq__item[open] summary::after { transform: rotate(135deg); } /* Answer fades in */ .fagomrade-faq__answer { padding-bottom: 20px; } .fagomrade-faq__answer > :last-child { margin-bottom: 0; } .fagomrade-faq__item[open] .fagomrade-faq__answer { animation: fagomrade-faq-fade .45s ease both; } @keyframes fagomrade-faq-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* Smooth height, in browsers that support it */ @supports (interpolate-size: allow-keywords) { .fagomrade-faq { interpolate-size: allow-keywords; } .fagomrade-faq__item::details-content { height: 0; overflow: clip; transition: height .4s cubic-bezier(.4, 0, .2, 1), content-visibility .4s allow-discrete; } .fagomrade-faq__item[open]::details-content { height: auto; } } @media (prefers-reduced-motion: reduce) { .fagomrade-faq__item summary::after, .fagomrade-faq__item::details-content { transition: none; } .fagomrade-faq__item[open] .fagomrade-faq__answer { animation: none; } }
Skip to content