/* ============================================================================= FORRE.NU — F-MÄRKET I TOPBAREN themes/forre_pulse/css/pulse-navbar-marke.css ----------------------------------------------------------------------------- BYGGD 2026-08-30 (Kentas order: "bygg live"). Ett diskret vattenmärke i topbarens högra del. INGEN markup ändrad — hela effekten är det här ::before-elementet på
. UTÖKAD SAMMA DAG: filen äger nu också MÄRKETS FÄRG. Två sektioner, inget annat gemensamt än märket: §1 vattenmärket i topbarens högra del (::before på
) §2 märkets färg — var(--accent) i stället för hexen inuti SVG-filen Fortfarande INGEN markup ändrad: båda halvorna är ren CSS. ROLLBACK: ta bort raden i app/Helpers/PulseAssets.php. Filen kan ligga kvar. OBS att det släcker BÅDA halvorna. Märkena faller då tillbaka på SVG- filernas egen blå — som efter den här ändringen är #2796f2, samma värde som --accent, så rollbacken syns inte. Se §2. ═══ FYRA FEL LIGGER BAKOM DEN HÄR FILEN, ALLA UPPMÄTTA ═══ 1. RINGENS MITT ÄR DESS HÅL. Första försöket centrerade en 240 px ring i en 46 px rad. Vid 18 px under ringens topp är halva kordan 63 px, vid 64 px är den 106 px — bågen flyttar sig 43 px i sidled över radens 46 px, lutning 0,93 px/px. Det är en rak 45-graderskant, inte en cirkel. Den läste som en gradient, och frågan "är det gradient?" var korrekt ställd. 2. TVÅ MASKSKIKT ÄR EN FÄLLA. mask-composite:intersect faller tillbaka till `add` = UNIONEN av skikten, och union av "ring" och "rektangel" är rektangeln. Hos mig blev det en ring, hos Kenta en grå platta. Felläget är alltså inte "svagt" utan "trasigt". Därför: EN maskbild, alltid. 3. GRADIENTENS TÄTA ÄNDE LÅG I DEN BORTKLIPPTA DELEN. Ink i en yta man inte ser är ingen ink. Därför platt fyllning nu, ingen gradient alls. 4. MARGINALEN UTANFÖR KOLUMNEN FINNS INTE PÅ SMÅ SKÄRMAR. Märket är därför förankrat mot INNEHÅLLSKOLUMNENS högerkant (var(--shell-w)), inte mot fönsterkanten. Det finns på varje skärmbredd. ═══ STORLEKEN ÄR RÄKNAD, INTE VALD ═══ Bläckyta i en ring ≈ π(r² − ri²). Vattenmärket på "Sedan sist" som fungerar är 196 px = 8 493 px². Ett märke som RYMS i raden vore 48 px = 380 px², en tjugondel — osynligt oavsett opacitet, för ögat integrerar YTA. Därför 200 px, klippt av raden. ═══ KLIPPET: LÅDAN ÄR RADEN, BILDEN ÄR 200 px ═══ Första bygget satte height:200px + top:50% + clip-path:inset(71px 0). Det klippte rätt vid EN radhöjd (58 px) — men raden mäter 48 px live, så 5 px av märket målades UTANFÖR topbaren, ovanpå bannern och tickern. Nu i stället: lådan är top:0/bottom:0 (= exakt radens höjd, vad den än är) och maskbilden ritas i fast 200 px, centrerad. Samma synliga band, men klippet kan per definition aldrig hamna fel och följer radhöjden av sig självt. Ingen transform, ingen clip-path, inget att hålla i synk. ═══ STYRKAN ═══ Kenta: "ska synas jättelite, inte mycket alls, men ändå synas." Uppmätt på live: 7 % bläck på vitt kort ger ΔL* 5,9. Samma 7 % på mörkt kort ger ΔL* 7,4 — mörk botten förstärker påslaget av sig själv, så 11 % (ΔL* 11,7) var dubbelt så starkt som ljust läge och läste inte längre som "jättelite". Därför ETT tal för båda lägena. ÄNDRA BARA --fm-black nedan om den ska bli svagare eller starkare — allt annat i filen är geometri. ============================================================================= */ /* ═══ §1 — VATTENMÄRKET I TOPBAREN ═════════════════════════════════ */ .top{ --fm-black:7%; } .top::before{ content:''; position:absolute; z-index:0; pointer-events:none; /* Lådan ÄR raden: lika hög som topbaren, vad den än mäter. */ top:0; bottom:0; width:200px; /* Förankrat mot innehållskolumnens högerkant, aldrig mot fönstret. max() ser till att den håller sig innanför även när kolumnen krymper. */ right:max(16px, calc(50% - (var(--shell-w) / 2) + 16px)); background:color-mix(in srgb, var(--ink) var(--fm-black), transparent); /* EN maskbild, ritad i fast 200 px och centrerad — det är storleken på märket, oberoende av lådans höjd. Raden visar mittbandet av den. */ -webkit-mask:url("/public/images/icons/forre-f-ring-currentcolor.svg") center / 200px 200px no-repeat; mask:url("/public/images/icons/forre-f-ring-currentcolor.svg") center / 200px 200px no-repeat; } /* Innehållet ligger över märket. .top har redan position:sticky, alltså en positionerad förälder — ::before behöver ingen extra wrapper. */ .top .in{ position:relative; z-index:1; } /* Under 1000 px är topbaren tät av flikar och ikoner; då ska märket inte konkurrera. Det är en lyx som får kosta tom yta, inte trång yta. */ @media (max-width:999px){ .top::before{ display:none; } } /* Rörelsekänslighet: märket rör sig inte och animeras inte — inget att göra för prefers-reduced-motion. Noterat så nästa person slipper leta. */ /* ════════════════════════════════════════════════════════════════════════════ §2 — MÄRKETS FÄRG BOR I var(--accent), INTE I SVG-FILEN (2026-08-30) ──────────────────────────────────────────────────────────────────────────── Loggan bar sin EGEN blå före den här raden: forre-f-ring.svg hade fill="#2794EF" medan temats token --accent är #2796f2. Två hexvärden två siffror ifrån varandra — R lika, G +2 av 255, B +3 av 255. Omöjligt att skilja åt med ögat, men två sanningar som måste hållas i synk för alltid. I navbaren stod de dessutom BREDVID varandra: ringen målades #2794EF och ".NU" tolv pixlar till höger målades var(--accent). ★ EN FÄRG KAN BARA VARA KANONISK OM DEN BARA FINNS PÅ ETT STÄLLE. Blått definieras nu i :root i forre_pulse.css (--accent, två rader: ljust och mörkt) och ingen annanstans som CSS kan nå. Märket ärver. ── VARFÖR MASK OCH INTE EN ANDRA SVG-FIL ──────────────────────────── CSS kan INTE färga en SVG som laddas genom eller background-image: bilden är ett eget dokument och sidans variabler finns inte där inne. Bara inline , och mask-image + background-color går att färga. Resten av huset ritar redan märket som mask — pulse-datalager.css:82, pulse-liga.css:31, pulse-sprites.css:791 och :1219, pulse-since-last.php:125 och §1 sextio rader upp i den här filen. De tre -märkena som stod kvar är de som konverteras här. ── ★ VARFÖR MARKUPEN INTE ÄNDRAS, UTAN :EN NEUTRALISERAS ─────────── Navbarens rad 2 renderas av TVÅ källor med identisk markup: themes/forre_pulse/views/partials/pulse-topbar.php:1319 PHP-fallbacken public/react/forre-ui.js:735-745 React-ön "brand" forre-ui.js är en BYGGD fil vars källa inte finns i repot: public/react/src/ har banner.jsx, fordig.jsx och meny.jsx — ingen ui.jsx — och build.js bygger bara src/*.jsx. Att handredigera bundlen är uttryckligen förbjudet (pulse-topbar.php:1863). Och när ön monterat göms PHP-versionen av `html.forre-topbar-react .top .fnx-php{display:none}` (pulse-topbar.php:1198) — alltså är det BUNDLENS som syns live för alla med JS på. Därför ändras ingen markup alls. En går att färga ändå, i två steg: 1. background + mask på själva elementet ritar märket i var(--accent), 2. `content:` byter :ens EGNA pixlar mot en 1x1 genomskinlig GIF, så den gamla blå bilden inte målas ovanpå bakgrunden. Samma två regler träffar PHP-fallbacken och React-ön exakt lika. Ingen ägarskapsflytt (jfr R120-kaffet, pulse-topbar.php:1854), ingen dubblett av komponenten, en sanning. ★ FELLÄGET ÄR DAGENS UTSEENDE, INTE ETT TRASIGT MÄRKE. `content:` på ett ersatt element () stöds av Chrome och Safari sedan länge och av Firefox sedan 137 (mars 2025). En webbläsare som inte stöder det ritar bildens egen blå — exakt samma pixlar som före ändringen — ovanpå bakgrunden, klippt av en mask med precis samma form. Ingen artefakt, ingen tom ruta: bara den gamla nyansen. Degraderingen kostar ingenting. ── VARFÖR HÄR OCH INTE I VARJE YTAS EGEN FIL ──────────────────────── Den här filen laddas på varje pulse-sida (PulseAssets.php:128) och äger redan F-märket i topbaren. Att lägga färgen på ETT ställe är hela poängen: tre nästan identiska regler i tre filer hade återskapat precis det problem ändringen tar bort. .plb-ring hör till den avstängda live-bannern (default.php:440) och står med av samma skäl — tänds bannern igen ska den inte kunna komma tillbaka med en egen blå. GEOMETRIN RÖRS INTE. Storlek, flex och marginal för de tre märkena bor kvar där de bodde: pulse-deck.css:615, pulse-topdeck.css:763, pulse-topbar-rad1.css:128 och :226, pulse-live-banner.css:70-71. Bara färgen flyttar hit. ═══════════════════════════════════════════════════════════════════════════ */ .top .brand .brand-mark, /* navbaren rad 2 — PHP-fallbacken OCH React-ön */ .tr1-marke .tr1-ring, /* navbaren rad 1 — bara PHP */ .plb-brand .plb-ring{ /* live-bannern — avstängd, se ovan */ background:var(--accent); -webkit-mask:url("/public/images/icons/forre-f-ring-currentcolor.svg") center/contain no-repeat; mask:url("/public/images/icons/forre-f-ring-currentcolor.svg") center/contain no-repeat; } /* 1x1 genomskinlig GIF — den kortaste giltiga bilden som finns (43 tecken base64, inget extra nätverksanrop). Byter ut :ens egna pixlar; elementets bakgrund och mask ovan står kvar och är det som faktiskt syns. */ img.brand-mark, img.tr1-ring, img.plb-ring{ content:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); }