/* ============================================================ ZENCY HUB · .zhub-* — de fire indholdstunge hub-/profilsider ------------------------------------------------------------ Handle: zency-hub · afhænger af zency-design-system + zency-behandling. Sættes i kø FØR sider.css, så sider.css stadig er det sidste temaark. Dækker: 446 /massage/ (.zhub--massage) 16008 /massage-sjaelland/ (.zhub--region) 8912 /rab-godkendt-massoer/ (.zhub--rab) 20652 /massorer/anatomi-nord-morten-wolter-andersen/ (.zhub--profil) Filen indeholder KUN det de eksisterende ark ikke har. Alt andet er genbrug: .zb-hero, .zb-trust, .zb-grid, .zb-cardgrid/.zb-card, .zb-faq, .zb-author, .zency-article, .zs-hero, .zf-band, .zf-city-grid og CV-vokabularet .zcv-about__grid / .zcv-about__aside / .zcv-edu. Tre regler filen holder: • Ingen bare element-selektorer. Hver eneste regel hænger på .zhub eller en .zhub-*-klasse, så intet kan bløde ud på en side der blot har filen i kø. • Ingen hex-farver ud over ren hvid (#fff). Systemet har bevidst intet hvid-token — designsystemet, by.css og behandling.css skriver den også som literal. • Det der kan stå inde i .zency-article bærer .zency-article i selektoren. Prose-liftet styler p/ul/li som efterkommere (0,1,1), og en enkelt komponentklasse (0,1,0) taber tavst. Navigation og sekundær interaktion er sage. Oliven er reserveret sidens primære handling. ============================================================ */ /* ============================================================ 0 · HEROEN — bredere tekstspalte ------------------------------------------------------------ .zb-hero__inner er 48rem (768px) i behandling.css, og heroens manchet 36rem (576px). De mål er sat efter behandlingssidernes korte hero-tekst. Hub-siderne har tre-fire gange så meget: 446's manchet alene er 322 tegn, 16008's 340. På 576px bliver det 5-6 linjer under en H1 der selv brækker i tre — en høj, smal søjle midt i en bred skærm (Brian, 02-09-2026). Grebet er forsidens: dér står allerede `.zf-hero-home .zb-hero__inner { max-width: 52rem }` — en scoped overskrivning af max-width, ikke en ny hero. Her er den bare fluid, fordi den skal holde både 1280px-laptoppen og en 2560px-skærm. MÅLENE, og hvorfor de er dem: inner clamp(48rem, 68vw, 64rem) → 768px … 1024px. Loftet er 64rem, ikke wrap'ens 1200px: H1'en er 52px ved fuld størrelse, og 1024px giver den to nogenlunde lige lange linjer. Bredere ville lægge overskriften i én meget lang linje på de store skærme og en enlig efterslæber på de mellemste. intro clamp(36rem, 52vw, 41rem) → 576px … 656px. .z-usp er 18,8px fra 1167px og opefter; 656px ≈ 73 tegn pr. linje — inden for det læsbare 65-75, og manchetten går fra 5-6 linjer til 4. `text-wrap: balance` på H1'en, så de to linjer bliver lige lange i stedet for "lang linje + tre ord". Kun overskriften — balance på brødtekst koster mere end det giver. Gælder de tre .zb-hero-sider (446 / 16008 / 8912). Profilsiden 20652 bruger .zs-hero og har sine egne mål i sider.css. ============================================================ */ .zhub .zb-hero__inner { max-width: clamp(48rem, 68vw, 64rem); } .zhub .zb-hero__h1 { text-wrap: balance; } .zhub .zb-hero__intro { max-width: clamp(36rem, 52vw, 41rem); } /* ============================================================ 1 · MASSAGEFORMER — .zhub-typer ------------------------------------------------------------ Kortgitteret der afløser Elementors "Indholdsfortegnelse"-widget på /massage/. Hvert kort peger på sit eget afsnit længere nede på siden, så gitteret ER indholdsfortegnelsen — bare læsbar og klikbar med 44px flade i stedet for en liste med små links. ⚠ Fladen er CREAM, ikke hvid. Sektionen ligger direkte under .zb-trust, og trust-baren bliver under 768px et løftet, afrundet badge hvis hvide flade løber ned i .zb-trust__inner (KOMPONENTER §3.4). Alle tre templates der renderer baren har derfor en TONET sektion nedenunder. Rytmen bliver cream (kort) → sage-50 (.zb-grid) → cream (.zb-article) — præcis den alternation behandlingssiderne allerede kører. ============================================================ */ .zhub-typer { background: var(--color-cream); padding-block: clamp(2.75rem, 2.2rem + 2.6vw, 4rem); } .zhub-typer .zb-grid__sub { margin-bottom: 0; } /* BILLEDER (02-09-2026, Brian). Kortene kører nu .zb-card__media som resten af sitet — behandlingens eget featured image, hentet i zency_hub_type_billeder(). Der er INGEN ny billed-CSS: aspect-ratio 16/10, object-fit: cover og hover-zoomet står allerede i behandling.css §9. Den tidligere note her ("13 gamle 300px-uploads") holdt ikke ved en måling mod produktion: de tretten featured images er 500-2121px brede, og de mindste to (Oliemassage 500×333, Svensk massage 700×524) dækker fint et kortmedie der er højst ~380px bredt i tre kolonner. FALLBACK: har en behandling intet featured image, udelader templaten hele .zb-card__media. Så mangler kortet sin øverste luft — den gav body'en før ubetinget, og gør det nu kun for det medieløse kort. ⚠ Reglen ligger i en min-width-blok med vilje. `:not(:has(.zb-card__media))` tæller som en klasse, så selektoren vejer (0,4,0) og ville ellers slå listevisningens `.zhub .zhub-typer .zb-card__body { padding: 0 }` (0,3,0) under 640px — og et enkelt billedløst kort ville få 1,4rem topluft midt i en liste af 64px-rækker. Kortvisningen er den eneste der har brug for kompensationen, så den er den eneste der får den. */ @media (min-width: 640px) { .zhub-typer .zb-card:not(:has(.zb-card__media)) .zb-card__body { padding-top: 1.4rem; } } /* Teaseren er sektionens egen første sætning, ordret. .zb-card__meta er 0,75rem (bylinje-størrelse) og for lille til en sætning man skal læse. */ .zhub-card__tekst { margin-top: 0.55rem; font-family: var(--font-source); font-size: 0.95rem; line-height: 1.55; color: var(--color-ink-soft); text-wrap: pretty; } /* ============================================================ 1b · MASSAGEFORMER PÅ MOBIL — forsidens listevisning ------------------------------------------------------------ Samme adfærd som forsidens behandlingskort (.zf-treatment-grid i forside.css, blokken "LISTE PÅ MOBIL"): under 640px bliver gitteret ÉN kolonne, rammen flytter fra hvert kort ud på selve gitteret, og hvert kort bliver en listerække med et 64px-thumbnail, titel, beskrivelse og en pil yderst til højre. Seks kort blev dér til ~505px i stedet for ~750px; her er der TRETTEN kort, så gevinsten er tilsvarende større. ⚠ Brudpunktet er 639.98px — forsidens eget, ikke 600px. To lister med hver sit brudpunkt ville skifte udseende i et bånd på 40px. HVORFOR IKKE BARE .zf-tcard: forsidens kort bærer en oliven CTA-pille pr. kort ("Find sportsmassør"), fordi hvert kort dér ER sidens handling. De tretten kort her er sidens INDHOLDSFORTEGNELSE — de springer til et afsnit længere nede på samme side. Tretten oliven piller ville stjæle blikket fra den rigtige CTA (brand §13, farveregel 1). Derfor beholder vi .zb-card, arkivkortet, og giver det forsidens mobil-anatomi. Specificiteten er .zhub .zhub-typer … (0,3,0) hele vejen, ikke kilde- rækkefølge: by.css sætter .zby .zb-cardgrid (0,2,0) til to kolonner på mobil og .zby .zb-card__body/-title/-more (0,2,0) under 520px, og de skal tabe entydigt. Samme disciplin som forside.css beskriver i sin egen blok. ============================================================ */ @media (max-width: 639.98px) { /* Gitteret ER listen: én ramme om tretten rækker, ikke tretten kasser. */ .zhub .zhub-typer .zb-cardgrid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-xl); overflow: hidden; /* Ordret forsidens skygge. Filens "ingen hex-farver"-regel handler om flader og tekst; en elevation skrives som rgba overalt på sitet (behandling.css, forside.css, by.css) og har intet token. */ box-shadow: 0 12px 32px -22px rgba(68, 103, 91, 0.35); } /* ⚠ grid-auto-rows: auto ovenfor er ikke pynt. .zby .zb-cardgrid sætter 1fr, så alle rækker bliver lige høje — i en liste ville hver eneste række så være lige så høj som den længste teaser. */ .zhub .zhub-typer .zb-card { flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; background: transparent; border: 0; border-top: 1px solid var(--color-line); border-radius: 0; overflow: visible; box-shadow: none; } .zhub .zhub-typer .zb-card:first-child { border-top: 0; } /* Løftet hører til et kort, ikke til en række — og på touch hænger :hover fast efter et tap, så rækken ville blive siddende forskudt. */ .zhub .zhub-typer .zb-card:hover { transform: none; box-shadow: none; border-color: transparent; } .zhub .zhub-typer .zb-card:hover .zb-card__media img { transform: none; } /* Thumbnailet: samme 64px-kvadrat som forsidens. aspect-ratio 1/1 overskriver kortmediets 16/10, så billedet beskæres i midten frem for at blive presset sammen. */ .zhub .zhub-typer .zb-card__media { width: 64px; height: 64px; flex: none; aspect-ratio: 1 / 1; border-radius: 0.8rem; } /* Body'en bliver rækkens indhold: to tekstlinjer i venstre spor, pilen i højre spor over begge rækker. Grid frem for flex, fordi pilen ligger INDE i body'en i .zb-card's markup (KOMPONENTER §3.10) og ikke må flyttes ud — kortet er delt med behandlings-, symptom- og bysiderne. */ .zhub .zhub-typer .zb-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.5rem; padding: 0; min-width: 0; } .zhub .zhub-typer .zb-card__title { grid-column: 1; grid-row: 1; font-size: 0.95rem; line-height: 1.25; text-align: left; } /* Forsidens beskrivelse er en etiket på ~30 tegn; vores teaser er en hel sætning på op til 180. Den klippes til to linjer, så rækkerne bliver ens høje og listen bliver en liste. Teksten står ORDRET i DOM'en — det er en visningsbeslutning, ikke en indholdsbeslutning. */ .zhub .zhub-typer .zhub-card__tekst { grid-column: 1; grid-row: 2; margin-top: 0.125rem; font-size: 0.8rem; line-height: 1.35; letter-spacing: 0.2px; color: var(--color-sage-500); /* 5,1:1 på hvid — AA for lille tekst */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* "Læs mere" bliver til rækkens pil. Teksten bliver STÅENDE i markup'en og skjules med font-size: 0 — samme greb som .zb-faq__icon bruger på sit plus. Skærmlæseren læser stadig "Læs mere", så linkets navn er uændret; kun blækket forsvinder. */ .zhub .zhub-typer .zb-card__more { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; padding: 0; /* gap: 0 — ellers står .zb-card__more's egen 0,4rem mellem den nulstillede tekst og pilen som et tomt hak. */ gap: 0; font-size: 0; color: var(--color-olive); } .zhub .zhub-typer .zb-card__more svg { width: 16px; height: 16px; } } /* ============================================================ 2 · CTA-RÆKKE INDE I ARTIKLEN — .zhub-cta ------------------------------------------------------------ Hver massageform slutter med sin egen "Book …"-knap, som den gør i dag. Knappen står i et

INDE i .zency-article, og prose-liftets `.zency-article p` (0,1,1) slår en enkelt klasse (0,1,0) — derfor er selektoren her tre led lang. Samme greb som KOMPONENTER §6.6 foreskriver: nulstillingen bor i vores egen fil. ============================================================ */ .zhub .zhub-cta { margin: 2.4rem 0 0; text-align: center; } /* Inde i artiklen vejer prose-liftets `.zency-article p` (0,1,1) mere end en enkelt klasse (0,1,0), så margin skal gentages med et led mere. */ .zhub .zency-article .zhub-cta { margin: 2.4rem 0 2.8rem; text-align: center; } .zhub .zhub-cta .z-btn { text-decoration: none; } /* 13 massageformer i træk: en anelse ekstra luft over hver H2, så øjet kan se hvor én form slutter og den næste begynder. Prose-liftets egen margin bliver stående — det er kun et tillæg, ikke en overskrivning. */ .zhub--massage .zency-article h2 { padding-top: 0.6rem; } /* ============================================================ 3 · ANMELDELSESBÅND — .zhub-anmeldelser ------------------------------------------------------------ Kun 8912 bruger den: dér lå anmeldelses-slideren som sin egen sektion mellem grid'et og teksten. Hvid flade, så sage-50-grid'et og cremen i artiklen ikke støder sammen. 446 og 16008 har deres anmeldelsesbånd INDE i artikelsektionen, i en .zb-brb-wrapper uden for .zency-article — se templaten. ============================================================ */ .zhub-anmeldelser { background: #fff; padding-block: clamp(2.5rem, 2rem + 2.4vw, 3.75rem); } /* ============================================================ 4 · PROFILSIDEN — .zhub--profil ------------------------------------------------------------ Bygget på CV'ets delte vokabular (.zcv-about / .zcv-about__grid / .zcv-about__aside / .zcv-edu / .zcv-panel__note fra behandler.css). CV'ets EGEN hero (.zch-*) genbruges bevidst ikke — den er et lukket system, jf. KOMPONENTER §3.26. ============================================================ */ /* Portrættet er 512×512. .z-media-split__media ville beskære det til 3:2 og klippe hovedet, så figuren har sin egen ramme her. Loftet på 260px er samme argument som CV'ets: kilden er lille, og alt over det bliver blødt. */ .zhub-portraet { display: block; width: 100%; max-width: 260px; margin: 0 auto 1.4rem; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-xl); background: var(--color-sage-50); } /* Uddannelseslisten har navn + sted, men ingen årstal. .zcv-edu reserverer 4,2rem til årstalskolonnen; uden tal ville hver linje starte med et hul. */ .zhub-edu--enkel li { grid-template-columns: 1fr; } /* Sociale profiler. Samme mål som .zby-contact__ic og .zom-some: 44px tap-target (WCAG 2.5.8), sage — ikonrækken er navigation, ikke sidens handling. ⚠ .zom-some findes i forvejen som inline-CSS i inc/zency-om.php. Skal de to nogensinde samles, hører den fælles version i et delt ark (KOMPONENTER §3.28), ikke i to kopier. */ .zhub-some { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.1rem 0 0; padding: 0; } .zhub-some a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #fff; border: 1px solid var(--color-sage-200); color: var(--color-sage-600); transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .zhub-some a:hover, .zhub-some a:focus { background: var(--color-sage-500); border-color: var(--color-sage-500); color: #fff; } .zhub-some a:focus-visible { outline: 2px solid var(--color-sage-600); outline-offset: 2px; } .zhub-some svg { width: 1.1rem; height: 1.1rem; fill: currentColor; } /* Asiden har tre ting under hinanden (portræt, uddannelse, kontakt); uden en streg imellem flyder de sammen. Sand, ikke line: asiden ER cream-2. */ .zhub-aside__del + .zhub-aside__del { margin-top: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); padding-top: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); border-top: 1px solid var(--color-sand); } /* ============================================================ 4b · ARTIKELUNIVERS-LINJEN — .zhub-univers ------------------------------------------------------------ Sætningen var på Elementor-siden overskrift for to jet-listing-grids der renderer intet. Gitrene er udeladt; linjen står tilbage som en enkelt henvisning til /blog/ og skal derfor læses som en note, ikke som en sektion. Cremen er sidens egen flade — den skal ikke bryde noget. ============================================================ */ .zhub-univers { padding-block: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); } .zhub-univers p { margin: 0; font-family: var(--font-source); font-size: 1.0588rem; line-height: 1.75; color: var(--color-ink-soft); text-wrap: pretty; } .zhub-univers a { color: var(--color-sage-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--color-sage-300); } .zhub-univers a:hover { color: var(--color-olive); text-decoration-color: var(--color-olive); } /* ============================================================ 5 · FORFATTERKORT — finpuds ------------------------------------------------------------ .zb-author__card har align-items:center fra 640px. Bærer kortet mere end én bylinje (som her: rolle + bio + link), svæver avataren midt i et dobbelt så højt kort. Samme rettelse som om-siden laver i sin inline-CSS. ============================================================ */ .zhub .zb-author__card { align-items: flex-start; } /* ============================================================ 6 · MOBIL ------------------------------------------------------------ Under 600px venstrestilles tekst-tunge blokke (KOMPONENTER §6.11). Centreringen bevares kun de fokale steder — her er CTA-rækken inde i artiklen den eneste, og den bliver. ============================================================ */ @media (max-width: 599px) { .zhub .zency-article .zhub-cta .z-btn { width: 100%; justify-content: center; } .zhub-portraet { max-width: 200px; } } /* ============================================================ Lodret rytme — samme fire tokens som by.css §13, behandling.css §12, forside.css, behandler.css og bookside-critical.css §6 (rytme-audit 2026-09-05, Mortens go på den samlede mockup). Ret tallet HER, aldrig i den enkelte regel. pair overskrift → undertekst 12 · 14 · 16 · 16 break overskriftsgruppe → indhold/knap 32 · 32 · 36 · 40 section luft øverst/nederst i hver sektion 48 · 55 · 65 · 80 (bredder 390 · 768 · 1024 · 1440) Målt 4/9: massageformer 64/45, artikel 64/64, RAB-anmeldelsesbånd 60, forfatter-bund 64; undertekst → kort 33. ============================================================ */ .zhub{--zhub-pair:clamp(0.75rem,0.5rem + 0.8vw,1rem);--zhub-break:clamp(2rem,1.2rem + 1.6vw,2.5rem);--zhub-section:clamp(3rem,1.5rem + 4vw,5rem)} .zhub .zhub-typer,.zhub .zb-article,.zhub .zhub-anmeldelser{padding-block:var(--zhub-section)} .zhub .zb-author{padding-bottom:var(--zhub-section)} .zhub .zhub-typer .zb-cardgrid{margin-top:var(--zhub-break)}