/* =============================================================================
FOTOTINT — duotone/monokrom tint av foto (byggekloss, 2026-09-07)
=============================================================================
Bakgrunn: retninger-nucleus-galleri-research-2026-09-07.md §4 pkt. 1 + §5.1.
Fototinting er det ene grepet som gjoer middels Lightstock-bilder til bevisst
design — og det grepet som baerer to av Nucleus' seks stilfamilier (F5 helt,
F2 halvveis). Vi tar MEKANISMEN, ikke massiviteten.
Fila er BEVISST frittstaaende: main.css eies av uttrykks-arbeidet, og
fototinten skal kunne skrus av ved aa fjerne én enqueue. Alt her er gata bak
`html[data-fototint="mild"|"full"]`; uten attributtet er arket en no-op
(bortsett fra .kp-artikkel__bilderamme, som kun er en nøytral ramme).
MEKANISME (§5.1: «graatone + kuloert multiply»)
1. Bildet gaas i graatone med `filter: grayscale(...)`.
2. Et pseudo-element over bildet fyller flatefargen `--foto-tint`
(= palettens `--accent-deep`) med `mix-blend-mode: multiply`.
3. Styrken er pseudo-elementets `opacity` — 0,55 «mild», 1,0 «full».
UNNTAK: portrettene (.kp-person__foto, .kp-person-side__foto) stopper paa
«mild» ogsaa under «full» — se blokka rett under nivaa-linjene.
Blandingen holdes inne i bilderammen (`isolation: isolate`), saa multiply
aldri lekker ned paa seksjonsflaten under.
INGEN ANIMASJON. Tinten har verken transition eller keyframes — derfor
trenger den heller ingen `prefers-reduced-motion`-gate for egen del. Det
den GJOER, er aa fryse temaets egne filter-overganger paa portrettene
(.kp-person__foto), slik at tinten ikke kan hoppe av ved peking.
ALDRI LOGO/IKON/QR. Selektorene er en eksplisitt liste over de aatte
fotobaerende rammene. `.kp-logo`, `.kp-*__ikon`, inline-SVG og QR-koder
ligger utenfor dem alle, og treffes derfor ikke ved konstruksjon — ikke av
et unntak som kan glippe.
KONTRAST (WCAG 1.4.3) — se blokka nederst i fila for de maalte tallene.
============================================================================= */
:root{
/* Flatefargen. `--accent-deep` er palettens eiendom og finnes i alle tolv
kuraterte paletter OG i `data-farge="egen"` (inc/farge.php baker den),
i BEGGE moduser — media-oeyene er moduslause i denne malen. */
--foto-tint:var(--accent-deep);
--foto-tint-styrke:0;
--foto-tint-graa:0%;
}
html[data-fototint="mild"]{--foto-tint-styrke:.55;--foto-tint-graa:55%}
html[data-fototint="full"]{--foto-tint-styrke:1;--foto-tint-graa:100%}
/* PORTRETTENE STOPPER PAA «MILD» — ogsaa naar siden staar paa «full».
RETTET 09.09.2026, designtesten av de fire retningene (funn F5),
strategy/kirkepakka/test-design-retninger-2026-09-09.md i nettsmed-shared.
`full` er markants standard (kp_fototint_uttrykk_default()) og skrives ut
eksplisitt av startpunktet «Verdig».
Paa et stemningsbilde er 100 % graatone + multiply nettopp grepet vi vil ha.
Paa et ANSIKT er det noe annet: maalt paa forsiden under katedral, der
`--accent-deep` er #726940, ble fire portretter med hver sin kuloer til fire
naer identiske olivensilhuetter. Menigheten mistet det ene bildet paa siden
som skal vaere en person og ikke en stemning.
Grepet beholdes derfor, men stoppes ved portrettene: de to portrettflatene
faar `mild`-verdiene, altsaa nettopp det trinnet som er bygget for aa dempe
uten aa utviske. `.kp-tale-kort__thumb`, heroen, nyhetsbrevet, velkomst-,
nyher- og artikkelbildet er stemningsbilder og staar uendret paa `full`.
MEKANISK: reglene her deklarerer de to tokenene paa selve RAMMA, ikke paa
. En deklarasjon paa elementet slaar den arvede verdien uansett
spesifisitet, saa hverken `!important` eller en tyngre selektor trengs;
`filter:grayscale()` paa ![]()
og `opacity` paa ::after arver begge fra
ramma og trenger ingen egen regel. Legges en ny portrettflate til i lista
over rammer, hoerer den hjemme her ogsaa. */
html[data-fototint="full"] .kp-person__foto,
html[data-fototint="full"] .kp-person-side__foto{
--foto-tint-styrke:.55;
--foto-tint-graa:55%;
}
/* —— Rammene som kan tintes ——
`isolation:isolate` gir hver ramme sin egen stablingskontekst, saa
`mix-blend-mode:multiply` blander med bildet og rammens egen flate — aldri
med seksjonen under. .kp-hero__media og .kp-nyhetsbrev__media lager allerede
en kontekst via z-index; linja er ufarlig der og gjoer regelen komplett. */
html[data-fototint="mild"] .kp-hero__media,
html[data-fototint="full"] .kp-hero__media,
html[data-fototint="mild"] .kp-nyhetsbrev__media,
html[data-fototint="full"] .kp-nyhetsbrev__media,
html[data-fototint="mild"] .kp-tale-kort__thumb,
html[data-fototint="full"] .kp-tale-kort__thumb,
html[data-fototint="mild"] .kp-person__foto,
html[data-fototint="full"] .kp-person__foto,
html[data-fototint="mild"] .kp-person-side__foto,
html[data-fototint="full"] .kp-person-side__foto,
html[data-fototint="mild"] .kp-velkomst__foto,
html[data-fototint="full"] .kp-velkomst__foto,
html[data-fototint="mild"] .kp-nyher__foto,
html[data-fototint="full"] .kp-nyher__foto,
html[data-fototint="mild"] .kp-artikkel__bilderamme,
html[data-fototint="full"] .kp-artikkel__bilderamme{
isolation:isolate;
}
/* De to rammene som ikke allerede er posisjonert. .kp-hero__media og
.kp-nyhetsbrev__media er `position:absolute` — de maa IKKE faa `relative`. */
html[data-fototint="mild"] .kp-person-side__foto,
html[data-fototint="full"] .kp-person-side__foto,
html[data-fototint="mild"] .kp-artikkel__bilderamme,
html[data-fototint="full"] .kp-artikkel__bilderamme{
position:relative;
}
/* —— Graatone-trinnet —— */
html[data-fototint="mild"] .kp-hero__media img,
html[data-fototint="full"] .kp-hero__media img,
html[data-fototint="mild"] .kp-nyhetsbrev__media img,
html[data-fototint="full"] .kp-nyhetsbrev__media img,
html[data-fototint="mild"] .kp-tale-kort__thumb img,
html[data-fototint="full"] .kp-tale-kort__thumb img,
html[data-fototint="mild"] .kp-person__foto img,
html[data-fototint="full"] .kp-person__foto img,
html[data-fototint="mild"] .kp-person-side__foto img,
html[data-fototint="full"] .kp-person-side__foto img,
html[data-fototint="mild"] .kp-velkomst__foto img,
html[data-fototint="full"] .kp-velkomst__foto img,
html[data-fototint="mild"] .kp-nyher__foto img,
html[data-fototint="full"] .kp-nyher__foto img,
html[data-fototint="mild"] .kp-artikkel__bilderamme img,
html[data-fototint="full"] .kp-artikkel__bilderamme img{
filter:grayscale(var(--foto-tint-graa));
}
/* Portrettene har en egen graatone-hover (18 % → 0) med overgang paa `filter`.
Under tint laases den: ellers hopper bildet ut av duotonen ved peking, og
overgangen ville vaert den ene animasjonen dette laget innfoerer.
`transform`-hoveren (loeft/zoom) staar uroert — den er temaets, ikke vaar. */
html[data-fototint="mild"] .kp-person__foto img,
html[data-fototint="full"] .kp-person__foto img,
html[data-fototint="mild"] .kp-person:hover .kp-person__foto img,
html[data-fototint="full"] .kp-person:hover .kp-person__foto img{
filter:grayscale(var(--foto-tint-graa));
transition:transform .5s var(--ease-smooth);
}
/* —— Tint-laget —— */
html[data-fototint="mild"] .kp-hero__media::after,
html[data-fototint="full"] .kp-hero__media::after,
html[data-fototint="mild"] .kp-nyhetsbrev__media::after,
html[data-fototint="full"] .kp-nyhetsbrev__media::after,
html[data-fototint="mild"] .kp-tale-kort__thumb::after,
html[data-fototint="full"] .kp-tale-kort__thumb::after,
html[data-fototint="mild"] .kp-person__foto:not(.kp-person__foto--tom)::after,
html[data-fototint="full"] .kp-person__foto:not(.kp-person__foto--tom)::after,
html[data-fototint="mild"] .kp-person-side__foto::after,
html[data-fototint="full"] .kp-person-side__foto::after,
html[data-fototint="mild"] .kp-velkomst__foto::after,
html[data-fototint="full"] .kp-velkomst__foto::after,
html[data-fototint="mild"] .kp-nyher__foto::after,
html[data-fototint="full"] .kp-nyher__foto::after,
html[data-fototint="mild"] .kp-artikkel__bilderamme::after,
html[data-fototint="full"] .kp-artikkel__bilderamme::after{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:var(--foto-tint);
mix-blend-mode:multiply;
opacity:var(--foto-tint-styrke);
}
/* Krom som ligger OPPAA bildet i samme ramme maa staa over tint-laget (z-index
1), ellers ville multiply lagt seg over avspillingsknapp og bildetekst.
Tinten blir da liggende UNDER scrimen deres — som er nettopp der den skal
vaere for at maalingene nederst skal holde. */
html[data-fototint="mild"] .kp-tale-kort__play,
html[data-fototint="full"] .kp-tale-kort__play,
html[data-fototint="mild"] .kp-velkomst__foto figcaption,
html[data-fototint="full"] .kp-velkomst__foto figcaption,
html[data-fototint="mild"] .kp-nyher__foto figcaption,
html[data-fototint="full"] .kp-nyher__foto figcaption{
z-index:2;
}
/* Artikkelbildets ramme. Figuren (.kp-artikkel__bilde) inneholder OGSAA
bildeteksten, saa et `inset:0`-lag paa den ville tintet teksten og flaten
bak den. Rammen omslutter derfor kun ![]()
-en (single-kp_article.php).
Regelen er ugatet med vilje: den skal gjelde ogsaa uten tint, slik at
figurens radius/klipp oppfoerer seg likt i alle fire fototone-valgene. */
.kp-artikkel__bilderamme{display:block;overflow:hidden;border-radius:inherit;line-height:0}
.kp-artikkel__bilderamme img{display:block}
/* =============================================================================
KOMPOSITTMAALING — tekst over tintet foto
=============================================================================
§7 risiko 2: «Fototint kan senke kontrast stille.» Hope-demoen maaler 2,89:1
nettopp fordi vasken ble lagt UTEN maaling. Regnet paa nytt her, med
alfa-kompositering av hvert lag (ikke med hex-verdier lest av oeyemaal).
VALGT LOESNING: (a) — hero-gradienten beholdes OPPAA tinten.
Det skjer av seg selv i stablingen: `.kp-hero__media` ligger paa z-index -2
og tinten inne i den; `.kp-hero::after` (scrim-gradientene) ligger paa
z-index -1, altsaa over. Alternativ (b) — aa unnta heroen fra tint under
«mild» — ble forkastet fordi maalingen viser at tinten bare KAN heve
kontrasten her: alle tolv `--accent-deep` er moerkere enn et middels foto,
og `multiply` kan per definisjon ikke lysne. Aa unnta heroen ville dessuten
fjernet grepet nettopp fra flata der det betyr mest.
MODELL (verste punkt i tekstblokka: y = 50 %, x = 45 % — altsaa oeverst til
hoeyre i teksten, der begge scrim-gradientene er svakest; hero-scrimen har
der samlet alfa 0,6384):
1. `--media-floor` (rammens flate)
2. bildet i graatone, `opacity:.9` over floor
3. tinten: multiply mot `--accent-deep`, alfa = styrken
4. `.kp-hero::after`: to floor-gradienter, samlet alfa 0,6384
5. maalt mot `--media-ink` (hero setter `--text:var(--media-ink)`)
`markant` er ikke med: uttrykket skrur av BAADE `.kp-hero__media` og
`.kp-hero::after` (main.css), saa der finnes ingen tekst over foto i heroen.
`delt`/`band` legger bildet i egen kolonne/eget baand — ingen tekst oppaa.
MAALT (verste palett av de tolv i parentes):
Foto = mellomgraa #808080 (§-antakelsen):
rolig av 11,01:1 · mild 13,46:1 · full 15,36:1 (glod / smaragd)
varm av 9,22:1 · mild 11,45:1 · full 13,29:1 (glod)
Foto = naer hvitt #F2F2F2 (det virkelige verstefallet — et lyst bilde):
rolig av 6,18:1 · mild 9,41:1 · full 12,74:1 (glod / smaragd)
varm av 5,17:1 · mild 7,89:1 · full 10,82:1 (glod / smaragd)
Alle over AA-kravet 4,5:1, og tinten hever tallet i hver eneste rad.
tools/test-fototint.php regner dette paa nytt ved hver kjoering, saa en
framtidig palett med lysere `--accent-deep` stopper i gata, ikke i drift.
============================================================================= */