/* ========================================================================== TZ_AVGANGSRAKNARE — "Över 300 avgångar" (steg 28, 2026-11-07) ========================================================================== Två uttryck av samma siffra: .tz-avgraknare startsidans säljyta, egen sektion .tz-avgraknare-skylt grafisk skylt i sektionen "Kommande avgångar" på /resor/ (steg 28.1 — ersatte en textrad som läste som ännu en ingress) Allt bygger på temats befintliga tokens. Inga nya färger, inga nya typsnitt, inga egna brytpunkter utöver den som redan används för kortrutnätet. Ingen animation och ingen transform — ytan ska vara lugn, och den ska inte flytta något när den laddas. INGEN LAYOUTFÖRSKJUTNING: hela ytan är serverrenderad och har fast innehåll. Ingenting hämtas efteråt, så det finns inget tillstånd där höjden ändras. Marginalerna är satta på ytan själv, inte på syskonen. KONTRAST (WCAG AA, 4.5:1 för brödtext): grön #415321 på #edf0e6 ≈ 8,3:1 dämpad text rgba(26,26,26,.68) på #edf0e6 ≈ 7,0:1 länk #75592f på #edf0e6 ≈ 5,8:1 Guldet #8c6a38 ligger på 4,4:1 och används därför ALDRIG som textfärg här — bara den mörkare varianten. Det är skälet till att länken inte använder --tz-color-cta rakt av. style.css HAR `p { font-size: 1.2em !important }` (global, mätt 2026-11-07). Den vinner över varje klassbaserad storlek på ett stycke. Två följder: 1. Siffran på startsidan är ett `h2`, inte ett `p` — annars renderades den i brödtextstorlek i stället för var(--tz-h2). 2. Skyltens rader är `span`, inte `p`, av exakt samma skäl: en siffra som ska dominera får inte tvingas ned till brödtextstorlek. 3. `.tz-avgraknare__text` ÄR ett stycke och får därför 1.2em av temat, inte var(--tz-body). Det är önskat — ingressen ska följa sidans brödtext. Dess font-size-rad står kvar som korrekt avsikt om den globala regeln någon gång tas bort. ========================================================================== */ /* --- Startsidans säljyta ------------------------------------------------ */ /* Bredden ärvs av kodmodulens kolumn, precis som kampanjytan (.tzkmp-teaser) i sektionen under. Mätt 2026-11-07 vid 1920 px: båda 95–1810. En egen max-bredd här gjorde bandet 1400 px och lät det hänga smalare än allt annat i flödet — därför sätts ingen. */ .tz-avgraknare { box-sizing: border-box; margin: clamp(0.5rem, 0.25rem + 1vw, 1.5rem) 0; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) var(--tz-gutter, 1.5rem); background: var(--tz-green-soft, #edf0e6); border-radius: var(--tz-radius-lg, 16px); text-align: center; } .tz-avgraknare__antal { margin: 0; font-family: var(--tz-font-heading, 'Poppins', Arial, sans-serif); font-size: var(--tz-h2, clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem)); font-weight: 600; line-height: var(--tz-leading-tight, 1.15); color: var(--tz-green, #415321); text-wrap: balance; } .tz-avgraknare__text { max-width: 56ch; margin: 0.75rem auto 0; font-family: var(--tz-font-body, 'Roboto', Arial, sans-serif); font-size: var(--tz-body, 1rem); line-height: var(--tz-leading-body, 1.55); color: var(--tz-color-text-muted, rgba(26, 26, 26, 0.68)); } /* Ingen pil (ägarbeslut 2026-11-07, steg 28.1) — understrykningen är den enda markeringen länken behöver. `inline-flex` står kvar för tryckytans skull, men `gap` är borta: den fanns bara för att skilja text från pil. */ .tz-avgraknare__lank { display: inline-flex; align-items: center; /* Full tryckyta på mobil utan att ändra radhöjden på desktop. */ min-height: var(--tz-tap, 48px); margin-top: 0.75rem; font-family: var(--tz-font-body, 'Roboto', Arial, sans-serif); font-size: var(--tz-body, 1rem); font-weight: 600; color: var(--tz-color-cta-hover, #75592f); text-decoration: underline; text-underline-offset: 0.25em; } .tz-avgraknare__lank:hover, .tz-avgraknare__lank:focus-visible { color: var(--tz-green, #415321); } .tz-avgraknare__lank:focus-visible { outline: 2px solid var(--tz-green, #415321); outline-offset: 3px; border-radius: 4px; } /* --- Skylten på /resor/ -------------------------------------------------- */ /* Ersatte en textrad i steg 28.1. Raden låg under rubriken och läste som ännu en ingress; skylten är i stället en grafisk detalj där siffran är det dominerande elementet. Lutningen är den enda "lekfulla" gesten och den är liten med flit: -3° räcker för att ytan ska läsa som en pålagd skylt i stället för en ruta, utan att texten känns sned. transform används bara statiskt — ingen animation, ingen rörelse vid hover. */ .tz-avgraknare-skylt { display: inline-flex; flex-direction: column; align-items: center; gap: 0.15em; /* Den lodräta paddingen trimmades i steg 28.1b från clamp(0.8…1.3rem). Skäl: skyltens höjd styr HELA sektionens luftighet. Sambandet är linjärt och mätt — gapet rubrik→karusell = skyltens höjd − överlapp − 32 px. Varje pixel som tas bort här ger en pixel tätare sektion vid oförändrad överlappning. Siffran är orörd; det är luften runt den som minskat. */ padding: clamp(0.6rem, 0.45rem + 0.45vw, 0.75rem) clamp(1.25rem, 0.9rem + 1.3vw, 2rem); background: var(--tz-green-soft, #edf0e6); border-radius: var(--tz-radius-lg, 16px); /* Grön ton i skuggan i stället för grått — den lägger sig mjukare mot sektionens varma kräm (#fcf9ef) än en neutral skugga gör. */ box-shadow: 0 6px 18px rgba(65, 83, 33, 0.14); transform: rotate(-3deg); text-align: center; } .tz-avgraknare-skylt__tal { font-family: var(--tz-font-heading, 'Poppins', Arial, sans-serif); font-size: clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--tz-green, #415321); /* Siffrorna ska inte hoppa i bredd när antalet ändras. */ font-variant-numeric: tabular-nums; } .tz-avgraknare-skylt__ord { font-family: var(--tz-font-heading, 'Poppins', Arial, sans-serif); font-size: clamp(0.72rem, 0.65rem + 0.22vw, 0.875rem); font-weight: 600; line-height: 1.25; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tz-green, #415321); } .tz-avgraknare-skylt__ord--sist { font-weight: 500; /* Något dämpad så att ordningen blir siffra → avgångar → att upptäcka, inte tre lika starka rader. */ color: var(--tz-green-dampad, rgba(65, 83, 33, 0.72)); } /* --- Skyltens placering på desktop --------------------------------------- */ /* Uppe till höger i rubrikraden — i flödet, inte absolutpositionerad. DET VAR ETT MEDVETET OMVAL. Första försöket lade skylten absolut i sektionens tomma högeryta med `top: -14px`. Mätt 2026-11-07 täckte den då karusellens framåtpil och två datumkort: när textraden togs bort krympte sektionen ~50 px och karusellen flyttade upp, så det fanns inte längre plats mellan rubriken och karusellen. En absolut skylt kan inte både skjuta över överkanten och garanterat gå fri från karusellen. Som flexobjekt i `.tz-avgangar__huvud` (som redan är `display: flex; flex-wrap: wrap`) kan den inte täcka något alls: raden växer till skyltens höjd och karusellen flyttas ned av sig själv. `align-self: flex-start` tar skylten ur radens baslinjegrupp, så rubriken och ingressen ligger kvar överst till vänster precis som förut. */ @media (min-width: 783px) { .tz-avgraknare-skylt { margin-left: auto; align-self: flex-start; } } /* Överlappningen mot sektionens överkant — ägarbeslut 2026-11-07, steg 28.2: ungefär halva skyltens höjd ska ligga ovanför den ljusbeige sektionen. EN ENDA KNAPP STYR BÅDA MÅLEN. Negativ margin-top gör två saker samtidigt: den lyfter skylten OCH minskar den höjd den reserverar i flödet. Därför följer karusellen med uppåt i exakt samma takt som skylten — avståndet mellan skyltens underkant och karusellen är konstant 8 px oavsett värde. Uppmätta samband vid 1920 px (skyltens höjd H = 125 px olutad): överlapp = margin − 20 gap rubrik→karusell = 108 − överlapp Ett större lyft ger alltså tätare sektion, pixel för pixel. 86 px landar på ~50 % överlappning och ~24 px gap, mot 5,9 % och 99 px före. `translateY` hade bara flyttat skylten visuellt och lämnat kvar hela mellanrummet — det är just det ägaren påpekade. Marginalen måste vara negativ i layouten, inte bara i renderingen. TRÖSKELN 1200 px ÄR UPPMÄTT, INTE GISSAD. Sökfältet är 490 px brett och centrerat medan skylten sitter i högerkanten, så den lyfta skylten kan nå in i sökfältets högra ände. Uppmätt fritt avstånd mellan skyltens vänsterkant och sökfältets högerkant: 1156 px -> 12 px 1206 px -> 28 px 1176 px -> 18 px 1236 px -> 40 px Avståndet krymper ~0,3 px per pixel smalare skärm och passerar noll kring 1116 px; vid 1020 px täckte skylten faktiskt sökfältet med 34 x 38 px. 1200 px ger 28 px marginal. Dessutom ryms rubrik + ingress + skylt inte på en rad under ~900 px, och då hade lyftet dragit upp skylten över ingressen. Under tröskeln ligger skylten kvar i flödet utan lyft: större mellanrum, men ingenting täcks. */ @media (min-width: 1200px) { .tz-avgraknare-skylt { margin-top: -86px; } } /* --- Mobil --------------------------------------------------------------- */ @media (max-width: 782px) { /* I dokumentflödet, ingen överlappning. Skylten står kvar mellan rubrikblocket och karusellen — samma plats i DOM:en som på desktop, bara utan absolutpositionering. */ .tz-avgraknare-skylt { display: inline-flex; margin: 0.25rem 0 1.1rem; } /* Bara innerkanten stramas åt. Ingen margin-inline här: bandet ska följa kolumnens kant som allt annat i flödet, inte dras in en extra gång. */ .tz-avgraknare { padding-inline: var(--tz-gutter-m, 1.25rem); } .tz-avgraknare__text { /* Två meningar på smal skärm blir fyra rader. Den andra meningen bär säljbudskapet och får stå kvar; det är ingressen som kortas genom att max-bredden släpps, inte innehållet. */ max-width: none; } } /* --- Utskrift och reducerad rörelse -------------------------------------- */ /* Ytan innehåller ingen rörelse att reducera, men färgplattan är onödig på papper. */ @media print { .tz-avgraknare { background: none; padding: 0; } }