/* ProTruck — pt-aktuelt.css Forsidens »Aktuelt + direkte til« (builder/pt-aktuelt) — tidl. §11. Flyttet fra css/custom.css (runde 5d); sektionsnummer og indhold er bevaret. Indlæses betinget i — lige efter custom.css — af inc/pt-assets.php, når layoutet indeholder elementet pt-aktuelt (markør "type":"pt-aktuelt"). Cache-bustes via filemtime (ingen manuel versions-bump). */ /* ============================================================= 11. Aktuelt + direkte til — forside (builder/pt-aktuelt) Redesign 2026 (handoff »forslag 1b«): featured nyhedskort + to små nyhedsrækker (7/12) · mørkt »Direkte til«-panel (5/12) · mærkebånd (Kalmar/Cat) i fuld bredde under. Elementet placeres i en Section med Style=Muted (#f7f7f7-bånd + 1200px-container kommer derfra). Kortsproget matcher nyhedsgriddet (css/nyheder-grid.css): hvid flade, radius 10, samme skygger/pile/easing. Bevidst radius 10 / 6 — IKKE marketing-sitets 0px-kort. ============================================================= */ /* ── Sektionshoved ─────────────────────────────────────────── */ .pt-aktuelt__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 36px; } .pt-aktuelt__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--protruck-red, #bf0921); margin-bottom: 12px; } .pt-aktuelt__title { font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--protruck-text, #212121); margin: 0; } .pt-aktuelt__intro { font-size: 16px; line-height: 1.6; color: #55595f; max-width: 60ch; margin: 12px 0 0; } /* Ghost-knappen er temaets .uk-button-secondary (wash-hover fra theme.css). */ .pt-aktuelt__cta { flex: 0 0 auto; white-space: nowrap; } /* ── Hovedgrid ─────────────────────────────────────────────── */ .pt-aktuelt__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: stretch; } /* Ingen nyhedskort (0 pladser) → panelet får hele bredden */ .pt-aktuelt__grid--panel-only { grid-template-columns: 1fr; } /* Tastaturfokus på kort/panel-links (ellers kun browser-default) */ .pt-aktuelt__featured:focus-visible, .pt-aktuelt__mini:focus-visible, .pt-aktuelt__panel-row:focus-visible, .pt-aktuelt__brand:focus-visible, .pt-aktuelt__cta:focus-visible { outline: 2px solid var(--protruck-red, #bf0921); outline-offset: 2px; } .pt-aktuelt__col-news { display: flex; flex-direction: column; gap: 24px; } /* ── Nyhedskort (featured + minis) — samme sprog som .nyhedskort ── */ .pt-aktuelt__featured, .pt-aktuelt__mini { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); color: inherit; text-decoration: none; transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1); } .pt-aktuelt__featured:hover, .pt-aktuelt__mini:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, .10); } /* Slå temaets a:hover-underline fra (hele kortet er ét link). */ .pt-aktuelt__featured:hover, .pt-aktuelt__mini:hover, .pt-aktuelt__panel-row:hover, a.pt-aktuelt__brand:hover { text-decoration: none; color: inherit; } /* Automatisk kontrast-tilpasning: står elementet på HVID baggrund (Style=Default ELLER ingen sektions-stil) bliver kasserne brand-lysegrå — både nyhedskortene og »Direkte til«-panelet (der skifter til lys udgave med mørk tekst). På gråt bånd (Style=Muted) gælder handoff-designet: hvide kort + mørkt panel. Ingen felter/indstillinger — følger sektionen. */ .uk-section:not(.uk-section-muted):not(.uk-section-secondary):not(.uk-section-primary) .pt-aktuelt__featured, .uk-section:not(.uk-section-muted):not(.uk-section-secondary):not(.uk-section-primary) .pt-aktuelt__mini { background: var(--protruck-gray, #f3f3f3); } .uk-section:not(.uk-section-muted):not(.uk-section-secondary):not(.uk-section-primary) .pt-aktuelt__panel { background: var(--protruck-gray, #f3f3f3); } .uk-section:not(.uk-section-muted):not(.uk-section-secondary):not(.uk-section-primary) .pt-aktuelt__panel-label { color: #7f7f7f; } .uk-section:not(.uk-section-muted):not(.uk-section-secondary):not(.uk-section-primary) .pt-aktuelt__panel-row { border-bottom-color: #e0e4e8; } .uk-section:not(.uk-section-muted):not(.uk-section-secondary):not(.uk-section-primary) .pt-aktuelt__panel-row::before { background: var(--protruck-red, #bf0921); } .uk-section:not(.uk-section-muted):not(.uk-section-secondary):not(.uk-section-primary) .pt-aktuelt__panel-num { color: var(--protruck-red, #bf0921); } .uk-section:not(.uk-section-muted):not(.uk-section-secondary):not(.uk-section-primary) .pt-aktuelt__panel-title { color: var(--protruck-text, #212121); } .uk-section:not(.uk-section-muted):not(.uk-section-secondary):not(.uk-section-primary) .pt-aktuelt__panel-arrow { color: rgba(33, 33, 33, .4); } .uk-section:not(.uk-section-muted):not(.uk-section-secondary):not(.uk-section-primary) .pt-aktuelt__panel-row:hover .pt-aktuelt__panel-arrow { color: var(--protruck-red, #bf0921); } .pt-aktuelt__featured { display: block; } .pt-aktuelt__featured-media { aspect-ratio: 16 / 7.2; overflow: hidden; background: #eceff1; } /* Redaktør-valgt billede renderes af YOOtheme som — picture skal selv fylde boksen, ellers refererer img's height:100% til picture'ns auto-højde og billedet fylder ikke 16/7.2-rammen. */ .pt-aktuelt__featured-media > picture { display: block; width: 100%; height: 100%; } .pt-aktuelt__featured-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4, 0, .2, 1); } .pt-aktuelt__featured:hover .pt-aktuelt__featured-img { transform: scale(1.04); } .pt-aktuelt__featured-body { padding: 26px; } /* Indholdstype-label ("Nyheder" / "Kundecase" …) — ingen datoer (bruger-valg). */ .pt-aktuelt__label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--protruck-red, #bf0921); margin-bottom: 12px; } .pt-aktuelt__featured-title { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--protruck-text, #212121); margin: 0 0 10px; } .pt-aktuelt__excerpt { font-size: 14.5px; line-height: 1.6; color: #555; margin: 0 0 20px; } .pt-aktuelt__more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--protruck-red, #bf0921); white-space: nowrap; } .pt-aktuelt__more-arrow { transition: transform .25s ease; } .pt-aktuelt__featured:hover .pt-aktuelt__more-arrow { transform: translateX(4px); } /* ── To små nyhedsrækker ───────────────────────────────────── */ .pt-aktuelt__minis { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .pt-aktuelt__mini { display: flex; gap: 16px; align-items: center; padding: 18px; } .pt-aktuelt__mini-img { flex: 0 0 auto; width: 110px; height: 78px; object-fit: cover; border-radius: 6px; background: #eceff1; } .pt-aktuelt__mini-body { min-width: 0; } .pt-aktuelt__mini .pt-aktuelt__label { font-size: 11.5px; margin-bottom: 6px; } .pt-aktuelt__mini-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--protruck-text, #212121); } /* ── »Direkte til«-panel ───────────────────────────────────── */ .pt-aktuelt__panel { display: flex; flex-direction: column; background: #181d22; border-radius: 10px; padding: 30px 28px 14px; } .pt-aktuelt__panel-label { font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 8px; } .pt-aktuelt__panel-row { position: relative; flex: 1; display: flex; align-items: center; gap: 16px; padding: 17px 2px; border-bottom: 1px solid rgba(255, 255, 255, .12); text-decoration: none; transition: padding-left .25s cubic-bezier(.4, 0, .2, 1); } .pt-aktuelt__panel-row:last-child { border-bottom: none; } /* Hover = rød markørstreg glider ind ved venstre kant + rækken skubber sig let ind (samme "aktiv"-sprog som kontaktsidens afdelings-tabs). Ingen baggrunds-wash — den lignede en plade på det lyse panel. */ .pt-aktuelt__panel-row::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 24px; background: #c81930; transform: translateY(-50%) scaleY(0); transition: transform .25s cubic-bezier(.4, 0, .2, 1); } .pt-aktuelt__panel-row:hover { padding-left: 13px; } .pt-aktuelt__panel-row:hover::before { transform: translateY(-50%) scaleY(1); } .pt-aktuelt__panel-num { flex: 0 0 auto; width: 22px; font-size: 13px; font-weight: 800; color: #c81930; /* lys rød — læsbar på mørk flade */ font-feature-settings: "lnum"; } .pt-aktuelt__panel-title { flex: 1; font-size: 16px; font-weight: 700; color: #fff; } .pt-aktuelt__panel-arrow { display: flex; color: rgba(255, 255, 255, .45); transition: transform .25s ease, color .25s ease; } .pt-aktuelt__panel-row:hover .pt-aktuelt__panel-arrow { color: #c81930; transform: translateX(4px); } /* ── Mærkebånd (Kalmar + Cat® Lift Trucks) ─────────────────── */ .pt-aktuelt__brands { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; } .pt-aktuelt__brand { position: relative; display: block; height: 180px; border-radius: 10px; overflow: hidden; background: #181d22; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); text-decoration: none; transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1); } .pt-aktuelt__brand:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, .10); } .pt-aktuelt__brand-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pt-aktuelt__brand-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 29, 34, .05) 0%, rgba(24, 29, 34, .84) 100%); } .pt-aktuelt__brand-content { position: absolute; left: 26px; right: 26px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; } .pt-aktuelt__brand-label { display: inline-block; background: var(--protruck-red, #bf0921); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: 5px 10px; white-space: nowrap; } .pt-aktuelt__brand-title { font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; } /* ── Responsivt (breakpoints som nyheder-grid.css) ─────────── */ @media (max-width: 959px) { .pt-aktuelt__grid, .pt-aktuelt__brands { grid-template-columns: 1fr; } } @media (max-width: 640px) { .pt-aktuelt__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px; } .pt-aktuelt__minis { grid-template-columns: 1fr; } .pt-aktuelt__panel { padding: 24px 24px 10px; } .pt-aktuelt__featured-body { padding: 20px; } } /* ── Reduceret bevægelse ───────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .pt-aktuelt__featured, .pt-aktuelt__mini, .pt-aktuelt__brand, .pt-aktuelt__featured-img, .pt-aktuelt__more-arrow, .pt-aktuelt__panel-row, .pt-aktuelt__panel-row::before, .pt-aktuelt__panel-arrow { transition: none; } .pt-aktuelt__featured:hover .pt-aktuelt__featured-img, .pt-aktuelt__featured:hover .pt-aktuelt__more-arrow, .pt-aktuelt__panel-row:hover .pt-aktuelt__panel-arrow { transform: none; } /* Uden bevægelse: ingen indryknings-glid og ingen markørstreg — pilens farveskift (øjeblikkeligt) er hover-feedback nok. */ .pt-aktuelt__panel-row:hover { padding-left: 2px; } .pt-aktuelt__panel-row::before { display: none; } }