/* Artikelsidorna (snapsvisans-historia, nar-sjunger-man-snapsvisor): hero med bild, klickbar kalender/tidslinje, lasbar artikelkolumn med periodetikett per rubrik, rutor, verktygskort, las-vidare-rad och kallor. Sidorna lankar in filen via $header i . Farger: sajtens bla (#1F71CA/#0E54A0), varma tonen fran Festbilder (#fbf5e6/#f5f3eb) och orange etiketter (#b26a00/#F8A81D). */ /* Hero */ .art-hero {background: linear-gradient(135deg, #fbf5e6 0%, #f5f3eb 55%, #edf3fb 100%); border: 1px solid #b0b3bb; border-radius: .5rem; overflow: hidden;} .art-hero h1 {font-size: 2.2rem; font-weight: 600; line-height: 1.15; margin-bottom: .75rem;} .art-hero p {line-height: 1.6; margin-bottom: .75rem;} .art-hero .art-ingress {font-size: 1.1rem;} .art-hero-bild {min-height: 240px;} .art-hero-bild img {display: block; width: 100%; height: 100%; object-fit: cover;} .art-hero-rad {font-size: .9rem; color: #6c757d; margin: 1rem 0 0 !important;} /* Rubrik och underrad utanfor artikelkolumnen (kalendern/tidslinjen) */ .art-rubrik {font-size: 1.5rem; font-weight: 500; margin: 2.75rem 0 .25rem;} .art-under {color: #6c757d; margin-bottom: 1rem;} /* Kalender/tidslinje: klickbara kort med etikett, namn och en rad */ .art-kalender {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;} .art-kort {display: block; height: 100%; color: inherit; text-decoration: none; background: #fff; border: 1px solid #d9dde3; border-radius: .5rem; padding: .9rem 1rem 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); transition: box-shadow .15s ease, transform .15s ease;} .art-kort:hover {color: inherit; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); transform: translateY(-2px);} .art-kort-bred {grid-column: 1 / -1;} .art-nar {display: block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #b26a00; margin-bottom: .2rem;} .art-nu {display: inline-block; vertical-align: middle; background: #F8A81D; color: #fff; border-radius: 1rem; padding: .05rem .5rem .1rem; font-size: .68rem; letter-spacing: .03em; margin-left: .4rem;} .art-kort-namn {display: block; font-size: 1.1rem; font-weight: 500; color: #0E54A0; margin-bottom: .25rem;} .art-kort-text {display: block; font-size: .9rem; color: #495057; line-height: 1.5;} /* Artikelkolumnen */ .art-artikel {max-width: 44rem; margin: 0 auto;} .art-artikel h2 {font-size: 1.5rem; font-weight: 500; margin: 2.75rem 0 .75rem; scroll-margin-top: 80px;} .art-artikel h2 .art-nar {margin-bottom: .3rem;} .art-artikel h3 {font-size: 1.2rem; font-weight: 500; margin: 1.75rem 0 .5rem;} .art-artikel p, .art-artikel li {line-height: 1.75;} .art-artikel .art-ingress {font-size: 1.1rem;} .art-artikel figure {margin: 1.5rem 0;} .art-artikel figure img {width: 100%; height: auto; border-radius: 8px; display: block;} .art-artikel figcaption {font-size: .875rem; color: #6c757d; padding-top: .5rem; font-style: italic;} .art-artikel blockquote {background: linear-gradient(135deg, #fbf5e6 0%, #f5f3eb 100%); border-left: 4px solid #F8A81D; border-radius: 0 .5rem .5rem 0; padding: .9rem 1.25rem; margin: 1.5rem 0; font-size: 1.05rem; line-height: 1.7;} .art-artikel blockquote p:last-child {margin-bottom: 0;} /* Tabell i artikelkolumnen (cookiepolicy) */ .art-artikel .art-tabell {font-size: .95rem; margin-bottom: 1rem;} .art-artikel .art-tabell th {font-weight: 600;} .art-artikel .art-tabell code {color: #0E54A0; background: #f1f4f6; padding: .1rem .35rem; border-radius: .25rem; font-size: .9em;} /* Knapprad under ett avsnitt, med "Mest lasta" */ .art-cta {display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1rem 0 .5rem;} .art-visor {font-size: .9rem; color: #6c757d; line-height: 1.6;} .art-visor a {white-space: nowrap;} /* Varm ruta (fraga/svar, las vidare) */ .art-ruta {background: linear-gradient(135deg, #fbf5e6 0%, #f5f3eb 100%); border: 1px solid #e3dfd0; border-radius: .5rem; padding: 1.25rem 1.5rem .5rem; margin: 2.75rem 0;} .art-ruta h2 {margin-top: 0;} .art-ruta-lank {display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-bottom: 1.25rem; margin: 2rem 0;} .art-ruta-lank .art-ruta-text {flex: 1 1 18rem;} .art-ruta-lank p {margin: 0; line-height: 1.6;} .art-ruta-lank strong {display: block; font-size: 1.15rem; font-weight: 500; margin-bottom: .25rem;} /* Tipslista: etikett till vanster, text till hoger */ .art-tips {display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .7rem 1.5rem; margin: 1rem 0 1.5rem;} .art-tips dt {font-weight: 600; color: #0E54A0; line-height: 1.6;} .art-tips dd {margin: 0; line-height: 1.6;} /* Verktygskort */ .art-verktyg {display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; margin: 1.25rem 0;} .art-verktyg-kort {background: #fff; border: 1px solid #d9dde3; border-radius: .5rem; padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem;} .art-verktyg-kort > i, .art-verktyg-kort > svg {font-size: 1.8rem; color: #1F71CA; line-height: 1; width: 1.9rem; height: 1.9rem;} .art-verktyg-kort h3 {font-size: 1.15rem; font-weight: 500; margin: 0;} .art-verktyg-kort p {margin: 0; color: #495057; line-height: 1.6;} .art-verktyg-kort .btn {align-self: flex-start; margin-top: .5rem;} /* Variant med knappen i full bredd langst ned i kortet (tipsa-oss) */ .art-verktyg-brett .art-verktyg-kort .btn {align-self: stretch; margin-top: auto; padding-top: .6rem; padding-bottom: .6rem;} .art-verktyg-brett .art-verktyg-kort p {margin-bottom: .75rem;} /* Formular i vit ruta (kontakta-oss) */ .art-formular {background: #fff; border: 1px solid #d9dde3; border-radius: .5rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06);} .art-falt {margin-bottom: 1.25rem;} .art-falt label {display: block; font-weight: 500; margin-bottom: .3rem;} .art-falt .form-text {display: block; margin-top: .3rem; line-height: 1.5;} .art-oblig {font-size: .8rem; font-weight: 400; font-style: italic; color: #b94947; margin-left: .5rem;} .art-formular-fot {font-size: .85rem;} /* Las vidare och kallor */ .art-lasvidare {display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0;} .art-kallor {font-size: .9rem;} .art-kallor h3 {font-size: 1.05rem; margin-top: 1.25rem;} .art-kallor li {margin-bottom: .5rem;} .art-kallor p, .art-kallor li {line-height: 1.6;} @media (max-width: 767.98px) { .art-kalender {grid-template-columns: repeat(2, minmax(0, 1fr));} .art-hero h1 {font-size: 1.8rem;} .art-tips {grid-template-columns: 1fr; gap: .1rem 0;} .art-tips dd {margin-bottom: .75rem;} } @media (max-width: 479.98px) { .art-kalender {grid-template-columns: 1fr;} }