/* public_html/c/marked.css — Marketplace.
Kortene er en direkte port av ChatGPT Shopping (lagret kopi gjennomgaatt
06.08.2026): samme forhold (2:1, paa desktop 2,5:1 for karusellen og
0,75:1 i rutenettet), samme hjoerneradius paa 24 px, samme firelags
slor nederst — uskarphet, to gradienter og et stoeylag i soft-light —
og samme «Proev det»-pille oeverst til venstre.
Fargene er VAARE. Forbildet har egne tokens; her brukes --flate, --tekst
og resten fra stil.css, slik at lyst og moerkt tema virker uten
ekstraarbeid. Bare det som ligger OPPAA et foto er hardkodet hvitt. */
[data-flate=marketplace]{
--mk-pad:16px; /* --shopping-home-padding */
--mk-gap:40px; /* --shopping-home-page-spacing */
/* Slorene. Verdiene er hentet raatt fra forbildet, ikke gjenskapt paa
oeyemaal — det er overgangen mellom uskarphet og gradient som gjoer at
titlene leses uten at bildet ser nedtonet ut. */
--mk-maske:linear-gradient(to top,rgb(0,0,0) 0%,rgba(0,0,0,.94) 11%,rgba(0,0,0,.68) 43%,rgba(0,0,0,.28) 71%,rgba(0,0,0,.08) 83%,rgba(0,0,0,0) 100%);
--mk-maske-s:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 58%,rgba(0,0,0,0) 100%);
}
[data-flate=marketplace]{
--mk-grad:linear-gradient(to top,rgba(0,0,0,.282) 0%,rgba(0,0,0,.263) 14%,rgba(0,0,0,.227) 28%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.13) 56%,rgba(0,0,0,.075) 70%,rgba(0,0,0,.04) 82%,rgba(0,0,0,.016) 91%,rgba(0,0,0,0) 100%),radial-gradient(150% 110% at 50% 100%,rgba(0,0,0,.063) 0%,rgba(0,0,0,.04) 40%,rgba(0,0,0,0) 100%);
--mk-glo:radial-gradient(135% 92% at 50% 100%,rgba(0,0,0,.204) 0%,rgba(0,0,0,.145) 34%,rgba(0,0,0,.075) 62%,rgba(0,0,0,0) 100%);
--mk-skygge:drop-shadow(rgba(0,0,0,.10) 0 10px 15px) drop-shadow(rgba(0,0,0,.10) 0 4px 6px);
}
/* Stoeylaget. Uten det blir den nedre gradienten en flat, plastaktig
overgang; kornet er det som gjoer at den ser ut som lys og ikke som en
maling lagt oppaa. Samme SVG som i forbildet. */
[data-flate=marketplace]{
--mk-stoy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
/* ── Scenen ──────────────────────────────────────────────────────────────
Traaden er 640 px ellers paa flaten; forbildet bruker 800. Bare her. */
[data-flate=marketplace] .inner{max-width:800px;padding:0;gap:0}
[data-flate=marketplace] .traad{padding-inline:0}
[data-flate=marketplace] .traad-omslag::before{display:none}
.mk-scene{display:flex;flex-direction:column;gap:var(--mk-gap);
width:100%;margin:0 auto;padding:0 var(--mk-pad) 128px}
@media (min-width:861px){.mk-scene{padding-bottom:16px}}
/* Forbildet har padding-top:68px paa mobil fordi toppraden der ligger
OVER innholdet. Vaar toppra staar i flyten, saa de 68 pikslene ville
bare vaert doedt rom. Samme 8 px som paa desktop. */
.mk-traad{display:flex;flex-direction:column;gap:var(--mk-gap);
margin-top:16px;padding-top:8px}
@media (min-width:861px){.mk-traad{margin-top:var(--mk-gap);padding-top:8px}}
/* ── Toppen ──────────────────────────────────────────────────────────────
Paa desktop staar overskriften og skrivefeltet klebrig oeverst mens
kortene ruller under, som i forbildet. Bakplata er ikke en flat farge,
men en maskert flate — ellers ville kortene faatt en hard kant der de
forsvinner inn under. Paa mobil er skrivefeltet nederst i stedet, ogsaa
som i forbildet, og da trengs ingen bakplate. */
.mk-hode{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:16px}
@media (min-width:861px){.mk-hode{position:sticky;top:0;z-index:20}}
.mk-hode-bak{display:none;position:absolute;inset:-32px -32px;pointer-events:none;
background:var(--flate);
-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 72%,rgba(0,0,0,0) 100%);
mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 72%,rgba(0,0,0,0) 100%)}
@media (min-width:861px){.mk-hode-bak{display:block}}
.mk-hode-inn{position:relative;z-index:1}
.mk-h1{font-size:24px;line-height:30px;font-weight:500;letter-spacing:-.01em;color:var(--tekst)}
@media (min-width:861px){.mk-h1{font-size:28px;line-height:34px}}
.mk-hode-komp{position:relative;z-index:1;display:none}
@media (min-width:861px){.mk-hode-komp{display:block}}
/* ── Bolker og grupper ──────────────────────────────────────────────────
Forbildet har ingen overskrift over gruppene — feeden er personlig, saa
den trenger ingen. Her ER delingen selve poenget (privat oeverst,
naering nederst), og da maa den staa. Holdt lav i vekt saa den ikke
konkurrerer med kortene. */
.mk-bolk{display:flex;flex-direction:column;gap:16px}
.mk-bolk-hode{display:flex;flex-direction:column;gap:2px}
.mk-bolk-tittel{font-size:15px;line-height:20px;font-weight:600;color:var(--tekst)}
.mk-bolk-under{font-size:13px;line-height:18px;color:var(--tekst-3)}
.mk-grupper{display:flex;flex-direction:column;gap:var(--mk-gap)}
/* ── Karusellen ─────────────────────────────────────────────────────────
Rullefelt med snapping, ikke transform: da virker sveip paa mobil av seg
selv, og tastaturet kan rulle. Pilene vises bare paa desktop og bare
naar pekeren er over — som i forbildet. */
.mk-kar{position:relative}
.mk-kar-spor{overflow:hidden;border-radius:24px}
.mk-kar-rull{display:flex;width:100%;gap:12px;overflow-x:auto;
scroll-snap-type:x mandatory;touch-action:pan-x pan-y;
scrollbar-width:none;-ms-overflow-style:none}
.mk-kar-rull::-webkit-scrollbar{display:none}
.mk-lysbilde{position:relative;width:100%;min-width:0;flex:0 0 100%;scroll-snap-align:start}
.mk-pil{position:absolute;top:50%;z-index:30;display:none;width:40px;height:40px;
align-items:center;justify-content:center;border-radius:9999px;
border:1px solid var(--kant-lett);background:var(--flate);color:var(--tekst);
box-shadow:0 10px 15px -3px rgba(0,0,0,.18),0 4px 6px -4px rgba(0,0,0,.18);
opacity:0;transition:opacity .15s ease;cursor:pointer;padding:0}
.mk-pil-v{inset-inline-start:0;transform:translate(-50%,-50%)}
.mk-pil-h{inset-inline-end:0;transform:translate(50%,-50%)}
@media (min-width:861px){
.mk-pil{display:flex}
.mk-kar:hover .mk-pil,.mk-pil:focus-visible{opacity:1}
}
@media (prefers-reduced-motion:reduce){.mk-pil{transition:none}}
/* ── Kortet ─────────────────────────────────────────────────────────────
Grunnfarge under bildet saa ruta ikke blinker hvit foer fotoet er lastet. */
.mk-kort{position:relative;display:block;width:100%;overflow:hidden;
border-radius:24px;background:#e5e5e5}
.mk-kort-stor{aspect-ratio:2/1}
@media (min-width:861px){.mk-kort-stor{aspect-ratio:2.5/1}}
.mk-kort-liten{aspect-ratio:.75/1}
.mk-bilde{height:100%;width:100%;object-fit:cover;display:block;
transition:transform .5s ease}
.mk-kort:hover .mk-bilde{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.mk-bilde{transition:none}
.mk-kort:hover .mk-bilde{transform:none}}
/* «Proev det»-pilla. Hvit paa 18 % med uskarphet bak — den maa kunne staa
over BAADE en lys himmel og et moerkt tak. */
.mk-pille{position:absolute;inset-inline-start:12px;top:12px;z-index:10;
pointer-events:none;display:inline-flex;height:40px;align-items:center;
justify-content:center;border-radius:9999px;background:rgba(255,255,255,.18);
padding:0 16px;font-size:16px;line-height:26px;font-weight:600;color:#fff;
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
filter:var(--mk-skygge)}
/* Hele kortet er trykkflaten. Lenka ligger OVER bildet, ikke rundt det:
da kan slorene ligge oeverst uten aa spise klikket. */
.mk-flate{position:absolute;inset:0;z-index:20;display:block;
border-radius:24px;text-decoration:none;color:inherit;cursor:pointer}
/* ── Sloret nederst, fire lag ───────────────────────────────────────────
1) uskarphet med maske, 2) gradient i soft-light, 3) et blooet glo-lag,
4) korn. Rekkefoelgen og verdiene er forbildets. */
.mk-slor{pointer-events:none;position:absolute;inset-inline:-1px;bottom:-1px;
height:112px;overflow:hidden}
.mk-slor b{position:absolute;display:block}
.mk-slor-1{inset-inline:-20px;bottom:-14px;height:140px;
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
-webkit-mask-image:var(--mk-maske);mask-image:var(--mk-maske)}
.mk-slor-2{inset-inline:0;bottom:0;height:112px;
background-image:var(--mk-grad);background-blend-mode:normal,soft-light}
.mk-slor-3{inset-inline:-18px;bottom:-18px;height:136px;filter:blur(20px);
background-image:var(--mk-glo);
-webkit-mask-image:var(--mk-maske);mask-image:var(--mk-maske)}
.mk-slor-4{inset-inline:0;bottom:0;height:112px;mix-blend-mode:soft-light;
opacity:.0914;background-image:var(--mk-stoy);background-size:128px 128px;
-webkit-mask-image:var(--mk-maske);mask-image:var(--mk-maske)}
/* Rutenettkortet har et enklere slor: lavere, mindre uskarphet. */
.mk-slor-s{pointer-events:none;position:absolute;inset-inline:0;bottom:0;
height:100px;overflow:hidden}
.mk-slor-s b{position:absolute;display:block}
.mk-slor-s1{inset-inline:0;bottom:0;height:100%;
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
-webkit-mask-image:var(--mk-maske-s);mask-image:var(--mk-maske-s)}
.mk-slor-s2{inset-inline:0;bottom:0;height:72px;
background-image:linear-gradient(to top,rgba(0,0,0,.18),rgba(0,0,0,.08) 50%,rgba(0,0,0,0))}
.mk-slor-s3{inset:-22px -26px -25px -26px;border-radius:2px;opacity:.08;
filter:blur(10px);
background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgb(0,0,0))}
/* ── Tittelen paa kortet ────────────────────────────────────────────────
Hoeyden er satt, ikke maalt: sloret er 112 px, og tittelen skal ligge i
nedre kant av det uansett hvor lang den er. */
.mk-tittel{position:absolute;inset-inline:0;bottom:0;z-index:10;display:flex;
align-items:flex-end;padding:0 16px 12px;color:#fff;min-height:174px}
@media (min-width:861px){.mk-tittel{padding-bottom:16px}}
.mk-tittel-s{min-height:96px}
/* Tittelen fyller ikke hele kortet hos forbildet. Tekstspalta er
`max-w-[70%]` paa karusellkortet og `max-w-[78%]` paa rutenettkortet,
med `gap-2` mellom linjene. Uten begrensningen loeper en lang tittel
ut til kanten, og de to kortstoerrelsene faar samme tekstblokk enda
de har ulik bredde. */
.mk-tittel-tx{display:flex;flex-direction:column;gap:8px;width:100%;
max-width:70%;filter:var(--mk-skygge)}
.mk-tittel-s .mk-tittel-tx{max-width:78%}
/* Negativ marg saa slagskyggen ikke klippes av overflow paa kortet. */
.mk-tittel-s .mk-tittel-tx{margin:0 -3px -3px;padding:0 3px 3px}
.mk-h3{max-width:100%;font-size:17px;line-height:22px;font-weight:600;
text-wrap:balance}
@media (min-width:861px){.mk-h3{font-size:24px;line-height:28px}}
.mk-h3-s{font-size:13px;line-height:18px;text-wrap:pretty}
@media (min-width:861px){.mk-h3-s{font-size:13px;line-height:18px}}
/* ── Rutenettet ─────────────────────────────────────────────────────────
To spalter paa mobil, tre paa desktop — som i forbildet. */
.mk-rutenett{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (min-width:861px){.mk-rutenett{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Fokusringen maa leses paa foto, ikke paa flaten under. */
.mk-flate:focus-visible{outline:none;
box-shadow:0 0 0 2px rgba(0,0,0,.3),0 0 0 4px rgba(255,255,255,.9)}
/* Skrivefeltet flyttes hit av marked.js paa desktop. Da skal traadens
egen bunnkomponist ikke ta plass. */
[data-flate=marketplace] .mk-hode-komp .komp{padding:0}
[data-flate=marketplace] .mk-hode-komp .komp-inner{max-width:none}
[data-flate=marketplace] .mk-hode-komp .fot{display:none}
/* Skallets «rull til nyeste melding» hoerer til en samtale. Her er det
ingen traad aa rulle til bunnen av, og knappen la seg midt oppaa et kort. */
[data-flate=marketplace] .tilbunn{display:none}
/* Grunnfargen under bildet foelger temaet. Forbildet bruker en fast lys
graa, men det er en lys flate; her ville den blinket hvitt i moerkt tema. */
[data-flate=marketplace] .mk-kort{background:var(--flate-2)}
/* ── «Prøv det»-pilla strøk på kontrast ──────────────────────────────
Målt 17.08.2026 på det levende Marketplace, med canvas-sampling av
fotoet bak pilla:
foto bak pilla rgb(172, 158, 138) (lyst, varmt interiør)
med 18 % hvitt lag rgb(187, 175, 159)
hvit tekst mot det 2,15:1
Kravet er 4,5:1 for vanlig tekst. 16px/600 kvalifiserer ikke som stor
tekst (18,66px fet eller 24px), så 3:1 gjelder ikke engang.
Kommentaren over den gamle regelen sier intensjonen rett ut: «den maa
kunne staa over BAADE en lys himmel og et moerkt tak». Intensjonen er
riktig — et lag på 18 % hvitt gir bare ikke noe GULV. Kontrasten blir
det fotoet tilfeldigvis gir, og på lyse bilder blir det ingenting.
Et mørkt lag gir gulvet. Regnet ut for verste tilfelle, altså et helt
hvitt foto:
alpha 0,45 → rgb(140) → 3,36:1 for lite
alpha 0,50 → rgb(128) → 3,95:1 for lite
alpha 0,55 → rgb(115) → 4,74:1 ✓
På fotoet over gir 0,55 nå 9,18:1. Uskarpheten beholdes — det er den
som gjør pilla til en glassbrikke og ikke en flat boks. */
.mk-pille{background:rgba(0,0,0,.55)}