/* ProTruck — pt-indgange.css Kort-indgange (builder/pt-indgange + pt-indgange_item): ét element med én indholdsliste i stedet for parret Gitter (fra 960 px) + Panel Slider (under 960 px). Indlæses betinget i — lige efter custom.css — af inc/pt-assets.php, når layoutet indeholder elementet pt-indgange (markør "type":"pt-indgange"). Cache-bustes via filemtime (ingen manuel versions-bump). */ /* ============================================================= ProTruck Indgange (pt-indgange) Fra 960 px styres layoutet alene af UIkit-klasserne i markup'en (uk-grid, uk-child-width-1-N@m, uk-grid-row-large, uk-grid-match, evt. uk-grid-divider) → ser ud som den nuværende Gitter. Under 960 px bliver listen en native swipe-række (scroll-snap) med prikker fra js/pt-indgange.js. Swipe-teknikken er lånt fra pt-grid (custom.css §6) som opskrift — ikke delt kode. ============================================================= */ /* ── Klikflade (alle bredder) ── Ét link pr. kort (titlen — eller billedet, når kortet ingen titel har). Linkets ::after spændes ud over hele kortet (.uk-panel = position:relative), så hele kortet er klikbart. */ .pt-indgange__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Fokusringen tegnes på klikfladen (hele kortet) i stedet for om teksten — indad, så swipe-rækkens overflow ikke klipper den. */ .pt-indgange__link:focus-visible { outline: none; } .pt-indgange__link:focus-visible::after { outline: 2px solid var(--protruck-red, #bf0921); outline-offset: -2px; } /* ── Swipe-række (under 960 px) ── Kortbredden regnes ud fra min(antal kort, synlige kort): få kort deler bredden → intet overflow og ingen prikker. --pt-ig-count sættes inline af templaten (antal kort, der faktisk rendres). UIkit-gutter, rækkemargin og skillelinjer nulstilles her; !important slår uk-child-width-* og gutteren. */ @media (max-width: 959.98px) { .pt-indgange { --pt-ig-gap: 14px; --pt-ig-visible: 1.2; } .pt-indgange .pt-indgange__list { display: flex; flex-wrap: nowrap; gap: var(--pt-ig-gap); margin-left: 0; /* nulstil UIkit-grid'ets negative gutter-margin */ overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; /* Firefox: skjul scrollbar */ } .pt-indgange .pt-indgange__list::-webkit-scrollbar { display: none; } .pt-indgange .pt-indgange__list > * { --pt-ig-n: min(var(--pt-ig-count, 1), var(--pt-ig-visible)); flex: 0 0 calc((100% - (var(--pt-ig-n) - 1) * var(--pt-ig-gap)) / var(--pt-ig-n)) !important; max-width: none !important; margin-top: 0 !important; /* aldrig uk-grid-margin i én række */ padding-left: 0 !important; /* UIkit-gutter (vi bruger gap) */ scroll-snap-align: start; } .pt-indgange .pt-indgange__list > *::before { display: none; /* uk-grid-divider-streger */ } } @media (min-width: 640px) and (max-width: 959.98px) { .pt-indgange { --pt-ig-gap: 20px; --pt-ig-visible: 2.2; } } /* ── Prikker (bygges af js/pt-indgange.js lige efter listen) ── Én prik pr. snap-position. Trykfladen er 24×24 px (WCAG 2.2, 2.5.8) med en prik på 8 px; den aktive (aria-current) er brand-rød. Inaktiv grå har 3:1 mod hvid (WCAG 1.4.11). */ .pt-indgange__dots { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 8px; } .pt-indgange__dot { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent; } .pt-indgange__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8c8c8c; transition: background-color .2s ease, transform .2s ease; } .pt-indgange__dot:hover::before { background: #555; } .pt-indgange__dot[aria-current="true"]::before { background: var(--protruck-red, #bf0921); transform: scale(1.25); } .pt-indgange__dot:focus-visible { outline: 2px solid var(--protruck-red, #bf0921); outline-offset: -2px; } /* Fra 960 px er listen et grid igen (JS fjerner også prikkerne). */ @media (min-width: 960px) { .pt-indgange__dots { display: none; } } /* ── Reduceret bevægelse: ingen smooth scroll, zoom eller overgange ── (js/pt-indgange.js scroller også med behavior 'auto'.) Hover-logoet skifter stadig, bare uden animation. */ @media (prefers-reduced-motion: reduce) { .pt-indgange .pt-indgange__list { scroll-behavior: auto; } .pt-indgange .pt-indgange__image, .pt-indgange .pt-indgange__logo { transform: none; transition: none; } .pt-indgange__dot::before { transition: none; } }