/* ============================================================================ FORRE.NU — VARUMÄRKESLÅSET · pulse-lock.css · 2026-08-22 ============================================================================ KARTA (husregel "filkarta i toppen", CLAUDE.md 2026-08-08) VAR LIGGER VAD themes/forre_pulse/css/pulse-lock.css ← DU ÄR HÄR. All form. themes/forre_pulse/views/partials/pulse-forre-lock.php Renderaren: forre_lock(). public/images/icons/forre-f-ring-currentcolor.svg ★ MÄRKET (F-ringen). Inlinas av partialen. themes/forre_pulse/img/brand/forre-mark.svg LEGACY. Gamla bågmärket. Används inte här. themes/forre_pulse/views/layouts/default.php Laddas på BÅDA ställena (se nedan). design-proposals/laset-2026-08-22.html Förslagen och mätningarna bakom. ★ LADDAS ALLTID, ALDRIG PER RUTT Samma beslut som pulse-viewer.css, av samma skäl: ett varumärkeslås ska kunna stå var som helst — tracker, topplista, overlay, delningsbild — och en ruttlista hade garanterat missat en yta. Filen är därför avsiktligt liten. Kommentaren i default.php säger dessutom att varje ny sid-CSS måste in på TVÅ ställen (head + SPA-listan); en alltid-laddad fil kan inte glömmas bort på det ena. ★ INGA LODRÄTA FÄRGADE LINJER (.clinerules/02-ui-facit.md §0.5) Accenten bärs av FYLLD YTA (stil B) eller av textfärg (stil A), aldrig av en list. Det var hela anledningen till att låset gjordes om. ★ SKALAN: --flock-s Alla mått är calc(Npx * var(--flock-s,1)). Default 1 = sajtstorlek. En OBS- overlay som renderar mot 1920 px sätter --flock-s:2.55 på en FÖRÄLDER och får samma lås i broadcast-storlek — utan transform, som hade lagt låset ovanpå grannen i stället för bredvid. ★ DEFAULTEN LIGGER I FALLBACKEN, INTE I EN DEKLARATION. Första versionen skrev `--flock-s:1` i .flock-regeln. Ett custom property som deklareras PÅ elementet vinner över det som ärvs — förälderns 2.55 nådde därför aldrig fram, och låset stannade på 16 px i en overlay där siffrorna är 52 px. Uppmätt, inte gissat. Skriv aldrig tillbaka den deklarationen. ★ TEXTGOLV Ingen rad under 9 px i md-läge. Twitch transkodar till 360p — en tredjedel — och det gamla lasets 7 px underrad blev 1,7 px, alltså ingenting. Mätt 2026-08-22, se design-proposals/laset-2026-08-22.html. ★ MÄRKESRUTAN ÄR RÄKNAD UR LÅSMÅTTEN, INTE VALD (2026-08-31, F-ringen) Låset bar fram till nu det gamla bågmärket, viewBox 787x681 = 1,156:1, och varje .flock__m var en REKTANGEL (30x26, 19x17, 26x23 ...). F-ringen är KVADRATISK (viewBox 0 0 256 256). En kvadratisk SVG i en rektangulär ruta krymper till rutans höjd och lägger resten som luft på sidorna — måtten kunde alltså inte bara flyttas över, de är omräknade ur låsets egen regel: u = ringens bandbredd = 7,62 % av MÄRKETS höjd ordets versalhöjd = 7u = 0,5334 * märkets höjd mellanrum märke -> ord = 5u staplat lodrätt mellanrum (stil C) = 3u Två mätvärden gör om det till px, båda uppmätta 2026-08-31, inte gissade: · Barlow Condensed 900: versalhöjd = 0,690 * font-size (canvas measureText('FORRE.NU').actualBoundingBoxAscent pa 100 px = 69,0) · F-ringens bläck fyller 240 av 256 viewBox-enheter = 93,75 % av rutan (getBBox: x 8,01 y 8,01 w 240 h 240 — kvadratiskt och centrerat) Ur det faller två raka formler, och det är dem varje tal nedan kommer ur: RUTAN = 2,000 * versalhöjden = 1,380 * font-size(rad 1) MELLANRUM = 0,714 * versalhöjden = 0,493 * font-size(rad 1) C:s lodräta = 0,429 * versalhöjden = 0,296 * font-size(rad 1) ÄNDRAS rad 1:s font-size nagonstans ska rutan och mellanrummet räknas om med dem. Sätt aldrig ett märkesmått på känsla — hela poängen med ett lås är att förhållandet mark:ord är detsamma i sm, md och lg. ★ RUTAN ÄR INTE MÄRKET. Rutan är 6,67 % större än bläcket (256/240). Ett "24 px märke" är alltså en 25,6 px ruta. Blanda inte ihop dem. TRE STILAR, SAMMA MARKUP .flock--a Märket och ordet — ingen platta. Bär sig på skugga. .flock--b Stämpeln — platta + fylld accentremsa under. Starkast. .flock--c Lodrätt lås — märket överst, smalast (72 px mot 175). ============================================================================ */ .flock{ display:inline-flex; font-family:'Barlow Condensed','Arial Narrow',Impact,Roboto,system-ui,sans-serif; -webkit-font-smoothing:antialiased; vertical-align:middle; /* ★ INGEN --flock-s-DEKLARATION HÄR. Skalans default bor i varje calc:s fallback (var(--flock-s,1)). Deklareras den på .flock vinner den över arvet och gör variabeln oanvändbar utifrån — se filhuvudet. */ /* Accenten kan sättas per instans av partialen. Utan den ärvs temats. */ --flock-acc:var(--accent,#2796f2); /* Textfärgen som ligger PÅ accenten (stil B). Partialen räknar luminans och skriver mörkt eller ljust — en hårdkodad mörk text blir osynlig på en mörk accent, vilket var den enda verkliga risken i stil B. */ --flock-on-acc:#04121f; } .flock *{box-sizing:border-box} .flock__m{flex:0 0 auto;display:block} .flock__m svg{width:100%;height:100%;display:block} /* Skuggan är BÄRANDE i de plattlösa stilarna (A och C), inte dekor: de ligger direkt mot underlag vi inte kontrollerar — gameplay, en ljus kortyta, en delningsbild. Två lager: en tät halo som ger kanten kontrast, plus en mjuk för djup. Uppmätt mot ljus scen 2026-08-22: ett enda lager räckte inte. */ .flock--a .flock__r1,.flock--a .flock__r2, .flock--c .flock__r1,.flock--c .flock__r2{ text-shadow:0 0 2px rgba(0,0,0,.95),0 0 5px rgba(0,0,0,.8),0 1px 4px rgba(0,0,0,.7); } .flock--a .flock__m,.flock--c .flock__m{ filter:drop-shadow(0 0 1.5px rgba(0,0,0,.9)) drop-shadow(0 1px 3px rgba(0,0,0,.7)); } /* På en lugn, egen yta (kort, panel) är skuggan onödig och skräpig. Sätt .flock--plan när låset står på en kontrollerad bakgrund. */ .flock--plan .flock__r1,.flock--plan .flock__r2{text-shadow:none} .flock--plan .flock__m{filter:none} /* ── A · MÄRKET OCH ORDET ────────────────────────────────────────────── */ .flock--a{align-items:center;gap:calc(8.4px * var(--flock-s,1))} /* 0,493 * 17 */ .flock--a .flock__m{width:calc(23.5px * var(--flock-s,1));height:calc(23.5px * var(--flock-s,1));color:var(--flock-acc)} /* 1,380 * 17 */ .flock--a .flock__t{display:flex;flex-direction:column;gap:calc(1px * var(--flock-s,1));line-height:.98} .flock--a .flock__r1{font-size:calc(17px * var(--flock-s,1));font-weight:900;letter-spacing:calc(-0.2px * var(--flock-s,1));color:#fff} .flock--a .flock__r2{font-size:calc(9px * var(--flock-s,1));font-weight:800;letter-spacing:.34em; text-transform:uppercase;color:var(--flock-acc)} /* På ljus kortyta måste rad 1 byta färg — vit på vitt är inget lås. */ .flock--a.flock--plan .flock__r1{color:var(--ink,#0b0f14)} /* ── B · STÄMPELN ────────────────────────────────────────────────────── */ .flock--b{flex-direction:column;align-items:stretch;overflow:hidden; border-radius:3px;background:rgba(8,10,14,.92);box-shadow:0 3px 12px rgba(0,0,0,.55)} .flock--b .flock__r1{display:flex;align-items:center;gap:calc(7.9px * var(--flock-s,1)); /* 0,493 * 16 */padding:calc(5px * var(--flock-s,1)) calc(11px * var(--flock-s,1)) calc(4px * var(--flock-s,1)); font-size:calc(16px * var(--flock-s,1));font-weight:900;letter-spacing:calc(-0.1px * var(--flock-s,1));color:#fff;line-height:1} .flock--b .flock__m{width:calc(22.1px * var(--flock-s,1));height:calc(22.1px * var(--flock-s,1));color:#fff} /* 1,380 * 16 */ .flock--b .flock__r2{background:var(--flock-acc);color:var(--flock-on-acc); font-size:calc(8.5px * var(--flock-s,1));font-weight:900;letter-spacing:.42em;text-transform:uppercase; text-align:center;padding:calc(3px * var(--flock-s,1)) calc(11px * var(--flock-s,1)) calc(2px * var(--flock-s,1));line-height:1} .flock--b.flock--plan{box-shadow:none} /* ── C · LODRÄTT LÅS ─────────────────────────────────────────────────── */ .flock--c{flex-direction:column;align-items:center;gap:calc(4.1px * var(--flock-s,1))} /* 0,296 * 14 */ .flock--c .flock__m{width:calc(19.3px * var(--flock-s,1));height:calc(19.3px * var(--flock-s,1));color:var(--flock-acc)} /* 1,380 * 14 */ .flock--c .flock__r1{font-size:calc(14px * var(--flock-s,1));font-weight:900;letter-spacing:calc(-0.1px * var(--flock-s,1));color:#fff;line-height:1} /* Rad två i C är VIT, inte accentfärgad. Den är den svagaste ytan i hela låset och tål inte att också bära en färg. */ .flock--c .flock__r2{font-size:calc(8px * var(--flock-s,1));font-weight:800;letter-spacing:.36em; text-transform:uppercase;color:#fff;line-height:1} .flock--c.flock--plan .flock__r1{color:var(--ink,#0b0f14)} .flock--c.flock--plan .flock__r2{color:var(--ink2,#465361)} /* ── STORLEKAR ───────────────────────────────────────────────────────── */ .flock--sm.flock--a{gap:calc(6.4px * var(--flock-s,1))} .flock--sm.flock--a .flock__m{width:calc(17.9px * var(--flock-s,1));height:calc(17.9px * var(--flock-s,1))} .flock--sm.flock--a .flock__r1{font-size:calc(13px * var(--flock-s,1))} .flock--sm.flock--a .flock__r2{font-size:calc(7.5px * var(--flock-s,1))} .flock--lg.flock--a{gap:calc(10.4px * var(--flock-s,1))} .flock--lg.flock--a .flock__m{width:calc(29px * var(--flock-s,1));height:calc(29px * var(--flock-s,1))} .flock--lg.flock--a .flock__r1{font-size:calc(21px * var(--flock-s,1))} .flock--lg.flock--a .flock__r2{font-size:calc(11px * var(--flock-s,1))} .flock--sm.flock--b .flock__r1{font-size:calc(12px * var(--flock-s,1));gap:calc(5.9px * var(--flock-s,1));padding:calc(4px * var(--flock-s,1)) calc(9px * var(--flock-s,1)) calc(3px * var(--flock-s,1))} .flock--sm.flock--b .flock__m{width:calc(16.6px * var(--flock-s,1));height:calc(16.6px * var(--flock-s,1))} .flock--sm.flock--b .flock__r2{font-size:calc(7px * var(--flock-s,1));padding:calc(2px * var(--flock-s,1)) calc(9px * var(--flock-s,1)) calc(2px * var(--flock-s,1))} .flock--lg.flock--b .flock__r1{font-size:calc(20px * var(--flock-s,1));gap:calc(9.9px * var(--flock-s,1));padding:calc(7px * var(--flock-s,1)) calc(14px * var(--flock-s,1)) calc(5px * var(--flock-s,1))} .flock--lg.flock--b .flock__m{width:calc(27.6px * var(--flock-s,1));height:calc(27.6px * var(--flock-s,1))} .flock--lg.flock--b .flock__r2{font-size:calc(10.5px * var(--flock-s,1));padding:calc(4px * var(--flock-s,1)) calc(14px * var(--flock-s,1)) calc(3px * var(--flock-s,1))} .flock--sm.flock--c{gap:calc(3.3px * var(--flock-s,1))} .flock--sm.flock--c .flock__m{width:calc(15.2px * var(--flock-s,1));height:calc(15.2px * var(--flock-s,1))} .flock--sm.flock--c .flock__r1{font-size:calc(11px * var(--flock-s,1))} /* 6,5 px hade blivit 2,2 px efter transkodning — golvet är 7,5. */ .flock--sm.flock--c .flock__r2{font-size:calc(7.5px * var(--flock-s,1))} .flock--lg.flock--c{gap:calc(5.3px * var(--flock-s,1))} .flock--lg.flock--c .flock__m{width:calc(24.8px * var(--flock-s,1));height:calc(24.8px * var(--flock-s,1))} .flock--lg.flock--c .flock__r1{font-size:calc(18px * var(--flock-s,1))} .flock--lg.flock--c .flock__r2{font-size:calc(10px * var(--flock-s,1))} @media (prefers-reduced-motion:reduce){ .flock{transition:none} }