/* ========================================================================== Just Name IT theme: news list, cards, article and share links (F-0009) -------------------------------------------------------------------------- Loaded by the four news blocks when they render (block.json "style"), so pages without them never load it. Ported from design/system/components.css (card, quote) and, where the design system has no rule, from proposal C's styles.css (page head, filter, news list, pagination, article, share), on the alias variables of tokens-alias.css. The general classes the news markup also uses (.container, .section, .section-head, .link-arrow, .link-back, .label, .meta) are in sections.css, which loads on every page (moved there by F-0011, F-0009 review N7). Colours follow the design system where it and proposal C differ: card titles and quotes are brand blue, the placeholder and the quote mark are the official symbol, large headings are Inter Regular. Every transition is inside the Motion block at the end (F-0005 AC6). ========================================================================== */ /* ---------- Page frame ---------- */ /* The news templates use a flow
; the blocks bring their own containers and spacing, so main has none of its own. */ .wp-site-blocks > .site-main.site-main--news { padding-block: 0; } .site-main--news > * { margin-block: 0; } /* ---------- News cards block ---------- */ .news-cards__more { margin: var(--space-60) 0 0; } /* ---------- News card ---------- */ /* minmax(0, 1fr) below 48em too: an auto column grows to its longest word, so with text spacing (WCAG 1.4.12) a card title pushed the page sideways at 320 px (F-0018). Same look at normal spacing. */ .card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-70) var(--space-50); list-style: none; margin: 0; padding: 0; } @media (min-width: 48em) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64em) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .card { position: relative; display: flex; flex-direction: column; gap: var(--space-30); margin: 0; } /* DOM order: title, meta, excerpt, the optional more text (`card__more`, F-0014), media (heading first for screen readers). A job card on Jobba hos oss has no type label, and no meta line without a last day. Visual order: media, meta, title, excerpt, more text. */ .card .meta { order: -1; } .card__media { order: -2; aspect-ratio: var(--ratio-card); overflow: hidden; border-radius: var(--radius-leaf); /* Branded placeholder (AC6): the official symbol on the surface tint. It also shows while an image loads. */ background: var(--color-surface) url("../images/symbol-blue.svg") no-repeat center / 2.25rem auto; } .card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .card .card__title { margin: 0; font-size: var(--fs-large); font-weight: var(--font-weight-semibold); letter-spacing: -0.015em; line-height: var(--line-height-heading); /* No automatic hyphenation in headings (shell.css, Director 2026-10-01). */ overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; } .card__title a { color: var(--color-primary); text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px; } /* The title link covers the whole card: one link, one tab stop (AC1). z-index keeps it above the image, which the hover zoom (a transform) would otherwise paint on top, so a click on the image would miss the link. */ .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .card:hover .card__title a { color: var(--color-primary-strong); background-size: 100% 2px; } .card:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: 6px; border-radius: var(--radius-s); } .card a:focus-visible { outline: none; } .card__excerpt { margin: 0; color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Job cards (F-0014): "Läs annonsen" is a visual link text (aria-hidden); the title link already covers the card. */ .card__more { margin: 0; font-weight: var(--font-weight-semibold); color: var(--color-primary); } /* The second `content` (with an empty alt text) is deliberate: it keeps the arrow out of the accessible name. */ .card__more::after { content: "→"; content: "→" / ""; display: inline-block; margin-left: 0.3em; } .card:hover .card__more { color: var(--color-primary-strong); text-decoration: underline; text-decoration-thickness: 2px; } /* The news list: cards in rows (proposal C). */ .news-list { list-style: none; margin: 0; padding: 0; } .news-list > li { border-top: 1px solid var(--color-border); padding-block: var(--space-60); } .news-list > li:first-child { border-top: 0; padding-top: var(--space-50); } .news-list > li:last-child { border-bottom: 1px solid var(--color-border); } @media (min-width: 48em) { .card--row { display: grid; grid-template-columns: 16rem 1fr; grid-template-rows: auto auto 1fr; column-gap: var(--space-60); row-gap: var(--space-30); align-content: start; } .card--row .card__media { grid-row: 1 / span 3; grid-column: 1; } /* A job card has a more text, and a meta line only when it has a last day. Without one, the excerpt row takes the free space, so "Läs annonsen" stays at the bottom of the card, as on a card with a last day. */ .card--row:has(.card__more):has(.meta) .card__media { grid-row: 1 / span 4; } .card--row:has(.card__more):not(:has(.meta)) { grid-template-rows: auto 1fr auto; } .card--row > :not(.card__media) { grid-column: 2; } /* A large heading: Inter Regular (design system rule 4). */ .card--row .card__title { font-size: var(--fs-x-large); font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-heading); } } @media (min-width: 64em) { .card--row { grid-template-columns: 20rem 1fr; } } /* ---------- List page: head, filter, empty state, pagination ---------- */ /* The page head (theme.md, Composition rules, The page head; F-0051 C1, C2): the H1 and the intro are --space-50 apart, as on every page head. The head's last element has no bottom margin, so a type view without an intro ends at the head's padding too, never with a margin added. After the head comes the boundary of a section page's page head (Erbjudande): --space-70 under the head and --space-70 above the filter row, 96 px (also from 48em: Nyheter's motif reserves no height, F-0059, sections.css) (the Director, 2026-10-04: "Godkänn, men större luft på Nyheter"). */ .page-head { padding-block: var(--space-70); } .page-head h1 { margin: 0 0 var(--space-50); font-size: var(--fs-display); letter-spacing: var(--letter-spacing-display); line-height: var(--line-height-display); overflow-wrap: break-word; } /* The intro is ink, as on every page head (F-0058 AC4, theme.md *The page head*). */ .page-head__intro { max-width: 44ch; margin: 0; font-size: var(--fs-medium); color: var(--color-contrast); } .page-head > :last-child { margin-block-end: 0; } .page-body { padding-block: var(--space-70) var(--space-90); } .filters { margin-bottom: var(--space-50); } .filters ul { display: flex; flex-wrap: wrap; gap: var(--space-10) var(--space-50); list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--color-border); } .filters a { display: block; padding: var(--space-30) 0; margin-bottom: -1px; color: var(--color-muted); text-decoration: none; border-bottom: 3px solid transparent; } .filters a:hover { color: var(--color-contrast); border-bottom-color: var(--color-border-strong); } .filters a[aria-current] { color: var(--color-contrast); font-weight: var(--font-weight-semibold); border-bottom-color: var(--color-primary); } .news-empty { padding-block: var(--space-60) var(--space-40); font-size: var(--fs-medium); } .news-empty p { margin: 0 0 var(--space-40); } .pagination { margin-top: var(--space-70); } .pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-20); list-style: none; margin: 0; padding: 0; } .pagination a, .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--space-30); border-radius: var(--radius-m); font-weight: var(--font-weight-semibold); text-decoration: none; } .pagination a { color: var(--color-primary); } .pagination a:hover { background: var(--color-primary-soft); color: var(--color-primary); } .pagination [aria-current] { background: var(--color-contrast); color: var(--color-base); } .pagination .dots { min-width: 0; padding: 0; color: var(--color-muted); } .pagination__next { margin-left: auto; } .pagination__next a::after { content: "→"; content: "→" / ""; display: inline-block; margin-left: 0.3em; } .pagination__prev a::before { content: "←"; content: "←" / ""; display: inline-block; margin-right: 0.3em; } /* ---------- Article ---------- */ /* One column for the whole article (F-0046): back link, meta, title, ingress, image, body and share links share this width and left edge. On a news item page from 64em the column is the left column of .news-single, with "Fler nyheter" on the right (F-0052, below); on Om oss the same, with the facts and the closing on the right (F-0012). */ .article { width: min(100% - 2 * var(--gutter), var(--article-width)); margin-inline: auto; } .article__head { padding-block: var(--space-60); } .article__head .link-back { display: inline-block; margin-bottom: var(--space-60); font-size: var(--fs-small); } /* "Redigera" for logged-in editors only (F-0021 AC6). */ .article__edit { margin: var(--space-30) 0 0; font-size: var(--fs-small); } .article__edit a { font-weight: var(--font-weight-semibold); } .article .article__title { margin-block: var(--space-40) var(--space-50); font-size: var(--fs-xx-large); /* Normal line breaking: balance would stop the first line of a two-line title halfway across the column (AC8). Other headings keep balance. */ text-wrap: wrap; /* No automatic hyphenation (Director, 2026-10-01; shell.css): a word longer than the line breaks anywhere instead. */ overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; } .article__ingress { margin: 0 0 var(--space-50); font-size: var(--fs-large); font-weight: var(--font-weight-regular); letter-spacing: -0.015em; line-height: 1.45; color: var(--color-contrast); } .article__byline { margin: 0 0 var(--space-50); font-size: var(--fs-small); font-weight: var(--font-weight-semibold); color: var(--color-muted); } .article__notice { margin: 0 0 var(--space-40); padding: var(--space-30) var(--space-50); border-left: 3px solid var(--color-primary); background: var(--color-primary-soft); color: var(--color-contrast); font-weight: var(--font-weight-semibold); } .article__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-30) var(--space-60); margin: 0 0 var(--space-50); padding-block: var(--space-40); border-block: 1px solid var(--color-border); } .article__facts dt { font-size: var(--fs-small); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--color-muted); } .article__facts dd { margin: 0; font-size: var(--fs-medium); color: var(--color-contrast); } .article__figure { width: 100%; margin: 0 0 var(--space-70); } /* The image at column width in its own aspect ratio (F-0046), with no panel around it; the news featured image uses the 16:9 rule below (2026-10-01). The width and height attributes reserve the space while it loads; the surface tint shows only then and behind transparent parts. */ .article__media { overflow: hidden; border-radius: var(--radius-leaf-l); background: var(--color-surface); } .article__media img { display: block; width: 100%; height: auto; } /* The news featured image in 16:9 like the cards (Director 2026-10-01: "Syftet med bilderna var väl att vi skulle köra 16:9 konsekvent både i listan och i nyheten"; replaces F-0046's uncropped image for news). A 16:9 image fits exactly; another is cropped around its focal point (inline object-position) or, without one, at centre 30 % like the card. Scoped to the news figure, so other pages with article styles (Om oss) keep their own shapes. */ .article__figure--news .article__media { aspect-ratio: var(--ratio-card); } /* The same default position as .card__media img: the card and the article crop alike. */ .article__figure--news .article__media img { height: 100%; object-fit: cover; object-position: center 30%; } .article__main { padding-bottom: var(--space-80); } .article__body { font-size: var(--fs-medium); line-height: 1.7; overflow-wrap: break-word; } .article__body > * { max-width: none; margin-block: 0 var(--space-50); } .article__body h2 { margin-block: var(--space-70) var(--space-40); font-size: var(--fs-x-large); } .article__body h3 { margin-block: var(--space-60) var(--space-30); font-size: var(--fs-large); } .article__body :is(ul, ol) { padding-left: 1.25em; } .article__body li + li { margin-top: var(--space-20); } .article__body .wp-block-image img { height: auto; max-width: 100%; border-radius: var(--radius-m); } .article__body figcaption { margin-top: var(--space-20); font-size: var(--fs-small); color: var(--color-muted); } /* Quote: the official symbol is a closing quotation mark, so it is the quote mark. Quote text is Inter Regular in brand blue. */ /* minmax(0, 1fr) and no inline margin (the browser gives a blockquote 40 px each side): a long word in the large quote text must never push the article wider than a narrow phone (F-0046 QA, AC3). */ .article__body .wp-block-quote { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-50); margin-block: var(--space-70); margin-inline: 0; padding: var(--space-50) 0 0; border: 0; border-top: 1px solid var(--color-primary); } .article__body .wp-block-quote::before { content: ""; grid-row: 1 / span 10; width: 2rem; aspect-ratio: 652.64 / 707.97; margin-top: 0.3em; background: url("../images/symbol-blue.svg") no-repeat center / contain; } .article__body .wp-block-quote > * { grid-column: 2; } .article__body .wp-block-quote p { margin: 0 0 var(--space-40); font-size: var(--fs-x-large); line-height: 1.25; letter-spacing: -0.015em; color: var(--color-primary); overflow-wrap: anywhere; } /* The signature after the quote: small, muted and right-aligned (Director 2026-10-01, on the mock-up: "signatur efter bör vara högerställd"). */ .article__body .wp-block-quote cite { display: block; font-size: var(--fs-small); font-style: normal; color: var(--color-muted); text-align: right; } /* A quote's lead: small, muted text before the quote text, inside the quote, left-aligned (Director 2026-10-01: "i citat vill jag ha möjligheten att lägga till liten text före eller efter inbakad ... före och mindre text"; the mock-up build/qa/mock-2col/citat-1440.png). */ .article__body .wp-block-quote p.quote__lead { margin: 0 0 var(--space-30); font-size: var(--fs-small); font-weight: var(--font-weight-regular); line-height: 1.5; letter-spacing: normal; color: var(--color-muted); } /* Narrow screens only: hyphenate the large quote text so long words break at a syllable. Wide screens have room and do not hyphenate (names stay whole); overflow-wrap above stays the safety net at every width. */ @media (max-width: 63.99em) { .article__body .wp-block-quote p { -webkit-hyphens: auto; hyphens: auto; } } /* Wide screens: the mark hangs in the margin, so the quote text lines up with the body text (proposal C) and ends at the column's right edge. */ @media (min-width: 64em) { .article__body .wp-block-quote { max-width: calc(100% + 2rem + var(--space-50)); margin-left: calc(-1 * (2rem + var(--space-50))); margin-right: 0; } } /* Buttons in a news body (the post allow-list has core/buttons). */ .article__body .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-30); } .article__body .wp-block-button__link { display: inline-flex; align-items: center; min-height: 3rem; padding: var(--space-30) var(--space-50); border: 2px solid var(--color-primary); border-radius: var(--radius-m); background: var(--color-primary); color: var(--color-base); font-size: var(--fs-base); font-weight: var(--font-weight-semibold); line-height: 1.2; text-decoration: none; } .article__body .wp-block-button__link:hover { background: var(--color-primary-strong); border-color: var(--color-primary-strong); color: var(--color-base); } /* ---------- News item page: article and "Fler nyheter" (F-0052) ---------- */ /* templates/single.html wraps the article and "Fler nyheter" in .news-single. Below 64em it is a plain flow: the article's own column (above) and the full-width surface band after it. From 64em (--breakpoint-lg) it is two columns in the container, aligned with the header: the article left, "Fler nyheter" right (340 px), without the band. Om oss (F-0012) puts an