/* ========================================================================= Bloggsida (home.php) — Figma "blog - desktop" 1175:8796. Hero (H1 + ingress) → kategori-filter → 3-kol inläggsrutnät (post-card) → "Visar X av Y" + "Ladda in fler" → Contact-botten (delad .contact, se blocks/contact/style.css, enqueue:as separat på is_home). FÖRSTAPASS: sektions-padding (hero/grid/contact-mellanrum) är approximativ och KALIBRERAS mot DOM-diff. Typografi/kort enligt Figma-noder. Filter/load- knappar speglar all-cases (samma komponent). Inga osedda effekter på kortet (Figma har ingen hover/skugga); filter/load behåller all-cases mikrostate- transition (samma approverade komponent). ========================================================================= */ /* --- Hero (1175:8890) -------------------------------------------------- */ .blog-hero { padding-top: clamp(2.5rem, 5vw, 5rem); /* under site-header — kalibreras */ padding-bottom: 0; } .blog-hero__inner { display: flex; flex-direction: column; gap: 40px; /* Figma rubrik → ingress */ } .blog-hero__title { margin: 0; max-width: 100%; word-break: break-word; } .blog-hero__intro { margin: 0; font-family: var(--font-body); font-weight: var(--fw-medium); /* Inter Medium 500 */ font-size: var(--text-body-l); /* 18px */ line-height: var(--leading-normal); /* 1.5 */ color: var(--color-neutral-900); /* #2d2d2b */ } /* --- Blog-sektion (filter + rutnät + mer) ----------------------------- OBS: scope:ad till section — WP sätter klassen "blog" även på på inläggssidan, och en oscopad .blog-regel träffar då bodyn och slår ut fixed-headerns kompensation (body { padding-top: var(--header-h) }). */ section.blog { padding-top: clamp(3rem, 7vw, 9rem); /* hero → filter (~144) — kalibreras */ padding-bottom: clamp(3rem, 7vw, 9rem); /* mer → contact (~144) — kalibreras */ } .blog__inner { display: flex; flex-direction: column; gap: 4rem; /* 64px (filter → rutnät → mer) */ } /* --- Kategori-filter (CTA-pills, speglar all-cases) ------------------- */ .blog__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; /* Figma gap-24 */ } .blog__filter { display: inline-flex; align-items: center; justify-content: center; padding: 15px 23px; /* 1px border-komp → samma höjd som aktiv */ border: 1px solid var(--color-neutral-900); /* #2d2d2b */ border-radius: 100px; background-color: transparent; font-family: var(--font-heading); font-weight: var(--fw-semibold); /* Inter Tight SemiBold */ font-size: var(--text-button); /* 16px */ line-height: var(--leading-snug); /* 1.2 */ color: var(--color-neutral-900); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .blog__filter.is-active { padding: 16px 24px; /* ingen border → kompensera tillbaka */ border: 0; background-color: var(--color-coral-600); /* #fb575d */ color: var(--color-neutral-100); /* #fafaf5 */ } /* --- Rutnät: 3 kolumner ----------------------------------------------- */ .blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; /* Figma kol-gap */ row-gap: 59px; /* Figma rad-gap — verifieras i diff */ width: 100%; margin: 0; padding: 0; list-style: none; } /* --- Inläggskort (post-card) ------------------------------------------- FLYTTAD till assets/css/post-card.css (delas med "Relaterade artiklar" på enskilda inlägg). Enqueue:as separat (handle sunbird-post-card). --------- */ /* --- Hover (uttryckligen begärda effekter, ej i Figma) ------------------ */ @media (hover: hover) { /* Filter-pills: liten hover (outline → coral). Aktiv (coral-fylld) pill påverkas ej. */ .blog__filter:not(.is-active):hover { border-color: var(--color-coral-600); color: var(--color-coral-600); } /* Ladda-in-fler: refresh-ikonen roterar vid hover (begärd effekt). */ .blog__load:hover .blog__load-icon { transform: rotate(90deg); } } /* Reducerad rörelse: ingen rotation (färgskiftet behålls). */ @media (prefers-reduced-motion: reduce) { .blog__load-icon { transition: none; } .blog__load:hover .blog__load-icon { transform: none; } } /* --- "Visar X av Y" + Ladda in fler (speglar all-cases) -------------- */ .blog__more { display: flex; flex-direction: column; align-items: center; gap: 24px; /* Figma count → knapp */ } .blog__count { margin: 0; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-button); /* 16px */ line-height: var(--leading-snug); color: var(--color-neutral-500); /* #a5a59f */ text-align: center; } .blog__load { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 23px; border: 1px solid var(--color-neutral-900); border-radius: 100px; background-color: transparent; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-button); line-height: var(--leading-snug); color: var(--color-neutral-900); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; } .blog__load[hidden] { display: none; } .blog__load.is-loading { opacity: 0.6; pointer-events: none; } .blog__load-icon { flex: none; width: 24px; height: 24px; transition: transform 0.3s ease; /* hover-rotation (begärd effekt) */ } /* --- Contact-botten: section-mellanrum (intern markup = blocks/contact) */ .blog__contact { /* Padding för att matcha Figma (contact-frame top/bottom). Kalibreras i diff. */ padding-block: clamp(4rem, 9vw, 9rem) clamp(4rem, 9vw, 9rem); } /* --- Mobil (≤768) — Figma "blog - mobile" 1377:41796 ------------------- */ @media (max-width: 768px) { /* Hero: gap rubrik→ingress 24 (Figma). H1 = 36px = --text-h1 fluid-min (matchar). */ .blog-hero__inner { gap: 24px; } /* Hero-ingress mobil: Regular (Figma mobil = Body L); desktop = Medium. */ .blog-hero__intro { font-weight: var(--fw-regular); } /* Rutnät: 1 kolumn, kort-gap 24 (Figma 1377:42205). */ .blog__grid { grid-template-columns: 1fr; row-gap: 24px; } /* Filter mobil: gap 16, mindre pills (py-8 px-16). */ .blog__filters { gap: 16px; } .blog__filter { padding: 7px 15px; /* py-8 px-16 minus 1px border-komp */ } .blog__filter.is-active { padding: 8px 16px; } }