/* ========================================================================== Fas 2 — design-lane (nattpass 2026-09-02). Enqueue:as efter main.css, bara när fnm_fas2_design_enabled=1. Namnrymd .f2-*. Typskala = startsidans norm (K11): gelica · eyebrow 12px/0.14em orange · h2 32px uppercase · h3 20px · body 16/24 · lane 1100px · radius 16/24 · pill 999. Sektioner 56/40px (stramare än hem). ========================================================================== */ :root { --f2-green: #1f3e36; --f2-green-deep: #14291f; --f2-orange: #ef7923; --f2-orange-dark: #c9651d; /* G1 (Julia 2/9): cream/beige UTRENSAD — ersatt av palettens isch-vita #fffbfb (--f2-cream), ljusgröna #e9f1ec (--f2-tint, tabellens rekommenderad-kolumn) och ljusgrå #f2f2f2 (--f2-grey). Gamla namn (--f2-beige/--f2-warm/--f2-cream2) pekar om till de nya så inga konsumenter faller ur. */ --f2-cream: #fffbfb; --f2-tint: #DAEAD8; /* R3-2 (Julia 4/9): #e9f1ec drog mot turkos → founders val, 'Färgskala hemsida.pdf' sida 2 */ --f2-grey: #f2f2f2; --f2-beige: var(--f2-tint); --f2-warm: var(--f2-grey); --f2-cream2: var(--f2-tint); --f2-ink: #1f3e36; --f2-mut: #55645c; --f2-line: rgba(31, 62, 54, 0.12); --f2-line2: rgba(31, 62, 54, 0.14); --f2-sage: #b9cdc4; --f2-peach: #f0b98a; --f2-lane: 1100px; --f2-lane-narrow: 880px; --f2-gutter: clamp(16px, 4vw, 48px); --f2-sec: 56px; --f2-sec-m: 40px; --f2-radius: 16px; --f2-radius-lg: 24px; } /* --- Layout --------------------------------------------------------------- */ .fm-fas2 .f2-wrap { max-width: var(--f2-lane); margin: 0 auto; padding-left: var(--f2-gutter); padding-right: var(--f2-gutter); } .fm-fas2 .f2-wrap--narrow { max-width: var(--f2-lane-narrow); } .fm-fas2 .f2-section { padding: var(--f2-sec) 0; } .fm-fas2 .f2-section--tight { padding: 32px 0; } .fm-fas2 .f2-section--cream { background: var(--f2-cream); } .fm-fas2 .f2-section--warm { background: var(--f2-warm); } .fm-fas2 .f2-section--flush-top { padding-top: 0; } .fm-fas2 .f2-center { text-align: center; } .fm-fas2 .f2-center .f2-btn { margin-left: auto; margin-right: auto; } @media (max-width: 768px) { .fm-fas2 .f2-section { padding: var(--f2-sec-m) 0; } } /* --- Typografi (startsidans skala) ---------------------------------------- */ .fm-fas2 .f2-eyebrow { font-family: 'gelica', Georgia, serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--f2-orange); font-weight: 600; margin: 0 0 10px; } .fm-fas2 .f2-eyebrow--peach { color: var(--f2-peach); } .fm-fas2 .f2-h1 { font-family: 'gelica', Georgia, serif; font-weight: 500; text-transform: uppercase; font-size: 40px; line-height: 1.08; letter-spacing: 0.02em; color: var(--f2-green); margin: 0; } .fm-fas2 .f2-h2 { font-family: 'gelica', Georgia, serif; font-weight: 500; text-transform: uppercase; font-size: 32px !important; line-height: 1.1; letter-spacing: 0.04em; color: var(--f2-green); margin: 0 0 16px; } .fm-fas2 .f2-h3 { font-family: 'gelica', Georgia, serif; font-weight: 500; text-transform: uppercase; font-size: 20px; line-height: 1.2; letter-spacing: 0.02em; color: var(--f2-green); margin: 0 0 8px; } .fm-fas2 .f2-lede { font-family: 'gelica', Georgia, serif; font-size: 18px; line-height: 1.6; color: var(--f2-mut); margin: 0 0 20px; } .fm-fas2 .f2-center .f2-lede { margin-left: auto; margin-right: auto; max-width: 640px; } .fm-fas2 .f2-small { font-family: 'gelica', Georgia, serif; font-size: 14px; line-height: 1.55; color: var(--f2-mut); margin: 0; } .fm-fas2 .f2-prose { font-family: 'gelica', Georgia, serif; font-size: 16px; line-height: 1.6; color: var(--f2-green); } .fm-fas2 .f2-prose p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: inherit; } .fm-fas2 .f2-prose p:last-child { margin-bottom: 0; } .fm-fas2 .f2-prose a { color: var(--f2-orange); text-decoration: underline; } .fm-fas2 .f2-prose ul, .fm-fas2 .f2-prose ol { margin: 0 0 12px 20px; padding: 0; } .fm-fas2 .f2-prose li { font-size: 16px; line-height: 1.6; color: inherit; } .fm-fas2 .f2-prose--light, .fm-fas2 .f2-prose--light p, .fm-fas2 .f2-prose--light li { color: var(--f2-cream) !important; } .fm-fas2 .f2-prose--light a { color: var(--f2-peach); } .fm-fas2 .f2-prose--mut, .fm-fas2 .f2-prose--mut p { color: var(--f2-mut); } .fm-fas2 .f2-textlink { font-family: 'gelica', Georgia, serif; color: var(--f2-orange); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } .fm-fas2 .f2-textlink:hover { text-decoration: underline; color: var(--f2-orange-dark); } .fm-fas2 .f2-textlink--lc { text-transform: none; letter-spacing: 0; font-size: 15px; } @media (max-width: 768px) { .fm-fas2 .f2-h1 { font-size: 28px; } .fm-fas2 .f2-h2 { font-size: 24px !important; } .fm-fas2 .f2-h3 { font-size: 18px; } .fm-fas2 .f2-lede { font-size: 16px; } } /* --- Knappar (K9: en pillstil, två diskretionsnivåer) --------------------- */ .fm-fas2 .f2-btn { display: inline-block; font-family: 'gelica', Georgia, serif; font-weight: 600; font-size: 15px; line-height: 1; padding: 16px 30px; border-radius: 999px; text-decoration: none; text-align: center; transition: background 0.15s, color 0.15s, transform 0.15s; white-space: nowrap; } .fm-fas2 .f2-btn--primary { background: var(--f2-orange); color: #fff !important; box-shadow: 0 4px 16px rgba(31, 58, 55, 0.18); } .fm-fas2 .f2-btn--primary:hover { background: var(--f2-orange-dark); color: #fff; transform: translateY(-1px); } .fm-fas2 .f2-btn--ghost { background: transparent; color: var(--f2-green) !important; box-shadow: inset 0 0 0 2px var(--f2-green); } .fm-fas2 .f2-btn--ghost:hover { background: var(--f2-green); color: #fff !important; } .fm-fas2 .f2-btn--light { background: transparent; color: var(--f2-cream) !important; box-shadow: inset 0 0 0 2px var(--f2-cream); } .fm-fas2 .f2-btn--light:hover { background: var(--f2-cream); color: var(--f2-green) !important; } .fm-fas2 .f2-btn--sm { padding: 13px 22px; font-size: 14px; } .fm-fas2 .f2-btn--block { display: block; width: 100%; } /* --- Media-slot ------------------------------------------------------------ */ .fm-fas2 .f2-media { position: relative; overflow: hidden; border-radius: var(--f2-radius); background: var(--f2-warm); aspect-ratio: var(--f2-ar, 4 / 3); } .fm-fas2 .f2-media__el { width: 100% !important; height: 100% !important; display: block; object-fit: cover; } .fm-fas2 .f2-media--contain .f2-media__el { object-fit: contain; } .fm-fas2 .f2-media__placeholder { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 12px; background: repeating-linear-gradient(45deg, #DAEAD8, #DAEAD8 12px, #fffbfb 12px, #fffbfb 24px); } .fm-fas2 .f2-media__placeholder span { font-family: Menlo, monospace; font-size: 11px; color: var(--f2-green); opacity: 0.7; background: rgba(255, 255, 255, 0.85); padding: 4px 8px; border-radius: 6px; } /* --- K8 badges -------------------------------------------------------------- */ .fm-fas2 .f2-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .fm-fas2 .f2-badge { font-family: 'gelica', Georgia, serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; padding: 8px 12px; border-radius: 999px; white-space: nowrap; } .fm-fas2 .f2-badges--product .f2-badge { background: rgba(31, 62, 54, 0.08); color: var(--f2-green); } .fm-fas2 .f2-badges--light .f2-badge { background: rgba(255, 251, 251, 0.14); color: var(--f2-cream); box-shadow: inset 0 0 0 1px rgba(255, 251, 251, 0.3); } .fm-fas2 .f2-badges--header .f2-badge { background: transparent; color: var(--f2-cream); box-shadow: inset 0 0 0 1px rgba(255, 251, 251, 0.35); padding: 9px 14px; } .fm-fas2 .f2-badge--image { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--f2-orange); color: #fff; font-family: 'gelica', Georgia, serif; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; padding: 7px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(31, 58, 55, 0.2); } /* --- K1 Butiken-headern ----------------------------------------------------- */ .fm-fas2 .f2-pagehead { background: var(--f2-green); border-bottom: 0; margin-bottom: var(--f2-sec); color: var(--f2-cream); } /* C1 (2/9): mörkgrön header, alla sidor */ /* Headern ÄGER luften under sig (mikrofix 2/9): nästa sektions egen topp-padding nollas så alla instanser får identiskt avstånd (56 desktop / 40 mobil) — ingen sidspecifik flush-top-hack. */ .fm-fas2 .f2-pagehead + .f2-section { padding-top: 0; } .fm-fas2 .f2-pagehead > .f2-wrap { padding-top: clamp(28px, 4vw, 44px); padding-bottom: clamp(20px, 3vw, 28px); } .fm-fas2 .f2-pagehead__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .fm-fas2 .f2-pagehead__text { max-width: 720px; } .fm-fas2 .f2-pagehead__title { font-family: 'gelica', Georgia, serif; font-weight: 500; text-transform: uppercase; font-size: 40px !important; line-height: 1.08; letter-spacing: 0.02em; color: var(--f2-cream); margin: 0 0 10px; } .fm-fas2 .f2-pagehead__intro, .fm-fas2 .f2-pagehead__intro p { font-family: 'gelica', Georgia, serif; font-size: 17px; line-height: 1.55; color: var(--f2-sage); margin: 0; } .fm-fas2 .f2-pagehead__intro p + p { margin-top: 8px; } .fm-fas2 .f2-pagehead__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; } .fm-fas2 .f2-pagehead__trust { font-family: 'gelica', Georgia, serif; font-size: 13px; font-weight: 600; color: var(--f2-cream); text-decoration: none; } .fm-fas2 .f2-pagehead__badges { border-top: 1px solid rgba(255, 251, 251, 0.18); margin-top: 18px; padding-top: 14px; } .fm-fas2 .f2-pagehead__after { margin-top: 18px; } @media (max-width: 768px) { .fm-fas2 .f2-pagehead { margin-bottom: var(--f2-sec-m); } .fm-fas2 .f2-pagehead__title { font-size: 28px !important; } .fm-fas2 .f2-pagehead__intro, .fm-fas2 .f2-pagehead__intro p { font-size: 15px; } .fm-fas2 .f2-pagehead__row { align-items: flex-start; } .fm-fas2 .f2-pagehead__aside { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } } /* --- Brödsmulor (produktsidor, ingen header) ------------------------------ */ .fm-fas2 .f2-crumbs { border-bottom: 1px solid var(--f2-line); } .fm-fas2 .f2-crumbs__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; } .fm-fas2 .f2-crumbs__nav { font-family: 'gelica', Georgia, serif; font-size: 13px; color: var(--f2-mut); } .fm-fas2 .f2-crumbs__nav a { color: var(--f2-mut); text-decoration: none; } .fm-fas2 .f2-crumbs__nav a:hover { color: var(--f2-orange); } .fm-fas2 .f2-crumbs__sep { margin: 0 8px; opacity: 0.6; } .fm-fas2 .f2-crumbs__current { color: var(--f2-green); font-weight: 600; } .fm-fas2 .f2-crumbs__trust { font-family: 'gelica', Georgia, serif; font-size: 13px; font-weight: 600; color: var(--f2-green); text-decoration: none; } /* --- K6 accordion (nya FAQ-stilen) på fristående .f2-acc -------------------- */ .fm-fas2 .f2-acc .faq-row { border-top: 1px solid var(--f2-line); } .fm-fas2 .f2-acc .faq-row:last-of-type { border-bottom: 1px solid var(--f2-line); } .fm-fas2 .f2-acc .faq-row__question { width: 100%; background: transparent; border: 0; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; text-align: left; font-family: 'gelica', Georgia, serif; color: var(--f2-green); font-size: 17px; font-weight: 400; position: relative; border-radius: 0; box-shadow: none; } .fm-fas2 .f2-acc .faq-row__question:hover { background: transparent; box-shadow: none; } .fm-fas2 .f2-acc .faq-row__question-text { flex: 1; line-height: 1.3; text-transform: none; font-weight: 400; } .fm-fas2 .f2-acc .faq-row__hash { color: var(--f2-green); opacity: 0; text-decoration: none; font-size: 14px; transition: opacity 0.15s; } .fm-fas2 .f2-acc .faq-row:hover .faq-row__hash { opacity: 0.45; } .fm-fas2 .f2-acc .faq-row__chevron { color: var(--f2-green); display: inline-flex; transition: transform 250ms ease; } .fm-fas2 .f2-acc .faq-row--open .faq-row__chevron { transform: rotate(180deg); } .fm-fas2 .f2-acc .faq-row__answer { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 250ms ease-out, opacity 250ms ease-out, padding 250ms ease-out; padding-block: 0; } .fm-fas2 .f2-acc .faq-row--open .faq-row__answer { opacity: 1; padding-block: 0 16px; max-height: none; } .fm-fas2 .f2-acc .faq-row__answer-inner { font-family: 'gelica', Georgia, serif; color: #555; font-size: 15px; line-height: 1.6; } .fm-fas2 .f2-acc .faq-row__answer-inner p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #555; } .fm-fas2 .f2-acc .faq-row__answer-inner p:last-child { margin-bottom: 0; } .fm-fas2 .f2-acc .faq-row__answer-inner strong { color: var(--f2-green); } .fm-fas2 .f2-acc .faq-row__answer-inner a { color: var(--f2-orange); } .fm-fas2 .f2-acc--cards .faq-row { border: 1px solid var(--f2-line2); border-radius: 12px; padding: 0 18px; margin-bottom: 10px; background: #fff; } .fm-fas2 .f2-acc--cards .faq-row:last-of-type { border-bottom: 1px solid var(--f2-line2); } @media (max-width: 600px) { .fm-fas2 .f2-acc .faq-row__question { font-size: 15px; padding: 14px 0; } .fm-fas2 .f2-acc .faq-row__hash { display: none; } } @media (prefers-reduced-motion: reduce) { .fm-fas2 .f2-acc .faq-row__answer, .fm-fas2 .f2-acc .faq-row__chevron { transition: none; } } /* FAQ-sektionen (delad renderare) — off-home får startsidans padding/skala */ .fm-fas2 .faq-section--v-a { padding: var(--f2-sec) 0; } .fm-fas2 .faq-section--v-a .faq-v-a__title { font-size: 32px !important; text-transform: uppercase; letter-spacing: 0.04em; } @media (max-width: 600px) { .fm-fas2 .faq-section--v-a .faq-v-a__title { font-size: 24px !important; } } /* --- K5 Trustpilot (delad renderare) off-home + CTA-variant ------------------ */ .fm-fas2 .trustpilot-section--v-a { padding: var(--f2-sec) 0 !important; } .fm-fas2 .trustpilot-section--v-a .trustpilot-v-a__header { margin-bottom: 32px; } .fm-fas2 .trustpilot-section--v-a .trustpilot-v-a__headline { font-size: 32px !important; line-height: 1.05; letter-spacing: 0.02em; } .fm-fas2 .trustpilot-section--v-a .trustpilot-v-a__review { min-height: 252px; } .fm-fas2 .trustpilot-section--v-a .trustpilot-v-a__cta { text-align: center; margin: 28px 0 0; } @media (max-width: 768px) { .fm-fas2 .trustpilot-section--v-a .trustpilot-v-a__review { min-height: 276px; } } /* Trustpilot unify 25/9 (Jossan): undersidorna = startsidans look. Startsidans värden kom från body.home-regler (main.css S10 + containerlåset, renderarens inline-CSS) och nådde aldrig undersidorna. Samma värden här för hela lanen; på startsidan är de identiska med body.home-reglerna, så startsidan ändras inte. min-height ovan = startsidans låsta kort (252 desktop / 276 mobil) så att rotationen inte ändrar blockhöjden. */ /* 1180 som literal: --fm-content-max är 1180 bara under body.home (main.css), Fix 133 sätter :root = 1100. */ .fm-fas2 .trustpilot-section--v-a .trustpilot-v-a__container { max-width: 1180px; } .fm-fas2 .trustpilot-section--v-a .trustpilot-v-a__rating { margin-top: 12px; } .fm-fas2 .trustpilot-section--v-a .trustpilot-v-a__rating-num { font-size: 22px; } .fm-fas2 .trustpilot-section--v-a .trustpilot-v-a__meta { margin-top: 10px; opacity: 0.7; } @media (max-width: 768px) { .fm-fas2 .trustpilot-section--v-a { padding-top: 44px !important; padding-bottom: 48px !important; } } /* --- K4 Startbox (delad renderare) off-home = startsidans look --------------- */ .fm-fas2 .startbox-callout { padding: var(--f2-sec) 0; } .fm-fas2 .startbox-callout .startbox-callout__title { font-size: 32px !important; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; } .fm-fas2 .startbox-callout .startbox-callout__eyebrow { text-align: center; } .fm-fas2 .startbox-callout__photo { width: 100% !important; height: 100% !important; } @media (max-width: 768px) { .fm-fas2 .startbox-callout .startbox-callout__title { font-size: 26px !important; } } /* --- K2 kompakt Så fungerar det -------------------------------------------- */ .fm-fas2 .f2-steps__list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .fm-fas2 .f2-steps__item { display: flex; flex-direction: column; gap: 12px; } .fm-fas2 .f2-steps__num { font-family: 'gelica', Georgia, serif; font-size: 40px; line-height: 1; color: var(--f2-orange); font-weight: 500; } .fm-fas2 .f2-steps__title { font-size: 18px; margin: 0; } .fm-fas2 .f2-steps__text { font-family: 'gelica', Georgia, serif; font-size: 15px; line-height: 1.55; color: var(--f2-mut); margin: 0; } .fm-fas2 .f2-steps__cta { margin-top: 32px; } @media (max-width: 900px) { .fm-fas2 .f2-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .fm-fas2 .f2-steps__list { grid-template-columns: 1fr; gap: 18px; } .fm-fas2 .f2-steps__item { flex-direction: row; align-items: flex-start; gap: 14px; } .fm-fas2 .f2-steps__num { font-size: 30px; width: 40px; flex-shrink: 0; } } /* --- K9 CTA ------------------------------------------------------------------ */ .fm-fas2 .f2-cta--section .f2-cta__inner { max-width: 640px; margin: 0 auto; } .fm-fas2 .f2-cta__actions { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 8px; } .fm-fas2 .f2-cta__secondary { font-family: 'gelica', Georgia, serif; font-size: 14px; color: var(--f2-green); text-decoration: underline; } .fm-fas2 .f2-cta--discreet { padding: 24px 0 var(--f2-sec); } .fm-fas2 .f2-cta__band { background: var(--f2-cream2); border: 1px solid var(--f2-line2); border-radius: var(--f2-radius); padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .fm-fas2 .f2-cta__band-title { margin-bottom: 4px; } .fm-fas2 .f2-cta__band-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } @media (max-width: 600px) { .fm-fas2 .f2-cta__band { padding: 22px 20px; } } /* --- K10 zigzag ------------------------------------------------------------- */ .fm-fas2 .f2-zig__rows { display: flex; flex-direction: column; gap: 40px; } .fm-fas2 .f2-zig__title { margin-bottom: 36px; } .fm-fas2 .f2-zig__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .fm-fas2 .f2-zig__row--rev .f2-zig__media { order: 2; } .fm-fas2 .f2-zig__text { min-width: 0; } .fm-fas2 .f2-zig__media { min-width: 0; } .fm-fas2 .f2-zig__heading { font-size: 22px; margin-bottom: 12px; } .fm-fas2 .f2-zig__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--f2-orange); color: #fff; font-family: 'gelica', Georgia, serif; font-weight: 600; font-size: 15px; margin-bottom: 12px; } /* L (SFD steg-för-steg): media ≤ texthöjd, rundade hörn, ALLA block lika stora (K10 / SFD-3/4). Radhöjden sätts av textkolumnen (grid-auto-rows: 1fr → alla rader = det största textstycket); mediat fyller sin cell absolut och kan därför aldrig bli högre än texten. */ .fm-fas2 .f2-zig--l .f2-zig__rows { display: grid; grid-auto-rows: 1fr; gap: 24px; } .fm-fas2 .f2-zig--l .f2-zig__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; min-height: 260px; } /* SFD2 (Julia 2/9): mediat ligger ALLTID i 5fr-spåret — även när det är höger (annars 7fr = bredare/rektangulär mot vänsterns kvadrat) */ .fm-fas2 .f2-zig--l .f2-zig__row--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .fm-fas2 .f2-zig--l .f2-zig__media { position: relative; min-height: 220px; } .fm-fas2 .f2-zig--l .f2-zig__media .f2-media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 20px; } .fm-fas2 .f2-zig--l .f2-zig__text { display: flex; flex-direction: column; justify-content: center; padding: 8px 0; } /* M (Om oss): ingen bakgrund, kompakt */ .fm-fas2 .f2-zig--m .f2-zig__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fm-fas2 .f2-zig--m .f2-zig__rows { gap: 32px; } .fm-fas2 .f2-zig--m .f2-media { --f2-ar: 3 / 2; } /* S (VF): mycket smalare */ .fm-fas2 .f2-zig--s .f2-zig__row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; } .fm-fas2 .f2-zig--s .f2-zig__rows { gap: 20px; } .fm-fas2 .f2-zig--s .f2-media { --f2-ar: 1 / 1; } @media (max-width: 800px) { .fm-fas2 .f2-zig__row, .fm-fas2 .f2-zig--l .f2-zig__row, .fm-fas2 .f2-zig--s .f2-zig__row { grid-template-columns: 1fr; min-height: 0; } .fm-fas2 .f2-zig__row--rev .f2-zig__media { order: 0; } .fm-fas2 .f2-zig--l .f2-zig__rows { display: flex; flex-direction: column; } .fm-fas2 .f2-zig--l .f2-zig__media { min-height: 0; } .fm-fas2 .f2-zig--l .f2-zig__media .f2-media { position: relative; inset: auto; aspect-ratio: 16 / 10; height: auto; } .fm-fas2 .f2-zig__rows { gap: 32px; } } /* --- K3 foderplaner 4-läge (sections/plan_pricing.php) ---------------------- */ .fm-fas2 .plan-pricing--four .plan-pricing__footer { display: none; } /* SFD-9: EN CTA under korten (startbox-modulen följer direkt efter) */ .fm-fas2 .plan-pricing { padding: var(--f2-sec) 0; } .fm-fas2 .plan-pricing__heading { text-transform: uppercase; letter-spacing: 0.04em; } .fm-fas2 .plan-pricing--four .plan-pricing__grid, body.home.fm-fas2 .plan-pricing--four .plan-pricing__grid { grid-template-columns: repeat(4, 1fr) !important; gap: 18px; } /* SFD5: 4 i rad även på startsidan (main.css body.home-regel slog 3 kol) */ body.home.fm-fas2 .plan-pricing--four .plan-pricing__card { padding: 20px; } .fm-fas2 .plan-pricing--four .plan-pricing__card { padding: 20px; } .fm-fas2 .plan-pricing--four .plan-pricing__plan-name { font-size: 16px; letter-spacing: 0; white-space: nowrap; } /* SFD6: alla fyra i linje, "Anpassad Foderplan" radbryts ej */ .fm-fas2 .plan-pricing__card--highlight { background: #ded7cc; box-shadow: 0 0 0 2px var(--f2-orange), 0 6px 32px rgba(31, 58, 55, 0.14); } /* R3-1 (Julia 4/9): mörkare beige passar bättre här */ .fm-fas2 .plan-pricing__card--highlight .plan-pricing__pill { background: var(--f2-green); } .fm-fas2 .plan-pricing__card--highlight .plan-pricing__fill-bar { background: var(--f2-orange); } .fm-fas2 .plan-pricing__after-cta { text-align: center; margin: 32px 0 0; } @media (max-width: 1000px) and (min-width: 769px) { .fm-fas2 .plan-pricing--four .plan-pricing__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { /* SFD-8: två och två bredvid varandra på mobil (ersätter scroll-slidern i 4-läget) */ .fm-fas2 .plan-pricing--four .plan-pricing__grid, body.home.fm-fas2 .plan-pricing--four .plan-pricing__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; overflow: visible; } .fm-fas2 .plan-pricing--four .plan-pricing__card { flex: none; padding: 14px; gap: 10px; } .fm-fas2 .plan-pricing--four .plan-pricing__plan-name { font-size: 16px; } .fm-fas2 .plan-pricing--four .plan-pricing__pill { font-size: 9px; padding: 5px 8px; top: 8px; right: 8px; } .fm-fas2 .plan-pricing--four .plan-pricing__desc { font-size: 13px; } .fm-fas2 .plan-pricing--four .plan-pricing__nav { display: none !important; } } @media (max-width: 360px) { .fm-fas2 .plan-pricing--four .plan-pricing__grid { grid-template-columns: 1fr; } } /* --- Fyra punkterna (cream band) ------------------------------------------- */ .fm-fas2 .f2-points__band { background: var(--f2-cream2); border-radius: var(--f2-radius); padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .fm-fas2 .f2-points__item .f2-h3 { font-size: 18px; } .fm-fas2 .f2-points__link { text-align: center; margin: 18px 0 0; } @media (max-width: 900px) { .fm-fas2 .f2-points__band { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .fm-fas2 .f2-points__band { grid-template-columns: 1fr; gap: 18px; } } /* --- K7 jämförelsetabell ----------------------------------------------------- */ .fm-fas2 .f2-cmp__scroll { overflow-x: auto; border: 1px solid var(--f2-line2); border-radius: var(--f2-radius); background: #fff; margin-top: 24px; } .fm-fas2 .f2-cmp__table { width: 100%; border-collapse: collapse; min-width: 560px; font-family: 'gelica', Georgia, serif; } .fm-fas2 .f2-cmp__th { text-align: left; vertical-align: middle; padding: 16px 20px; font-family: 'gelica', Georgia, serif; font-weight: 600; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; width: 50%; } .fm-fas2 .f2-cmp__th--win { background: var(--f2-green); color: var(--f2-cream); } .fm-fas2 .f2-cmp__th--lose { background: var(--f2-warm); color: var(--f2-mut); } .fm-fas2 .f2-cmp__logo { height: 26px; width: auto; display: inline-block; vertical-align: middle; margin-right: 10px; } .fm-fas2 .f2-cmp__td { vertical-align: top; padding: 14px 20px; border-top: 1px solid var(--f2-line2); font-size: 15px; line-height: 1.5; } .fm-fas2 .f2-cmp__td--win { color: var(--f2-green); font-weight: 600; background: rgba(31, 62, 54, 0.03); } .fm-fas2 .f2-cmp__td--lose { color: var(--f2-mut); } .fm-fas2 .f2-cmp__mark { display: inline-block; width: 22px; font-weight: 700; } .fm-fas2 .f2-cmp__mark--yes { color: #2e8b57; } /* SB4 (2/9): GRÖNA bockar */ .fm-fas2 .f2-cmp__wordmark { display: inline-block; height: 22px; line-height: 0; } .fm-fas2 .f2-cmp__wordmark svg { height: 22px; width: auto; display: block; } .fm-fas2 .f2-cmp__mark--no { color: #b7574a; } /* --- Receptkort (VM / REC-7) -------------------------------------------------- */ .fm-fas2 .f2-recipes__title { margin-bottom: 28px; } .fm-fas2 .f2-recipes__grid { display: grid; gap: 22px; } .fm-fas2 .f2-recipes__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fm-fas2 .f2-recipes__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fm-fas2 .f2-rcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--f2-line2); border-radius: var(--f2-radius); overflow: hidden; box-shadow: 0 2px 24px rgba(31, 58, 55, 0.06); transition: transform 0.2s, box-shadow 0.2s; } /* VM1 (2/9): ljus textyta som i Butiken-originalet */ /* R3-4 (Julia 4/9, differentdog.com/recipes): tydligare klickbart — hela kortets yta tonas + lyft på hover */ .fm-fas2 .f2-rcard:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(31, 58, 55, 0.14); background: var(--f2-tint); border-color: rgba(31, 62, 54, 0.28); } .fm-fas2 .f2-rcard:hover .f2-rcard__link { text-decoration: underline; } .fm-fas2 .f2-rcard--compact:hover { background: var(--f2-tint); } .fm-fas2 .f2-rcard--compact:hover .f2-rcard__body { padding-left: 10px; padding-right: 10px; } .fm-fas2 .f2-rcard--startbox:hover { background: var(--f2-tint); border-color: var(--f2-orange); } .fm-fas2 .f2-rcard__media { position: relative; aspect-ratio: 3 / 2; background: var(--f2-warm); overflow: hidden; } .fm-fas2 .f2-rcard__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; transition: opacity 0.3s ease; } .fm-fas2 .f2-rcard__img--hover { opacity: 0; } .fm-fas2 .f2-rcard:hover .f2-rcard__img--hover { opacity: 1; } .fm-fas2 .f2-rcard__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .fm-fas2 .f2-rcard__name { font-family: 'gelica', Georgia, serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; font-size: 20px; line-height: 1.2; color: var(--f2-green); margin: 0; } .fm-fas2 .f2-rcard__desc { font-family: 'gelica', Georgia, serif; font-size: 14px; line-height: 1.5; color: var(--f2-mut); margin: 0; } .fm-fas2 .f2-rcard__link { margin-top: auto; padding-top: 6px; font-family: 'gelica', Georgia, serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--f2-orange); } .fm-fas2 .f2-rcard__price { font-family: 'gelica', Georgia, serif; font-size: 22px; font-weight: 600; color: var(--f2-green); margin: 0; } /* VM3 (2/9): orange kant runt HELA kortet (riktig border — inset-skuggan doldes av bilden) */ .fm-fas2 .f2-rcard--startbox { background: #fff; border: 2px solid var(--f2-orange); box-shadow: none; } .fm-fas2 .f2-rcard--startbox .f2-rcard__name { color: var(--f2-green); } .fm-fas2 .f2-rcard--startbox .f2-rcard__desc { color: var(--f2-mut); } .fm-fas2 .f2-rcard--startbox .f2-rcard__price { color: var(--f2-green); } .fm-fas2 .f2-rcard--startbox .f2-btn { margin-top: auto; align-self: flex-start; } .fm-fas2 .f2-rcard--compact { background: transparent; box-shadow: none; } .fm-fas2 .f2-rcard--compact .f2-rcard__media { border-radius: var(--f2-radius); } .fm-fas2 .f2-rcard--compact .f2-rcard__body { padding: 12px 2px 0; gap: 4px; } .fm-fas2 .f2-rcard--compact .f2-rcard__name { color: var(--f2-green); font-size: 17px; } .fm-fas2 .f2-rcard--compact .f2-rcard__desc { color: var(--f2-mut); } @media (max-width: 900px) { .fm-fas2 .f2-recipes__grid--3, .fm-fas2 .f2-recipes__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .fm-fas2 .f2-rcard__body { padding: 14px 14px 18px; } .fm-fas2 .f2-rcard__name { font-size: 16px; } } @media (max-width: 480px) { .fm-fas2 .f2-recipes__grid--3 { grid-template-columns: 1fr; } .fm-fas2 .f2-recipes__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- Produktsida (recept + startbox) ---------------------------------------- */ .fm-fas2 .f2-product { padding: 32px 0 var(--f2-sec); } /* REC1/SB1 (Julia 2/9): TIDIGARE formatet — mindre, LIGGANDE bild (3:2, ej sträckt), textruta ≈ bild */ .fm-fas2 .f2-product__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 40px); align-items: start; } .fm-fas2 .f2-product__gallery { display: block; } .fm-fas2 .f2-product__gallery .f2-gallery { width: 100%; } .fm-fas2 .f2-product__info { min-width: 0; display: flex; flex-direction: column; } .fm-fas2 .f2-pcard { background: #fff; border: 1px solid var(--f2-line2); border-radius: var(--f2-radius); padding: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 12px; } .fm-fas2 .f2-pcard__title { font-family: 'gelica', Georgia, serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; font-size: 28px; line-height: 1.1; color: var(--f2-green); margin: 0; } .fm-fas2 .f2-pcard__desc, .fm-fas2 .f2-pcard__desc p { font-family: 'gelica', Georgia, serif; font-size: 14px; line-height: 1.55; color: var(--f2-mut); margin: 0; } /* REC3/SB3: texten under rutan (utanför) */ .fm-fas2 .f2-product__fine { font-family: 'gelica', Georgia, serif; font-size: 12px; line-height: 1.5; color: var(--f2-mut); text-align: center; margin: 12px 4px 0; } .fm-fas2 .f2-product__fine a { color: var(--f2-orange); } .fm-fas2 .f2-pcard__desc p + p { margin-top: 10px; } .fm-fas2 .f2-pcard__price { font-family: 'gelica', Georgia, serif; font-size: 28px; font-weight: 600; color: var(--f2-green); line-height: 1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .fm-fas2 .f2-pcard__price .f2-small { font-size: 14px; } .fm-fas2 .f2-pcard__cta { margin-top: 4px; } .fm-fas2 .f2-pcard__fine { font-family: 'gelica', Georgia, serif; font-size: 12px; line-height: 1.5; color: var(--f2-mut); text-align: center; margin: 0; } .fm-fas2 .f2-pcard__fine a { color: var(--f2-orange); } .fm-fas2 .f2-pcard__box { background: var(--f2-tint); border-radius: 12px; padding: 14px 18px; } .fm-fas2 .f2-pcard__box-label { font-family: 'gelica', Georgia, serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--f2-mut); font-weight: 600; margin: 0 0 8px; } .fm-fas2 .f2-pcard__box ul { margin: 0; padding: 0; list-style: none; } .fm-fas2 .f2-pcard__box li { font-family: 'gelica', Georgia, serif; font-size: 13px; line-height: 1.6; color: var(--f2-green); } /* Mikrofix 3/9 (Startbox-kortet ~80 px högre än bilden) — REC4-ordning, ENDAST startbox-scopat: 1) paddings/marginaler: kort 26→20/22, box 14/18→10/16, CTA-marginal 4→0 · 2) radavstånd: gap 10→8, lista 1.6→1.45, brödtext 1.55→1.45 · 3) ett snäpp: titel 26→24, pris 28→24, boxetikett 12→11, brödtext 14→13. */ .fm-fas2 .f2-page--startbox .f2-pcard { padding: 20px 22px; gap: 6px; } .fm-fas2 .f2-page--startbox .f2-pcard .f2-eyebrow { margin-bottom: 6px; } .fm-fas2 .f2-page--startbox .f2-pcard__cart .single_add_to_cart_button { padding: 14px 28px !important; } .fm-fas2 .f2-page--startbox .f2-pcard__title { font-size: 24px; } .fm-fas2 .f2-page--startbox .f2-pcard__desc, .fm-fas2 .f2-page--startbox .f2-pcard__desc p { font-size: 13px; line-height: 1.45; } .fm-fas2 .f2-page--startbox .f2-pcard__price { font-size: 24px; } .fm-fas2 .f2-page--startbox .f2-pcard__box { padding: 10px 16px; } .fm-fas2 .f2-page--startbox .f2-pcard__box-label { font-size: 11px; margin-bottom: 6px; } .fm-fas2 .f2-page--startbox .f2-pcard__box li { line-height: 1.35; } .fm-fas2 .f2-page--startbox .f2-pcard__cta { margin-top: 0; } .fm-fas2 .f2-pcard__box li a { color: var(--f2-orange); font-size: 13px; margin-left: 6px; } /* REC-3 detaljinfo: default DD (under textrutan i högerkolumnen) */ .fm-fas2 .f2-product__details { margin-top: 18px; } .fm-fas2 .f2-product__details-title { font-family: 'gelica', Georgia, serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--f2-mut); font-weight: 600; margin: 0 0 6px; } /* REC-3 variant "sida": två kategorier under bild+info (?fm_recinfo=sida) */ .fm-fas2 .f2-product__details--side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; } /* REC6 (2/9): stramare vita ytor på produktsidorna — accordion→USP-strip och kompakt-SFD→"Upptäck" matchar omgivande rytm */ .fm-fas2 .f2-product { padding-bottom: 20px; } .fm-fas2 .f2-page--recipe .f2-points, .fm-fas2 .f2-page--startbox .f2-points { padding-top: 20px; padding-bottom: 28px; } .fm-fas2 .f2-page--recipe .f2-steps { padding-bottom: 32px; } .fm-fas2 .f2-page--recipe .f2-recipes { padding-top: 36px; } .fm-fas2 .f2-page--startbox .f2-sbsteps { padding-top: 32px; padding-bottom: 32px; } /* WooCommerce add-to-cart inne i kortet (Startbox) */ .fm-fas2 .f2-pcard__cart form.cart { display: flex; flex-direction: column; gap: 12px; margin: 0; } .fm-fas2 .f2-pcard__cart .quantity { display: none; } .fm-fas2 .f2-pcard__cart .single_add_to_cart_button { width: 100%; display: block; background: var(--f2-orange) !important; color: #fff !important; border-radius: 999px !important; padding: 16px 28px !important; font-family: 'gelica', Georgia, serif !important; font-size: 16px !important; font-weight: 600 !important; box-shadow: 0 4px 16px rgba(31, 58, 55, 0.18); } .fm-fas2 .f2-pcard__cart .single_add_to_cart_button:hover { background: var(--f2-orange-dark) !important; } .fm-fas2 .f2-pcard__cart .woocommerce-variation-price, .fm-fas2 .f2-pcard__cart .price { display: none; } /* Galleri */ .fm-fas2 .f2-gallery { display: flex; flex-direction: column; gap: 12px; } .fm-fas2 .f2-gallery__main { position: relative; } .fm-fas2 .f2-gallery__main .f2-media { width: 100%; } .fm-fas2 .f2-gallery__img { border-radius: 20px; } .fm-fas2 .f2-gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .fm-fas2 .f2-gallery__thumb { padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--f2-warm); cursor: pointer; aspect-ratio: 3 / 2; transition: border-color 0.15s, transform 0.15s; box-shadow: none; } .fm-fas2 .f2-gallery__thumb img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } .fm-fas2 .f2-gallery__thumb.is-active { border-color: var(--f2-orange); } .fm-fas2 .f2-gallery__thumb:hover { transform: translateY(-1px); } @media (max-width: 900px) { .fm-fas2 .f2-product__grid { grid-template-columns: 1fr; } .fm-fas2 .f2-product__details--side { grid-template-columns: 1fr; } .fm-fas2 .f2-pcard__title { font-size: 24px; } /* David 14/9 (mobil-walk): 3:2-boxen på mobil kapade skålen/tråget i de förbeskurna 4:3- resp. 5:4-bilderna → mallens kvot gäller även på mobil. */ .fm-fas2 .f2-gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } } /* --- Startbox 1-2-3 (SB-3) ------------------------------------------------- */ .fm-fas2 .f2-sbsteps { border-top: 1px solid var(--f2-line2); } .fm-fas2 .f2-sbsteps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .fm-fas2 .f2-sbsteps__item { display: flex; gap: 16px; align-items: flex-start; } .fm-fas2 .f2-sbsteps__num { font-family: 'gelica', Georgia, serif; font-size: 40px; line-height: 1; color: var(--f2-orange); font-weight: 500; flex-shrink: 0; } .fm-fas2 .f2-sbsteps__item .f2-h3 { font-size: 18px; margin-bottom: 6px; } @media (max-width: 800px) { .fm-fas2 .f2-sbsteps__grid { grid-template-columns: 1fr; gap: 18px; } } /* --- REC-5 ingredienser (C3 avgjord: auto-rull) ---------------------------------- Mörkgrön bakgrund (ingredients_settings-optionens #1F3E36 = "som nu" på gamla produktsidan), bilderna större och utan vita kort. OBS: PNG:erna är opaka (vit bakgrund, ingen alfa) → rund maskning är det närmaste "friliggande" utan nya assets (AWAIT-ASSET: frilagda PNG:er). Kontinuerlig marquee, ingen hover-paus; enda pausen = diskret knapp (a11y). */ .fm-fas2 .f2-ingr { background: var(--f2-green); overflow: hidden; } .fm-fas2 .f2-ingr__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; } .fm-fas2 .f2-ingr__head .f2-h2 { margin-bottom: 0; color: var(--f2-cream); } .fm-fas2 .f2-ingr__pause { width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255, 251, 251, 0.35); background: transparent; color: var(--f2-cream); font-size: 12px; line-height: 1; cursor: pointer; padding: 0; box-shadow: none; opacity: 0.7; flex-shrink: 0; } .fm-fas2 .f2-ingr__pause:hover { opacity: 1; background: rgba(255, 251, 251, 0.1); } .fm-fas2 .f2-ingr__viewport { overflow: hidden; } .fm-fas2 .f2-ingr__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; will-change: transform; } .fm-fas2 .f2-ingr__card { flex: 0 0 calc((100% - 3 * 24px) / 4); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 8px; } .fm-fas2 .f2-ingr__img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); } .fm-fas2 .f2-ingr__title { font-family: 'gelica', Georgia, serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; font-size: 17px; color: var(--f2-cream); margin: 4px 0 0; } .fm-fas2 .f2-ingr__text { font-family: 'gelica', Georgia, serif; font-size: 14px; line-height: 1.5; color: var(--f2-sage); margin: 0; } @media (max-width: 900px) { .fm-fas2 .f2-ingr__card { flex-basis: calc((100% - 24px) / 2); } .fm-fas2 .f2-ingr__img { width: 130px; height: 130px; } } @media (max-width: 520px) { .fm-fas2 .f2-ingr__card { flex-basis: 72%; } .fm-fas2 .f2-ingr__head { align-items: center; } } /* --- Om oss: tidslinje (Berättelsen) ---------------------------------------- */ .fm-fas2 .f2-timeline__band { background: var(--f2-green); border-radius: var(--f2-radius-lg); padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px); color: var(--f2-cream); } .fm-fas2 .f2-timeline__title { color: var(--f2-cream); margin-bottom: 36px; } .fm-fas2 .f2-timeline__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; } .fm-fas2 .f2-timeline__item { border-top: 2px solid var(--f2-peach); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; } .fm-fas2 .f2-timeline__icon { height: 44px; width: auto; object-fit: contain; align-self: flex-start; } .fm-fas2 .f2-timeline__date { font-family: 'gelica', Georgia, serif; font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--f2-peach); margin: 0; } .fm-fas2 .f2-timeline__text { font-family: 'gelica', Georgia, serif; font-size: 15px; line-height: 1.55; color: var(--f2-sage); margin: 0; } @media (max-width: 900px) { .fm-fas2 .f2-timeline__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .fm-fas2 .f2-timeline__grid { grid-template-columns: 1fr; } } /* --- Om oss: team (befintlig sektion, OM1 (2/9): mindre bilder + text, kompaktare, samma layout) ------ */ .fm-fas2 .team-section { padding: var(--f2-sec) var(--f2-gutter) !important; background-color: var(--f2-grey) !important; } .fm-fas2 .team-section .team-section__container { max-width: 860px; margin: 0 auto; } .fm-fas2 .team-section .team-section__title { font-size: 32px !important; margin-bottom: 24px; } .fm-fas2 .team-section .team-section__cards { gap: 20px; } .fm-fas2 .team-section .team-card { padding: 16px 18px 20px; background-color: #fff; } .fm-fas2 .team-section .team-card__image img { max-height: 300px; object-fit: cover; object-position: top; border-radius: 10px; } .fm-fas2 .team-section .team-card__name { font-size: 18px !important; margin: 14px 0 8px; } .fm-fas2 .team-section .team-card__bio { font-size: 14px !important; line-height: 1.55 !important; } .fm-fas2 .team-section .team-card__links a img { width: 20px; height: 20px; } /* --- VF: plate / plattgrid / sex steg / fakta ---------------------------------- */ .fm-fas2 .f2-plate__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: var(--f2-radius-lg); overflow: hidden; background: var(--f2-green); } .fm-fas2 .f2-plate__text { padding: clamp(28px, 5vw, 64px); color: var(--f2-cream); display: flex; flex-direction: column; justify-content: center; } .fm-fas2 .f2-plate__title { color: var(--f2-cream); } .fm-fas2 .f2-plate__cta { margin-top: 20px; } .fm-fas2 .f2-plate__media .f2-media { border-radius: 0; height: 100%; aspect-ratio: auto; min-height: 320px; } @media (max-width: 800px) { .fm-fas2 .f2-plate__grid { grid-template-columns: 1fr; } .fm-fas2 .f2-plate__media .f2-media { min-height: 0; aspect-ratio: 4 / 3; } } .fm-fas2 .f2-pgrid__intro { max-width: 640px; margin: 0 auto 28px; } .fm-fas2 .f2-pgrid__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin: 0 auto; } .fm-fas2 .f2-pgrid__plate { background: var(--f2-warm); border-radius: var(--f2-radius); padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 8px; } .fm-fas2 .f2-pgrid__plate--b { background: var(--f2-green); } .fm-fas2 .f2-pgrid__plate--b .f2-h3 { color: var(--f2-cream); } .fm-fas2 .f2-pgrid__plate--b .f2-small { color: var(--f2-sage); } .fm-fas2 .f2-pgrid__photo .f2-media { height: 100%; } @media (max-width: 560px) { .fm-fas2 .f2-pgrid__grid { grid-template-columns: 1fr; } .fm-fas2 .f2-pgrid__photo .f2-media { --f2-ar: 3 / 2; } } /* mobilstack: platta → foto → platta … i läsordning */ @media (max-width: 560px) { .fm-fas2 .f2-pgrid__grid { display: flex; flex-direction: column; } } .fm-fas2 .f2-six__grid { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .fm-fas2 .f2-six__card { display: flex; flex-direction: column; gap: 8px; } .fm-fas2 .f2-six__media { position: relative; } .fm-fas2 .f2-six__img { background: var(--f2-cream2); } .fm-fas2 .f2-six__img.f2-media--contain .f2-media__el { padding: 18%; } .fm-fas2 .f2-six__num { position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; border-radius: 999px; background: var(--f2-orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: 'gelica', Georgia, serif; font-weight: 600; font-size: 14px; } .fm-fas2 .f2-six__card .f2-h3 { font-size: 17px; margin: 6px 0 0; } .fm-fas2 .f2-six__card .f2-prose p { font-size: 14px; line-height: 1.5; color: var(--f2-mut); } @media (max-width: 800px) { .fm-fas2 .f2-six__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } } @media (max-width: 480px) { .fm-fas2 .f2-six__grid { grid-template-columns: 1fr; } } .fm-fas2 .f2-facts__band { background: var(--f2-green); border-radius: var(--f2-radius-lg); padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px); color: var(--f2-cream); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; } .fm-fas2 .f2-facts__head .f2-h2 { color: var(--f2-cream); } .fm-fas2 .f2-facts__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .fm-fas2 .f2-facts__item { border-top: 2px solid var(--f2-peach); padding-top: 14px; display: flex; gap: 16px; align-items: flex-start; } .fm-fas2 .f2-facts__iconwrap { flex: 0 0 44px; } .fm-fas2 .f2-facts__icon { width: 40px; height: 40px; object-fit: contain; display: block; } .fm-fas2 .f2-facts__body { min-width: 0; flex: 1; } .fm-fas2 .f2-facts__item .f2-h3 { color: var(--f2-cream); font-size: 18px; margin: 0; } .fm-fas2 .f2-facts__item .f2-small { color: var(--f2-sage); } @media (max-width: 800px) { .fm-fas2 .f2-facts__band { grid-template-columns: 1fr; } } /* --- Blogg ------------------------------------------------------------------- */ .fm-fas2 .f2-blog { padding-top: 40px; } .fm-fas2 .f2-blog__filters { display: flex; flex-wrap: wrap; gap: 8px; } .fm-fas2 .f2-blog__filter { font-family: 'gelica', Georgia, serif; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 9px 14px; border-radius: 999px; background: rgba(255, 251, 251, 0.12); color: var(--f2-cream); text-decoration: none; } .fm-fas2 .f2-blog__filter.is-active { background: var(--f2-orange); color: #fff; } .fm-fas2 .f2-blog__pinned { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 48px; } .fm-fas2 .f2-blog__section-title { margin-bottom: 20px; } .fm-fas2 .f2-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .fm-fas2 .f2-post { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; } .fm-fas2 .f2-post__title { font-family: 'gelica', Georgia, serif; font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--f2-green); margin: 0; text-transform: none; } .fm-fas2 .f2-post:hover .f2-post__title { color: var(--f2-orange); } .fm-fas2 .f2-post__meta { font-family: 'gelica', Georgia, serif; font-size: 13px; color: var(--f2-mut); margin: 0; } .fm-fas2 .f2-post__excerpt { font-family: 'gelica', Georgia, serif; font-size: 15px; line-height: 1.6; color: var(--f2-mut); margin: 4px 0 8px; } .fm-fas2 .f2-post--feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: 48px; } .fm-fas2 .f2-post--feature .f2-post__title { font-size: 28px; } /* BLOGG1 (2/9): cream-highlight → mörkgrön med ljus text (grönt valt framför orange kant; loggat) */ .fm-fas2 .f2-post--pinned { background: var(--f2-green); border-radius: var(--f2-radius); padding: 16px; } .fm-fas2 .f2-post--pinned .f2-post__body { padding: 4px 4px 0; } .fm-fas2 .f2-post--pinned .f2-post__title { color: var(--f2-cream); } .fm-fas2 .f2-post--pinned:hover .f2-post__title { color: var(--f2-peach); } .fm-fas2 .f2-post--pinned .f2-post__meta { color: var(--f2-sage); } .fm-fas2 .f2-blog__pagination { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--f2-line2); display: flex; justify-content: center; } .fm-fas2 .f2-blog__pagination .page-numbers { font-family: 'gelica', Georgia, serif; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; background: rgba(31, 62, 54, 0.06); color: var(--f2-green); margin: 0 4px; text-decoration: none; } .fm-fas2 .f2-blog__pagination .page-numbers.current { background: var(--f2-green); color: var(--f2-cream); } @media (max-width: 900px) { .fm-fas2 .f2-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fm-fas2 .f2-post--feature { grid-template-columns: 1fr; } .fm-fas2 .f2-post--feature .f2-post__title { font-size: 22px; } } @media (max-width: 560px) { .fm-fas2 .f2-blog__grid, .fm-fas2 .f2-blog__pinned { grid-template-columns: 1fr; } } /* --- FAQ-sidan ---------------------------------------------------------------- */ .fm-fas2 .f2-faqpage__cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; } .fm-fas2 .f2-faqpage__cat { display: block; text-decoration: none; background: #fff; border: 1px solid var(--f2-line2); border-radius: 12px; padding: 18px 20px; transition: border-color 0.15s, transform 0.15s; } .fm-fas2 .f2-faqpage__cat:hover { border-color: var(--f2-orange); transform: translateY(-1px); } .fm-fas2 .f2-faqpage__cat .f2-h3 { font-size: 18px; margin-bottom: 4px; } .fm-fas2 .f2-faqpage__group { margin-bottom: 44px; scroll-margin-top: 90px; } .fm-fas2 .f2-faqpage__group-title { margin-bottom: 18px; } .fm-fas2 .f2-faqpage__featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; align-items: stretch; } .fm-fas2 .f2-faqpage__featured .f2-acc { height: 100%; } .fm-fas2 .f2-faqpage__featured .faq-row { border: 1px solid var(--f2-line2); border-radius: 12px; padding: 4px 18px; background: var(--f2-tint); height: 100%; box-sizing: border-box; } /* FAQ2: lika stora rutor (grid stretch) */ .fm-fas2 .f2-faqpage__featured .faq-row__question { min-height: 64px; } .fm-fas2 .f2-faqpage__featured .faq-row:last-of-type { border-bottom: 1px solid var(--f2-line2); } .fm-fas2 .f2-faqpage__featured .faq-row__question { font-weight: 600; } .fm-fas2 .f2-faqpage__featured .faq-row__question-text { font-weight: 600; } .fm-fas2 .f2-faqpage__contact { background: var(--f2-green); border-radius: var(--f2-radius); padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 48px); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; color: var(--f2-cream); } .fm-fas2 .f2-faqpage__contact .f2-h3 { color: var(--f2-cream); margin-bottom: 4px; } .fm-fas2 .f2-faqpage__contact p, .fm-fas2 .f2-faqpage__contact .f2-prose p { color: var(--f2-sage) !important; margin: 0; } .fm-fas2 .f2-faqpage__contact a:not(.f2-btn) { color: var(--f2-peach); } @media (max-width: 900px) { .fm-fas2 .f2-faqpage__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .fm-fas2 .f2-faqpage__featured { grid-template-columns: 1fr; } .fm-fas2 .f2-faqpage__cats { gap: 10px; } } /* --- SFD: bindningstids-trion (green band, Berättelsen) ---------------------- */ .fm-fas2 .f2-trio__band { background: var(--f2-green); border-radius: var(--f2-radius-lg); padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px); color: var(--f2-cream); } .fm-fas2 .f2-trio__head { text-align: center; max-width: 640px; margin: 0 auto 28px; } .fm-fas2 .f2-trio__num { margin: 0 auto 14px; } /* SFD4: steg 5 */ .fm-fas2 .f2-trio__head .f2-h2 { color: var(--f2-cream); } .fm-fas2 .f2-trio__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); } .fm-fas2 .f2-trio__item { border-top: 2px solid var(--f2-peach); padding-top: 14px; } .fm-fas2 .f2-trio__item .f2-h3 { color: var(--f2-cream); } .fm-fas2 .f2-trio__item .f2-prose, .fm-fas2 .f2-trio__item .f2-prose p { color: var(--f2-sage) !important; font-size: 15px; } .fm-fas2 .f2-trio__foot, .fm-fas2 .f2-trio__foot p { text-align: center; margin: 24px 0 0; color: var(--f2-sage) !important; font-family: 'gelica', Georgia, serif; font-size: 14px; } /* main.css p-elementregel gav mörk text på mörkt (GOTCHA) */ @media (max-width: 700px) { .fm-fas2 .f2-trio__grid { grid-template-columns: 1fr; gap: 18px; } } /* --- Globala tema-overrides inom fm-fas2-page (K11 luft) ---------------------- */ .fm-fas2-page #main-content > .f2-section:first-child { padding-top: 40px; } .fm-fas2-page main.product-main { padding: 0; } /* --- VF2 (Davids art direction 2/9): industri-slots — kall, grå, rektangulär ------------------------ */ .fm-fas2 .f2-media--industry { --f2-ar: 4 / 3; background: #d9dde0; } .fm-fas2 .f2-media--industry .f2-media__el { filter: grayscale(1) contrast(0.92) brightness(1.02) sepia(0.12) hue-rotate(170deg); object-position: center 40%; } .fm-fas2 .f2-media--industry-b .f2-media__el { object-position: center 60%; transform: scale(1.15); } .fm-fas2 .f2-media--industry-c .f2-media__el { object-position: center 30%; transform: scale(1.3) rotate(8deg); } /* --- SFD1 (Julia 2/9): loggan över "Så fungerar det"-fliken — fix 133:s 1100-lane + växande logga ----- Nav-lanen får 1280, loggan kapas till 180px, menyn får krympa i st.f. att svämma över. Gäller alla sidor (body.fm-fas2). Mätt: överlapp vid ≥1440 före; 0 efter (1280–1920). */ @media (min-width: 1200px) { body.fm-fas2 header .main-nav { padding-inline: max(24px, calc((100% - 1280px) / 2)) !important; gap: 24px; } body.fm-fas2 header .main-nav .logo-link { flex: 0 0 auto; max-width: 200px; } body.fm-fas2 header .main-nav .logo-link svg { width: 180px; max-width: 180px; height: auto; } body.fm-fas2 header .main-nav .menu { min-width: 0; flex: 1 1 auto; justify-content: flex-end; } body.fm-fas2 header .main-nav .menu ul.menu { flex-wrap: nowrap; } } /* G1: ticker-bannern (site-wide) beige → ljusgrön; undermenyer beige → ljusgrön */ body.fm-fas2 header .top-banner { background-color: var(--f2-tint); color: var(--f2-green); } body.fm-fas2 header .main-nav .menu ul.menu li.menu-item.menu-item-has-children ul.sub-menu a:hover, body.fm-fas2 header .mobile-nav .menu ul.menu li.menu-item.menu-item-has-children ul.sub-menu { background-color: var(--f2-tint); } /* ---------- Media-pass 13/9: K1 + K2