/** * gb-sok.css – söksidan och sökrutan i sidhuvudet. * * Alla värden kommer från designsystemets tokens (gb-hem.php:root). Fallbacken * efter kommatecknet finns för att shortcoden ska överleva även om gb-hem inte * är aktivt — samma mönster som övriga plugin. * * Arkividentitet: sökningen är ingen egen avdelning utan en genomgång av alla, * så --sec lämnas på terrakotta (standard) i stället för att låna någon annan * avdelnings heritage-färg. */ /* * Astras understrykning ligger på `.ast-single-post .entry-content a` med * specificitet (0,2,1), och klassen sitter PÅ — därför compound * `body.ast-single-post` utan mellanslag. Descendant-varianten matchar noll * element och regeln hade aldrig tillämpats (den fällan står i * gb-hemsida/CLAUDE.md och kostade en felsökning en gång). * (0,3,2) slår (0,2,1) utan !important, vilket designreglerna förbjuder. * Uppmätt före fixen: 35 av 35 länkar på söksidan var understrukna. */ body.ast-single-post .entry-content .gbsok-wrap a, body.ast-single-post .entry-content .gbsok-wrap a:hover, body.ast-single-post .entry-content .gbsok-wrap a:focus { text-decoration: none; } .gbsok-wrap { --sec: var(--gb-accent, #9C4A2A); max-width: var(--gb-container, 1100px); margin: 0 auto; padding: 0 var(--gb-gutter, 24px); width: 100%; font-family: var(--gb-font-body, Georgia, serif); color: var(--gb-ink, #1F1B16); } /* ── Sidhuvud ─────────────────────────────────────────────────────────── */ .gbsok-hero { padding-top: var(--gb-hero-topp, 16px); padding-bottom: var(--gb-hero-botten, 40px); } .gbsok-eyebrow { margin: 0 0 32px; font-family: var(--gb-font-body, Georgia, serif); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gb-muted, #6B6258); } .gbsok-hero__rubrik { margin: 0; font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif); font-size: clamp(32px, 4vw, 44px); font-weight: 500; font-style: italic; line-height: 1.15; color: var(--sec); } .gbsok-hero__lede { margin: 16px 0 0; max-width: var(--gb-measure, 62ch); font-size: 18px; line-height: 1.6; color: var(--gb-ink-soft, #3A332B); } /* ── Sökformuläret ────────────────────────────────────────────────────── */ .gbsok-formular { margin: 0 0 40px; } .gbsok-etikett { display: block; margin: 0 0 8px; font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif); font-style: italic; font-size: 15px; color: var(--gb-ink-soft, #3A332B); } .gbsok-falt-rad { display: flex; gap: 12px; align-items: stretch; } .gbsok-falt { flex: 1 1 auto; min-width: 0; padding: 12px 16px; font-family: var(--gb-font-body, Georgia, serif); font-size: 17px; color: var(--gb-ink, #1F1B16); background: var(--gb-bg, #fff); border: 1px solid var(--gb-border, #E8E2D6); border-radius: 6px; } .gbsok-falt:focus { outline: 2px solid var(--sec); outline-offset: 1px; border-color: var(--sec); } .gbsok-knapp { flex: 0 0 auto; padding: 12px 28px; font-family: var(--gb-font-body, Georgia, serif); font-size: 17px; color: var(--gb-bg, #fff); background: var(--sec); border: 1px solid var(--sec); border-radius: var(--radius-pill, 999px); cursor: pointer; transition: background 160ms var(--ease, ease); } .gbsok-knapp:hover, .gbsok-knapp:focus { background: var(--gb-ink, #1F1B16); border-color: var(--gb-ink, #1F1B16); } .gbsok-hjalp { margin: 10px 0 0; font-size: 14px; color: var(--gb-muted, #6B6258); } .gbsok-hjalp em { font-style: italic; } /* ── Statusrad och filterchips ────────────────────────────────────────── */ .gbsok-status { padding-bottom: 24px; border-bottom: 1px solid var(--gb-border, #E8E2D6); margin-bottom: 32px; } .gbsok-status__rad { margin: 0 0 16px; font-size: 17px; color: var(--gb-ink-soft, #3A332B); } .gbsok-status__rad em { font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif); font-style: italic; color: var(--gb-ink, #1F1B16); } .gbsok-varning { margin: 0 0 16px; padding: 10px 14px; font-size: 15px; color: var(--gb-ink, #1F1B16); background: var(--gb-accent-soft, rgba(156, 74, 42, 0.08)); border-left: 2px solid var(--sec); border-radius: 6px; } .gbsok-chips { display: flex; flex-wrap: wrap; gap: 8px; } .gbsok-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 14px; font-size: 14px; color: var(--gb-ink-soft, #3A332B); background: var(--gb-bg-warm, #FAF7F1); border: 1px solid var(--gb-border, #E8E2D6); border-radius: var(--radius-pill, 999px); text-decoration: none; transition: border-color 160ms var(--ease, ease); } /* Hovringen gäller bara de OVALDA chipen. Utan uteslutningen vinner `.gbsok-chip:hover` (0,2,0) över `.gbsok-chip--vald` (0,1,0): texten blir ink medan terrakottabottnen står kvar, alltså mörkt på mörkt. Uppmätt på prod 2026-09-08 föll kontrasten 6,13 → 2,79 mot WCAG AA:s 4,5 — i fokus också, så tangentbordet drabbades med. Lös krocken med uteslutning, aldrig med högre specificitet: höjer man i stället vikten här måste varje framtida tillstånd höjas ännu mer, och nästa som skriver en regel har ingen aning om det. */ .gbsok-chip:not(.gbsok-chip--vald):hover, .gbsok-chip:not(.gbsok-chip--vald):focus { border-color: var(--sec); color: var(--gb-ink, #1F1B16); } .gbsok-chip--vald { color: var(--gb-bg, #fff); background: var(--sec); border-color: var(--sec); } /* Det valda chipet beter sig som primärknappen i designsystemet: terrakotta → ink botten, vit text hela vägen. 6,13 i vila, 17,12 i hovring. `color` MÅSTE stå här. Temat sätter `a:hover { color: ink }` globalt (0,1,1), vilket slår `.gbsok-chip--vald` (0,1,0) — så utan raden blir texten ink på en ink botten, alltså osynlig. Uppmätt: 1,00. Att bara ta bort plugin-regelns egen hover räckte inte; två regler satte samma färg och den andra stod kvar. `.gbsok-chip--vald:hover` är (0,2,0) och vinner. */ .gbsok-chip--vald:hover, .gbsok-chip--vald:focus { background: var(--gb-ink, #1F1B16); border-color: var(--gb-ink, #1F1B16); color: var(--gb-bg, #fff); } /* 0.75 gav 4,21 mot terrakottabottnen i det valda chipet — under kravet. 0.85 ger 4,92 och läser fortfarande som sekundärt. */ .gbsok-chip__antal { font-size: 13px; opacity: 0.85; } /* ── Källblock ────────────────────────────────────────────────────────── */ .gbsok-block { margin: 0 0 44px; } .gbsok-block__rubrik { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin: 0 0 4px; font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif); font-size: 26px; font-weight: 500; font-style: italic; color: var(--gb-ink, #1F1B16); } .gbsok-block__antal { font-family: var(--gb-font-body, Georgia, serif); font-size: 14px; font-style: normal; color: var(--gb-muted, #6B6258); } .gbsok-block__not { margin: 0 0 12px; font-size: 14px; font-style: italic; color: var(--gb-muted, #6B6258); } .gbsok-block__mer { margin: 16px 0 0; font-size: 15px; } .gbsok-block__mer a { color: var(--sec); text-decoration: none; } .gbsok-block__mer a:hover, .gbsok-block__mer a:focus { color: var(--gb-ink, #1F1B16); } .gbsok-tom { margin: 0; font-size: 15px; color: var(--gb-muted, #6B6258); } /* ── Träfflista ───────────────────────────────────────────────────────── */ .gbsok-lista { margin: 16px 0 0; padding: 0; list-style: none; } .gbsok-post { padding: 16px 0; border-top: 1px solid var(--gb-border, #E8E2D6); } .gbsok-post__titel { font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif); font-size: 20px; font-style: italic; color: var(--gb-ink, #1F1B16); text-decoration: none; } .gbsok-post__titel:hover, .gbsok-post__titel:focus { color: var(--sec); } .gbsok-post__meta { margin-left: 10px; font-size: 13px; font-style: italic; color: var(--gb-muted, #6B6258); } .gbsok-post__utdrag { margin: 6px 0 0; max-width: var(--gb-measure, 62ch); font-size: 16px; line-height: 1.6; color: var(--gb-ink-soft, #3A332B); } /* * Ingen vågrät padding. Sökningen matchar ordbörjan, så markeringen träffar * ofta bara en del av ett ord ("badhus" i "badhusparken") — padding la då in * ett falskt mellanslag mitt i ordet och fick texten att se felstavad ut. */ .gbsok-markering { padding: 1px 0; color: var(--gb-ink, #1F1B16); background: var(--gb-gold-soft, rgba(176, 141, 87, 0.22)); box-shadow: 0 0 0 1px var(--gb-gold-soft, rgba(176, 141, 87, 0.22)); border-radius: 2px; } /* ── Bildrutnät ───────────────────────────────────────────────────────── */ .gbsok-rutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; margin: 20px 0 0; padding: 0; list-style: none; } .gbsok-ruta a { display: block; color: var(--gb-ink, #1F1B16); text-decoration: none; } .gbsok-ruta img, .gbsok-ruta__utanbild { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--gb-bg-warm, #FAF7F1); border: 1px solid var(--gb-border, #E8E2D6); border-radius: 6px; transition: border-color 160ms var(--ease, ease); } .gbsok-ruta a:hover img, .gbsok-ruta a:focus img, .gbsok-ruta a:hover .gbsok-ruta__utanbild, .gbsok-ruta a:focus .gbsok-ruta__utanbild { border-color: var(--sec); } .gbsok-ruta__titel { display: block; margin-top: 8px; font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif); font-size: 16px; font-style: italic; line-height: 1.3; } .gbsok-ruta a:hover .gbsok-ruta__titel, .gbsok-ruta a:focus .gbsok-ruta__titel { color: var(--sec); } /* * Maskinläst text märks, aldrig tyst. Samma etikett och samma innebörd som på * bildarkivets egna kort: uppgiften är en modells gissning, inte föreningens * granskade påstående. 97,8 % av de publicerade bilderna visar sådan text. */ .gbsok-maskinlast { display: inline-block; margin-top: 4px; padding: 1px 7px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gb-muted, #6B6258); background: var(--gb-bg-warm, #FAF7F1); border: 1px solid var(--gb-border, #E8E2D6); border-radius: var(--radius-pill, 999px); } .gbsok-ruta__meta { display: block; margin-top: 2px; font-size: 13px; color: var(--gb-muted, #6B6258); } /* ── Startläge och nollträff ──────────────────────────────────────────── */ .gbsok-start { padding: 8px 0 40px; } .gbsok-start__rubrik { margin: 0 0 12px; font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif); font-size: 18px; font-style: italic; color: var(--gb-ink-soft, #3A332B); } .gbsok-forslag { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .gbsok-forslag a { display: inline-block; padding: 6px 14px; font-size: 15px; color: var(--gb-ink-soft, #3A332B); background: var(--gb-bg-warm, #FAF7F1); border: 1px solid var(--gb-border, #E8E2D6); border-radius: var(--radius-pill, 999px); text-decoration: none; } .gbsok-forslag a:hover, .gbsok-forslag a:focus { border-color: var(--sec); color: var(--gb-ink, #1F1B16); } .gbsok-nolltraff { padding: 8px 0 40px; max-width: var(--gb-measure, 62ch); } .gbsok-nolltraff__rubrik { margin: 0 0 16px; font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif); font-size: 22px; font-style: italic; color: var(--gb-ink, #1F1B16); } .gbsok-tips { margin: 16px 0 0; padding-left: 20px; color: var(--gb-ink-soft, #3A332B); } .gbsok-tips li { margin-bottom: 8px; line-height: 1.6; } .gbsok-tips em { font-style: italic; color: var(--gb-ink, #1F1B16); } /* ── Sökrutan i menyn ─────────────────────────────────────────────────── */ .gbsok-visuellt-dold { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .gbsok-menypost { display: flex; align-items: center; position: relative; } .gbsok-minisok { display: flex; align-items: center; gap: 2px; padding: 2px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill, 999px); } .gbsok-minisok__ikon { display: inline-flex; align-items: center; justify-content: center; /* 34px är pekvänligt utan att bli en knapp som konkurrerar med menyn. */ width: 34px; height: 34px; color: var(--gb-muted, #6B6258); cursor: pointer; } .gbsok-minisok__ikon:hover { color: var(--sec); } .gbsok-minisok input.gbsok-minisok__falt { width: 0; padding: 0; font-family: var(--gb-font-body, Georgia, serif); font-size: 14px; color: var(--gb-ink, #1F1B16); background: transparent; border: 0; opacity: 0; transition: width 200ms var(--ease, ease), opacity 200ms var(--ease, ease); } /* * Utfällt läge. * * Formuläret lyfts ur flödet i stället för att bredda menyposten — mätt i * sidhuvudet finns bara 119 px över, så en inline-expansion hade tryckt ner * hela menyn på en andra rad mitt i att besökaren skriver. */ .gbsok-minisok:focus-within { position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 10; gap: 4px; padding: 2px 10px 2px 6px; background: var(--gb-bg, #fff); border-color: var(--sec); box-shadow: var(--shadow-card, 0 2px 10px rgba(31, 27, 22, 0.10)); } .gbsok-minisok:focus-within input.gbsok-minisok__falt { width: 210px; padding: 6px 0; opacity: 1; outline: none; } .gbsok-minisok:focus-within .gbsok-minisok__ikon { color: var(--sec); } /* Tangentbordsfokus måste synas även när ikonen är enda synliga elementet. */ .gbsok-minisok input.gbsok-minisok__falt:focus-visible { outline: none; } .gbsok-minisok:focus-within { outline: 2px solid transparent; } /* * I mobildrawern finns hela bredden och ingen meny att knuffa på. Där ska * fältet vara framme direkt — en ikon som måste tryckas först vore ett extra * steg utan vinst. */ .gbsok-menypost--mobile_menu { padding: 12px 0; width: 100%; } .gbsok-menypost--mobile_menu .gbsok-minisok, .gbsok-menypost--mobile_menu .gbsok-minisok:focus-within { position: static; transform: none; width: 100%; gap: 4px; padding: 2px 10px 2px 6px; background: var(--gb-bg-warm, #FAF7F1); border-color: var(--gb-border, #E8E2D6); box-shadow: none; } .gbsok-menypost--mobile_menu .gbsok-minisok:focus-within { border-color: var(--sec); } .gbsok-menypost--mobile_menu .gbsok-minisok input.gbsok-minisok__falt, .gbsok-menypost--mobile_menu .gbsok-minisok:focus-within input.gbsok-minisok__falt { width: 100%; padding: 8px 0; opacity: 1; } /* ── Responsivt ───────────────────────────────────────────────────────── */ @media (max-width: 800px) { .gbsok-hero__lede { font-size: 17px; } .gbsok-rutnat { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; } .gbsok-block__rubrik { font-size: 23px; } } @media (max-width: 500px) { .gbsok-falt-rad { flex-direction: column; } /* Pekvänliga mål: 48px höjd på fält och knapp när de staplas. */ .gbsok-falt, .gbsok-knapp { width: 100%; padding-top: 13px; padding-bottom: 13px; } .gbsok-rutnat { grid-template-columns: repeat(2, 1fr); } .gbsok-post__meta { display: block; margin-left: 0; margin-top: 2px; } .gbsok-block__rubrik { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { .gbsok-knapp, .gbsok-chip, .gbsok-ruta img, .gbsok-ruta__utanbild, .gbsok-minisok__falt { transition: none; } }