/* Prose-column layout for the generated landing pages (web/no/*, web/en/*). Loaded AFTER styles.css + motion.css, which those pages now pull in directly — this file holds only what the app has no equivalent of, and overrides the two app rules that a public prose page must not inherit. ⚠️ It used to be a standalone copy of the design system, and that is the whole reason these pages looked foreign until 2026-08-22: --brand was #2f6df4 (blue on a red-branded product), the type fell back to the system UI font because the family was named but no @font-face was ever declared, the ground was flat #fff with none of the ambient light, the header was two links instead of the topbar and the footer one line instead of four columns. Every one of those was a copy that stopped matching. Do not re-add tokens, fonts, buttons or chrome here — change styles.css and both halves of the site move. */ /* --- overrides of app rules that must not reach a public prose page --------- */ /* styles.css sets `user-select: none` on to make casual copying of the question bank awkward. That reasoning does not extend here: these pages exist to BE quoted, and a visitor who cannot select an address or a rule is just being obstructed. Re-enabled for the article only — the chrome above and below it keeps the app's behaviour. */ .seo-main, .seo-main * { -webkit-user-select: text; user-select: text; } /* --- the prose column ------------------------------------------------------- */ /* Outer rail = the app's .view exactly (--page-w, same padding), because the edge decoration canvases are 30vw PER SIDE and therefore pass behind the content column at any realistic width. In the app that is invisible: every page puts its content on opaque .card surfaces, so a drifting shape never ends up behind a letter. A bare transparent prose column is a pattern the app does not have, and it showed — shapes crossed the h1 and the body copy. So the article sits on a surface too. */ .seo-main { flex: 1; width: 100%; max-width: var(--page-w); margin: 0 auto; padding: 1.75rem 1.25rem 3.5rem; overflow-x: clip; position: relative; z-index: 1; } /* 48rem minus the padding leaves ~42rem of text: about 75 characters at this size, which is the measure long-form reading wants. The app has no counterpart to inherit — its widest text block is a question stem on a card. */ /* The article is OPEN GLASS (owner, 2026-09-19) — `--glass-open` in styles.css, the same surface the legal pages and the exam intro use (`.card.is-glass`), so the edge shapes show through as soft colour and the blur keeps the text readable. No --surface-lift here — its 90 % white top wash would paint the upper half of the card solid. */ .seo-main article { max-width: 48rem; margin: 0 auto; background: var(--glass-open); -webkit-backdrop-filter: var(--glass-open-blur); backdrop-filter: var(--glass-open-blur); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: var(--r-2xl); box-shadow: var(--hairline), var(--shadow); padding: clamp(1.5rem, 4vw, 3rem); } /* Breadcrumbs are `.crumbs` in styles.css, shared with the app — not a copy here. That is this file's whole rule: chrome lives in the design system, and both halves of the site move together. Only the spacing to the h1 below it is specific to the prose column. */ .seo-main article > .crumbs { margin-bottom: 1rem; } /* ⚠️ The trail is navigation, not prose, so it must opt OUT of the brand-coloured prose link below — and it needs this much selector to do it: `.seo-main article a` is specificity 0-1-2 and beats `.crumbs a`'s 0-1-1, so without this the crumbs render in brand red on these pages while the identical markup is muted in the app. Caught in the browser, not by any checker: both stylesheets were individually correct. */ .seo-main article .crumbs a { color: var(--muted); } .seo-main article .crumbs a:hover { color: var(--text); } .seo-main h1 { font-size: var(--fs-display); margin-bottom: .8rem; } .seo-main h2 { font-size: var(--fs-h2); margin: 2.4rem 0 .6rem; } .seo-lead { font-size: var(--fs-lead); color: var(--muted); margin: 0 0 1.6rem; } .seo-main p { margin: 0 0 1rem; } .seo-actions { margin: 0 0 1rem; } /* Links inside the prose only. The app leaves at `color: inherit` because its links are all buttons, tabs or cards; a paragraph link has to look like one. */ .seo-main article a { color: var(--brand-on-white); } /* --- FAQ, sibling links ------------------------------------------------------ */ .seo-faq details { background-color: var(--surface); background-image: var(--surface-lift); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--hairline), var(--e1); padding: .9rem 1.1rem; margin-bottom: .7rem; } .seo-faq summary { font-weight: 700; cursor: pointer; } .seo-faq details p { margin: .7rem 0 0; color: var(--muted); } .seo-links ul { padding-left: 1.2rem; margin: 0; } .seo-links li { margin-bottom: .35rem; } /* --- generated families: sign groups and city directories ------------------- Both are lists of many small items inside the 44rem prose column, so they get grid/flow rules rather than the bullet list .seo-links uses. */ /* Named sign examples: face beside name + meaning. */ .seo-examples { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; } .seo-examples li { display: flex; gap: .9rem; align-items: flex-start; background-color: var(--surface); background-image: var(--surface-lift); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--hairline), var(--e1); padding: .85rem 1rem; } .seo-examples img { /* A traffic sign must read as itself in both themes. Several groups are white-ground with a coloured ring, which would dissolve into the dark background — so every face keeps a light plate under it rather than inheriting the page ground. Never recolour or dim a sign face: the colour is part of its meaning. */ background: #fff; border-radius: 6px; padding: 3px; flex: none; width: 64px; height: 64px; object-fit: contain; } .seo-examples div { min-width: 0; } .seo-examples p { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; } /* The example's name is a link to the sign's own page, but it reads as a heading — so it keeps the text colour and shows its link nature on hover only. */ .seo-main article .seo-ex-name { color: inherit; text-decoration: none; } .seo-main article .seo-ex-name:hover b { text-decoration: underline; } .seo-code { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; } /* --- sign tiles: a group's signs, or a numbered series, one tile each ---------- Face, name, code, linking to the sign's own page. Used by the group pages and by the per-sign pages (where the sign being read is marked). The tile text is NOT a brand-red prose link — it is navigation, like the crumbs, and reads as text until hovered. */ .seo-tiles { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); } /* Face left, spanning two rows; name over code on the right. The code used to sit on the name's line, pushed right — and a one-word name ("Lengdegrense") had nowhere to go, so the two overprinted, while a long name wrapped one word per line beside it. */ .seo-main article .seo-tiles a { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .75rem; row-gap: .05rem; align-items: center; align-content: center; height: 100%; color: inherit; text-decoration: none; padding: .55rem .8rem .55rem .55rem; background-color: var(--surface); background-image: var(--surface-lift); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--hairline), var(--e1); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .seo-main article .seo-tiles a:hover { transform: translateY(-2px); border-color: var(--muted); box-shadow: var(--hairline), var(--e2); } .seo-tiles img { grid-row: 1 / span 2; width: 48px; height: 48px; background: #fff; border-radius: 6px; padding: 3px; object-fit: contain; } .seo-tile-name { grid-column: 2; font-weight: 650; font-size: .88rem; line-height: 1.25; text-wrap: balance; } .seo-tiles .seo-code { grid-column: 2; font-size: .76rem; } /* The sign whose page this is: brand ring, no hover lift — it is not somewhere to go. */ .seo-tiles li.is-current a, .seo-main article .seo-tiles li.is-current a:hover { transform: none; border-color: var(--brand); box-shadow: var(--hairline), 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent); } /* Driving-school directory: see .seo-schools below (2026-09-19). */ /* --- the municipality pages: the app's own width ---------------------------- A guide page is an essay, so it reads in a 48rem column. A municipality page is not: it is the same directory-plus-map that #/schools is, and it was the one part of the site whose content did not line up with the app it links into. So it runs on the full --page-w rail .view uses — same rail, same gutters, same card edge. Nothing here caps a paragraph. The width is used by the LAYOUT instead: the prose runs in two columns (.seo-split), so every line still has a readable measure while the page fills its rail. Capping the text inside a full-width card was the wrong half of that trade — it left a column of copy ending mid-card with white space beside it. */ .seo-main--wide article { max-width: none; } /* Two equal columns, top-aligned. Row one is the opening section + the map; row two is the sections that follow, side by side. Below 860px — the same breakpoint #/schools uses to stop putting a map next to a list — it is one column again. */ .seo-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 2.4rem; align-items: start; margin-top: 2.2rem; } /* .seo-main h2 carries a 2.4rem top margin for a heading that follows body copy; at the top of a grid cell it would push one column off the other's baseline. */ .seo-split > * > h2:first-child { margin-top: 0; } @media (max-width: 860px) { .seo-split { grid-template-columns: 1fr; } } .seo-main--wide .seo-links ul { columns: 3 15rem; column-gap: 1.6rem; } .seo-main--wide .seo-links li { break-inside: avoid; } /* --- the map --------------------------------------------------------------- The shell, the frame and the zoom hint are schools.css's (.schoolmap-shell / .schoolmap / .schoolzoomhint), loaded on these pages for exactly that reason — one map, one set of rules. Only the height differs: #/schools is a map page and gives it 72vh, while here it shares a row with the opening section and must not swallow the scroll — so it is tall enough to read a town in and no taller. */ /* --- generated families: theme pages and articles (2026-09-12) ---------------- Both reuse the app's own pieces — .statgrid/.stat wells, .card.tile, .chip, .chip-tag, .cta-band — so what is here is only the layout glue those pieces do not carry. */ /* Bullet lists inside a prose section. The app has no prose lists to inherit from. */ .seo-list { margin: 0 0 1rem; padding-left: 1.2rem; } .seo-list li { margin-bottom: .45rem; } /* An article's dateline, under the lead. Muted and small: a fact, not a heading. */ .seo-dateline { color: var(--muted); font-size: .85rem; margin: -1rem 0 1.6rem; } .seo-note { color: var(--muted); font-size: .85rem; margin: .6rem 0 0; } /* The theme page's aside: the one course diagram, its source line, then three stats. The figure is the course's own (.cs, course.css); only its outer margin is trimmed here because the aside already spaces its children. */ .seo-figure .cs { margin-bottom: .6rem; } .seo-figure-from { font-size: .9rem; margin: 0 0 1rem; } .seo-stats { margin-top: .4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 420px) { .seo-stats { grid-template-columns: 1fr 1fr; } } .seo-stats .stat-num { font-size: 1.7rem; } /* Chapter tiles: the app's .card.tile, two-up on the wide rail, one-up narrow. */ .seo-chapters { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); } .seo-chapters .tile { align-items: flex-start; height: 100%; } .seo-chapters .tile h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.02rem; margin: 0 0 .3rem; } .seo-chapters .tile p { font-size: .9rem; margin-bottom: .35rem; } .seo-chapters .tile small { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; } /* The closing band. .cta-band paints a white primary; the second, ghost button has to stay legible on the gradient, which .btn.ghost's default border and text do not. */ .seo-cta { margin-top: 2.4rem; } .seo-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 0; } .seo-cta .btn.ghost { color: #fff; border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.08); } .seo-cta .btn.ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; } /* Look-alike pairs: two faces, the word between them, then the one difference. Faces keep the light plate every sign on the site gets (see .seo-examples img). */ .seo-pairs { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); } .seo-pairs li { background-color: var(--surface); background-image: var(--surface-lift); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--hairline), var(--e1); padding: 1rem 1.1rem; } .seo-pair-faces { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: start; margin-bottom: .6rem; } .seo-pair-faces figure { margin: 0; text-align: center; } .seo-pair-faces img { background: #fff; border-radius: 6px; padding: 3px; width: 72px; height: 72px; object-fit: contain; } .seo-pair-faces figcaption { font-size: .85rem; margin-top: .3rem; line-height: 1.3; } .seo-pair-vs { align-self: center; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; } .seo-pairs p { margin: 0; font-size: .95rem; color: var(--muted); } /* The glossary: term / translation / one line, as rows. Three columns on the rail, and the two texts stack under the term once a column is narrower than ~30rem. */ .seo-terms { list-style: none; padding: 0; margin: 0 0 1rem; } .seo-terms li { display: grid; grid-template-columns: 11rem 12rem minmax(0, 1fr); gap: .2rem 1rem; padding: .55rem .1rem; border-bottom: 1px solid var(--border); align-items: baseline; } .seo-terms b { font-weight: 700; } .seo-terms small { color: var(--muted); font-size: .9rem; } .seo-terms-head { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; } .seo-terms-head b, .seo-terms-head small { font: inherit; color: inherit; } @media (max-width: 600px) { .seo-terms li { grid-template-columns: 1fr; gap: .1rem; } .seo-terms-head { display: none; } } /* --- generated family: one page per sign (2026-09-19) --------------------------- The face IS the content, so the page opens on it: a big plate beside the name and the meaning, then four facts as wells, then the signs it lives next to. Everything reuses the design system's surfaces; only the composition is new. */ .seo-sign-hero { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center; margin: .6rem 0 1.8rem; } /* The face stands on the card by itself — no plate. A plate was a raised box inside the raised article (bubble wrap, see the elevation note in styles.css), and at this size the sign's own fills carry it in both themes; the plate is for 48px tiles, not a 15rem face. */ .seo-sign-face { margin: 0; aspect-ratio: 1; display: grid; place-items: center; padding: 4%; } .seo-sign-face img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(16,24,40,.12)); } .seo-eyebrow { color: var(--muted); font-weight: 700; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; margin: 0 0 .55rem; } .seo-main .seo-sign-head h1 { margin-bottom: .7rem; letter-spacing: -.02em; } /* "Farlig sving" on one line, "til høyre" under it, smaller and quieter: the variant qualifies the name, it is not part of it (see signName() and the ARCHITECTURE note). */ .seo-sign-variant { display: block; font-size: .5em; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-top: .15rem; } /* The meaning is the page's substance, not its subtitle — full text colour, lead size. */ .seo-sign-head .seo-lead { color: var(--text); font-size: var(--fs-lead); max-width: 52ch; margin-bottom: 1.3rem; } .seo-sign-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; } @media (max-width: 640px) { .seo-sign-hero { grid-template-columns: 1fr; gap: 1rem; justify-items: start; } .seo-sign-face { width: min(52vw, 12rem); } } /* A sign page sits straight on the page ground — no article card (owner, 2026-09-19: a card around a bare face and a row of boxes was one box too many). Its blocks carry their own surfaces instead: fact cards, tiles, the band. ONLY this family — a prose page keeps the card, because a paragraph column with the edge shapes drifting behind it does not read. */ .seo-main--sign article { background: transparent; /* No blur either: a backdrop-filter on a transparent box still blurs everything behind its rectangle, which reads as a ghost of the card that was removed. */ -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none; padding: .6rem 0 0; } /* The fact panel: four cards. Label, value, then a quiet line of context. Real cards, not .stat wells — a well is drawn for the inside of a card, and these stand on the ground. */ .seo-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: .8rem; margin: 0 0 .4rem; } .seo-facts > div { background-color: var(--surface); background-image: var(--surface-lift); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; box-shadow: var(--hairline), var(--e1); } .seo-facts dt { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .35rem; } .seo-facts dd { margin: 0; font-weight: 650; line-height: 1.35; } .seo-facts dd small { display: block; font-weight: 500; color: var(--muted); font-size: .84rem; line-height: 1.45; margin-top: .35rem; } /* Three dots for the exam weight. Decorative: the label beside it says the same thing. */ .seo-meter { display: inline-flex; gap: .22rem; vertical-align: middle; margin-right: .5rem; position: relative; top: -1px; } .seo-meter i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--border); } .seo-meter i.on { background: var(--brand); } /* One look-alike pair, on its own row rather than in the article's multi-column grid. */ .seo-pairs--one { grid-template-columns: minmax(0, 1fr); max-width: 40rem; } .seo-main article .seo-pair-faces a { color: inherit; text-decoration: none; } .seo-main article .seo-pair-faces a:hover b { text-decoration: underline; } /* --- generated family: one page per municipality (redesigned 2026-09-19) -------------- A local-search landing page: the map is the hero image, the list is the answer, and the two are one thing — a pin carries the row's number, hovering either lights the other. Reuses schools.css for the map frame and Leaflet chrome; everything below is the page. */ .seo-city-hero { margin: .4rem 0 1.6rem; } .seo-main .seo-city-hero h1 { margin-bottom: .6rem; letter-spacing: -.02em; } .seo-city-hero .seo-lead { max-width: 62ch; } /* Four stats in a row: number first, what it counts under it, a quiet line of context. */ .seo-city-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .7rem; margin: 1.4rem 0 0; } .seo-city-stats > div { display: flex; flex-direction: column; background-color: var(--surface); background-image: var(--surface-lift); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .85rem 1rem .9rem; box-shadow: var(--hairline), var(--e1); } .seo-city-stats dt { order: 2; color: var(--muted); font-size: .78rem; font-weight: 650; } .seo-city-stats dd { order: 1; margin: 0; font-size: 1.9rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .seo-city-stats small { order: 3; color: var(--muted); font-size: .74rem; margin-top: .35rem; line-height: 1.4; } /* The map block. A taller frame than the old aside — this is the illustration of the page. */ .seo-city-map { margin: 0 0 .5rem; } .seo-map-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; } .seo-main .seo-map-bar h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.5rem); } .seo-map-bar .btn svg { width: 1.05rem; height: 1.05rem; } .seo-city-map .schoolmap { height: clamp(20rem, 46vh, 31rem); } .seo-map-note { color: var(--muted); font-size: .86rem; margin: .7rem 0 0; } .seo-map-note a { margin-left: .3rem; } /* A numbered pin: a teardrop from the brand ramp with the list's number upright inside. `.is-hot` is the hovered row's pin (and the hovered pin itself). */ .seo-pin { background: none; border: 0; } .seo-pin span { display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background-color: var(--grad-solid); background-image: var(--grad-ui); border: 2px solid var(--surface); box-shadow: var(--shadow); transition: transform var(--dur-quick) var(--ease-spring), box-shadow var(--dur-quick) var(--ease-out); } .seo-pin span b { transform: rotate(45deg); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: -.02em; } .seo-pin.is-hot span, .seo-pin:hover span { transform: rotate(-45deg) scale(1.15); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 22%, transparent), var(--shadow-lg); } /* The directory: numbered rows in two columns, grouped by postal town where the page is. */ .seo-dirblock { margin-top: 1.6rem; } .seo-area { display: flex; align-items: baseline; gap: .5rem; margin: 1.6rem 0 .5rem; font-size: 1.05rem; font-weight: 750; letter-spacing: -.01em; } .seo-area span { color: var(--muted); font-weight: 650; font-size: .85rem; font-variant-numeric: tabular-nums; } .seo-area:first-of-type { margin-top: .6rem; } .seo-schools { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: .45rem .9rem; } .seo-schools:empty { display: none; } .seo-schools li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; column-gap: .7rem; align-items: start; padding: .6rem .7rem .6rem .55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: var(--surface); background-image: var(--surface-lift); box-shadow: var(--hairline); transition: border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out); } .seo-schools li:hover, .seo-schools li.is-active { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); box-shadow: var(--hairline), var(--e2); transform: translateY(-1px); } .seo-row-n { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums; transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); } .seo-schools li:hover .seo-row-n, .seo-schools li.is-active .seo-row-n { background-color: var(--grad-solid); background-image: var(--grad-ui); color: #fff; } .seo-row-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .seo-row-name { line-height: 1.3; } .seo-main article .seo-schools a { color: inherit; font-weight: 700; text-decoration: none; line-height: 1.3; } .seo-main article .seo-schools li:hover a { text-decoration: underline; } .seo-row-where { color: var(--muted); font-size: .86rem; line-height: 1.35; } .seo-row-org { grid-column: 3; color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: .15rem; } .seo-row-dist { grid-column: 3; justify-self: end; color: var(--brand); font-size: .82rem; font-weight: 700; white-space: nowrap; } .seo-enk { font-size: .64rem; font-weight: 800; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); border-radius: var(--r-xs); padding: .05rem .3rem; text-decoration: none; vertical-align: .1em; cursor: help; } /* Sorted by distance from the reader: one list, the town headings step aside. */ .seo-dirblock.is-sorted .seo-area { display: none; } /* Neighbouring municipalities: chips with count and distance. */ .seo-chips { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .55rem; } .seo-main article .seo-chips a { display: inline-flex; flex-direction: column; gap: .05rem; color: inherit; text-decoration: none; padding: .55rem .9rem; border: 1px solid var(--border); border-radius: var(--r-md); background-color: var(--surface); background-image: var(--surface-lift); box-shadow: var(--hairline), var(--e1); transition: transform var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); } .seo-main article .seo-chips a:hover { transform: translateY(-2px); border-color: var(--muted); box-shadow: var(--hairline), var(--e2); } .seo-chips b { font-weight: 750; } .seo-chips span { color: var(--muted); font-size: .8rem; } /* The five questions: a numbered checklist, two columns when there is room. */ .seo-check ol { list-style: none; counter-reset: q; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .8rem; } .seo-check li { counter-increment: q; position: relative; padding: .9rem 1rem .95rem 3.1rem; background-color: var(--surface); background-image: var(--surface-lift); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--hairline), var(--e1); } .seo-check li::before { content: counter(q); position: absolute; left: .9rem; top: .9rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background-color: var(--grad-solid); background-image: var(--grad-ui); color: #fff; font-weight: 800; font-size: .8rem; } .seo-check li b { display: block; margin-bottom: .2rem; } .seo-check li span { color: var(--muted); font-size: .92rem; line-height: 1.5; } .seo-actions--row { display: flex; flex-wrap: wrap; gap: .6rem; } .seo-main--city .seo-split { margin-top: 1.4rem; } .seo-main--city .seo-source p { max-width: 72ch; } @media (max-width: 640px) { .seo-city-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .seo-city-stats > div { padding: .7rem .8rem .75rem; } .seo-city-stats dd { font-size: 1.6rem; } .seo-city-map .schoolmap { height: clamp(16rem, 44vh, 22rem); } .seo-schools li { grid-template-columns: 1.6rem minmax(0, 1fr); } .seo-row-org { grid-column: 2; padding-top: .1rem; } .seo-row-dist { grid-column: 2; justify-self: start; } } @media (prefers-reduced-motion: reduce) { .seo-pin span, .seo-schools li, .seo-row-n, .seo-chips a { transition: none; } .seo-schools li:hover, .seo-chips a:hover { transform: none; } .seo-pin.is-hot span, .seo-pin:hover span { transform: rotate(-45deg); } } /* --- generated family: one teaser page per course chapter (2026-09-19) ----------------- A chapter opener, not an article: the photograph is the page's first line, the number is set into it, and the lessons run down a drawn road. Like a sign page it stands on the ground — its blocks carry their own surfaces (see the note on .seo-main--sign). The per-chapter `--accent` is the chapter's own colour from data/course/course.json, the same one the reader's cards use, so the two halves of the course match. */ .seo-main--chapter article { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none; padding: .6rem 0 0; } .seo-ch-hero { margin: .4rem 0 1.6rem; } .seo-ch-photo { position: relative; margin: 0 0 1.5rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-2xl); background: var(--surface-2); box-shadow: var(--e3); } .seo-ch-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* The number, set into the photograph: white on a dark frosted scrim, which clears AA on any frame (a white scrim would lighten its own backdrop — see the .studbar-tag note). */ .seo-ch-numeral { position: absolute; left: clamp(.9rem, 2.5vw, 1.6rem); bottom: clamp(.9rem, 2.5vw, 1.6rem); display: grid; gap: .1rem; padding: .5rem .85rem .45rem; color: #fff; background: rgba(16,24,40,.58); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-md); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .seo-ch-numeral small { font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; } .seo-ch-head { max-width: 62rem; } .seo-main .seo-ch-head h1 { margin-bottom: .6rem; letter-spacing: -.02em; text-wrap: balance; max-width: 26ch; } .seo-ch-head .seo-lead { color: var(--text); max-width: 58ch; margin-bottom: 1.2rem; } .seo-ch-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; } .seo-ch-facts { margin: 0 0 1.4rem; } /* Two-up on phones: four stacked cards of one number each were a screen of scrolling. */ @media (max-width: 640px) { .seo-ch-facts .seo-facts { grid-template-columns: 1fr 1fr; gap: .6rem; } .seo-ch-facts .seo-facts > div { padding: .8rem .85rem .9rem; } .seo-ch-facts dd small { font-size: .78rem; } } /* The two cards under the facts: the argument (wider) and the exam theme(s). Open glass, like every prose surface on these pages, so the edge shapes show through as colour. */ .seo-ch-card { background: var(--glass-open); -webkit-backdrop-filter: var(--glass-open-blur); backdrop-filter: var(--glass-open-blur); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: var(--r-xl); box-shadow: var(--hairline), var(--shadow); padding: clamp(1.15rem, 3vw, 1.8rem); } .seo-ch-card > h2:first-child { margin-top: 0; } .seo-ch-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin: 0 0 1rem; } @media (max-width: 860px) { .seo-ch-split { grid-template-columns: 1fr; } } .seo-ch-h3 { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin: 1.4rem 0 .2rem; } .seo-ch-card .seo-note { margin-top: 0; } .seo-ch-sources { list-style: none; padding: 0; margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; } .seo-ch-sources li { font-size: .82rem; line-height: 1.3; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .3rem .75rem; } .seo-ch-themes { list-style: none; padding: 0; margin: .5rem 0 .9rem; display: grid; gap: .5rem; } .seo-main article .seo-ch-themes a { display: grid; gap: .1rem; padding: .7rem .9rem; color: inherit; text-decoration: none; background-color: var(--surface); background-image: var(--surface-lift); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--hairline), var(--e1); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .seo-main article .seo-ch-themes a:hover { transform: translateY(-1px); border-color: var(--muted); } .seo-ch-themes span { color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; } /* The route: the lessons as stops on a road drawn once behind them — a grey band with a broken yellow centre, because that is what a Norwegian centre line looks like. The stop sits on the road in the chapter's accent, the way the reader numbers its lessons. */ .seo-ch-routecard { margin: 0 0 1rem; } .seo-ch-route { --road: #3b4048; list-style: none; padding: 0; margin: .4rem 0 .8rem; position: relative; } .seo-ch-route::before { content: ""; position: absolute; left: calc(1.6rem - 7px); top: 1rem; bottom: 1rem; width: 14px; border-radius: 7px; background: var(--road); } .seo-ch-route::after { content: ""; position: absolute; left: calc(1.6rem - 1px); top: 1.4rem; bottom: 1.4rem; width: 2px; background: repeating-linear-gradient(180deg, #f2c94c 0 9px, transparent 9px 18px); } :root[data-theme="dark"] .seo-ch-route { --road: #262b34; } .seo-main article .seo-ch-route a { position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .9rem; align-items: start; padding: .8rem 0; color: inherit; text-decoration: none; } .seo-ch-route li + li a { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .seo-route-stop { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--accent, var(--brand)); background: var(--surface); border: 2px solid var(--accent, var(--brand)); box-shadow: var(--e1); transition: transform var(--dur-base) var(--ease-out); } .seo-ch-route a:hover .seo-route-stop { transform: scale(1.08); } .seo-route-body { display: grid; gap: .15rem; padding-top: .2rem; } .seo-route-body b { font-size: 1rem; line-height: 1.3; } .seo-ch-route a:hover .seo-route-body b { text-decoration: underline; } .seo-route-body span { color: var(--muted); font-size: .9rem; line-height: 1.45; } .seo-route-min { padding-top: .35rem; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 480px) { .seo-main article .seo-ch-route a { grid-template-columns: 3.2rem minmax(0, 1fr); } .seo-route-min { grid-column: 2; padding-top: 0; } } /* Previous / next: two cards with the neighbour's photograph. The small label says which way, so there is no arrow glyph to point it. */ .seo-ch-nav { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 0 0 1.8rem; } .seo-main article .seo-ch-navcard { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .9rem; align-items: center; padding: .55rem; color: inherit; text-decoration: none; background-color: var(--surface); background-image: var(--surface-lift); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--hairline), var(--e1); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .seo-main article .seo-ch-navcard:hover { transform: translateY(-2px); border-color: var(--muted); box-shadow: var(--hairline), var(--e2); } .seo-ch-navcard img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); } /* Needs the same three-part selector as the base rule, or it loses on specificity and the photograph lands in the wide column. */ .seo-main article .seo-ch-navcard.next { grid-template-columns: minmax(0, 1fr) 7.5rem; text-align: right; } .seo-ch-navcard.next img { order: 2; } .seo-ch-navcard small { display: block; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .25rem; } .seo-ch-navcard b { font-size: .96rem; line-height: 1.3; text-wrap: balance; } @media (max-width: 640px) { .seo-ch-nav { grid-template-columns: 1fr; } .seo-main article .seo-ch-navcard.next { grid-template-columns: 7.5rem minmax(0, 1fr); text-align: left; } .seo-ch-navcard.next img { order: 0; } } /* Every chapter as a chip in one scrolling row; this one ringed. Bleeds to the rail's edge on phones so the row reads as scrollable rather than cut. */ .seo-ch-all { margin: 0 0 .4rem; } .seo-ch-strip { list-style: none; margin: 0 -1.25rem; padding: .2rem 1.25rem .9rem; display: flex; gap: .55rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .seo-ch-strip li { flex: 0 0 auto; scroll-snap-align: start; } .seo-main article .seo-ch-strip a { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .45rem; align-items: center; width: 12.5rem; padding: .5rem .7rem .5rem .5rem; color: inherit; text-decoration: none; font-size: .82rem; line-height: 1.25; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--hairline), var(--e1); transition: border-color var(--dur-base) var(--ease-out); } .seo-main article .seo-ch-strip a:hover { border-color: var(--muted); } .seo-ch-strip b { color: var(--muted); font-size: .92rem; font-variant-numeric: tabular-nums; text-align: center; } .seo-ch-strip li.is-current a { border-color: var(--brand); box-shadow: var(--hairline), 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent); } .seo-ch-strip li.is-current b { color: var(--brand); } /* The course guide's grid of its chapters: photograph, number, name, size. */ .seo-ch-grid { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); } .seo-main article .seo-ch-grid a { display: grid; gap: .5rem; height: 100%; padding: .55rem .55rem .85rem; color: inherit; text-decoration: none; background-color: var(--surface); background-image: var(--surface-lift); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--hairline), var(--e1); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .seo-main article .seo-ch-grid a:hover { transform: translateY(-2px); border-color: var(--muted); box-shadow: var(--hairline), var(--e2); } .seo-ch-grid img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); } .seo-ch-grid-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .1rem .35rem 0; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .seo-ch-grid b { padding: 0 .35rem; font-size: .98rem; line-height: 1.3; text-wrap: balance; } .seo-ch-grid small { padding: 0 .35rem; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .seo-main article .seo-ch-navcard, .seo-main article .seo-ch-grid a, .seo-main article .seo-ch-themes a, .seo-route-stop { transition: none; } .seo-main article .seo-ch-navcard:hover, .seo-main article .seo-ch-grid a:hover, .seo-main article .seo-ch-themes a:hover, .seo-ch-route a:hover .seo-route-stop { transform: none; } } /* The gift page's sample card (tools/build-seo.mjs giftAside): the app's own .gcard from styles.css, given breathing room in the first-row aside. */ .seo-giftcard .gcard { margin: .3rem 0 1rem; }