/* ============================================================================ aktiv-2026 preview SKIN — token override layer (first pass: re-skin, NOT re-layout). CONFIDENTIAL embargoed rebrand work. This file lives in public/ under an unguessable name so it can sit on prod hosting without ever being referenced when the gate is off (same embargo posture as the Bunny asset path). It is loaded by app/layout.tsx ONLY when NEXT_PUBLIC_BRAND_PREVIEW === "aktiv-2026", which also stamps data-brand="aktiv-2026" on . Every rule below is scoped to html[data-brand="aktiv-2026"] so it is inert until that attribute is present. Specificity note: overrides are anchored on html[data-brand="aktiv-2026"] (0,1,1) so they beat both globals.css token homes — Tailwind v4 @theme's :root (0,1,0) and the legacy :root block (0,1,0) — regardless of the order in which the bundled globals.css and this land in . ============================================================================ */ /* ---- Aktiv 2026 typefaces (400 only — the new brand builds hierarchy by size, not weight). Served from the embargoed brand CDN path. --------- */ @font-face { font-family: "Aktiv Varighet"; src: url("https://aktiv-signatur-cdn.b-cdn.net/brand/aktiv-2026-1ec0df52/fonts/AktivVarighet-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Aktiv Sans"; src: url("https://aktiv-signatur-cdn.b-cdn.net/brand/aktiv-2026-1ec0df52/fonts/AktivSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Aktiv Sans Mono"; src: url("https://aktiv-signatur-cdn.b-cdn.net/brand/aktiv-2026-1ec0df52/fonts/AktivSansMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Aktiv Fremover"; src: url("https://aktiv-signatur-cdn.b-cdn.net/brand/aktiv-2026-1ec0df52/fonts/AktivFremover-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ============================================================================ COLOR TOKENS — both namespaces overridden by ROLE. a26 palette: canvas #FAF5F0 · THE ONE TEXT INK #190C04 · legacy-namespace muted #875041 (the a26 layer's own muted grey is --a26-muted #6F655D, which is what every muted line the hub draws actually reads) · dark surfaces + accent #32140A · CTA fill #FF5F0F (dark text) · borders #DCD2C8 / #EBE1DC · soft fill #FAE1D2. ONE TEXT INK (B&Y round 1, Sindre Annweiler, 2026-09-14): «Brunfargen til venstre burde være den mørkeste #190C04. Vi bruker aldri den som er brukt nå på tekst.» So every TEXT role in both namespaces below resolves to #190C04. The #32140A-class mid-brown survives only as a SURFACE (dark grounds, the strong accent) and as the shadow alpha; #4B281E is gone from text entirely. ============================================================================ */ html[data-brand="aktiv-2026"] { /* --- Tailwind v4 @theme namespace (utility classes: bg-aktiv-*, text-aktiv-*) --- */ --color-aktiv-dark: #32140A; /* SURFACE/accent role — kept: dark grounds, the strong accent, never a glyph */ --color-aktiv-red: #FF5F0F; /* brand red → CTA orange */ --color-aktiv-black: #190C04; /* TEXT role -> the one text ink */ --color-aktiv-beige: #FAF5F0; /* canvas */ --color-aktiv-white: #FFFFFF; /* white surfaces stay white */ --color-aktiv-dark-grey: #190C04; /* TEXT role -> the one text ink */ --color-aktiv-satin: #DCD2C8; /* warm border */ --color-aktiv-greige: #875041; /* muted text */ --color-aktiv-pale: #EBE1DC; /* light border / hover fill */ --color-aktiv-dark-beige: #EBE1DC; /* subtle border / pill fill */ --color-aktiv-dusty-pink: #FAE1D2; /* soft fill / accent bar */ --color-aktiv-sage: #875041; /* no green in a26 → muted brown */ --color-aktiv-pine: #4B281E; /* no green in a26 → secondary */ --color-aktiv-grey: #DCD2C8; /* neutral → warm border */ --color-aktiv-deep: #190C04; /* TEXT role -> the one text ink */ --color-aktiv-warm-muted: #875041; /* muted brown */ --color-aktiv-warm-greige: #875041; /* muted brown */ --color-aktiv-tan: #EBE1DC; /* soft warm surface */ --color-aktiv-burgundy-shadow: #32140A33; /* brown shadow @ ~20% alpha — a SHADOW, not text; kept */ /* --- Legacy :root namespace (used by delivery-page CSS) --- */ --aktiv-dark: #32140A; /* SURFACE/accent role — kept (see --color-aktiv-dark) */ --aktiv-red: #FF5F0F; --aktiv-black: #190C04; /* TEXT role -> the one text ink */ --aktiv-beige: #FAF5F0; --aktiv-white: #FFFFFF; --aktiv-dark-grey: #190C04; /* TEXT role -> the one text ink */ --aktiv-satin: #DCD2C8; --aktiv-greige: #875041; --aktiv-pale: #EBE1DC; --aktiv-dark-beige: #EBE1DC; --aktiv-dusty-pink: #FAE1D2; --aktiv-sage: #875041; --aktiv-pine: #4B281E; --aktiv-grey: #DCD2C8; --bg-card-warm: linear-gradient(180deg, #FFFFFF 0%, #FDF9F5 100%); /* --- Semantic tokens --- */ --bg-page: #FAF5F0; --bg-card: #FFFFFF; --text-primary: #190C04; --text-secondary: #190C04; --text-muted: #875041; --accent: #875041; /* interactive muted-brown accent */ --accent-cta: #FF5F0F; /* CTA orange */ --border: #DCD2C8; --border-subtle: #EBE1DC; /* --- Font-family variables (consumed by inline style={{fontFamily:'var(--font-arya)'}} and the composed --font-family-* tokens). Headings → Varighet, body → Sans. --- */ --font-arya: "Aktiv Varighet"; --font-roboto: "Aktiv Sans"; --font-family-arya: "Aktiv Varighet", "Aktiv Sans", Georgia, serif; --font-family-roboto: "Aktiv Sans", system-ui, -apple-system, sans-serif; } /* ============================================================================ FONT APPLICATION. globals.css and many components hard-code the literal families 'Arya' / 'Roboto' (not the CSS vars), so overriding the vars alone is not enough. - Body copy → Aktiv Sans. - Heading roles (h1–h3, the .*-title classes, and ANY element whose inline style names Arya via [style*="Arya"]) → Aktiv Varighet, weight 400. - ANY element whose inline style names Roboto → Aktiv Sans. !important is required to beat inline style="fontFamily:…". Scoped to data-brand, so zero effect with the gate off. ============================================================================ */ html[data-brand="aktiv-2026"] body { font-family: "Aktiv Sans", system-ui, -apple-system, sans-serif; } html[data-brand="aktiv-2026"] h1, html[data-brand="aktiv-2026"] h2, html[data-brand="aktiv-2026"] h3, html[data-brand="aktiv-2026"] .delivery-hero-title, html[data-brand="aktiv-2026"] .share-fallback-title, html[data-brand="aktiv-2026"] .cta-card-title, html[data-brand="aktiv-2026"] .dashboard-card-title, html[data-brand="aktiv-2026"] .btn-download, html[data-brand="aktiv-2026"] [style*="Arya"] { font-family: "Aktiv Varighet", "Aktiv Sans", Georgia, serif !important; font-weight: 400 !important; } html[data-brand="aktiv-2026"] [style*="Roboto"] { font-family: "Aktiv Sans", system-ui, -apple-system, sans-serif !important; } /* ============================================================================ CTA CONTRAST FIX — the new brand NEVER uses white text on the orange fill. .btn-download fills with var(--accent-cta) (now #FF5F0F) but sets its text to var(--aktiv-white); force dark brown text + a matching orange glow. ============================================================================ */ html[data-brand="aktiv-2026"] .btn-download { /* The one text ink on the orange — 6.29:1 (devices doc §3 --a26-cta-text). */ color: #190C04 !important; box-shadow: 0 2px 8px rgba(255, 95, 15, 0.18); } html[data-brand="aktiv-2026"] .btn-download:hover { background: #E9540A; box-shadow: 0 6px 24px rgba(255, 95, 15, 0.28); } /* ============================================================================ LINK AFFORDANCE on the routes this sheet reaches but does not design. `app/layout.tsx` links this sheet from the ROOT layout, so its token block re-skins EVERY route in the app, not only the delivery hub — that is the rebrand working as intended (a 2019-coloured /personvern on flip morning would be the bug). But the remap collapses roles: aktiv-2019 used `--aktiv-dark` as a burgundy ACCENT, and several pre-a26 screens spend it as their link colour via inline `style={{ color: 'var(--aktiv-dark)' }}`. In a26 `--aktiv-dark` is #32140A, the same ink as body copy, and those anchors carry no underline of their own — measured 2026-09-13 on /auth/confirm: both recovery links computed rgb(50,20,10), identical to `--text-primary` and to `body`, `text-decoration: none`. A link no longer distinguishable from the sentence around it is a WCAG 1.4.1 failure, and /auth/confirm is an account-recovery screen. The repair is an underline, not a colour: a26 has no red, so there is no accent to put back, and the matcher is the inline style itself — it cannot reach the a26 trees, which never set that variable inline on an anchor (verified: zero hits under components/boligpromo-a26 and components/ portal-a26). Legacy source is untouched, so the aktiv-2019 render is untouched. Known and deliberately NOT repaired here: the same collapse turns the error and status paragraphs on /auth/confirm, /login and /login/code from burgundy into body ink. They stay legible and the brand has no error colour to substitute — that is a design decision for the a26 session, not a CSS patch. ============================================================================ */ html[data-brand="aktiv-2026"] a[style*="--aktiv-dark"] { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } /* ============================================================================ LOGO ASPECT FIX — the a26 wordmark is an SVG loaded into boxes that were sized for the old lockup PNG. object-fit: contain lets it scale inside the existing width/height box without distortion (no markup change). Scoped to the a26 asset URL so it only bites when the new logo is actually rendered. ============================================================================ */ html[data-brand="aktiv-2026"] img[src*="/aktiv-2026-1ec0df52/logos/"] { object-fit: contain; } /* ============================================================================ ============================================================================ DELIVERY-HUB STRUCTURAL LAYER (2026-09-03, re-aligned 2026-09-04, unified into ONE device system 2026-09-05). Everything above this line is the July RE-SKIN (token overrides that repaint the existing aktiv-2019 markup). Everything below is the aktiv-2026 delivery hub's OWN layer. SOURCE OF TRUTH: the AGENCY's "Promopakke nytt design" boards on page C-0 of "Aktiv maler v2" — LTK-0 desktop (1440x6518) and LTL-0 mobile (428x5485), exported to docs/design/exports/delivery-hub/{LTK-0,LTL-0}/. Henrik's ruling 2026-09-04: these boards, not the July GS6-0 board this hub was first built to, are what the hub follows. Grammar and rationale: docs/design/2026-08-21-a26-signatur-design-language.md. Motion: docs/reference/2026-07-10-hub-v2-motion-spec.md under the shared grammar of docs/reference/2026-09-04-a26-web-motion-pass.md. THE DEVICE RULES this file implements are written up, token by token, in docs/reference/2026-09-05-a26-web-devices.md — that document is what the primer, visning and solgt implementers adopt. If a value here and a value there disagree, this file is wrong. This file is the ONE home for a26 literals in this app: the components under components/boligpromo-a26/** carry class names and content only — no hex, no font name, no ratio. Everything visual resolves here, and every font-size, line-height, gap, radius and control dimension below is a TOKEN from the ladders at the top of the block — a rule that needs a value the ladder does not have is a rule that is wrong. THE BOARDS' LAYOUT GRAMMAR, in one paragraph. Both boards are a two-column rail: the section's eyebrow sits alone in a narrow left column at the page gutter, and everything else — headline, media, copy, controls — lives in a wide right column. Desktop: 32px gutters on a 1440 page, eyebrow column 464 wide, content column 912 wide starting at x=496. Mobile: 20px gutters on a 428 page and the rail collapses, eyebrow stacked above content. Sections are separated by whitespace and 1px hairlines, never by rules or shadows. ============================================================================ ============================================================================ */ html[data-brand="aktiv-2026"] { /* ---- Color ------------------------------------------------------------- Measured off the two boards. Where a board value fails WCAG AA on the ground it actually sits on it is darkened one step and logged as a deviation in the build notes — nothing else is invented. */ --a26-canvas: #FAF5F0; /* board root fill, both boards */ --a26-peach: #FAE3D3; /* the agent-advice panel */ --a26-white: #FFFFFF; /* the two panels (composer mock, caption) */ /* ONE TEXT INK. B&Y round 1 (2026-09-14) counted three text colours on an a26 surface and ruled that the #32140A-class mid-brown is never one of them. What is left on this page is exactly TWO text colours — this ink and the one muted grey below — plus the reversals on dark grounds. */ --a26-text: #190C04; /* THE text ink: every glyph that is not a reversal */ --a26-ink: #32140A; /* DARK SURFACES ONLY: the progress fill. Never a glyph */ --a26-ink-chrome: #190C04; /* board's chrome ink: rules, outlines, labels, marks (the same value as --a26-text) */ --a26-media-ground: #000000; /* the video previews' black GROUND — a surface, not an ink */ /* NOT A HUB INK ANY MORE. The hub layer stopped reading this on 2026-09-14 (B&Y round 1 folded its four text uses into --a26-text and gave the video preview's black ground the surface token above). It stays DEFINED because app/layout.tsx links this file from the ROOT layout, which makes it the only definition site for every --a26-* token — and the agent-portal sheet reads var(--a26-ink-flat) 85 times and the kontor sheet 4 times, neither of them defining it. Deleting it here would blank 89 declarations on two surfaces this session is scoped out of. Folding those 89 into the one text ink is the PORTAL session's half of B&Y #1; when that lands, this line and its readers go together. */ --a26-ink-flat: #000000; --a26-body: #190C04; /* running body copy — was the #4B281E mid-brown */ /* Mono meta / tertiary descriptions. The boards' own value for the step body is #7A6F66, which computes to 4.47:1 on the canvas — under AA for the 20px/16px text it is used on. Darkened one step to #6F655D (5.25:1 on canvas, 5.68:1 on white, 4.66:1 on the peach panel). Deviation logged. */ --a26-muted: #6F655D; --a26-eyebrow: #190C04; /* the Fremover eyebrow label — was #4B281E, i.e. B&Y #1's «brunfargen til venstre» */ --a26-hairline: #190C04; /* the accordion's 1px separators (board) */ --a26-hairline-soft: rgba(25, 12, 4, 0.25); --a26-cta: #FF5F0F; --a26-cta-hover: #ED550C; --a26-cta-text: #190C04; /* the boards never put white on the orange */ --a26-green: #6FFF4B; /* the status dot — never a fill, never text */ --a26-on-dark: #FAF5F0; /* reversal color over the hero photo */ --a26-wordmark-on-dark: #E9E2DD; /* the board's wordmark fill over the photo */ --a26-playchip: #F0F0F0; /* the video thumbnails' play disc */ /* ONE HOVER LANGUAGE (Henrik, 2026-09-05, after the visning hub's contact pill): an outlined control fills with the SAME ink as its 1px stroke and its label goes to canvas, so the fill meets the stroke seamlessly; the filled orange control darkens one step; a plain text link keeps its ink and gains an underline; nothing else changes on hover. Press = scale 0.98 on every control. Hover only under (hover: hover). The visning and solgt hubs already fill with #190C04 — the chrome ink, not the #32140A display ink — so that is the value here too. */ --a26-hover-fill: var(--a26-ink-chrome); --a26-hover-text: var(--a26-canvas); --a26-press-scale: 0.98; /* Hero scrim. NEITHER board draws one — both sample photos are dark interiors. A real delivery's hero is whatever photo the property has, so reversal type over it needs a floor. Two layers: the vertical ramp protects the top bar and the bottom edge, the radial is the floor under the type stack in the middle of the frame. Measured 2026-09-05: worst pixel behind every hero line 5.3:1 or better on both samples. Deviation logged. NEUTRAL BLACK, NOT WARM BROWN (B&Y round 1, #2 + #7, 2026-09-14: «unngå et brunt filter da dette gir alt et litt retro-preg»). The alphas are the measured type floor and do not move; only the hue does. Black at the same alpha is DARKER than the warm inks it replaces (rgba(47,31,10) and rgba(25,12,4) both carry luminance above 0), so every reversal line's contrast can only rise — the 5.3:1 floor is a floor, not an equality. */ --a26-hero-scrim: radial-gradient( ellipse 62% 48% at 50% 54%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 72% ), linear-gradient( 180deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.58) 18%, rgba(0, 0, 0, 0.55) 100% ); /* ---- Type: the faces -------------------------------------------------- Weight 400 only, everywhere. Hierarchy is size + family + case. */ --font-a26-display: "Aktiv Varighet", Georgia, serif; --font-a26-headline: "Aktiv Fremover", "Aktiv Sans", system-ui, sans-serif; --font-a26-body: "Aktiv Sans", system-ui, -apple-system, sans-serif; --font-a26-mono: "Aktiv Sans Mono", ui-monospace, monospace; /* ---- Type: THE LADDER --------------------------------------------------- Every font-size on the page is one of these roles, and no rule below writes a px size of its own. Mobile values here (LTL-0 measured, with the near-duplicates the mobile board carries — 26/28, 22/24, 10/10.5/11/12, 14/16 — collapsed onto one step each); the >=1024 block restates the roles at LTK-0's values. The a26 web ladder of record (type coherence audit 2026-09-05 §2) is EIGHT rungs plus two fluid ones, shared by all four a26 web surfaces: rung mobile desktop face used for display 40/40 100/100 Varighet the hero address (fluid between) figure 56/56 96/96 Varighet live data numerals — sharehubs only, no user on this surface h1 32/36 56/62 Varighet quote, locality, footer nav h2 28/32 32/37 Varighet intro headlines, agent name h3 24/28 32/37 Varighet accordion rows, bulk headline, "Promopakke for" lede 16/22 24/34 Sans intro + bulk body body 16/22 17/26 Sans advice body, caption, composer, accordion body, top-bar word ui 16/20 16/20 Sans every control label, status, contact pair, role, footer links, the mobile top bar mono 12/15 12/15 Mono spec lines, legal, hints eyebrow 12/16 16/21 Fremover the rail eyebrow THE THREE FOLDS (Henrik's D5, 2026-09-05). The hub's own kicker (18), step (20 desktop) and label (14) rungs are gone: each was one increment away from a rung the ladder already carries, so "Promopakke for" reads at h3 on phones, the accordion copy and the top-bar word at body on desktop, and the top bar's word + status label at ui. Six sizes at 428, seven at 1440. h1 is fluid on desktop (40 at 1024 to 56 at 1440) so the advice quote and the footer nav scale with the column they sit in rather than stepping; the display address is fluid across the whole range. Both are ONE rung each, whatever the viewport computes them to. */ --a26-t-display: clamp(34px, calc(14.62px + 5.93vw), 100px); --a26-lh-display: 1; /* The live-data numeral rung: 56 at 428, 96 at 1440. NOTHING on the hub uses it — the visning sharehub's countdown digits and colon are its only users — but it is declared here because this file is the ONE source the other three a26 surfaces copy their ladder from, and a rung that lives in two places drifts. */ --a26-t-figure: clamp(56px, calc(39.08px + 3.953vw), 96px); --a26-lh-figure: 1; /* h1 on phones. Desktop restates it as a clamp; see the >=1024 rule. */ --a26-t-h1: 32px; --a26-lh-h1: 1.11; --a26-lh-nav: 1.34; /* the footer nav's looser h1 leading */ --a26-t-h2: 28px; --a26-lh-h2: 32px; --a26-t-h3: 24px; --a26-lh-h3: 28px; --a26-t-lede: 16px; --a26-lh-lede: 22px; --a26-t-body: 16px; --a26-lh-body: 22px; --a26-t-ui: 16px; --a26-lh-ui: 20px; /* inside a control */ --a26-lh-ui-text: 22px; /* the same size set as a line of text */ --a26-t-mono: 12px; --a26-lh-mono: 15px; --a26-lh-mono-text: 16px; /* a helper line in the mono size */ --a26-t-eyebrow: 12px; --a26-lh-eyebrow: 16px; --a26-track-display: 0.01em; /* Varighet's board tracking */ --a26-track-eyebrow: 0.04em; /* the eyebrow device, all a26 surfaces */ --a26-track-mono: 0.01em; /* ---- Space -------------------------------------------------------------- One 4px-based ladder; every gap and padding below is one of these. The boards' own section anchors (gutters, the rail split, the accordion row head, card widths) are kept as measured and listed under Geometry. */ --a26-s-1: 4px; --a26-s-2: 8px; --a26-s-3: 12px; --a26-s-4: 16px; --a26-s-5: 24px; --a26-s-6: 32px; --a26-s-7: 48px; --a26-s-8: 64px; --a26-s-9: 96px; /* ---- Controls ----------------------------------------------------------- ONE button device (Henrik, 2026-09-05): height 48, padding 0 19, a 17px glyph always present, gap 8, label Sans 16/20, SQUARE corners. Two skins, the filled orange verb and the 1px-ink outline — identical geometry. The status pill is the same box, outlined in the reversal colour — and it is CHAMFERED: the agency board (LTK-0) draws the four-corner cut on "Klar til deling", which the 2026-09-05 ruling had reserved for the contact pair alone. Henrik, 2026-09-10: the board is right and we were not. TWO chamfered controls now, and only two — the joined contact pair (its notch + 4px cuts) and the status pill (the cuts, no notch). Every other corner on the page is square, buttons included. */ --a26-control-h: 48px; --a26-control-pad: 19px; --a26-control-gap: 8px; --a26-icon: 17px; --a26-pair-h: 40px; /* the joined contact pair */ --a26-pair-pad: 11px; /* pair half: box edge / notch to label */ --a26-chamfer: 5px; /* contact pair + status pill ONLY */ --a26-notch: 3px; /* half-width of the pair's mid notch */ --a26-dot: 8px; /* status dot, mobile; 13 on desktop */ /* ---- Radii -------------------------------------------------------------- Square everywhere except the two video previews (the design language's "one genuinely rounded element") and the discs that read as another app (play disc, composer avatar). */ --a26-radius-media: 12px; --a26-radius-control: 0px; --a26-radius-card: 0px; --a26-hairline-w: 1px; /* ---- Motion ------------------------------------------------------------- The six SHARED tokens first — identical name and value in every a26 web app (a26 web motion pass 2026-09-04 §1). Never redefine these locally and never write a literal easing or duration in a rule below. */ --ease-a26: cubic-bezier(0.16, 1, 0.3, 1); /* reveals + hero moves */ --ease-a26-micro: cubic-bezier(0.4, 0, 0.2, 1); /* hovers, presses, swaps */ --dur-hero: 750ms; /* the signature move */ --dur-reveal: 450ms; /* section entrances */ --dur-micro: 200ms; /* hover / press / swap */ --stagger-a26: 80ms; /* sibling stagger */ /* Surface-local durations, so no rule below carries a bare `ms` literal. */ --dur-a26-draw: 350ms; /* section eyebrow hairline draw */ --dur-a26-draw-load: 400ms; /* page-load hairline + eyebrow text */ --dur-a26-settle: 900ms; /* hero photo slow settle */ --dur-a26-pop: 250ms; /* the ONE allowed pop — the ZIP pill */ --dur-a26-chrome: 300ms; /* card hover lift, chevron rotation */ --dur-a26-tick: 420ms; /* download-control icon tick */ --dur-a26-progress: 120ms; /* download progress fill */ --dur-a26-reduced: 200ms; /* the ONLY move left under reduced motion */ --dur-a26-pulse: 2400ms; /* the status dot's breath, one full cycle */ /* Offsets INSIDE a compound reveal, added to the group's `--a26-delay`. */ --delay-a26-eyebrow: 60ms; /* eyebrow text after its hairline */ --delay-a26-eyebrow-load: 80ms; /* same, page-load timing */ --delay-a26-playchip: 350ms; /* play chip lands at t=900 (550 + 350) */ --delay-a26-zip-pop: 320ms; /* the pill pops at the END of the band move */ /* Page-load sequence. The page itself starts at opacity 1 — there is NO full-page fade. `--a26-load-scale` multiplies every `--a26-delay`; it is 1 here and is only lowered inside the hero below 1024px, where the sequence was measurably holding the LCP element (Lighthouse 2026-09-04). */ --a26-load-scale: 1; --delay-a26-load-title: 150ms; --delay-a26-load-sub: 400ms; /* ---- Format data -------------------------------------------------------- The wide promo video is 4:3 on this brand (16:9 on aktiv-2019). The runtime authority for the value handed to React props is lib/brand-formats.ts (wideVideoAspect); this token is the CSS-side twin. Both must move together. */ --a26-video-wide-aspect: 4 / 3; --a26-video-tall-aspect: 9 / 16; --a26-portrait-aspect: 4 / 5; /* ---- Geometry (the boards' own anchors) -------------------------------- */ --a26-gutter: 20px; /* LTL-0 page gutter */ --a26-rail: 100%; /* eyebrow rail collapses below 1024 */ --a26-band: var(--a26-s-6); /* section padding-block-start, mobile */ --a26-band-end: var(--a26-s-6); /* The second band rhythm (Henrik's D4, 2026-09-05): a section that is a STAGE — a filled band or a stand-alone one, rather than a rail section parted from its neighbour by a hairline — breathes at 48 on phones and 96 on desktop. On this surface the peach agent band is the only one; the sharehubs' hero row, countdown, gratulerer, delgleden and tilselger bands take the same pair, which is why it is a token and not a local value. */ --a26-band-stage: var(--a26-s-7); --a26-measure: 620px; --a26-media-w: 583px; /* the open row's film + the two panels */ --a26-story-w: 189px; /* the story preview */ --a26-portrait-w: 123px; /* LTL-0 portrait; 182 on LTK-0 */ /* The graphics device (a26 graphics-delivery device spec 2026-09-05 §2.2, REV 1.3 of 2026-09-12). The stage is no longer a RESERVED box. Rev 1.2 sized it to the Innlegg and letterboxed Story and Bredformat inside that one height, which meant the air around the graphic was equal only for the default format: a Story sat in two wide white gutters, a Bredformat in two deep white bands. Henrik, 2026-09-12: "let's have the white space equal on all sides of the graphic, so the max white space around the graphics is like the side of the portrait graphic. And let's try making that preview box adapt to the other formats when we click to the other formats." So the stage now FOLLOWS the format. Its width is the frame's content width at every format; the graphic fills that width less the padding; and the box height is whatever that width implies at the format's aspect, plus the padding back. The padding is the SAME on all four sides and is the only air there is — the Innlegg's side air, which is what Henrik named as the ceiling, is now the air on every side of every format. The mechanism is `aspect-ratio` on a CONTENT-BOX stage (see §.a26h-stage): the ratio lands on the content box, the padding is added outside it, and nothing has to be computed from a board width. That is what lets the geometry survive the 1024-1180 squeeze, where the two device columns shrink below 440 and a fixed height would have re-letterboxed. --a26-stage-h is therefore GONE. What the arithmetic lands, for the record (the frame board is 388 phone / 440 desktop, border-box, so the stage is 386 / 438 wide and the graphic 370 / 414): phone 8 pad: Innlegg 370x462.5 -> 478.5 box Story 370x657.8 -> 673.8 Bred 370x246.7 -> 262.7 desktop 12 pad: Innlegg 414x517.5 -> 541.5 box Story 414x736.0 -> 760.0 Bred 414x276.0 -> 300.0 The Innlegg numbers are rev 1.2's 479 / 542 to within the rounding, which is the point: the default format did not move, the other two grew into their own air. THE HEIGHT CHANGE IS NOT ANIMATED (motion rule: no height tweens) — `aspect-ratio` is not in the stage's transition list, so the box snaps and the crossfade of spec §2.8 plays on top of it. */ --a26-stage-pad: var(--a26-s-2); --a26-device-col: 440px; /* Minimum tap target. The 48px control clears it by itself; the 40px contact pair gets an invisible vertical extension to this. */ --a26-tap: 44px; } @media (min-width: 1024px) { html[data-brand="aktiv-2026"] { /* The desktop ladder (LTK-0). h1 is fluid from 1024 to 1440 so the quote and the footer nav grow with the column: 40 at 1024, 56 at 1440. The slope is (56 - 40) / (1440 - 1024) = 16/416 = 1/26, written as a division rather than as a rounded 3.846vw + 0.6px pair: the rounded pair lands 55.98 at 1440, which is a NINTH size on the page, and the audit of 2026-09-05 counted it. Dividing by 26 lands 56.0000. */ --a26-t-h1: clamp(40px, calc(40px + (100vw - 1024px) / 26), 56px); --a26-lh-nav: 1.25; --a26-t-h2: 32px; --a26-lh-h2: 37px; --a26-t-h3: 32px; --a26-lh-h3: 37px; --a26-t-lede: 24px; --a26-lh-lede: 34px; --a26-t-body: 17px; --a26-lh-body: 26px; --a26-t-eyebrow: 16px; --a26-lh-eyebrow: 21px; --a26-dot: 13px; --a26-gutter: 32px; /* LTK-0: 32px gutters on 1440 leave 1376; the eyebrow column is 464 wide (x=32..496) and the content column 912 (x=496..1408). 464/1376. */ --a26-rail: 33.72%; /* The rail eyebrow's optical cap-top is pinned 2px above the adjacent content column's first-line cap-top (2026-09-15 alignment pass). The two content families that sit beside a rail eyebrow put their own first line at a DIFFERENT structural offset — the accordion row head (a26h-step-head) carries its own 16px padding-block that the eyebrow column has no equivalent of, while an intro block's h2 (a26h-intro) has none — so one fixed rail-label padding-top cannot hit 2px for both. These two trims replace that single value, keyed on the RUNG the first content line is set on (h3 for the accordion rows, h2 for intro blocks), never on which section it is — see .a26h-rail-label below and its :has() overrides. Measured with a Range+canvas cap-top probe (build notes appendix, 2026-09-15): h3 wants 16px, h2 wants 6.5px. */ --a26-ink-trim-h3: 16px; --a26-ink-trim-h2: 6.5px; /* The footer's three sibling columns (mark / nav / secondary links) sit in one grid row and must share one visual top. The monogram SVG's own box top IS its visual top (no font leading); the nav rung (h1 size, the footer's own loose 1.25 leading) and the ui rung both carry a much bigger half-leading gap above their cap line, so each needs pulling up by its own measured amount — again keyed on the rung, not the column. */ --a26-ink-trim-nav: -17px; --a26-ink-trim-ui: -8.5px; --a26-band: var(--a26-s-5); --a26-band-end: var(--a26-s-7); --a26-band-stage: var(--a26-s-9); --a26-portrait-w: 182px; --a26-stage-pad: var(--a26-s-3); } } /* ============================================================================ HUB SHELL ============================================================================ */ html[data-brand="aktiv-2026"] .a26h { background-color: var(--a26-canvas); color: var(--a26-text); font-family: var(--font-a26-body); /* All four Aktiv faces ship at weight 400 only. Without this, any element a UA defaults to bold (an

, a ) gets a SYNTHESISED bold — a smeared weight the brand does not own. Belt and braces with the explicit `font-weight: 400` the headings already carry. */ font-synthesis: none; font-weight: 400; margin-inline: auto; max-width: 1440px; position: relative; width: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html[data-brand="aktiv-2026"] .a26h :where(h1, h2, h3, h4, p) { margin: 0; } html[data-brand="aktiv-2026"] .a26h-stack { display: flex; flex-direction: column; } /* ---- The rail: eyebrow left, everything else right ----------------------- */ html[data-brand="aktiv-2026"] .a26h-rail { display: grid; grid-template-columns: var(--a26-rail); padding-inline: var(--a26-gutter); row-gap: var(--a26-s-5); width: 100%; } @media (min-width: 1024px) { html[data-brand="aktiv-2026"] .a26h-rail { column-gap: 0; grid-template-columns: var(--a26-rail) minmax(0, 1fr); row-gap: 0; } } html[data-brand="aktiv-2026"] .a26h-rail-body { display: flex; flex-direction: column; min-width: 0; } /* The eyebrow is optically aligned with the first line of the content column: on the boards it sits 2px above the headline's cap line, not on its baseline. Default trim is the accordion's (h3 rung: A26ShareSteps' step titles) — it is what a bare Rail with no known content shape gets. A rail whose body opens with an intro block's h2 (IntroBlock: "Grafikk for visning", "Nøkkelinfo", "Alle filer") overrides it via :has(), because that content sits at a different structural offset (see --a26-ink-trim-h2/h3 above). Keyed on the CONTENT RUNG, never on the section — a third rung sitting beside a rail eyebrow needs a third trim token here, not a class name for its section. */ @media (min-width: 1024px) { html[data-brand="aktiv-2026"] .a26h-rail-label { padding-top: var(--a26-ink-trim-h3); } html[data-brand="aktiv-2026"] .a26h-rail:has(.a26h-intro) .a26h-rail-label { padding-top: var(--a26-ink-trim-h2); } } /* ============================================================================ TYPE ROLES — one class per rung of the ladder. The re-skin block above forces Varighet on every h1/h2/h3 with !important, so the roles that are deliberately NOT Varighet have to say so at the same strength. ============================================================================ */ html[data-brand="aktiv-2026"] .a26h-display { color: var(--a26-on-dark); font-family: var(--font-a26-display) !important; font-size: var(--a26-t-display); font-weight: 400 !important; line-height: var(--a26-lh-display); text-transform: uppercase; text-wrap: balance; } html[data-brand="aktiv-2026"] .a26h-h1 { color: var(--a26-text); font-family: var(--font-a26-display) !important; font-size: var(--a26-t-h1); font-weight: 400 !important; letter-spacing: var(--a26-track-display); line-height: var(--a26-lh-h1); } html[data-brand="aktiv-2026"] .a26h-h2 { color: var(--a26-text); font-family: var(--font-a26-display) !important; font-size: var(--a26-t-h2); font-weight: 400 !important; letter-spacing: var(--a26-track-display); line-height: var(--a26-lh-h2); } html[data-brand="aktiv-2026"] .a26h-h3 { color: var(--a26-ink-chrome); font-family: var(--font-a26-display) !important; font-size: var(--a26-t-h3); font-weight: 400 !important; letter-spacing: var(--a26-track-display); line-height: var(--a26-lh-h3); } /* Running copy — the body role by default, the lede and step roles by modifier. Each is one rung. */ html[data-brand="aktiv-2026"] .a26h-body { color: var(--a26-body); font-family: var(--font-a26-body) !important; font-size: var(--a26-t-body); font-weight: 400 !important; line-height: var(--a26-lh-body); max-width: var(--a26-measure); } @media (min-width: 1024px) { html[data-brand="aktiv-2026"] .a26h-body { max-width: 760px; } } html[data-brand="aktiv-2026"] .a26h-body--lede { color: var(--a26-text); font-size: var(--a26-t-lede); line-height: var(--a26-lh-lede); } @media (min-width: 1024px) { html[data-brand="aktiv-2026"] .a26h-body--lede { max-width: 940px; } } /* The accordion's step copy, the one place the boards use a lighter ink. It carried its own rung (16/22 phones, 20/28 desktop) until D5 folded the desktop 20 onto body 17 — a single increment, and the ink is what separates this copy from the lede beside it, not the size. Only the ink and the measure are left here. */ html[data-brand="aktiv-2026"] .a26h-body--step { color: var(--a26-muted); max-width: 915px; } /* The UI size set as a line of text: the agent's role, the footer's secondary links, the composer's name. */ html[data-brand="aktiv-2026"] .a26h-ui { color: var(--a26-ink-chrome); font-family: var(--font-a26-body) !important; font-size: var(--a26-t-ui); font-weight: 400 !important; line-height: var(--a26-lh-ui-text); } /* Mono spec lines — uppercase, 0.01em. The boards draw them plain black; B&Y round 1 replaces that third ink with the one text ink. */ html[data-brand="aktiv-2026"] .a26h-mono { color: var(--a26-text); font-family: var(--font-a26-mono) !important; font-size: var(--a26-t-mono); font-weight: 400 !important; letter-spacing: var(--a26-track-mono); line-height: var(--a26-lh-mono); text-transform: uppercase; } html[data-brand="aktiv-2026"] .a26h-mono--muted { color: var(--a26-muted); } /* A helper line under a control ("Velg Lagre video"): the mono size in the body face, muted. */ html[data-brand="aktiv-2026"] .a26h-hint { color: var(--a26-muted); font-family: var(--font-a26-body) !important; font-size: var(--a26-t-mono); line-height: var(--a26-lh-mono-text); } /* The eyebrow — Fremover, uppercase, 0.04em. It is the only Fremover on either board. Case and tracking are the eyebrow DEVICE, not this surface's taste: every board sets the rail label in caps and the sibling a26 surfaces track it at 0.04em; source copy stays sentence case. */ html[data-brand="aktiv-2026"] .a26h-eyebrow { align-items: center; display: flex; gap: 0; } /* NO font-stretch HERE, and that is deliberate. The rule used to ask for `expanded`, but the Fremover @font-face at the top of this file declares one static Regular with no font-stretch descriptor, so the request matched the same face it would have matched anyway and CSS never synthesises width. Measured 2026-09-05 on the gate-on page: the eyebrow string sets to the same 220.453px at expanded, normal and condensed. The declaration was removed rather than left as a value that reads as if it does something. If a genuinely wider Fremover ever ships, it needs BOTH a second @font-face with a `font-stretch: 125%` descriptor and the property back here — one without the other is this same no-op. */ html[data-brand="aktiv-2026"] .a26h-mono--eyebrow { color: var(--a26-eyebrow); font-family: var(--font-a26-headline) !important; font-size: var(--a26-t-eyebrow); font-weight: 400 !important; letter-spacing: var(--a26-track-eyebrow); line-height: var(--a26-lh-eyebrow); text-transform: uppercase; } /* Neither board draws a rule beside the eyebrow — the label stands alone in its column. The element is kept (it is what the page-load and section entrances DRAW, motion spec §2) at zero width, so the reveal still has its target and nothing paints. */ html[data-brand="aktiv-2026"] .a26h-eyebrow-rule { background-color: var(--a26-eyebrow); flex-shrink: 0; height: var(--a26-hairline-w); width: 0; } /* ============================================================================ CONTROLS — the one button device, in two skins. Geometry from the top of the file: h48, padding 0 19, glyph 17, gap 8, label ui 16/20, square. The glyph is ALWAYS present — every control on the page renders one (download, copy, share, tick, spinner) — so the left-aligned box never shows an empty slot. Orange is a VERB, and the verb is "Del": every control that says Del is orange, plus the ZIP (Henrik 2026-09-06; graphics device spec §6.2 — the one-orange-per-device budget of §2.5 is withdrawn). Last ned / Kopier teksten are the outline. ============================================================================ */ html[data-brand="aktiv-2026"] .a26h-pill { align-items: center; align-self: flex-start; background-color: transparent; border: var(--a26-hairline-w) solid transparent; border-radius: var(--a26-radius-control); color: var(--a26-ink-chrome); cursor: pointer; display: inline-flex; font-family: var(--font-a26-body) !important; font-size: var(--a26-t-ui); font-weight: 400 !important; gap: var(--a26-control-gap); line-height: var(--a26-lh-ui); min-height: var(--a26-control-h); padding-block: 0; padding-inline: var(--a26-control-pad); position: relative; text-align: left; text-decoration: none; transition: background-color var(--dur-micro) var(--ease-a26-micro), border-color var(--dur-micro) var(--ease-a26-micro), color var(--dur-micro) var(--ease-a26-micro), transform var(--dur-micro) var(--ease-a26-micro); } html[data-brand="aktiv-2026"] .a26h-pill svg { flex-shrink: 0; height: var(--a26-icon); width: var(--a26-icon); } html[data-brand="aktiv-2026"] .a26h-pill--cta { background-color: var(--a26-cta); border-color: var(--a26-cta); color: var(--a26-cta-text); } html[data-brand="aktiv-2026"] .a26h-pill--quiet { border-color: var(--a26-ink-chrome); } /* A control whose label swaps in place ("Kopier teksten" -> "Kopiert!") reserves the wider of its two labels so the box never changes width on click: both are stacked in one grid cell, the ghost invisible. */ html[data-brand="aktiv-2026"] .a26h-pill-label { display: inline-grid; white-space: nowrap; } html[data-brand="aktiv-2026"] .a26h-pill-label > span { grid-area: 1 / 1; } html[data-brand="aktiv-2026"] .a26h-pill-ghost { visibility: hidden; } /* --- Hover + press: the one language ------------------------------------- */ @media (hover: hover) { html[data-brand="aktiv-2026"] .a26h-pill--cta:hover { background-color: var(--a26-cta-hover); border-color: var(--a26-cta-hover); } html[data-brand="aktiv-2026"] .a26h-pill--quiet:hover { background-color: var(--a26-hover-fill); border-color: var(--a26-hover-fill); color: var(--a26-hover-text); } } html[data-brand="aktiv-2026"] .a26h-pill:active { transform: scale(var(--a26-press-scale)); } /* Copy confirmation: the outline fills for the "Kopiert!" window the same way its hover does — one language for "this control did something". */ html[data-brand="aktiv-2026"] .a26h-pill--quiet[data-a26-state="copied"] { background-color: var(--a26-hover-fill); border-color: var(--a26-hover-fill); color: var(--a26-hover-text); } /* Copy FAILURE. The outline is unchanged — a failed copy is not an error surface, it is an instruction ("marker teksten") — and the only new mark is a small square in the CTA colour, the design language's attention token. It is a state on a control, never a verb, so it does not spend an orange moment. CopyCaptionPill holds the window. */ html[data-brand="aktiv-2026"] .a26h-pill[data-a26-state="failed"] .a26h-pill-dot { background-color: var(--a26-cta); display: block; flex-shrink: 0; height: var(--a26-s-2); width: var(--a26-s-2); } /* Download confirmation without a spinner: the icon ticks down and springs back. Instant saves get no progress line, so this is the only feedback. */ @keyframes a26h-tick { 0% { transform: translateY(0); } 38% { transform: translateY(3px); } 100% { transform: translateY(0); } } html[data-brand="aktiv-2026"] .a26h-pill[data-a26-state="ticked"] svg { animation: a26h-tick var(--dur-a26-tick) var(--ease-a26-micro); } html[data-brand="aktiv-2026"] .a26h-pill[aria-disabled="true"] { cursor: default; opacity: 0.4; } html[data-brand="aktiv-2026"] .a26h-pill:focus-visible { outline: 2px solid var(--a26-ink-chrome); outline-offset: 2px; } html[data-brand="aktiv-2026"] .a26h-progress { background-color: var(--a26-hairline-soft); height: 2px; overflow: hidden; width: 100%; } /* The fill is a full-width bar scaled on X, not an animated width: `width` is a layout property and the motion rules allow transform + opacity only. */ html[data-brand="aktiv-2026"] .a26h-progress > span { background-color: var(--a26-ink); display: block; height: 100%; transform-origin: left center; transition: transform var(--dur-a26-progress) linear; width: 100%; } /* ============================================================================ 01 + 02 + 03 — HERO PHOTO, TOP BAR, HERO TEXT (LTK-0 M0C-0 / MVG-0 / M37-0 · LTL-0 MBQ-0 / MIQ-0) One full-bleed frame carrying the PROPERTY'S HERO PHOTO, with the top bar and the centred address stacked over it in reversal type. LTK-0 draws it 1440x899, LTL-0 428x548. ============================================================================ */ /* PAINT ORDER, and it is load-bearing. The photo carries the reveal's settle transform, and a transformed element creates a stacking context that paints in the positioned layer — ABOVE a plain, unpositioned sibling. So the scrim below was never composited over the photo at all (measured 2026-09-05). The hero is made an explicit stacking context here and its three layers are given explicit levels: photo 0, scrim 1, type 2. `z-index: 0` also keeps the whole frame below the top bar (z-index 2 in .a26h), which is a sibling of
, not a child of this section. */ html[data-brand="aktiv-2026"] .a26h-hero { aspect-ratio: 428 / 548; display: grid; z-index: 0; /* ONE definite row and column, not `auto`: the frame's height comes from its aspect ratio, and a `100%` height on a child only resolves against a grid area that is itself definite. */ grid-template: minmax(0, 1fr) / minmax(0, 1fr); overflow: hidden; position: relative; width: 100%; } @media (min-width: 1024px) { html[data-brand="aktiv-2026"] .a26h-hero { aspect-ratio: 1440 / 899; } } html[data-brand="aktiv-2026"] .a26h-hero-photo { display: block; grid-area: 1 / 1; height: 100%; object-fit: cover; object-position: center; width: 100%; } html[data-brand="aktiv-2026"] .a26h-hero-scrim { background: var(--a26-hero-scrim); grid-area: 1 / 1; height: 100%; pointer-events: none; position: relative; width: 100%; z-index: 1; } /* The stack sits just below the frame's centre on both boards: LTL-0 spans y=249..369 of 548 (centre 56.4%), LTK-0 y=325..623 of 899 (centre 52.7%). Centring plus a percentage nudge reproduces that at any frame height without a magic top value. */ html[data-brand="aktiv-2026"] .a26h-hero-text { align-items: center; display: flex; flex-direction: column; gap: var(--a26-s-4); grid-area: 1 / 1; justify-content: center; padding-inline: var(--a26-gutter); position: relative; text-align: center; transform: translateY(6%); width: 100%; z-index: 2; } @media (min-width: 1024px) { html[data-brand="aktiv-2026"] .a26h-hero-text { gap: var(--a26-s-7); transform: translateY(3%); } } /* "Promopakke for" — h3. It carried its own kicker rung (18/21 on phones) until D5 folded it onto h3 24/28: one increment, and h3 is already the rung's desktop value (32/37), so the fold cost the page a size and changed nothing above 1024. */ html[data-brand="aktiv-2026"] .a26h-hero-kicker { color: var(--a26-on-dark); font-family: var(--font-a26-display) !important; font-size: var(--a26-t-h3); font-weight: 400 !important; letter-spacing: var(--a26-track-display); line-height: var(--a26-lh-h3); } /* The locality — h1, reversed. */ html[data-brand="aktiv-2026"] .a26h-hero-locality { color: var(--a26-on-dark); font-family: var(--font-a26-display) !important; font-size: var(--a26-t-h1); font-weight: 400 !important; letter-spacing: var(--a26-track-display); line-height: var(--a26-lh-h1); } /* ---- Top bar. Both boards draw it OVER the photo, not as a page-level bar, and neither makes it sticky. It stays a
sibling of
so the banner and the main landmark are not nested. -------------------- */ /* Three tracks rather than space-between: both boards centre the wordmark on the PAGE, not between its two unequal neighbours (LTK-0 puts it at x=629 of 1440, dead centre for its 181px width). */ html[data-brand="aktiv-2026"] .a26h-topbar { align-items: center; column-gap: var(--a26-s-3); display: grid; grid-template-columns: 1fr auto 1fr; inset-inline: 0; padding-block: var(--a26-s-5); padding-inline: var(--a26-s-4); position: absolute; top: 0; z-index: 2; } @media (min-width: 1024px) { html[data-brand="aktiv-2026"] .a26h-topbar { padding-block: var(--a26-s-5); padding-inline: var(--a26-gutter); } } /* "Boligpromo" — Aktiv Sans, sentence case, untracked, in the reversal colour: LTK-0 draws it 20/26, LTL-0 14/18. It is NOT an eyebrow: no Fremover, no caps, no tracking. ONE rung now: ui 16/20 at every width. D5 folded the old 14 on phones and the old 20 on desktop onto it — the top bar is chrome, and chrome on this page is the ui rung. */ html[data-brand="aktiv-2026"] .a26h-topbar-word { color: var(--a26-on-dark); flex-shrink: 0; font-family: var(--font-a26-body) !important; font-size: var(--a26-t-ui); font-weight: 400 !important; letter-spacing: 0; line-height: var(--a26-lh-ui); text-transform: none; } /* Phone: the word is OUT (Henrik, 2026-09-12). Three marks across a 428 bar already cost the status pill its place in the bar (§19.2); the word is the next one to go, and what is left is the wordmark alone — the mark that says whose page this is. It stays in the DOM: the desktop rule above is the authority, and a `display: none` here is the whole phone behaviour. The bar is a THREE-TRACK grid (1fr auto 1fr) and the wordmark is centred by sitting in the middle track. With the word and the bar pill both out of flow, auto-placement would slide the wordmark into track 1 and it would no longer be centred, so the phone rule pins it to track 2 explicitly. */ @media (max-width: 1023px) { html[data-brand="aktiv-2026"] .a26h-topbar-word { display: none; } html[data-brand="aktiv-2026"] .a26h-wordmark { grid-column: 2; } } /* The centred wordmark. Both boards fill it #E9E2DD, a warm near-white; the asset lib/brand-assets.ts resolves is the dark lockup, so it is inverted and held just under full white to land on the boards' value. Sized 160x42 on LTL-0 and 181x47 on LTK-0; the 305:80 box is declared so the bar cannot reflow while the file is in flight. */ html[data-brand="aktiv-2026"] .a26h-wordmark { aspect-ratio: 305 / 80; display: block; filter: brightness(0) invert(1); height: 42px; object-fit: contain; opacity: 0.92; width: auto; } @media (min-width: 1024px) { html[data-brand="aktiv-2026"] .a26h-wordmark { height: 47px; } } /* The status pill — the button device's box, outlined in the reversal colour and CHAMFERED: the agency board draws Aktiv's four-corner cut on "Klar til deling", and the 2026-09-05 ruling that reserved the chamfer for the contact pair was simply wrong about this one control (Henrik, 2026-09-10). Same cut as the pair (--a26-chamfer — the video's hero pill takes the same device, board.tsx CHAMFER_BUTTON_OUTPUT_PX; the web token went 4 -> 5 on 2026-09-12, Henrik asked for the cut to read slightly more), and the pair's notch is NOT part of it: that V is the joined pair's own device. Not interactive: no hover, no press. HOW THE RING IS DRAWN. The pair paints the ink on the element and lays a 1px-inset canvas fill over it (clip-path: inherit). This pill cannot: it sits over the property's hero photo at BOTH placements, so its interior has to stay see-through, and a clip-path on the element itself would cut the label away with the interior. So the ring is a `::before` overlay carrying the ink, with the interior punched out of the same clip-path by an evenodd fill rule — outer boundary = the pair's polygon minus the notch, inner boundary = exactly what the pair's inset-1px `::before` describes, so the two chamfered controls are one device down to the corner join. The whole thing is behind @supports, and where the fill rule is unsupported the pill keeps the square 1px border it had — the element's border stays in the box (transparent) either way, so the 48px box and the 20px text inset never move. TWO PLACEMENTS, ONE SHOWN. The markup draws it twice (A26StatusPill) and exactly one copy is displayed, so the a11y tree only ever holds one status: --bar the boards' placement, in the top bar's right track. ≥1024 only. --hero the phone's, centred in the hero under the postnummer · sted line. Three marks across a 428px bar read as crammed (Henrik, 2026-09-08), so below 1024 the bar keeps "Boligpromo" and the wordmark and the status comes down here — where it gets the FULL control box (48 high, 1px outline, ui 16) rather than the bare label + dot the bar used to squeeze in. `display: none` on the copy that is not in play is what keeps it out of the accessibility tree; `visibility` or opacity would leave a second status for a screen reader to read out. */ html[data-brand="aktiv-2026"] .a26h-statuspill { align-items: center; border: var(--a26-hairline-w) solid var(--a26-on-dark); border-radius: var(--a26-radius-control); color: var(--a26-on-dark); flex-shrink: 0; font-family: var(--font-a26-body) !important; font-size: var(--a26-t-ui); font-weight: 400 !important; gap: var(--a26-s-3); line-height: var(--a26-lh-ui); min-height: var(--a26-control-h); padding-inline: var(--a26-control-pad); position: relative; } /* The chamfer. `evenodd` in a clip-path polygon is what punches the interior back out, so the guard tests exactly that and nothing else — no fill rule, no chamfer, and the square border above still draws the pill. */ @supports (clip-path: polygon(evenodd, 0 0, 1px 0, 0 1px)) { html[data-brand="aktiv-2026"] .a26h-statuspill { /* The border stays, for the box and the text inset; the ring is the ink. */ border-color: transparent; } html[data-brand="aktiv-2026"] .a26h-statuspill::before { /* The inner ring's cut: a 1px INWARD offset of the outer 45-degree corner, which lands at chamfer + sqrt(2) - 1, not chamfer + 1. Declared on the ring itself rather than in `:root` so the chamfer token keeps exactly two readers — the pair and this pill. */ --a26-chamfer-in: calc(var(--a26-chamfer) + 0.41421356px); background-color: var(--a26-on-dark); clip-path: polygon( evenodd, /* --- OUTER: the octagon. The pair's polygon without the pair's notch. */ var(--a26-chamfer) 0, calc(100% - var(--a26-chamfer)) 0, 100% var(--a26-chamfer), 100% calc(100% - var(--a26-chamfer)), calc(100% - var(--a26-chamfer)) 100%, var(--a26-chamfer) 100%, 0 calc(100% - var(--a26-chamfer)), 0 var(--a26-chamfer), /* --- THE SLIT, out to the inner ring and, at the end, back along the same line. `polygon()` is ONE closed path, so an evenodd ring has to reach its inner boundary somehow, and the segment it travels on must enclose no area or evenodd flips the fill beside it. Round 4 ran the two joins to DIFFERENT points — out from `0 chamfer` to the inner top-edge vertex, home from the inner left-edge vertex to `chamfer 0` — and those two lines cross at the middle of the top-left cut. Two wedges of the ring flipped to empty there and the cut came out as a fat blob, a gap and a triangle: Henrik's dent (2026-09-12). Out and home on ONE segment is the fix; it lies inside the ring the whole way, so it paints nothing and punches nothing. */ var(--a26-hairline-w) var(--a26-chamfer-in), /* --- INNER: the same octagon offset 1px INWARD, which is why the cut reads `chamfer + 0.41` and not `chamfer + 1`. A 45-degree corner offset by 1 moves its line to x + y = chamfer + sqrt(2), so the vertex on the top edge sits at chamfer + sqrt(2) - 1. `chamfer + 1` put that line at chamfer + 2 and made the diagonal 1.41px of ink against the straight edges' 1 — the same error the pair's `clip-path: inherit` made in the other direction, and the reason the pair carries offset literals rather than the outer numbers. */ var(--a26-chamfer-in) var(--a26-hairline-w), calc(100% - var(--a26-chamfer-in)) var(--a26-hairline-w), calc(100% - var(--a26-hairline-w)) var(--a26-chamfer-in), calc(100% - var(--a26-hairline-w)) calc(100% - var(--a26-chamfer-in)), calc(100% - var(--a26-chamfer-in)) calc(100% - var(--a26-hairline-w)), var(--a26-chamfer-in) calc(100% - var(--a26-hairline-w)), var(--a26-hairline-w) calc(100% - var(--a26-chamfer-in)), /* inner ring closed, then home down the slit */ var(--a26-hairline-w) var(--a26-chamfer-in), 0 var(--a26-chamfer) ); content: ""; inset: 0; pointer-events: none; position: absolute; } } /* Phone: the hero copy is on, the bar copy is out. */ html[data-brand="aktiv-2026"] .a26h-statuspill--bar { display: none; } html[data-brand="aktiv-2026"] .a26h-statuspill--hero { align-self: center; display: inline-flex; justify-content: center; margin-block-start: var(--a26-s-2); } @media (min-width: 1024px) { /* Desktop: back to the boards — the bar carries it, the hero does not. */ html[data-brand="aktiv-2026"] .a26h-statuspill--bar { display: flex; justify-self: end; } html[data-brand="aktiv-2026"] .a26h-statuspill--hero { display: none; } } /* The dot breathes: opacity 1 -> 0.55 -> 1 over one slow cycle, opacity ONLY (the aktiv-2019 dot scales; nothing here moves). Green is status, and a live "ready" signal is status, not decoration — Henrik 2026-09-06, graphics device spec §6.4. Off under reduced motion (the kill switch at the end). */ @keyframes a26h-dotpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } html[data-brand="aktiv-2026"] .a26h-statusdot { animation: a26h-dotpulse var(--dur-a26-pulse) var(--ease-a26-micro) infinite; background-color: var(--a26-green); border-radius: 50%; display: block; flex-shrink: 0; height: var(--a26-dot); width: var(--a26-dot); } /* ============================================================================ MEDIA — the boards' video preview (05, 06). The graphics have their own device further down (08). Flat: no shadow (the boards draw one on the FB thumbnail; the design language retires elevation — deviation logged). ============================================================================ */ html[data-brand="aktiv-2026"] .a26h-media { background-color: var(--a26-media-ground); border: none; border-radius: var(--a26-radius-media); cursor: pointer; display: block; overflow: hidden; padding: 0; position: relative; width: 100%; } html[data-brand="aktiv-2026"] .a26h-media-inner { display: block; height: 100%; width: 100%; } html[data-brand="aktiv-2026"] .a26h-media > img, html[data-brand="aktiv-2026"] .a26h-media > video, html[data-brand="aktiv-2026"] .a26h-media-inner > img, html[data-brand="aktiv-2026"] .a26h-media-inner > video { display: block; height: 100%; object-fit: cover; width: 100%; } html[data-brand="aktiv-2026"] .a26h-media--wide { aspect-ratio: var(--a26-video-wide-aspect); } html[data-brand="aktiv-2026"] .a26h-media--tall { aspect-ratio: var(--a26-video-tall-aspect); max-width: var(--a26-story-w); } /* The play disc — LTL-0 64px with a 16x19 triangle, LTK-0 96px with 24x28. */ html[data-brand="aktiv-2026"] .a26h-playchip { align-items: center; background-color: var(--a26-playchip); border-radius: 50%; display: flex; height: var(--a26-s-8); inset: 0; justify-content: center; margin: auto; pointer-events: none; position: absolute; transition: transform var(--dur-micro) var(--ease-a26); width: var(--a26-s-8); } @media (min-width: 1024px) { html[data-brand="aktiv-2026"] .a26h-playchip { height: var(--a26-s-9); width: var(--a26-s-9); } } @media (hover: hover) { html[data-brand="aktiv-2026"] .a26h-media:hover .a26h-playchip { transform: scale(1.06); } } /* The play triangle is a MARK, not text, so it takes the chrome ink rather than the retired --a26-ink-deep (#1F1410, a third near-ink). */ html[data-brand="aktiv-2026"] .a26h-playchip svg { fill: var(--a26-ink-chrome); height: 19px; margin-left: 3px; width: 16px; } @media (min-width: 1024px) { html[data-brand="aktiv-2026"] .a26h-playchip svg { height: 28px; width: 24px; } } /* The story preview's app chrome (LTK-0 section 06 draws the tall preview as an Instagram story: a progress bar, the poster's avatar and name, a reply field and two glyphs at the foot). Decorative and inert: it sits over the film, takes no pointer, and is hidden from assistive technology. */ html[data-brand="aktiv-2026"] .a26h-story { color: var(--a26-on-dark); display: flex; flex-direction: column; inset: 0; justify-content: space-between; padding: var(--a26-s-3); pointer-events: none; position: absolute; } /* A floor under the story's name row, the hero scrim's own colour, so the reversal type reads over a bright still. NEUTRAL BLACK since B&Y round 1 (2026-09-14) — it ramps to zero, so its 0.45 head is a type floor and not a filter over the picture. */ html[data-brand="aktiv-2026"] .a26h-story-top { background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%); display: block; margin: calc(var(--a26-s-3) * -1) calc(var(--a26-s-3) * -1) 0; padding: var(--a26-s-3) var(--a26-s-3) var(--a26-s-5); } html[data-brand="aktiv-2026"] .a26h-story-bar { background-color: rgba(250, 245, 240, 0.35); display: block; height: 2px; width: 100%; } html[data-brand="aktiv-2026"] .a26h-story-bar > span { background-color: var(--a26-on-dark); display: block; height: 100%; width: 40%; } html[data-brand="aktiv-2026"] .a26h-story-head, html[data-brand="aktiv-2026"] .a26h-story-foot { align-items: center; display: flex; gap: var(--a26-s-2); } html[data-brand="aktiv-2026"] .a26h-story-head { padding-top: var(--a26-s-2); } /* The story chrome's initials — the same deliberate exception as .a26h-avatar above: Varighet at the mono size inside an aria-hidden drawing of another app's UI. The two story text lines below take the mono size in the Sans face for the same reason. */ html[data-brand="aktiv-2026"] .a26h-story-avatar { align-items: center; background-color: var(--a26-peach); border-radius: 50%; color: var(--a26-text); display: flex; flex-shrink: 0; font-family: var(--font-a26-display) !important; font-size: var(--a26-t-mono); height: var(--a26-s-5); justify-content: center; line-height: 1; width: var(--a26-s-5); } html[data-brand="aktiv-2026"] .a26h-story-name, html[data-brand="aktiv-2026"] .a26h-story-time { font-family: var(--font-a26-body) !important; font-size: var(--a26-t-mono); line-height: var(--a26-lh-mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-brand="aktiv-2026"] .a26h-story-time { opacity: 0.7; } html[data-brand="aktiv-2026"] .a26h-story-reply { border: var(--a26-hairline-w) solid rgba(250, 245, 240, 0.7); border-radius: var(--a26-s-5); flex-grow: 1; font-family: var(--font-a26-body) !important; font-size: var(--a26-t-mono); line-height: var(--a26-lh-mono); min-width: 0; overflow: hidden; padding: var(--a26-s-1) var(--a26-s-3); text-overflow: ellipsis; white-space: nowrap; } html[data-brand="aktiv-2026"] .a26h-story-foot svg { flex-shrink: 0; height: var(--a26-s-4); width: var(--a26-s-4); } /* ============================================================================ THE FILM'S OPENING FRAME, over the video previews' poster (05, 06). Henrik, 2026-09-12: the videos are the key moment and their thumbnails are a bland photo. So the poster carries the three things the a26 BoligPromo comp puts on screen at second one — see components/boligpromo-a26/ A26ThumbOverlay.tsx for the transcription and the `?thumb=a|b|off` switch. EVERY NUMBER BELOW IS THE COMP'S, not this stylesheet's taste: the plate's cut `board.tsx CHAMFER_PHOTO_OUTPUT_PX` = 12, one value for both frames, as the film has one the pill's cut `A26_HERO_PILL_CHAMFER_RATIO` = 0.375 of the pill's own HEIGHT (24 -> 9). A RATIO, because the plate device is proportional where the agency's button cut is fixed — which is exactly why this block does NOT read `--a26-chamfer`: that 5px token is the contact pair's and the status pill's, and the invariants test keeps it to those two controls. the hairline `A26_HERO_PILL_STROKE_OUTPUT_PX` = 1, i.e. `--a26-hairline-w`, on plate and pill alike the scrim S01's own wash (`scenes.tsx SCRIM.tall.hero`, stops 0.65 / 0.15 / 0.25 at mid 40), in the warm ink the hub's hero scrim already uses rather than the comp's neutral — bottom-heavy under the address, with a lighter return at the top for the pill. HOW THE HAIRLINES ARE DRAWN. The same evenodd clip-path ring as `.a26h-statuspill` (see its note): both sit over the property photograph, so the interior has to stay see-through, and a clip-path on a bordered box cuts the border away with the corner and leaves four open gaps where the diagonals should be. Outer boundary = the octagon; inner boundary = the same octagon 1px in, whose cut is `cut + sqrt(2) - 1` because a 45-degree line offset by 1 perpendicular moves to x + y = cut + sqrt(2); out and home along ONE segment, so the connector encloses no area and evenodd cannot flip the fill beside it (the round-4 dent). Behind the same @supports guard, and where the fill rule is unsupported the plate keeps a square 1px border and the pill keeps its own — the device degrades to a rectangle, never to nothing. THE TYPE TAKES NO NEW RUNG. The ladder is 6 sizes at 428 and 7 at 1440 (devices doc §2) and stays that way: pill label + locality the mono rung, 12 at both widths street, wide frame h2 — 28 at 428, 32 at 1440. The frame grows with the column (388 -> 583), so the type may too street, story frame the UI rung, 16 at both widths. The story preview is a fixed 189 x 336 at EVERY viewport (`--a26-story-w`), so its type is fixed too, and round 3's 8px pad leaves it 157px of content — enough that most streets set on ONE line and Bringebaerhagen 7A stops wrapping. Two lines, then ellipsis. `?tallpill=h3` measures the h3 rung here instead and loses at 1440, where h3 is 32; see the story-frame block. MOTION. The overlay is the PRE-ROLL: it belongs to the still, so it leaves when the film starts and comes back when it stops. MediaPlayButton marks its own playback with `data-a26-live` (the inline element only ever plays on a phone, where it goes to native fullscreen; on desktop the lightbox covers the page and this poster keeps its overlay, which is correct). Opacity only, `--dur-micro`, and under reduced motion the fade collapses to 0s — the overlay still goes, it just does not travel. ============================================================================ */ html[data-brand="aktiv-2026"] .a26h-thumb { /* Air between the frame's edge and the plate. */ --a26-thumb-inset: var(--a26-s-3); /* * Air between the plate and the type inside it. ROUND 2 (Henrik, 2026-09-12: * «lets have some more breathing room in the corner of the wide video. looks * a bit crammed there»): 8 -> 16 on a phone and 12 -> 24 from 1024 up — two * rungs of the ladder each. The PLATE DOES NOT MOVE; the corner reads * composed because the stack steps away from it, not because the frame did. * And 16 of 291 is 5.5 % of the wide frame's height, 24 of 437 is 5.5 % — * the same air at both widths, which is why it is two rungs and not one. */ --a26-thumb-pad: var(--a26-s-4); /* Extra floor under the address. 0 unless something already owns the foot. */ --a26-thumb-floor: 0px; /* The comp's photo chamfer. */ --a26-thumb-cut: 12px; --a26-thumb-pill-h: var(--a26-s-5); /* * 0.375 of the pill's height — the comp's hero-pill ratio * (`A26_HERO_PILL_CHAMFER_RATIO`). ROUND 3 DERIVES it rather than stating * 9px, because the story frame now runs a SHORTER pill (20 rather than 24) * and the ratio has to follow the height instead of being restated beside * it: 24 x 0.375 = 9 in the wide frame, 20 x 0.375 = 7.5 in the story one. * One expression, so the cut and the height can never drift apart. */ --a26-thumb-pill-cut: calc(var(--a26-thumb-pill-h) * 0.375); /* * S01's own wash, in the warm ink the hub's hero scrim already uses rather * than the comp's neutral: a deep foot under the stack, a light belly so the * photograph still sings where the play disc is, and a small return at the * top so the plate's upper hairline has a floor to sit on. * * The foot's 0.70 is CHOSEN ON MEASUREMENT, not on taste. Worst-pixel * contrast of every overlay text box against the ground it actually sits on * (photo + every scrim, glyphs blanked so what is read is the floor), all * three a26 fixtures at 428 and 1440: * * foot 0.62 worst 4.79 passes, no margin * foot 0.70 worst 6.37 SHIPPED — and 0.70 is the comp's own S02 value, * a rung above its 0.65 S01 foot * foot 0.78 worst 8.58 darker than the picture can afford * * The bar is 4.5:1: the pill label and the subline are 12px, which is small * text, so large-text 3:1 does not apply to them. */ /* * ROUND 10 (2026-09-13) ADDS THE 0.62 STOP AT 50 %, and it is a scrim fix, * not a composition one. The wide frame's stack is bottom-anchored, so a * TWO-LINE address pushes the pill up into the belly: on * `a26-demo-dronning-eufemias-gate-31` at 428 the «TIL SALGS» label sits * 43.0-47.1 % up the frame, where the old ramp had thinned to 0.47-0.56, and * the label measured 3.52:1 over sky (flagged as round 9's open item, and * present on the pristine baseline too). One-line fixtures sit at 25-36 % * and were never at risk. * * The band the ink can reach now holds round 3's story calibration — * 0.62-0.64 through the pill band — carried here as a single stop, so the * declaration reads 0.66 at 38 % to 0.62 at 50 % instead of falling straight * to 0.16. The CLEARING DID NOT MOVE: 0.16 is still at 62 % and the top * third of the photograph is the same picture it was. What darkens is the * 38-62 % belly, by at most 0.21 at the 50 % stop and nothing at either end. * Measured after: that label goes 3.52 -> 5.79, and the only other cell in * the 36-cell probe that moves at all is the same fixture's street, 6.98 -> * 7.08. Every wide and story cell on the other two fixtures is identical to * the pixel, which is what "the clearing did not move" means in numbers. */ /* * ROUND 11 (B&Y round 1, 2026-09-14) CHANGES THE HUE AND CAPS THE CLEARING, * and changes nothing about the type band. Two halves to the agency's note * (#2 and #7: «Du kan legge et svart filter over bildene, men unngå et brunt * filter da dette gir alt et litt retro-preg. Ville også redusert mengden * filter. Helst 20%, max 33%»): * * HUE — every stop moves from the warm ink rgba(25,12,4) to a NEUTRAL * rgba(0,0,0). That is the unambiguous half and it is free: black at the * same alpha is marginally darker than the warm ink, so no measured * contrast falls. * * AMOUNT — the part of the frame that is purely PICTURE is what the agency * is looking at when it says «20%, max 33%», and that is the clearing: the * 0.16 stop at 62 % and the return at 100 %. The return was 0.24 and is * now 0.20, so the whole clearing is at or under the 20 % target. No type * sits above 62 % in this frame (the stack is bottom-anchored, round 2), so * this cap cannot touch a contrast number. * * WHAT IS DELIBERATELY NOT REDUCED: the 0.70 / 0.66 / 0.62 band from the * foot to 50 %. That is not a filter over a photograph, it is the measured * legibility floor under reversal type, and the measurement below is what * blocks it — foot 0.62 already measures 4.79:1 worst-pixel, i.e. AA with * no margin, and 0.33 would put 12px light type far under 4.5:1 on a * bright façade. Taking the type band to 20 % needs the COMPOSITION to * change (B&Y #11-scale re-layout), not the scrim. Logged as held. */ --a26-thumb-scrim: linear-gradient( 0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.66) 38%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.16) 62%, rgba(0, 0, 0, 0.2) 100% ); /* * The two ends of S01's column are the two FLOW children of this box, so * where they sit is one property rather than four inset calcs: the wide * frame opens them out (`space-between` — pill top-left, address * bottom-left), the story frame stacks them at the foot the way the comp * does. Nothing here is absolutely positioned except the two painted * layers, which means a two-line address pushes the pill nowhere and a * one-line address leaves no hole. */ align-items: flex-start; display: flex; flex-direction: column; /* * PILL -> ADDRESS. The comp's own share of the frame put this at 4 on a * phone and 7-8 from 1024 up (S01's `L.hero.gap` is 28 board px of 1920 = * 1.46 % tall, 36 of 2208 = 1.63 % wide). Round 2 sets it to ONE RUNG — 8 — * at every width: the share derivation is right about a 1080-wide film and * wrong about a 189-wide preview, and 4px between a 24px pill and a 28px * display line is what «crammed» meant. The gap is now format-invariant, * so the desktop block below no longer needs to say anything about it. */ gap: var(--a26-s-2); inset: 0; justify-content: flex-end; padding: calc(var(--a26-thumb-inset) + var(--a26-thumb-pad)); padding-block-end: calc( var(--a26-thumb-inset) + var(--a26-thumb-pad) + var(--a26-thumb-floor) ); pointer-events: none; position: absolute; /* A