/* Theme Name: Kock Tema Theme URI: https://kock.nu Author: Sonny Karlsson, Belfort Group AB Description: Temat för kock.nu – Sveriges arbetsmarknadsplats för restaurang, hotell och storkök. Basilikagrönt, rostfritt och bongpapper: startsida med bongskena för de senaste jobben, två ingångar (söker jobb / söker personal), yrken, extrapass och arbetsgivare. Byggt för pluginet Kock. Version: 1.0.0 Requires at least: 6.4 Requires PHP: 8.1 License: Proprietary Text Domain: kock-tema */ /* Radavståndet i textflödet räknas ut en gång på .kt-flow (med flödets text) och ärvs i pixlar av rubriker och punkter. */ @property --kt-line-gap { syntax: ''; inherits: true; initial-value: 16px; } /* ---------- Bas ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--k-sticky-top, 0px) + 16px); } body { margin: 0; overflow-wrap: anywhere; background: var(--k-bg, #fff); color: var(--k-ink, #0a0a0a); font: 400 16px/1.6 var(--k-font, system-ui, sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; } a { color: inherit; text-underline-offset: 3px; } button, input, select, textarea { font: inherit; color: inherit; } /* Fokusram bara när man navigerar med tangentbordet. Klick och tryck sätter .k-ptr på och ger inga ramar. */ :where(html:not(.k-ptr)) :focus-visible { outline: 2px solid var(--k-accent, #0a0a0a); outline-offset: 2px; } .k-ptr :focus { outline: none; } .kt-skip { position: absolute; left: 12px; top: -60px; z-index: 100002; padding: 10px 16px; background: var(--k-ink); color: #fff; text-decoration: none; font-weight: 600; transition: top .2s; } .kt-skip:focus { top: 12px; } .kt-center { display: flex; justify-content: center; margin: 32px 0 0; } /* 3.18.1: ett stycke fick webbläsarens 16 px under knappen – sektionen fick 56 px i botten i stället för 40. */ /* ---------- Sidhuvud ---------- */ .kt-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--k-line); backdrop-filter: saturate(1.4) blur(10px); } .admin-bar .kt-header { top: 32px; } @media (max-width: 782px) { .admin-bar .kt-header { top: 0; } } .kt-bar { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); min-height: 68px; } .kt-brand { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; } .kt-brand .custom-logo-link, .kt-logo-link { display: flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; } .kt-brand img, .kt-brand .custom-logo, .kt-footer-brand .custom-logo, .kt-drawer-head .custom-logo { display: block; height: calc(var(--kt-logo-h, 28px) * var(--kt-logo-m, 1)); max-height: none; max-width: min(320px, 46vw); width: auto; object-fit: contain; object-position: left center; } .kt-logo-svg { display: block; height: calc(var(--kt-logo-h, 28px) * var(--kt-logo-m, 1)); width: auto; max-width: min(320px, 46vw); overflow: visible; } @media (max-width: 600px) { :root { --kt-logo-m: .82; } } .kt-wordmark { font-family: var(--k-font-head); font-size: clamp(20px, 2.2vw, 24px); font-weight: var(--k-head-weight, 700); letter-spacing: -.02em; text-decoration: none; color: var(--k-ink); white-space: nowrap; display: block; line-height: 44px; overflow: hidden; } .kt-wordmark::after { content: "."; color: var(--k-accent); } .kt-search { position: relative; flex: 1; max-width: 520px; } .kt-search .k-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--k-muted); pointer-events: none; } .kt-search input { width: 100%; height: 44px; padding: 0 16px 0 42px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius); background: var(--k-soft); font-size: 15px; transition: border-color .15s, background .15s; -webkit-appearance: none; appearance: none; } @media (hover: hover) { .kt-search input:hover { border-color: var(--k-muted); } } .kt-search input:focus { outline: none; background: #fff; } :where(html:not(.k-ptr)) .kt-search input:focus { border-color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-ink); } .kt-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; } .kt-act { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; background: none; color: var(--k-ink); text-decoration: none; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: var(--k-radius); white-space: nowrap; } @media (hover: hover) { .kt-act:hover { color: var(--k-accent); } } .kt-act .k-avatar { width: 26px; height: 26px; } .kt-act--search, .kt-menu-btn { display: none; } .kt-cta { margin-left: 8px; } @media (max-width: 1100px) { .kt-act span:not(.k-avatar) { display: none; } } @media (max-width: 900px) { .kt-search { display: none; } .kt-act--search, .kt-menu-btn { display: inline-flex; } } @media (max-width: 600px) { .kt-bar { min-height: 60px; gap: 8px; } .kt-wordmark { font-size: clamp(16px, 5vw, 20px); } .kt-actions { gap: 2px; } .kt-act { padding: 0 6px; min-width: 40px; } /* Mobil: sök, konto (porträtt) och meny. Lägg upp annons ligger överst i menyn. */ .kt-actions .kt-cta { display: none; } .kt-actions > .kt-act:not(.kt-menu-btn):not(.kt-act--search):not(.kt-act--account) { display: none; } } .kt-act--account .k-avatar { width: 28px; height: 28px; } /* Kontomeny: porträttet fäller ut samma val som Mitt konto. Dator och surfplatta: en ruta under knappen. Mobil: hela bredden under sidhuvudet. */ .kt-acc { position: relative; display: flex; } .kt-acc-chev { width: 14px; height: 14px; margin-left: -2px; transition: transform .2s var(--k-ease); } .kt-acc.is-open .kt-acc-chev { transform: rotate(180deg); } @media (max-width: 1100px) { .kt-acc .kt-acc-chev { display: none; } } .kt-acc-menu { position: absolute; z-index: 120; top: calc(100% + 12px); right: 0; width: 300px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; background: var(--k-bg); border: 1px solid var(--k-ink); border-radius: var(--k-radius); color: var(--k-ink); text-align: left; } .kt-acc-menu[hidden] { display: none; } .kt-acc-in { display: grid; padding: 14px; gap: 10px; } .kt-acc-user { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 2px 0 14px; border-bottom: 1px solid var(--k-line); color: inherit; text-decoration: none; } .kt-acc-user .k-avatar { flex: none; width: 40px; height: 40px; } .kt-acc-user > span { display: grid; min-width: 0; line-height: 1.35; } .kt-acc-user strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kt-acc-user small { font-size: 13px; color: var(--k-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kt-acc-list { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; } .kt-acc-list a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: var(--k-radius); color: var(--k-ink-2); font-size: 15px; font-weight: 500; text-decoration: none; } .kt-acc-list a.is-active { background: var(--k-ink); color: #fff; } .kt-acc-list em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 600; opacity: .75; } .kt-acc-cta { margin-top: 4px; } .kt-acc-logout { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; color: var(--k-muted); font-size: 14px; text-decoration: none; } @media (hover: hover) { .kt-acc-list a:not(.is-active):hover, .kt-acc-user:hover strong { color: var(--k-ink); text-decoration: underline; text-underline-offset: 4px; } .kt-acc-logout:hover { color: var(--k-ink); } } :where(html:not(.k-ptr)) .kt-acc-menu a:focus-visible { outline: 2px solid var(--k-ink); outline-offset: -2px; } :where(html:not(.k-ptr)) .kt-acc-list a.is-active:focus-visible { outline-color: #fff; outline-offset: -4px; } .kt-head-inverse .kt-acc-menu { color: var(--k-ink); } @media (max-width: 600px) { /* Mobil: hela bredden direkt under sidhuvudet, sidan bakom tonas ner. */ .kt-acc { position: static; } .kt-acc-menu { top: 100%; left: 0; right: 0; width: auto; max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); border-width: 1px 0; border-radius: 0; box-shadow: 0 0 0 100vmax rgba(10, 10, 10, .4); clip-path: inset(0 0 -100vmax 0); } .kt-acc-in { padding: 14px var(--k-pad) 18px; } .kt-acc-list a { min-height: 46px; font-size: 16px; } /* Bara html: overflow på body klipper menyn på korta sidor (t.ex. beskedet för spärrade konton). */ html.kt-acc-open { overflow: hidden; } } /* Sökruta under sidhuvudet på mobil (öppnas med sökikonen). */ .kt-msearch { border-top: 1px solid var(--k-line); background: var(--k-bg); } .kt-msearch form { display: flex; gap: 0; padding-block: 10px; } .kt-msearch input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--k-ink); border-right: 0; border-radius: var(--k-radius) 0 0 var(--k-radius); background: #fff; font: 400 16px var(--k-font); color: var(--k-ink); -webkit-appearance: none; appearance: none; } .kt-msearch input:focus { outline: none; } .kt-msearch .k-btn { min-height: 44px; width: 52px; padding: 0; border-radius: 0 var(--k-radius) var(--k-radius) 0; } @media (min-width: 901px) { .kt-msearch { display: none !important; } } /* Mörkt sidhuvud eller sidhuvud i accentfärg */ .kt-head-inverse .kt-header { background: var(--kt-head-bg); border-bottom-color: transparent; color: var(--kt-head-ink); backdrop-filter: none; } .kt-head-inverse .kt-brand a, .kt-head-inverse .kt-wordmark, .kt-head-inverse .kt-act, .kt-head-inverse .kt-catbar a, .kt-head-inverse .kt-catbar a.is-active { color: var(--kt-head-ink); } @media (hover: hover) { .kt-head-inverse .kt-catbar a:hover { color: var(--kt-head-ink); } } .kt-head-inverse .kt-wordmark::after { color: currentColor; opacity: .55; } .kt-head-inverse .kt-catbar a.is-active::after { background: currentColor; } @media (hover: hover) { .kt-head-inverse .kt-act:hover { color: var(--kt-head-ink); opacity: .75; } } .kt-head-inverse .kt-catbar { border-top-color: color-mix(in srgb, var(--kt-head-ink) 14%, transparent); } .kt-head-inverse .kt-search .k-icon { color: currentColor; opacity: .7; } .kt-head-inverse .kt-search input { background: color-mix(in srgb, var(--kt-head-ink) 10%, transparent); border-color: color-mix(in srgb, var(--kt-head-ink) 18%, transparent); color: var(--kt-head-ink); } .kt-head-inverse .kt-search input::placeholder { color: currentColor; opacity: .7; } .kt-head-inverse .kt-search input:focus { background: #fff; color: var(--k-ink); border-color: #fff; } .kt-head-inverse .kt-cta { --b-bg: var(--kt-head-ink); --b-fg: var(--kt-head-bg); --b-bd: var(--kt-head-ink); } @media (hover: hover) { .kt-head-inverse .kt-cta:hover { --b-bg: color-mix(in srgb, var(--kt-head-ink) 88%, var(--kt-head-bg)); --b-bd: transparent; } } .kt-catbar { border-top: 1px solid var(--k-line); } .kt-catbar ul { position: relative; list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 92%, transparent); mask-image: linear-gradient(to right, #000 92%, transparent); } .kt-catbar ul::-webkit-scrollbar { display: none; } .kt-catbar li { flex: none; } .kt-catbar a { position: relative; display: block; padding: 12px 12px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--k-ink-2); white-space: nowrap; } @media (hover: hover) { .kt-catbar a:hover { color: var(--k-ink); } } .kt-catbar a.is-active, .kt-catbar .current-menu-item > a { color: var(--k-ink); font-weight: 700; } .kt-catbar a.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--k-accent); } .kt-catbar li:first-child a { padding-left: 0; } .kt-catbar li:first-child a.is-active::after { left: 0; } @media (max-width: 900px) { .kt-catbar { display: none; } } .kt-drawer { position: fixed; inset: 0; z-index: 1001; background: rgba(10, 10, 10, 0); transition: background .25s; } .kt-drawer.is-open { background: rgba(10, 10, 10, .45); } .kt-drawer-panel { position: absolute; inset: 0 0 0 auto; width: min(380px, 88vw); background: #fff; padding: 16px 20px 32px; overflow-y: auto; transform: translateX(100%); transition: transform .3s var(--k-ease); display: grid; gap: 14px; align-content: start; } .kt-drawer.is-open .kt-drawer-panel { transform: none; } .kt-drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--k-line); } .kt-drawer-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .kt-drawer-auth .k-btn { min-width: 0; padding-inline: 10px; } .kt-drawer-label { margin: 12px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--k-muted); } .kt-drawer-list { list-style: none; margin: 0; padding: 0; } .kt-drawer-list a { display: flex; align-items: center; gap: 14px; padding: 12px 0; text-decoration: none; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--k-line); } /* ---------- Startsida ---------- */ .kt-hero { position: relative; background: var(--k-soft); border-bottom: 1px solid var(--k-line); } .kt-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--k-line) 1px, transparent 1px), linear-gradient(90deg, var(--k-line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 75%); opacity: .7; pointer-events: none; } .kt-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--k-focus, 50% 50%); } .kt-hero.has-image::before { background: linear-gradient(to bottom, rgba(10, 10, 10, var(--k-dim-a, .3)), rgba(10, 10, 10, var(--k-dim-b, .62))); -webkit-mask-image: none; mask-image: none; opacity: 1; z-index: 1; } .kt-hero-inner { position: relative; z-index: 2; padding-block: clamp(48px, 8vw, 112px) clamp(48px, 7vw, 96px); } .kt-hero h1 { max-width: 18ch; margin: 0; font-family: var(--k-font-head); font-size: calc(clamp(32px, 5vw, 60px) * var(--k-head-scale, 1)); line-height: 1.1; letter-spacing: calc(-.015em + var(--k-head-track, 0em)); font-weight: var(--k-head-weight, 700); } .kt-hero-text { max-width: 54ch; margin: 16px 0 28px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: var(--k-ink-2); } .kt-hero.has-image h1, .kt-hero.has-image .kt-hero-text, .kt-hero.has-image .kt-hero-count { color: #fff; } /* "X aktiva annonser just nu" (kan döljas i Anpassa → Startsida): minimalistiskt precis ovanför sökrutan, utan bakgrund – bara den gröna pricken (3.11). */ .kt-hero-count { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 600; line-height: 1.4; } .kt-hero h1 + .kt-hero-count, .kt-hero h1 + .k-hero-search { margin-top: 28px; } .kt-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); animation: kt-pulse 2s infinite; } @keyframes kt-pulse { 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } } @media (prefers-reduced-motion: reduce) { .kt-dot { animation: none; } } .kt-hero .k-hero-search { max-width: 1040px; } .kt-section { padding-block: 40px; } /* 3.11: Sonny – 40 px blev bra. */ .kt-section--soft { background: var(--k-soft); } /* Två sektioner med samma bakgrund delar luften mellan sig; byts bakgrunden får båda sin egen luft. (Regeln för vit efter grå måste vara minst lika specifik som vit efter vit – annars klistrades rubriken mot den grå kanten.) */ .kt-section + .kt-section:not(.kt-section--soft), .kt-section--soft + .kt-section--soft { padding-top: 0; } .kt-section--soft + .kt-section:not(.kt-section--soft) { padding-top: 40px; } .kt-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 28px; } /* 3.18.1: rubriken trimmas till versaltopp och baslinje – 40 px luft i bläck över rubriken, som under sektionens innehåll (förut 47/40 i dator), och 28 px från rubriken till innehållet. */ @supports (text-box: trim-both cap alphabetic) { .kt-section-head h2 { text-box: trim-both cap alphabetic; } } @supports not (text-box: trim-both cap alphabetic) { .kt-section-head h2 { margin-block: calc((1cap - 1lh) / 2) !important; } } .kt-section-head h2 { margin: 0; font-family: var(--k-font-head); font-size: calc(clamp(22px, 2.6vw, 32px) * var(--k-head-scale, 1)); letter-spacing: calc(-.01em + var(--k-head-track, 0em)); line-height: 1.15; font-weight: var(--k-head-weight, 700); } /* Pilarna (40 px) står överst i rubrikraden och tar ingen höjd; rubriken flyttas ner så att versalerna står mitt för pilarna. Det översta synliga i sektionen (pilarna) har då 40 px luft, som innehållet nederst (3.18.1). Gäller även när pilarna är dolda, så att rubriken inte hoppar när de visas. */ .kt-section-head > .kt-rail-nav { align-self: flex-start; margin-block: 0 -40px; } @supports (text-box: trim-both cap alphabetic) { .kt-section-head:has(> .kt-rail-nav) > h2 { margin-top: calc((40px - 1cap) / 2); } } @supports not (text-box: trim-both cap alphabetic) { .kt-section-head:has(> .kt-rail-nav) > h2 { margin-top: calc((40px - 1lh) / 2) !important; } } /* Utvalda annonser i en rad som rullar i sidled: samma kortbredd och mellanrum som rutnätet (2 / 3 / 4 kort), knapparna i rubrikraden visas bara när det finns fler än som syns. */ .kt-rail { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--kt-gap) * (var(--kt-cols) - 1)) / var(--kt-cols)); --kt-gap: clamp(12px, 1.6vw, 20px); --kt-cols: 2; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; outline: none; } .kt-rail::-webkit-scrollbar { display: none; } .kt-rail > * { scroll-snap-align: start; } @media (min-width: 768px) { .kt-rail { --kt-cols: 3; } } @media (min-width: 1200px) { .kt-rail { --kt-cols: 4; } } :where(html:not(.k-ptr)) .kt-rail:focus-visible { outline: 2px solid var(--k-ink); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .kt-rail { scroll-behavior: auto; } } .kt-rail-nav { display: flex; gap: 8px; } .kt-rail-nav[hidden] { display: flex; visibility: hidden; } /* Behåller platsen: inget hopp när pilarna visas. */ .kt-rail-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: var(--k-bg); border: 1px solid var(--k-ink); border-radius: var(--k-radius); color: var(--k-ink); cursor: pointer; } .kt-rail-btn:disabled { border-color: var(--k-line-2); color: var(--k-faint); cursor: default; } @media (hover: hover) { .kt-rail-btn:not(:disabled):hover { background: var(--k-ink); color: #fff; } } :where(html:not(.k-ptr)) .kt-rail-btn:focus-visible { box-shadow: var(--k-focus); } .kt-section-head a { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1; padding-block: 8px; margin-block: -8px; text-decoration: none; white-space: nowrap; } /* Länken gör inte rubrikraden högre (mobil: 27 → 25,3 px, samma som utan länk); tryckytan är kvar. */ @media (hover: hover) { .kt-section-head a:hover { text-decoration: underline; } } .kt-cta-band { background: var(--k-ink); color: #fff; } .kt-cta-inner { display: grid; gap: 28px; padding-block: clamp(48px, 6vw, 80px); align-items: center; } @media (min-width: 960px) { .kt-cta-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 48px; } } .kt-cta-band h2 { margin: 0 0 10px; font-family: var(--k-font-head); font-size: calc(clamp(24px, 3vw, 38px) * var(--k-head-scale, 1)); letter-spacing: calc(-.01em + var(--k-head-track, 0em)); line-height: 1.12; font-weight: var(--k-head-weight, 700); } .kt-cta-band p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.6; max-width: 48ch; } .kt-usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; } .kt-usps li { display: flex; gap: 10px; align-items: center; } .kt-usps .k-icon { color: var(--k-accent); flex: none; } .kt-cta-band .kt-usps .k-icon { color: #fff; background: var(--k-accent); padding: 3px; width: 22px; height: 22px; border-radius: var(--k-radius); } /* 3.18.1: texten trimmas till versaltopp och baslinje – lika mycket luft över rubriken som under knappen i mobil, och textblocket står mitt för knappen och listan på dator. */ @supports (text-box: trim-both cap alphabetic) { .kt-cta-inner > div > :first-child { text-box: trim-start cap alphabetic; } .kt-cta-inner > div > :last-child { text-box: trim-end cap alphabetic; } } @supports not (text-box: trim-both cap alphabetic) { .kt-cta-inner > div > :first-child { margin-top: calc((1cap - 1lh) / 2); } .kt-cta-inner > div > :last-child { margin-bottom: calc((1cap - 1lh) / 2); } } .kt-cta-btn { --b-bg: #fff; --b-fg: #0a0a0a; --b-bd: #fff; justify-self: start; } @media (hover: hover) { .kt-cta-btn:hover { --b-bg: var(--k-btn); --b-fg: var(--k-btn-ink); --b-bd: var(--k-btn); } } /* 3.19: säljrutan (Sonny: modernare än ett svart band) – en ljus ruta i sidans bredd. Text och knapp till vänster, punkterna bredvid och, när symbolen är på, en svart kvadrat med equalizer som går kant i kant till höger. Det mörka bandet finns kvar som val i Anpassa → Startsida. */ .kt-sell-box { display: grid; background: var(--k-soft); border-radius: var(--k-radius); overflow: hidden; } .kt-sell-body { display: grid; gap: 28px; padding: 28px 20px; align-content: center; } .kt-sell-text h2 { margin: 0 0 10px; font-family: var(--k-font-head); font-size: calc(clamp(24px, 3vw, 36px) * var(--k-head-scale, 1)); letter-spacing: calc(-.01em + var(--k-head-track, 0em)); line-height: 1.12; font-weight: var(--k-head-weight, 700); } .kt-sell-text p { margin: 0; color: var(--k-ink-2); font-size: 16px; line-height: 1.6; max-width: 48ch; } .kt-sell .kt-usps .k-icon { color: #fff; background: var(--k-accent); padding: 3px; width: 22px; height: 22px; border-radius: var(--k-radius); } .kt-sell-btn { justify-self: stretch; } @supports (text-box: trim-both cap alphabetic) { .kt-sell-text > :first-child { text-box: trim-start cap alphabetic; } .kt-sell-text > :last-child { text-box: trim-end cap alphabetic; } } @supports not (text-box: trim-both cap alphabetic) { .kt-sell-text > :first-child { margin-top: calc((1cap - 1lh) / 2); } .kt-sell-text > :last-child { margin-bottom: calc((1cap - 1lh) / 2); } } .kt-sell-art { order: -1; justify-self: start; width: 56px; height: 56px; margin: 28px 20px 0; } .kt-sell-box.has-art .kt-sell-body { padding-top: 24px; } @media (min-width: 640px) { .kt-sell-body { padding: 40px; } .kt-sell-btn { justify-self: start; } .kt-sell-art { margin: 40px 40px 0; } } @media (min-width: 768px) { .kt-sell-box { min-height: 240px; } .kt-sell-box.has-art { grid-template-columns: minmax(0, 1fr) 240px; } .kt-sell-box.has-art .kt-sell-body { padding-top: 40px; } .kt-sell-art { order: 0; justify-self: stretch; align-self: stretch; width: auto; height: auto; margin: 0; border-radius: 0; --eq-bar: 12px; --eq-gap: 8px; --eq-h: 80px; } } @media (min-width: 1200px) { .kt-sell-box { min-height: 280px; } .kt-sell-box.has-art { grid-template-columns: minmax(0, 1fr) 280px; } .kt-sell-body, .kt-sell-box.has-art .kt-sell-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "text usps" "btn usps"; column-gap: 48px; padding: 48px; } .kt-sell-text { grid-area: text; align-self: end; } .kt-sell-btn { grid-area: btn; align-self: start; } .kt-sell .kt-usps { grid-area: usps; align-self: center; } .kt-sell-art { --eq-bar: 14px; --eq-gap: 10px; --eq-h: 96px; } } /* Equalizern: fem staplar som växer från en gemensam baslinje. Bara transform (ritas av grafikkortet, flyttar ingenting på sidan), hela pixlar så att kanterna är skarpa, och pausad tills den syns (theme.js sätter .is-on). */ .kt-eq { display: grid; place-items: center; background: var(--k-ink); color: #fff; border-radius: var(--k-radius); } .kt-eq-bars { display: flex; align-items: flex-end; gap: var(--eq-gap, 2px); height: var(--eq-h, 24px); } .kt-eq-bars i { display: block; width: var(--eq-bar, 4px); height: 100%; background: currentColor; transform-origin: 50% 100%; transform: scaleY(var(--h, .6)); animation: kt-eq-a var(--d, 1.2s) ease-in-out var(--t, 0s) infinite alternate paused; } .kt-eq-bars i:nth-child(1) { --h: .5; --d: 1.1s; --t: -.3s; } .kt-eq-bars i:nth-child(2) { --h: .85; --d: .9s; --t: -.7s; animation-name: kt-eq-b; } .kt-eq-bars i:nth-child(3) { --h: .6; --d: 1.3s; --t: -.1s; } .kt-eq-bars i:nth-child(4) { --h: 1; --d: 1s; --t: -.5s; animation-name: kt-eq-b; } .kt-eq-bars i:nth-child(5) { --h: .7; --d: 1.4s; --t: -.9s; } .kt-eq.is-on .kt-eq-bars i { animation-play-state: running; } @keyframes kt-eq-a { 0% { transform: scaleY(.32); } 40% { transform: scaleY(.8); } 65% { transform: scaleY(.52); } 100% { transform: scaleY(1); } } @keyframes kt-eq-b { 0% { transform: scaleY(.92); } 30% { transform: scaleY(.44); } 70% { transform: scaleY(.72); } 100% { transform: scaleY(.3); } } @media (prefers-reduced-motion: reduce) { .kt-eq-bars i { animation: none; } } .kt-places { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .kt-places a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--k-line-2); text-decoration: none; font-weight: 600; font-size: 15px; border-radius: var(--k-radius); transition: border-color .15s, background .15s; } @media (hover: hover) { .kt-places a:hover { border-color: var(--k-ink); } } .kt-places em { font-style: normal; font-weight: 500; font-size: 13px; color: var(--k-muted); } /* ---------- Sidor och blogg ---------- */ .kt-narrow, .k-container.kt-narrow { max-width: calc(800px + 2 * var(--k-pad, 20px)); } .kt-page-head h1 { font-family: var(--k-font-head); font-size: calc(clamp(28px, 3.6vw, 44px) * var(--k-head-scale, 1)); letter-spacing: calc(-.01em + var(--k-head-track, 0em)); line-height: 1.12; margin: 0; font-weight: var(--k-head-weight, 700); } .kt-page-lead { max-width: 62ch; margin: 16px 0 0; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--k-ink-2); } .kt-single-page .k-pagehero { margin-bottom: clamp(28px, 4vw, 48px); } .kt-single-page .k-pagehero-inner { max-width: calc(800px + 2 * var(--k-pad, 20px)); } .kt-single-page .k-pagehero + .k-container { padding-top: 0; } .kt-featured { margin: 0 0 32px; } .kt-featured img { width: 100%; height: auto; display: block; } .kt-content { font-size: 16px; line-height: 1.75; color: var(--k-ink-2); overflow-wrap: break-word; } .kt-content > * { margin-block: 0 1.1em; } .kt-content h2, .kt-content h3, .kt-content h4 { font-family: var(--k-font-head); color: var(--k-ink); letter-spacing: calc(-.005em + var(--k-head-track, 0em)); line-height: 1.25; margin-top: 1.8em; margin-bottom: .6em; font-weight: var(--k-head-weight, 700); } .kt-content h2 { font-size: calc(clamp(21px, 2.2vw, 26px) * var(--k-head-scale, 1)); } .kt-content h3 { font-size: calc(18px * var(--k-head-scale, 1)); } .kt-content a { color: var(--k-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--k-accent); text-decoration-thickness: 2px; } .kt-content ul, .kt-content ol { padding-left: 1.3em; } .kt-content li { margin-bottom: .35em; } .kt-content blockquote { margin-inline: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--k-accent); font-size: 1.12em; color: var(--k-ink); } .kt-content img { height: auto; } /* Bilder, film och inbäddningar går aldrig utanför textspalten (3.16, Sonny: en bild i full storlek krockade med högerspalten). Bred och full bredd blir textspaltens bredd – artikeln har en högerspalt bredvid. */ .kt-content :is(img, video, iframe, embed, object, svg) { max-width: 100%; } .kt-content :is(figure, .wp-block-image, .wp-block-embed, .wp-block-video, .wp-block-gallery) { max-width: 100%; } .kt-content :is(.alignwide, .alignfull) { width: auto; max-width: 100%; margin-inline: 0; } .kt-content .wp-block-image img { display: block; } .kt-content figure { margin-inline: 0; } .kt-content figcaption { font-size: 14px; color: var(--k-muted); margin-top: 8px; } .kt-content table { width: 100%; border-collapse: collapse; font-size: 15px; } .kt-content th, .kt-content td { padding: 10px 12px; border-bottom: 1px solid var(--k-line); text-align: left; } .kt-content hr { border: 0; border-top: 1px solid var(--k-line); margin: 2.4em 0; } .kt-content .wp-block-button__link { display: inline-flex; padding: 14px 24px; background: var(--k-btn); color: var(--k-btn-ink); text-decoration: none; font-weight: 600; border-radius: var(--k-radius); } .kt-content .aligncenter { margin-inline: auto; } /* ---------- Textflöde på sidor och i artiklar (3.12) ---------- Avstånden mäts i bläck: från baslinjen eller en rutas kant till nästa versaltopp eller kant. Texten trimmas till versalhöjd och baslinje (text-box), så en rubrik följd av en ruta får exakt samma luft som en rubrik följd av text – Kontakt och Om oss blir likadana (Sonny, 3.12). Reserven (webbläsare utan text-box) gör samma sak med negativa marginaler; versalerna står mitt i raden i Host Grotesk. */ .kt-flow { --kt-gap: 28px; --kt-gap-h2: 56px; --kt-gap-h3: 40px; --kt-gap-after: 16px; } @media (max-width: 639px) { .kt-flow { --kt-gap: 24px; --kt-gap-h2: 44px; --kt-gap-h3: 32px; --kt-gap-after: 14px; } } .k-page :where(.kt-flow, .kt-flow .wp-block-group, .kt-flow .wp-block-group__inner-container, .kt-flow .wp-block-column, .kt-flow blockquote) > * { margin-block: 0 var(--kt-gap); } .k-page :where(.kt-flow, .kt-flow .wp-block-group, .kt-flow .wp-block-group__inner-container, .kt-flow .wp-block-column, .kt-flow blockquote) > :last-child { margin-bottom: 0; } .k-page .kt-flow :is(h2, h3, h4, h5, h6) { margin-bottom: var(--kt-gap-after); line-height: 1.25; } .k-page .kt-flow > h2 { margin-top: var(--kt-gap-h2); } .k-page .kt-flow > :is(h3, h4, h5, h6) { margin-top: var(--kt-gap-h3); } .k-page .kt-flow > :is(h2, h3, h4) + :is(h3, h4, h5, h6), .k-page .kt-flow > :first-child { margin-top: 0; } .k-page .kt-flow > hr { margin-block: var(--kt-gap-h3); } /* Rutor i texten får 28 px luft på alla skärmar (3.18, Sonny): text → ruta och ruta → text. Text → text är 24 i mobil. Gäller även rutor som har egen luft inuti (citatet har --kt-gap 16 för sitt innehåll – förut fick texten efter citatet bara 16 px i dator, 3.18.1). */ .k-page .kt-flow > :is(blockquote, figure, table, details, .wp-block-group, .wp-block-table, .wp-block-image, .wp-block-kock-category-link, .k-catlink, .wp-block-columns, .k-block) { margin-bottom: 28px; } .k-page .kt-flow > :has(+ :is(blockquote, figure, table, details, .wp-block-group, .wp-block-table, .wp-block-image, .wp-block-kock-category-link, .k-catlink, .wp-block-columns, .k-block)) { margin-bottom: 28px; } .k-page .kt-flow > :is(blockquote, figure, table, details, .wp-block-group, .wp-block-table, .wp-block-image, .wp-block-kock-category-link, .k-catlink, .wp-block-columns, .k-block):last-child { margin-bottom: 0; } /* En rytm (3.18.1, Sonny: "avståndet under rubriken är mindre än mellan punkterna"). I textflödet är rubrik → text, rubrik → lista, rubrik → ruta, punkt → punkt och rad → rad samma avstånd: radavståndet, från baslinjen till nästa rads versaltopp (radhöjd minus versalhöjd i flödets text). Radhöjden är oförändrad; stycke → stycke (24/28) och luften före rubriker (44/56 och 32/40) är som förut. Punkterna har ingen extra luft – bocken eller punkten visar var en ny punkt börjar. */ .kt-flow li, .kt-flow li:last-child { margin-bottom: 0; } .kt-flow li > :is(ul, ol) { margin-top: 0; } @supports (width: calc(1lh - 1cap)) { .kt-flow { --kt-line-gap: calc(1lh - 1cap); --kt-gap-after: var(--kt-line-gap); } } .kt-flow figcaption { margin-top: 12px; } @supports (text-box: trim-both cap alphabetic) { .k-page :is(.kt-flow, .kt-flow .wp-block-group, .kt-flow .wp-block-group__inner-container, .kt-flow .wp-block-column, .kt-flow blockquote) > :is(p, h2, h3, h4, h5, h6, ul, ol, dl), .k-page .kt-flow figcaption { text-box: trim-both cap alphabetic; } /* Listor (3.18): trimma första och sista punkten direkt. Trimningen från listan når inte in i punkterna i alla webbläsare (Sonnys Chrome i mobilen gav 21 px i stället för 14 under en rubrik). */ .k-page :is(.kt-flow, .kt-flow .wp-block-group, .kt-flow .wp-block-group__inner-container, .kt-flow .wp-block-column, .kt-flow blockquote) > :is(ul, ol) { text-box: none; } .k-page :is(.kt-flow, .kt-flow .wp-block-group, .kt-flow .wp-block-group__inner-container, .kt-flow .wp-block-column, .kt-flow blockquote) > :is(ul, ol) > li:first-child { text-box: trim-start cap alphabetic; } .k-page :is(.kt-flow, .kt-flow .wp-block-group, .kt-flow .wp-block-group__inner-container, .kt-flow .wp-block-column, .kt-flow blockquote) > :is(ul, ol) > li:last-child { text-box: trim-end cap alphabetic; } .k-page :is(.kt-flow, .kt-flow .wp-block-group, .kt-flow .wp-block-group__inner-container, .kt-flow .wp-block-column, .kt-flow blockquote) > :is(ul, ol) > li:only-child { text-box: trim-both cap alphabetic; } .kt-page-head > :last-child { text-box: trim-end cap alphabetic; } } @supports not (text-box: trim-both cap alphabetic) { .k-page :is(.kt-flow, .kt-flow .wp-block-group, .kt-flow .wp-block-group__inner-container, .kt-flow .wp-block-column, .kt-flow blockquote) > :is(p, h2, h3, h4, h5, h6, ul, ol, dl)::before, .k-page .kt-flow figcaption::before { content: ""; display: table; margin-bottom: calc((1cap - 1lh) / 2); } .k-page :is(.kt-flow, .kt-flow .wp-block-group, .kt-flow .wp-block-group__inner-container, .kt-flow .wp-block-column, .kt-flow blockquote) > :is(p, h2, h3, h4, h5, h6, ul, ol, dl)::after, .k-page .kt-flow figcaption::after, .kt-page-head > :last-child::after { content: ""; display: table; margin-top: calc((1cap - 1lh) / 2); } } /* 3.19: Om oss (Sonny: piggare) – rutor bredvid varandra, numrerade steg och symbolen i sidhuvudet. Blockbibliotekets CSS laddas inte, så kolumnerna får sitt rutnät här: lika höga rutor, en kolumn i mobil. */ .kt-content .wp-block-columns { display: grid; gap: 28px; } @media (min-width: 720px) { .kt-content .wp-block-columns { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } } .kt-content .wp-block-column { min-width: 0; } .kt-content .wp-block-column > .wp-block-group:only-child { height: 100%; } /* Steg: siffran i en svart ruta (24 px) mitt för första raden. Listan står utanför textens trimning – rutan är högre än versalerna, så listans kant är rutans kant: 24 px luft i en ruta både över ettan och under sista steget. */ .kt-content ol.is-style-apt-steps { list-style: none; padding-left: 0; display: grid; gap: 12px; counter-reset: kt-step; } .kt-content ol.is-style-apt-steps > li { position: relative; min-height: 24px; padding-left: 36px; line-height: 24px; counter-increment: kt-step; } .kt-content ol.is-style-apt-steps > li::before { content: counter(kt-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; background: var(--k-ink); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; border-radius: var(--k-radius); } .k-page .kt-flow ol.is-style-apt-steps.is-style-apt-steps > li:is(:first-child, :only-child) { text-box: none; } @supports (text-box: trim-both cap alphabetic) { .k-page .kt-flow ol.is-style-apt-steps.is-style-apt-steps > li:last-child { text-box: trim-end cap alphabetic; } } .k-page .kt-flow ol.is-style-apt-steps.is-style-apt-steps::before, .k-page .kt-flow ol.is-style-apt-steps.is-style-apt-steps::after { content: none; } /* Rubrik → rutnät är samma avstånd som rubrik → text och rubrik → företagsrutan (3.12): radavståndet. */ .k-page .kt-flow > :is(h2, h3, h4, h5, h6):has(+ :is(.wp-block-columns, .k-block)) { margin-bottom: var(--kt-gap-after); } /* Kärnans rutnät (siffror, kategorier) behåller sina egna mått inne i texten: inget listindrag, kanterna delas. */ .k-page .kt-flow .k-block :is(.k-facts, .k-cats) { padding-left: 0; } .k-page .kt-flow .k-block :is(.k-facts, .k-cats) > li { margin: 0 -1px -1px 0; } .kt-content :is(a.k-btn, a.k-cat) { text-decoration: none; } .kt-content a.k-btn { color: var(--b-fg); font-weight: 600; } .kt-page-eq { width: 56px; height: 56px; margin-bottom: 24px; } /* Sidhuvudet: ingressen (eller rubriken) slutar på baslinjen – lika långt till texten på alla sidor. */ .kt-page-head { margin-bottom: 48px; } @media (max-width: 639px) { .kt-page-head { margin-bottom: 32px; } } .kt-page-lead { margin-top: 16px; } /* Rutor i texten (Inlägg → block → Stil): Ruta, Tonad ruta och Bockar. */ .kt-content .wp-block-group.is-style-apt-box, .kt-content .wp-block-group.is-style-apt-soft { padding: 24px; border-radius: var(--k-radius); } .kt-content .wp-block-group.is-style-apt-box { border: 1px solid var(--k-line); } .kt-content .wp-block-group.is-style-apt-soft { background: var(--k-soft); } .kt-content .wp-block-group.is-style-apt-box > :is(h2, h3, h4):first-child, .kt-content .wp-block-group.is-style-apt-soft > :is(h2, h3, h4):first-child, .kt-content .wp-block-group.is-style-apt-box .wp-block-group__inner-container > :is(h2, h3, h4):first-child, .kt-content .wp-block-group.is-style-apt-soft .wp-block-group__inner-container > :is(h2, h3, h4):first-child { margin-top: 0; } /* Bockar (3.16, Sonnys förebild): en vanlig lista med en enkel bock i stället för punkten – inga rutor eller bakgrund, samma luft mellan punkterna som mellan raderna (3.18.1), lite indragen. Bocken står mitt för versalerna (radens mitt ligger 1 px under versalernas mitt). */ .kt-content ul.is-style-apt-check { list-style: none; padding-left: 24px; } .kt-content ul.is-style-apt-check > li { position: relative; padding-left: 30px; margin-bottom: 0; } .kt-content ul.is-style-apt-check > li::before { content: ""; position: absolute; left: 0; top: calc(.5lh - 9px); width: 16px; height: 16px; background: var(--k-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; } @supports (text-box: trim-both cap alphabetic) { /* Listans första rad är trimmad till versaltopp (textflödet): flytta upp bocken lika mycket. */ .k-page :is(.kt-flow, .kt-article-body .kt-content) > ul.is-style-apt-check > li:first-child::before { top: calc(.5cap - 8px); } } /* Tabeller: raka linjer mellan raderna, inga rutnät (WordPress standard har ramar runt varje cell). */ .kt-content .wp-block-table table { border-collapse: collapse; width: 100%; } .kt-content .wp-block-table :is(th, td) { border: 0; border-bottom: 1px solid var(--k-line); padding: 12px 16px 12px 0; text-align: left; vertical-align: top; } .kt-content .wp-block-table thead { border: 0; } .kt-content .wp-block-table thead th { border-bottom: 1px solid var(--k-ink); font-weight: 600; color: var(--k-ink); } .kt-content .wp-block-table :is(th, td):last-child { padding-right: 0; } .kt-content .wp-block-table figcaption { text-align: left; } .kt-content .wp-block-details { border-top: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); padding-block: 16px; } .kt-content .wp-block-details + .wp-block-details { margin-top: -29px; } /* Frågor i rad delar linje: rutans 28 px luft minus 1 px (3.18.1: följer rutornas 28 px även i mobil). */ .kt-content .wp-block-details summary { cursor: pointer; font-weight: 600; color: var(--k-ink); } /* ---------- Nyheter: listan ---------- */ .kt-topics { margin-bottom: 32px; } .kt-posts { display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: minmax(0, 1fr); } /* 1 kolumn i mobil, 2 på surfplatta och 3 på dator. Tre kort (startsidan, Läs också) är alltid en hel rad: 1 eller 3. */ @media (min-width: 640px) { .kt-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kt-posts.kt-posts--3 { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 768px) { .kt-posts.kt-posts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .kt-posts:not(.kt-posts--2) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Mobil: artikelraderna (startsidan, kategorisidorna, Läs också) bläddras i sidled i stället för att staplas. Nästa kort sticker fram i kanten, så att man ser att det finns fler. */ @media (max-width: 767px) { .kt-posts.kt-posts--3 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--k-pad); margin: -4px calc(-1 * var(--k-pad)); padding: 4px var(--k-pad); scrollbar-width: none; } .kt-posts.kt-posts--3 > * { scroll-snap-align: start; } .kt-posts.kt-posts--3::-webkit-scrollbar { display: none; } } @media (max-width: 639px) { .kt-posts.kt-posts--2 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--k-pad); margin: -4px calc(-1 * var(--k-pad)); padding: 4px var(--k-pad); scrollbar-width: none; } .kt-posts.kt-posts--2 > * { scroll-snap-align: start; } .kt-posts.kt-posts--2::-webkit-scrollbar { display: none; } } .kt-post { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--k-bg); border: 1px solid var(--k-line); border-radius: var(--k-radius); transition: border-color .15s var(--k-ease); } /* Bildytan är minst 3:2 och kan växa (bredvid eller under texten). Bilden ligger absolut och fyller alltid hela ytan – inga grå kanter. (.kt-post före: kärnans .k-page img { height: auto } laddas efter temat och vann förut – det var de grå kanterna.) */ .kt-post-media { position: relative; overflow: hidden; background: var(--k-soft); border-radius: var(--k-radius) var(--k-radius) 0 0; } .kt-post-media::before { content: ""; display: block; padding-top: 66.667%; } .kt-post .kt-post-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .5s var(--k-ease); } /* Utan bild: en färgad ruta med ämnet, aldrig en tom grå yta. */ .kt-post-noimg { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--k-accent); color: var(--k-accent-ink); text-align: center; } .kt-post-noimg > span { font-family: var(--k-font-head); font-size: calc(clamp(22px, 2.4vw, 30px) * var(--k-head-scale, 1)); font-weight: var(--k-head-weight, 700); letter-spacing: calc(-.01em + var(--k-head-track, 0em)); line-height: 1.1; } @media (hover: hover) { .kt-post:hover { border-color: var(--k-ink); } .kt-post:hover .kt-post-media img { transform: scale(1.03); } .kt-post:hover .kt-post-title a { text-decoration: underline; text-decoration-thickness: 1px; } .kt-post:hover .kt-post-more { background: var(--k-ink); border-color: var(--k-ink); color: #fff; } } @media (prefers-reduced-motion: reduce) { .kt-post-media img { transition: none; } } .kt-post-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 20px; } .kt-post .kt-post-body > * { margin: 0; } .kt-post-topic { margin-bottom: 12px !important; } .kt-sep { margin-inline: 1px; } .kt-post .kt-post-title { font-family: var(--k-font-head); font-size: calc(20px * var(--k-head-scale, 1)); line-height: 1.25; letter-spacing: calc(-.005em + var(--k-head-track, 0em)); font-weight: var(--k-head-weight, 700); } .kt-post-title a { color: inherit; text-decoration: none; text-underline-offset: 3px; } .kt-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* Hela kortet är klickbart. */ :where(html:not(.k-ptr)) .kt-post:has(.kt-post-title a:focus-visible) { outline: 2px solid var(--k-ink); outline-offset: 2px; } :where(html:not(.k-ptr)) .kt-post-title a:focus-visible { outline: none; } .kt-post-lead { --kt-lead-gap: 12px; margin: calc(var(--kt-lead-gap) + (1cap - 1lh) / 2) 0 calc((1cap - 1lh) / 2) !important; font-size: 15px; line-height: 1.55; color: var(--k-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Ingressen kortas till tre rader: den trimmas med marginaler (inte text-box + utfyllnad), annars syns toppen av rad fyra. */ .kt-post-meta { margin-top: auto !important; padding-top: 20px; font-size: 13px; line-height: 1.6; color: var(--k-muted); } .kt-post-meta > * { white-space: nowrap; } .kt-post-meta > * + *::before { content: "·"; margin: 0 8px; } /* Signatur: skribentens bild + namn, datum och lästid på en rad. */ .kt-post .kt-post-byline { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; } .kt-post .kt-post-byline .kt-post-meta { margin: 0 !important; padding: 0; } .kt-post-byline .kt-post-meta > :first-child { color: var(--k-ink); font-weight: 600; } .kt-avatar { flex: none; } .kt-post-more { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-top: 28px !important; padding: 12px 18px; border: 1px solid var(--k-ink); border-radius: var(--k-radius); font-size: 15px; font-weight: 600; line-height: 1; color: var(--k-ink); transition: background-color .15s var(--k-ease), color .15s var(--k-ease); } @supports (text-box: trim-both cap alphabetic) { .kt-post-body > :is(.kt-post-topic, .kt-post-title, .kt-post-meta), .kt-post-byline .kt-post-meta { text-box: trim-both cap alphabetic; } } @supports not (text-box: trim-both cap alphabetic) { .kt-post-body > :is(.kt-post-topic, .kt-post-title, .kt-post-meta)::before, .kt-post-byline .kt-post-meta::before { content: ""; display: table; margin-bottom: calc((1cap - 1lh) / 2); } .kt-post-body > :is(.kt-post-topic, .kt-post-title, .kt-post-meta)::after, .kt-post-byline .kt-post-meta::after { content: ""; display: table; margin-top: calc((1cap - 1lh) / 2); } } /* Stora kort: större rubrik och ingress. */ .kt-post.kt-post--featured .kt-post-title { font-size: calc(clamp(24px, 2.6vw, 34px) * var(--k-head-scale, 1)); line-height: 1.15; letter-spacing: calc(-.01em + var(--k-head-track, 0em)); } .kt-post--featured .kt-post-lead { --kt-lead-gap: 16px; font-size: 16px; } .kt-post--featured .kt-post-topic { margin-bottom: 16px !important; } /* Ensam artikel i en sektion (wide): bild och text 50/50 från 900 px. Bilden fyller hela höjden. */ @media (min-width: 900px) { .kt-post--wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .kt-post--wide .kt-post-media { border-radius: var(--k-radius) 0 0 var(--k-radius); } .kt-post--wide .kt-post-body { justify-content: center; padding: clamp(32px, 3.4vw, 48px); } .kt-post--wide .kt-post-lead { --kt-lead-gap: 20px; font-size: 17px; -webkit-line-clamp: 4; } .kt-post--wide :is(.kt-post-byline, .kt-post-body > .kt-post-meta) { margin-top: 28px !important; padding-top: 0; } } @media (max-width: 899px) { .kt-post--wide .kt-post-more { display: none; } } /* Senaste artikeln (hero): texten på bilden från 640 px, ett vanligt kort i mobil. */ /* Stora artikeln utan bild: en ljus ruta med mörk text (aldrig en svart eller grå bildyta). */ .kt-post--hero.kt-post--noimg .kt-post-media { display: none; } @media (max-width: 639px) { .kt-post--hero .kt-post-more { display: none; } } @media (min-width: 640px) { .kt-post--hero { display: grid; grid-template: minmax(clamp(400px, 46vw, 540px), auto) / minmax(0, 1fr); overflow: hidden; border: 0; background: var(--k-ink); } .kt-post--hero > * { grid-area: 1 / 1; } .kt-post--hero .kt-post-media { border-radius: 0; } .kt-post--hero .kt-post-media::before { padding-top: 0; } .kt-post--hero .kt-post-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .56) 34%, rgb(0 0 0 / .12) 64%, rgb(0 0 0 / 0) 82%); } .kt-post--hero .kt-post-body { z-index: 1; justify-content: flex-end; padding: clamp(28px, 3.6vw, 48px); color: #fff; } .kt-post--hero .kt-post-body > * { max-width: 46rem; } .kt-post--hero .kt-post-topic { color: rgb(255 255 255 / .82); } .kt-post.kt-post--hero .kt-post-title { font-size: calc(clamp(28px, 3.4vw, 44px) * var(--k-head-scale, 1)); line-height: 1.1; color: #fff; } .kt-post--hero .kt-post-lead { --kt-lead-gap: 20px; font-size: 17px; color: rgb(255 255 255 / .86); } .kt-post--hero :is(.kt-post-byline, .kt-post-body > .kt-post-meta) { margin-top: 28px !important; padding-top: 0; } .kt-post--hero .kt-post-meta { color: rgb(255 255 255 / .78); } .kt-post--hero .kt-post-byline .kt-post-meta > :first-child { color: #fff; } .kt-post--hero .kt-avatar { box-shadow: 0 0 0 2px rgb(255 255 255 / .9); } .kt-post--hero .kt-post-more { border-color: #fff; background: #fff; color: var(--k-ink); } } @media (min-width: 640px) { .kt-post--hero.kt-post--noimg { background: var(--k-soft); } .kt-post--hero.kt-post--noimg .kt-post-body { color: var(--k-ink); } .kt-post.kt-post--hero.kt-post--noimg .kt-post-title { color: var(--k-ink); } .kt-post--hero.kt-post--noimg :is(.kt-post-topic, .kt-post-meta) { color: var(--k-muted); } .kt-post--hero.kt-post--noimg .kt-post-lead { color: var(--k-ink-2); } .kt-post--hero.kt-post--noimg .kt-post-byline .kt-post-meta > :first-child { color: var(--k-ink); } .kt-post--hero.kt-post--noimg .kt-avatar { box-shadow: none; } .kt-post--hero.kt-post--noimg .kt-post-more { border-color: var(--k-ink); background: var(--k-ink); color: #fff; } } @media (min-width: 640px) and (hover: hover) { .kt-post--hero:hover .kt-post-title a { text-decoration-thickness: 2px; } .kt-post.kt-post--hero:hover .kt-post-more { background: transparent; border-color: #fff; color: #fff; } .kt-post.kt-post--hero.kt-post--noimg:hover .kt-post-more { border-color: var(--k-ink); background: transparent; color: var(--k-ink); } } /* Nyhetssidan: ett rutnät för stora artikeln, korten, sidnumreringen och Mest lästa. Dator (1024+): stora artikeln över två kolumner och Mest lästa i den tredje – samma kanter som korten. Mobil och surfplatta: Mest lästa efter artiklarna. */ .kt-news-main { --kt-ng: clamp(12px, 1.6vw, 20px); display: grid; gap: var(--kt-ng); grid-template-columns: minmax(0, 1fr); } .kt-news-main > :is(.kt-posts, .k-pagination) { grid-column: 1 / -1; } .kt-news-main > .k-pagination { margin-top: calc(40px - var(--kt-ng)); } .kt-news-main > .kt-mostread { margin-top: calc(clamp(40px, 5vw, 56px) - var(--kt-ng)); } @media (min-width: 1024px) { .kt-news-main.has-mostread { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kt-news-main.has-mostread > .kt-post--hero { grid-column: 1 / span 2; } .kt-news-main > .kt-mostread { grid-column: 3; grid-row: 1; margin-top: 0; } } /* Mest lästa: rader med fast luft; i rutan bredvid stora artikeln får varje rad växa lite (högst 116 px), så att fem rader fyller ut och tre inte blir glesa. */ .kt-mostread { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--k-line); border-radius: var(--k-radius); } .kt-mostread ol { display: flex; flex: 1; flex-direction: column; margin: 0; padding: 0; list-style: none; } .kt-mostread li { display: flex; flex: 1 1 auto; max-height: 116px; border-top: 1px solid var(--k-line); } .kt-mostread a { display: flex; flex: 1; align-items: center; gap: 16px; min-width: 0; padding-block: 18px; color: var(--k-ink); text-decoration: none; } .kt-mostread li:last-child a { padding-bottom: 0; } .kt-mostread-n { flex: none; width: 28px; font-family: var(--k-font-head); font-size: 30px; font-weight: var(--k-head-weight, 700); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--k-accent); text-box: trim-both cap alphabetic; } .kt-mostread-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .kt-mostread-t { margin-block: calc((1cap - 1lh) / 2); font-size: 15px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-underline-offset: 3px; } .kt-mostread-m { margin-block: calc((1cap - 1lh) / 2); font-size: 13px; line-height: 1.5; color: var(--k-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (hover: hover) { .kt-mostread a:hover .kt-mostread-t { text-decoration: underline; text-decoration-thickness: 1px; } } .kt-news .k-pagination { margin-top: 40px; } .k-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } /* Sidans text för Google längst ner. */ .kt-news-seo { margin-top: clamp(56px, 6vw, 80px); } .k-page .kt-news-seo > h2 { font-family: var(--k-font-head); font-size: calc(clamp(21px, 2.2vw, 26px) * var(--k-head-scale, 1)); line-height: 1.2; color: var(--k-ink); } .kt-news-seo a { color: var(--k-ink); font-weight: 600; text-decoration-color: var(--k-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } @media (min-width: 640px) { .kt-posts.kt-posts--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Startsidan och kategorisidor: de senaste artiklarna / Guider och tips. */ .kt-guides { margin-top: clamp(40px, 5vw, 56px); } /* ---------- Nyheter: artikeln ---------- En spalt på 800 px med raka kanter. Bläckavstånd: ämne 16 rubrik 20 ingress 28 linje 16 fakta 28 bild. */ /* Brödsmulorna 16 px under sidhuvudet som på annonserna (3.16: kärnans .k-page laddas efter temat och gav 40 px). */ .k-page.kt-article-page { padding-top: 16px; } .kt-article-head { padding-top: 24px; margin-bottom: 28px; } .kt-article-head > * { margin: 0; } .kt-article-topic a { color: inherit; text-decoration: none; } @media (hover: hover) { .kt-article-topic a:hover { color: var(--k-ink); text-decoration: underline; } } .k-page .kt-article-head h1 { margin-top: 28px; font-family: var(--k-font-head); font-size: calc(clamp(30px, 4.4vw, 48px) * var(--k-head-scale, 1)); line-height: 1.1; letter-spacing: calc(-.015em + var(--k-head-track, 0em)); font-weight: var(--k-head-weight, 700); } .kt-article-head > h1:first-child { margin-top: 0; } .kt-article-lead { margin-top: 20px !important; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--k-ink-2); } .kt-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--k-line); font-size: 14px; line-height: 1.7; color: var(--k-muted); } .kt-article-meta > p { margin: 0; min-width: 0; } /* Signaturen direkt under bilden (3.15), ämnet längst till höger på samma rad. */ .kt-article-meta > .kt-article-topic { margin-left: auto; } .kt-byline a { font-weight: 600; color: var(--k-ink); text-decoration: none; } @media (hover: hover) { .kt-byline a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } } .kt-article-meta p > * { white-space: nowrap; } .kt-article-meta p > * + *::before { content: "·"; margin: 0 10px; } .kt-byline strong { font-weight: 600; color: var(--k-ink); } /* Mobil: namnet på egen rad, så att ingen rad börjar med en punkt. */ @media (max-width: 639px) { .kt-article-meta .kt-byline { display: block; } .kt-article-meta .kt-byline + *::before { content: none; } /* Mobil: ämnet på en egen rad överst, som en etikett över signaturen. */ .kt-article-meta > .kt-article-topic { order: -1; flex-basis: 100%; margin: 0 0 4px; } } @supports (text-box: trim-both cap alphabetic) { .kt-article-head > :is(h1, .kt-article-lead), .kt-article-meta > p, .kt-box-title, .kt-facts :is(dt, dd), .kt-toc li > a, .kt-toc li::before, .kt-article-cta :is(.k-eyebrow, h2, p), .kt-share p, .kt-faq > h2, .kt-faq summary > span { text-box: trim-both cap alphabetic; } } @supports not (text-box: trim-both cap alphabetic) { .kt-article-head > :is(h1, .kt-article-lead)::before, .kt-article-meta > p::before, .kt-box-title::before, .kt-facts :is(dt, dd)::before, .kt-toc li > a::before, .kt-article-cta :is(.k-eyebrow, h2, p)::before, .kt-share p::before, .kt-faq > h2::before, .kt-faq summary > span::before { content: ""; display: table; margin-bottom: calc((1cap - 1lh) / 2); } .kt-article-head > :is(h1, .kt-article-lead)::after, .kt-article-meta > p::after, .kt-box-title::after, .kt-facts :is(dt, dd)::after, .kt-toc li > a::after, .kt-article-cta :is(.k-eyebrow, h2, p)::after, .kt-share p::after, .kt-faq > h2::after, .kt-faq summary > span::after { content: ""; display: table; margin-top: calc((1cap - 1lh) / 2); } .kt-toc li > a { display: block; } } /* Bilden överst (3.14), rubriken under. Mobil: kant i kant. */ .kt-article-img { margin: 0 0 20px; } .kt-article-img + .kt-article-head { padding-top: 0; } .kt-article-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--k-radius); background: var(--k-soft); } .kt-article-img figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--k-muted); } @media (max-width: 639px) { .kt-article-img { margin-inline: calc(-1 * var(--k-pad)); } .kt-article-img img { border-radius: 0; } .kt-article-img figcaption { padding-inline: var(--k-pad); } } /* Artikelns ram: en spalt (högst 800 px) i mobil och på surfplatta. Från 1024 px artikeln till vänster och Mest lästa + populära kategorier till höger – i samma kanter som annonserna och Läs också under. */ .kt-article-layout { max-width: 800px; margin-inline: auto; } .kt-article-main { min-width: 0; } .kt-article-side { display: grid; gap: clamp(20px, 2vw, 28px); align-content: start; margin-top: 56px; } @media (min-width: 1024px) { .kt-article-layout.has-side { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 352px); gap: clamp(48px, 5vw, 80px); max-width: none; } .kt-article-layout.has-side .kt-article-body { font-size: 18px; } .kt-article-side { margin-top: 0; } .kt-article-side > :last-child { position: sticky; top: calc(var(--k-sticky-top, 0px) + 24px); } } /* Högerspalten: populära annonskategorier med antal och en knapp – samma ruta, rubrik och rader som Mest lästa (3.15): ikonen i accentfärg där Mest lästa har siffran. */ .kt-side-cats { padding: 24px; border: 1px solid var(--k-line); border-radius: var(--k-radius); } .kt-side-cats ul { margin: 0; padding: 0; list-style: none; } .kt-side-cats li { border-top: 1px solid var(--k-line); } .kt-side-cats li a { display: flex; align-items: center; gap: 16px; padding-block: 16px; color: var(--k-ink); text-decoration: none; } .kt-side-cats-icon { display: grid; place-items: center start; flex: none; width: 28px; color: var(--k-accent); } .kt-side-cats-icon svg { display: block; } .kt-side-cats-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; } .kt-side-cats-n { flex: none; font-size: 13px; color: var(--k-muted); font-variant-numeric: tabular-nums; } @media (hover: hover) { .kt-side-cats li a:hover .kt-side-cats-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } } .kt-side-cats .kt-side-cats-all { --b-bg: var(--k-btn); --b-fg: var(--k-btn-ink); --b-bd: var(--k-btn); display: flex; justify-content: center; width: 100%; margin-top: 8px; } @supports (text-box: trim-both cap alphabetic) { .kt-side-cats-name, .kt-side-cats-n { text-box: trim-both cap alphabetic; } } .kt-article-aside { display: grid; gap: clamp(12px, 1.6vw, 20px); margin-bottom: 40px; } @media (min-width: 720px) { .kt-article-aside.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kt-facts, .kt-toc { padding: 24px; border: 1px solid var(--k-line); border-radius: var(--k-radius); min-width: 0; } .k-page .kt-box-title { margin: 0 0 20px; font-family: var(--k-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: var(--k-muted); } .kt-facts dl { margin: 0; } .kt-facts dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding-block: 14px; border-top: 1px solid var(--k-line); } .kt-facts dl > div:last-child { padding-bottom: 0; } .kt-facts dt { font-size: 14px; line-height: 1.45; color: var(--k-muted); } .kt-facts dd { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--k-ink); } .kt-facts dl > div > :only-child { grid-column: 1 / -1; } .kt-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: kt-toc; } .kt-toc li { counter-increment: kt-toc; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; padding-block: 14px; border-top: 1px solid var(--k-line); font-size: 15px; line-height: 1.45; } .kt-toc li:last-child { padding-bottom: 0; } .kt-toc li::before { content: counter(kt-toc, decimal-leading-zero); color: var(--k-muted); font-variant-numeric: tabular-nums; font-size: 13px; } .kt-toc a { color: var(--k-ink); font-weight: 600; text-decoration: none; padding-block: 14px; margin-block: -14px; } /* Tryckytan är hela raden, fast texten är trimmad. */ @media (hover: hover) { .kt-toc a:hover { text-decoration: underline; } } .kt-article-body { font-size: 17px; } /* Rubrik → text i artiklar = radavståndet (3.18.1; förut fasta 20/16 px). */ @media (max-width: 639px) { .kt-article-body { font-size: 16px; } } .kt-faq { margin-top: 56px; } .k-page .kt-faq > h2 { margin: 0 0 24px; font-family: var(--k-font-head); font-size: calc(clamp(21px, 2.2vw, 26px) * var(--k-head-scale, 1)); line-height: 1.25; } .kt-faq-item { border-top: 1px solid var(--k-line); } .kt-faq-item:last-child { border-bottom: 1px solid var(--k-line); } .kt-faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 20px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--k-ink); } .kt-faq-item summary::-webkit-details-marker { display: none; } .kt-faq-item summary .k-icon { flex: none; transition: transform .2s var(--k-ease); } .kt-faq-item[open] summary .k-icon { transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { .kt-faq-item summary .k-icon { transition: none; } } .kt-faq-a { --kt-gap: 20px; padding-bottom: 20px; font-size: 16px; line-height: 1.7; color: var(--k-ink-2); } .kt-faq-a a { color: var(--k-ink); text-decoration-color: var(--k-accent); text-decoration-thickness: 2px; } .kt-article-cta { display: grid; gap: 24px; align-items: center; margin-top: 56px; padding: 28px; border: 1px solid var(--k-line); border-radius: var(--k-radius); } @media (min-width: 640px) { .kt-article-cta { grid-template-columns: minmax(0, 1fr) auto; } } .kt-article-cta > div > * { margin: 0; } .k-page .kt-article-cta h2 { margin-top: 12px; font-family: var(--k-font-head); font-size: calc(clamp(22px, 2.2vw, 26px) * var(--k-head-scale, 1)); line-height: 1.2; } .kt-article-cta p:last-child { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--k-muted); } .kt-article-cta .k-btn { --b-bg: var(--k-btn); --b-fg: var(--k-btn-ink); --b-bd: var(--k-btn); } .kt-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--k-line); } .kt-share p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; } .kt-share ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; } .kt-share :is(a, button) { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--k-line-2); border-radius: var(--k-radius); background: var(--k-bg); color: var(--k-ink); cursor: pointer; } .kt-share svg { width: 18px; height: 18px; } @media (hover: hover) { .kt-share :is(a, button):hover { border-color: var(--k-ink); } } .kt-share button.is-done { border-color: var(--k-ink); background: var(--k-ink); color: #fff; } .kt-copied { position: absolute; right: 0; bottom: calc(100% + 8px); padding: 6px 10px; background: var(--k-ink); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; border-radius: var(--k-radius); opacity: 0; pointer-events: none; transition: opacity .15s; } .kt-copied:not(:empty) { opacity: 1; } .kt-article + .kt-section { padding-top: clamp(56px, 6vw, 80px); } /* Lästråd överst i artikeln (bara webbläsare med scroll-styrda animationer; andra visar ingen). */ .kt-progress { display: none; } @supports (animation-timeline: scroll()) { .kt-progress { display: block; position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 101; height: 3px; background: var(--k-accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; animation: kt-progress linear both; animation-timeline: scroll(root block); } @keyframes kt-progress { to { transform: scaleX(1); } } } /* Faktarutan som rutor (två kolumner) när den får hela bredden. */ .kt-facts { container: kt-facts / inline-size; } @container kt-facts (min-width: 560px) { .kt-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .kt-facts dl > div { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 16px; } .kt-facts dl > div:nth-last-child(2):nth-child(odd) { padding-bottom: 0; } .kt-facts dl > div:last-child:nth-child(odd) { grid-column: 1 / -1; } .kt-facts dt { font-size: 13px; } .kt-facts dd { font-size: 17px; } } /* Citat i artiklar: en ruta med stort citattecken. */ .kt-article-body blockquote { --kt-gap: 16px; position: relative; margin-inline: 0; padding: 28px 28px 28px 76px; border: 0; border-radius: var(--k-radius); background: var(--k-soft); font-family: var(--k-font-head); font-size: 1.18em; line-height: 1.45; color: var(--k-ink); } .kt-article-body blockquote::before { content: "\201C"; position: absolute; top: 28px; left: 26px; font-family: Georgia, "Times New Roman", serif; font-size: 72px; font-weight: 700; line-height: 1; color: var(--k-accent); text-box: trim-both cap alphabetic; } @supports not (text-box: trim-both cap alphabetic) { .kt-article-body blockquote::before { top: 16px; } } .kt-article-body blockquote cite { display: block; margin-bottom: 0; font-family: var(--k-font); font-size: 14px; font-style: normal; font-weight: 600; line-height: 1.4; color: var(--k-muted); } .kt-article-body blockquote cite::before { content: "– "; } @supports (text-box: trim-both cap alphabetic) { .kt-article-body blockquote cite { text-box: trim-both cap alphabetic; } } @media (max-width: 559px) { .kt-article-body blockquote { padding: 56px 20px 20px; } .kt-article-body blockquote::before { top: 20px; left: 20px; } } /* Om skribenten: bild, namn, titel och kort presentation. Avslutar artikeln. */ .kt-author { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 20px; align-items: center; margin-top: 40px; padding: 28px; background: var(--k-soft); border-radius: var(--k-radius); } .kt-share + .kt-author { margin-top: 28px; } .kt-author .kt-avatar { width: 64px; height: 64px; } .kt-author-text > * { margin: 0; } .k-page .kt-author h2 { margin-top: 12px; font-family: var(--k-font-head); font-size: calc(20px * var(--k-head-scale, 1)); line-height: 1.2; letter-spacing: calc(-.005em + var(--k-head-track, 0em)); font-weight: var(--k-head-weight, 700); } .kt-author-role { margin-top: 10px !important; font-size: 14px; line-height: 1.5; color: var(--k-muted); } /* Två rader presentation (3.16). Klippt text trimmas med marginaler, inte text-box – annars syns toppen av rad tre. */ .k-page .kt-author-bio { grid-column: 1 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: calc(24px + (1cap - 1lh) / 2) 0 calc((1cap - 1lh) / 2); font-size: 15px; line-height: 1.65; color: var(--k-ink-2); } .kt-author-more { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--k-line); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--k-ink); text-decoration: none; } .kt-author-more svg { flex: none; margin-block: -6px; transition: transform .15s ease; } /* pilen gör inte raden högre än versalerna */ @media (hover: hover) { .kt-author-more:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .kt-author-more:hover svg { transform: translateX(3px); } } @supports (text-box: trim-both cap alphabetic) { .kt-author-text > :is(.k-eyebrow, h2, .kt-author-role), .kt-author-more span { text-box: trim-both cap alphabetic; } } @supports not (text-box: trim-both cap alphabetic) { .kt-author-text > :is(.k-eyebrow, h2, .kt-author-role)::before { content: ""; display: table; margin-bottom: calc((1cap - 1lh) / 2); } .kt-author-text > :is(.k-eyebrow, h2, .kt-author-role)::after { content: ""; display: table; margin-top: calc((1cap - 1lh) / 2); } } @media (max-width: 639px) { .kt-author { gap: 0 16px; padding: 20px; } .kt-author .kt-avatar { --s: 56px !important; width: 56px; height: 56px; } .k-page .kt-author-bio { margin-top: calc(20px + (1cap - 1lh) / 2); } .kt-author-more { margin-top: 20px; padding-top: 16px; } } .kt-comments { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--k-line); } .kt-comment-list { padding-left: 0; list-style: none; } .kt-comments textarea, .kt-comments input[type=text], .kt-comments input[type=email], .kt-comments input[type=url] { width: 100%; padding: 10px 12px; border: 1px solid var(--k-line-2); border-radius: var(--k-radius); } .kt-comments .submit { padding: 12px 20px; background: var(--k-ink); color: #fff; border: 0; font-weight: 600; cursor: pointer; } .kt-404-code { margin: 0; font-family: var(--k-font-head); font-size: clamp(80px, 14vw, 160px); font-weight: var(--k-head-weight, 700); letter-spacing: -.03em; line-height: 1; color: var(--k-accent); } .kt-404-search { width: 100%; max-width: 960px; margin-top: 16px; } /* Versaler i stora rubriker (Anpassa → Typsnitt) */ .kt-head-upper .kt-hero h1, .kt-head-upper .kt-page-head h1, .kt-head-upper .kt-section-head h2, .kt-head-upper .kt-cta-band h2, .kt-head-upper .kt-sell-text h2, .kt-head-upper .k-pagehero h1, .kt-head-upper .k-archive-head h1 { text-transform: uppercase; letter-spacing: calc(.01em + var(--k-head-track, 0em)); } /* ---------- Sidfot ---------- */ .kt-footer { margin-top: 0; background: var(--k-soft); border-top: 1px solid var(--k-line); font-size: 15px; } .kt-footer-grid { display: grid; gap: 32px; padding-block: clamp(40px, 5vw, 64px); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 900px) { .kt-footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 48px; } } .kt-footer-brand { grid-column: 1 / -1; } @media (min-width: 900px) { .kt-footer-brand { grid-column: auto; } } .kt-footer-brand p { margin: 14px 0 0; max-width: 40ch; color: var(--k-muted); line-height: 1.6; } /* 3.18 (Sonny): lika mycket luft från loggan till texten som från texten till ikonerna – 28 px i bläck. */ .kt-footer-brand > .kt-logo-link, .kt-footer-brand > .custom-logo-link { display: inline-flex; min-height: 0; vertical-align: top; } /* Dator: loggans överkant i linje med kolumnrubrikernas versaltopp (12 px, radhöjd 1,6). */ @media (min-width: 900px) { .kt-footer-brand > .kt-logo-link, .kt-footer-brand > .custom-logo-link { margin-top: 4px; } } .kt-footer-brand p { margin-top: calc(28px + (1cap - 1lh) / 2); margin-bottom: calc((1cap - 1lh) / 2); } @supports (text-box: trim-both cap alphabetic) { .kt-footer-brand p { margin-block: 28px 0; text-box: trim-both cap alphabetic; } } .kt-footer h2 { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--k-muted); } .kt-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .kt-footer nav a { text-decoration: none; color: var(--k-ink-2); } @media (hover: hover) { .kt-footer nav a:hover { color: var(--k-ink); text-decoration: underline; } } .kt-socials { display: flex !important; gap: 8px !important; margin-top: 28px !important; } .kt-socials a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--k-line-2); background: #fff; color: var(--k-ink); border-radius: var(--k-radius); } @media (hover: hover) { .kt-socials a:hover { border-color: var(--k-ink); } } .kt-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px 28px; border-top: 1px solid var(--k-line); font-size: 13px; color: var(--k-muted); } .kt-footer-bottom a { color: var(--k-muted); } .kt-footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; } .kt-company { font-style: normal; display: flex; flex-wrap: wrap; gap: 2px 10px; } .kt-company span + span::before { content: "·"; margin-right: 10px; } .kt-footer-brand .kt-logo-svg, .kt-drawer-head .kt-logo-svg { color: var(--k-ink); } .k-route-create .kt-footer, .k-route-login .kt-footer-grid, .k-route-register .kt-footer-grid, .k-route-reset .kt-footer-grid { display: none; } .single-jobb .kt-footer { padding-bottom: 0; } @media (max-width: 1023px) { .single-jobb .kt-footer { padding-bottom: 72px; } } .kt-head-inverse .kt-msearch { background: var(--kt-head-bg); border-top-color: color-mix(in srgb, var(--kt-head-ink) 18%, transparent); } .kt-head-inverse .kt-msearch input { border-color: var(--kt-head-ink); } /* ===================================================================== Kock Tema – sidhuvud, startsida och bongskena Basilika (#1d5c3f), rostfritt (#f0f3f1), bongpapper (#fdfcf6), äggula (#ffc83d) och tomat (#c9402b). Rubriker: Big Shoulders Display. ===================================================================== */ /* ---------- Sidhuvud ---------- */ .kt-header { background: rgba(255, 255, 255, .98); } .kt-bar { min-height: 72px; } .kt-wordmark { font-size: clamp(26px, 2.6vw, 30px); letter-spacing: .01em; } .kt-wordmark.has-tld::after { content: none; } .kt-wordmark-tld { color: var(--k-basil, #1d5c3f); } .kt-footer .kt-wordmark-tld { color: var(--k-basil, #1d5c3f); } .kt-nav { flex: 1; min-width: 0; } .kt-nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; } .kt-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--k-ink); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; } .kt-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; background: var(--k-yolk, #ffc83d); } @media (hover: hover) { .kt-nav a:hover { color: var(--k-accent); } } .kt-act--msg { position: relative; } .kt-dot { position: absolute; top: 4px; right: 2px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--k-tomato, #c9402b); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } @media (max-width: 1000px) { .kt-nav { display: none; } .kt-menu-btn { display: inline-flex; } } @media (max-width: 900px) { .kt-act--search { display: inline-flex; } } .kt-drawer-list--main a { font-weight: 700; } /* ---------- Startsidans topp ---------- */ .kt-front { --kt-sec: clamp(48px, 7vw, 96px); } .kt-hero { position: relative; overflow: hidden; background: var(--k-basil, #1d5c3f); color: #fff; padding: clamp(36px, 6vw, 80px) 0 0; } .kt-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(255, 255, 255, .045) 79px 80px), repeating-linear-gradient(0deg, transparent 0 79px, rgba(255, 255, 255, .045) 79px 80px); pointer-events: none; } .kt-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .kt-hero h1 { margin: 0 0 18px; font-family: var(--k-font-head); font-weight: 800; font-size: calc(clamp(40px, 6vw, 76px) * var(--k-head-scale, 1)); line-height: .9; letter-spacing: var(--k-head-track, 0); text-transform: uppercase; color: #fff; max-width: 13ch; } .kt-hero-lead { margin: 0 0 26px; max-width: 54ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: rgba(255, 255, 255, .86); } .kt-hsearch { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; background: #fff; border-radius: var(--k-radius-lg, 6px); padding: 6px; gap: 6px; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55); } .kt-hsearch > div { position: relative; display: grid; padding: 8px 14px 6px; border-radius: var(--k-radius); } .kt-hsearch > div + div { border-left: 1px solid var(--k-line); } .kt-hsearch label { color: var(--k-muted); font-size: 12px; font-weight: 700; } .kt-hsearch input, .kt-hsearch select { width: 100%; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--k-ink); font-size: 16px; font-weight: 500; -webkit-appearance: none; appearance: none; } .kt-hsearch input:focus, .kt-hsearch select:focus { outline: none; } .kt-hsearch > div:focus-within { background: var(--k-soft); } .kt-hsearch-go { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; border: 0; border-radius: var(--k-radius); background: var(--k-yolk, #ffc83d); color: #2b1f00; font-weight: 800; font-size: 16px; cursor: pointer; } @media (hover: hover) { .kt-hsearch-go:hover { background: #ffd666; } } @media (max-width: 720px) { .kt-hsearch { grid-template-columns: 1fr; } .kt-hsearch > div + div { border-left: 0; border-top: 1px solid var(--k-line); } .kt-hsearch-go { justify-content: center; min-height: 52px; } } .kt-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } .kt-quick a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 99px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; } .kt-quick em { font-style: normal; color: rgba(255, 255, 255, .65); font-weight: 500; } @media (hover: hover) { .kt-quick a:hover { background: rgba(255, 255, 255, .1); } } .kt-hero-live { position: relative; margin: clamp(28px, 4vw, 48px) auto 0; padding-block: 16px; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .86); font-size: 15px; } /* Bongskenan: de senaste jobben hänger som bongar på en rostfri skena. */ .kt-bongs { position: relative; display: grid; gap: 34px; } .kt-bong-row { position: relative; padding-top: 14px; } .kt-bong-bar { position: absolute; left: -12px; right: -40px; top: 0; height: 22px; border-radius: 4px; background: linear-gradient(180deg, #f6f8f7 0%, #c9d1cc 46%, #9aa6a0 54%, #e3e8e5 100%); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); } .kt-tickets { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } .kt-ticket { transform-origin: 50% 0; transform: rotate(calc((var(--i) - 1.5) * .9deg)); animation: kt-hang .9s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i) * 90ms); } @keyframes kt-hang { from { transform: translateY(-24px) rotate(0deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .kt-ticket { animation: none; } } .kt-ticket a { position: relative; display: grid; gap: 4px; min-height: 100%; padding: 18px 16px 18px; background: var(--k-paper, #fdfcf6); color: var(--k-ink); text-decoration: none; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12.5px; line-height: 1.35; box-shadow: 0 14px 24px -16px rgba(0, 0, 0, .7); } .kt-ticket a::before { content: ""; position: absolute; left: 50%; top: -8px; width: 26px; height: 12px; margin-left: -13px; border-radius: 2px; background: #2c3631; } .kt-ticket a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: radial-gradient(circle at 5px 6px, transparent 4.5px, var(--k-paper, #fdfcf6) 5px) 0 0 / 10px 6px repeat-x; } .kt-ticket-top { display: flex; justify-content: space-between; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px dashed #b9c0bb; color: #5d6862; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; } .kt-ticket-role { font-family: var(--k-font-head); font-weight: 800; font-size: calc(26px * var(--k-head-scale, 1)); line-height: 1; letter-spacing: var(--k-head-track, 0); text-transform: uppercase; color: var(--k-basil, #1d5c3f); } .kt-ticket-title { font-weight: 700; font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .kt-ticket-line { color: #3d4842; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .kt-ticket-facts { margin-top: 6px; padding-top: 8px; border-top: 1px dashed #b9c0bb; color: #3d4842; } @media (hover: hover) { .kt-ticket a:hover .kt-ticket-title { text-decoration: underline; } } @media (max-width: 1000px) { .kt-hero-grid { grid-template-columns: 1fr; } .kt-bongs { max-width: 560px; } .kt-bong-row + .kt-bong-row { display: none; } .kt-bong-bar { left: -40px; } } @media (max-width: 420px) { .kt-ticket-role { font-size: 22px; } .kt-ticket a { padding: 16px 12px; } } /* ---------- Två ingångar ---------- */ .kt-doors { padding: var(--kt-sec) 0 0; } .kt-doors-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 2px solid var(--k-ink); border-radius: var(--k-radius-lg, 6px); overflow: hidden; } .kt-door { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 4vw, 44px); } .kt-door--staff { background: var(--k-yolk, #ffc83d); color: #231a00; border-left: 2px solid var(--k-ink); } .kt-door h2 { margin: 0; font-family: var(--k-font-head); font-weight: 800; font-size: calc(clamp(34px, 4vw, 48px) * var(--k-head-scale, 1)); line-height: .95; text-transform: uppercase; letter-spacing: var(--k-head-track, 0); } .kt-door p { margin: 0; max-width: 48ch; line-height: 1.55; } .kt-door-list { margin: 4px 0 8px; padding: 0 0 0 20px; display: grid; gap: 6px; } .kt-door .k-btn { justify-self: start; } .kt-door-btns { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 800px) { .kt-doors-grid { grid-template-columns: 1fr; } .kt-door--staff { border-left: 0; border-top: 2px solid var(--k-ink); } } /* ---------- Sektioner ---------- */ .kt-sec { padding: var(--kt-sec) 0 0; } .kt-sec:last-child { padding-bottom: var(--kt-sec); } .kt-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 20px; } .kt-sec-head h2, .kt-h2 { margin: 0; font-family: var(--k-font-head); font-weight: 800; font-size: calc(clamp(30px, 3.4vw, 42px) * var(--k-head-scale, 1)); line-height: 1; letter-spacing: var(--k-head-track, 0); text-transform: uppercase; } .kt-h2 { margin-bottom: 18px; } .kt-sec-head a { color: var(--k-basil, #1d5c3f); font-weight: 700; text-decoration: none; } @media (hover: hover) { .kt-sec-head a:hover { text-decoration: underline; } } .kt-roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0; border-top: 1px solid var(--k-line); border-left: 1px solid var(--k-line); } .kt-role { padding: 20px; border-right: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); } .kt-role-head { display: flex; gap: 12px; align-items: center; margin: 0 0 12px; text-decoration: none; color: var(--k-ink); } .kt-role-head .k-icon { color: var(--k-basil, #1d5c3f); } .kt-role-head strong { display: block; font-size: 18px; } .kt-role-head em { font-style: normal; color: var(--k-muted); font-size: 13.5px; } .kt-role ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14.5px; } .kt-role li a { text-decoration: none; } .kt-role li em { font-style: normal; color: var(--k-faint); font-size: 12.5px; } @media (hover: hover) { .kt-role li a:hover, .kt-role-head:hover strong { text-decoration: underline; } } .kt-where-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); } @media (max-width: 900px) { .kt-where-grid { grid-template-columns: 1fr; } } .kt-linkcols { columns: 3 160px; column-gap: 24px; list-style: none; margin: 0; padding: 0; } .kt-linkcols li { break-inside: avoid; padding: 5px 0; font-size: 15px; } .kt-linkcols a { font-weight: 600; text-decoration: none; } .kt-linkcols em { font-style: normal; color: var(--k-faint); font-size: 13px; } .kt-emps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kt-emps a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: var(--k-radius); text-decoration: none; font-weight: 600; font-size: 14.5px; } .kt-emps span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .kt-emps em { font-style: normal; color: var(--k-muted); font-weight: 500; font-size: 13px; } @media (hover: hover) { .kt-emps a:hover { background: var(--k-soft); } } @media (max-width: 560px) { .kt-emps { grid-template-columns: 1fr; } } /* Sidor i pluginet: rubriker i versaler med Big Shoulders. */ .k-page h1, .k-jobhead-title, .k-archive-head h1, .k-pagehero h1 { text-transform: uppercase; } @media (min-width: 1100px) { .kt-footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 40px; } }