/* ═══════════════════════════════════════════════════════════════════════════ FORRE.NU — HÖGTIDEN: HALLOWEEN 2026 (S1 · Märket som nät + B:s fyra ögonblick) Facit: design-proposals/halloween-v2-2026-10-04.html (vy S1). Kentas val 2026-10-04. Karta över alla filer: app/Helpers/HogtidService.php (filhuvudet). ★ VARJE regel här är scopad på [data-hogtid="halloween"]. Utanför perioden gör filen ingenting. Rollback: ta bort raden i app/Helpers/PulseAssets.php. INNEHÅLL 0. Tokens — --hw-* lyfta till EN plats (fanns i fem cupfiler, se nedan) 1. Märket — F-ringen orange (mask på samma , ingen ny fil i skalet) + spindeln som går runt ringen (span ritad av pulse-hogtid.js) 2. Nät-F — vattenstämplarna i topplistans, hubbens och sprites huvud byter maskbild till forre-f-ring-natet.svg + en spindel i nätet. LFG får F:et. 3. Topplistan — .hw-jagad (den precis före dig) och .hw-rip (vilar i frid) 4. Sprites — hörnväv på varje variant du saknar; rivs när rutan bockas av 5. Profilen — kyrkogårdssiluetten i omslaget + pumpan (ritas av JS) 6. Hubben — fladdermusen (ritas av JS). Remsan borttagen 2026-10-04. 7. Rörelse av REGLER SOM HÅLLS: ingen glow · inga lodräta linjer · inget svart i ljust läge · inget pynt över klickbara ytor (pointer-events:none överallt) · färg ur tokens. FALLGROP: cupfilerna (cup.php:677, pulse-cup-band.php:74, pulse-cup-hub.php:72, pulse-cup-sida.php:56, pulse-cup-skriv.php:111) definierar fortfarande egna --hw lokalt på sina kort. Samma värden, så inget krockar — men lyft dem hit när de filerna ändå rörs. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 0. TOKENS ───────────────────────────────────────────────────────────── */ :root[data-hogtid="halloween"]{ --hw:#ff7a1a; --hw-ink:#b4500c; --hw-wash:#fff1e6; --hw-on:#1c0c00; /* Märket: #ff7a1a mot vitt ger bara 2,6:1 — i ljust läge bär det --hw-ink. */ --hw-mark:var(--hw-ink); --hw-spd:var(--ink2); --hw-web:color-mix(in srgb,var(--faint) 62%,transparent); --hw-pk-k:color-mix(in srgb,var(--hw) 55%,#000); --hw-pk-face:color-mix(in srgb,var(--hw) 35%,#000); /* dag: ett mörkt hål */ } :root[data-hogtid="halloween"][data-theme="dark"]{ --hw-ink:#ff9a4d; --hw-wash:#2a1a0f; --hw-mark:var(--hw); --hw-web:color-mix(in srgb,var(--faint) 85%,transparent); --hw-pk-face:var(--gold); /* natt: tänd, utan sken */ } /* ── 1. MÄRKET ───────────────────────────────────────────────────────────── */ /* Samma som alltid — bilden skjuts ut ur rutan och rutan målas i --hw-mark genom F-ringens mask. Ingen ändring i pulse-skal.php behövs. */ [data-hogtid="halloween"] img.skl-ring, [data-hogtid="halloween"] img.tr1-ring, [data-hogtid="halloween"] img.brand-mark{ object-fit:none; object-position:-9999px -9999px; background:var(--hw-mark); -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; } /* ".NU" i ordmärket följer märket (Kenta 2026-10-04: ".nu ska också vara orange"). */ [data-hogtid="halloween"] .skl-ord b, [data-hogtid="halloween"] .tr1-ord i, [data-hogtid="halloween"] .brand b{color:var(--hw-mark)} /* Spindeln: en ruta lika stor som ringen, roterar kring ringens mitt. Själva spindeln sitter uppe till höger, precis utanför ringens kant. */ .hw-lspd{position:absolute;pointer-events:none;z-index:2; animation:hw-crawl 16s ease-in-out infinite alternate} .hw-lspd::before{content:"";position:absolute;width:42%;height:44%;right:-14%;top:-16%; background:var(--hw-spd);transform:rotate(42deg); -webkit-mask:url("/public/images/icons/hw-spindel.svg") center/contain no-repeat; mask:url("/public/images/icons/hw-spindel.svg") center/contain no-repeat} @keyframes hw-crawl{0%,55%{transform:rotate(0deg)}100%{transform:rotate(64deg)}} /* ── 2. NÄT-F I VARJE SIDAS HUVUD ────────────────────────────────────────── */ [data-hogtid="halloween"] .lbn-wm, [data-hogtid="halloween"] .hb2-wm{ background:linear-gradient(180deg,var(--hw) 0%,var(--hw) 30%,transparent 86%); opacity:.2; -webkit-mask-image:url("/public/images/icons/forre-f-ring-natet.svg"); mask-image:url("/public/images/icons/forre-f-ring-natet.svg"); } [data-hogtid="halloween"][data-theme="dark"] .lbn-wm, [data-hogtid="halloween"][data-theme="dark"] .hb2-wm{opacity:.22} /* Spindeln i nätet. Märket står top:-52 right:-38, 200 px ⇒ ringens mitt ligger 62 px från högerkanten och 48 px ner. Spindeln sitter nere till höger i nätet. */ [data-hogtid="halloween"] .lbn-wmc::after, [data-hogtid="halloween"] .hb2-wmc::after{ content:"";position:absolute;right:26px;top:72px;width:14px;height:15px; background:var(--hw-spd); -webkit-mask:url("/public/images/icons/hw-spindel.svg") center/contain no-repeat; mask:url("/public/images/icons/hw-spindel.svg") center/contain no-repeat; animation:hw-drop 9s ease-in-out infinite} @keyframes hw-drop{0%,62%,100%{transform:translateY(0)}72%,88%{transform:translateY(6px)}} /* Sprites: samma recept via variabeln som pulse-sprites.css redan läser. */ [data-hogtid="halloween"] .sq-mx{--f-shape:url("/public/images/icons/forre-f-ring-natet.svg")} [data-hogtid="halloween"] .sq-mx::before{ background:linear-gradient(to bottom, color-mix(in srgb,var(--hw) 20%,transparent) 0%, color-mix(in srgb,var(--hw) 12%,transparent) 40%, transparent 86%)} [data-hogtid="halloween"] .sq-mx::after{ content:"";position:absolute;pointer-events:none;z-index:0;right:64px;top:92px;width:16px;height:17px; background:var(--hw-spd); -webkit-mask:url("/public/images/icons/hw-spindel.svg") center/contain no-repeat; mask:url("/public/images/icons/hw-spindel.svg") center/contain no-repeat; animation:hw-drop 9s ease-in-out infinite} @media (max-width:768px){[data-hogtid="halloween"] .sq-mx::after{right:42px;top:60px;width:13px;height:14px}} /* LFG har ingen vattenstämpel — under perioden får huvudet F:et med nät. */ [data-hogtid="halloween"] .sp .sp-hd{position:relative;isolation:isolate} [data-hogtid="halloween"] .sp .sp-hd::before{ content:"";position:absolute;z-index:-1;pointer-events:none;right:2px;top:-14px;width:110px;height:110px; background:linear-gradient(180deg,var(--hw) 0%,var(--hw) 30%,transparent 86%);opacity:.18; -webkit-mask:url("/public/images/icons/forre-f-ring-natet.svg") center/contain no-repeat; mask:url("/public/images/icons/forre-f-ring-natet.svg") center/contain no-repeat} [data-hogtid="halloween"] .sp .sp-hd::after{ content:"";position:absolute;pointer-events:none;right:24px;top:36px;width:12px;height:13px; background:var(--hw-spd); -webkit-mask:url("/public/images/icons/hw-spindel.svg") center/contain no-repeat; mask:url("/public/images/icons/hw-spindel.svg") center/contain no-repeat; animation:hw-drop 9s ease-in-out infinite} /* ── 3. TOPPLISTAN ───────────────────────────────────────────────────────── */ /* Den precis före dig fastnar i ett nät. Nätet sitter i namncellens högra hörn, alltså mellan namnet och talen — aldrig över en siffra. */ [data-hogtid="halloween"] .lbn-r.hw-jagad .lbn-who{position:relative} .hw-nat{position:absolute;right:-6px;top:-9px;width:46px;height:46px;pointer-events:none; background:var(--hw-web);transform:scaleX(-1); -webkit-mask:url("/public/images/icons/hw-nat-horn.svg") top left/contain no-repeat; mask:url("/public/images/icons/hw-nat-horn.svg") top left/contain no-repeat} .hw-nat::after{content:"";position:absolute;left:11px;top:12px;width:13px;height:14px; background:var(--hw-spd);transform:scaleX(-1); -webkit-mask:url("/public/images/icons/hw-spindel.svg") center/contain no-repeat; mask:url("/public/images/icons/hw-spindel.svg") center/contain no-repeat; animation:hw-drop 9s ease-in-out infinite} .hw-tag{font-weight:700;color:var(--hw-ink);white-space:nowrap} .hw-tag.rip{font-weight:500;color:var(--dim)} .hw-tag.rip::before{content:"";display:inline-block;width:9px;height:10px;margin-right:4px;vertical-align:-1px; background:currentColor;border-radius:4.5px 4.5px 0 0} /* Raden bär bara sin halloweenrad — resten av underraden får vänta en vecka. */ [data-hogtid="halloween"] .lbn-r.hw-jagad .lbn-sub>:not(.hw-tag), [data-hogtid="halloween"] .lbn-r.hw-rip .lbn-sub>:not(.hw-tag){display:none} [data-hogtid="halloween"] .lbn-r.hw-rip>*{opacity:.55} [data-hogtid="halloween"] .lbn-r.hw-rip .lbn-nm{font-style:italic} /* ── 4. SPRITES — väven på det du saknar ─────────────────────────────────── */ /* Ritas på ALLA celler men syns bara när data-state="none". Bockar du av rutan byter sprites-page.js data-state, och övergången river väven av sig själv. */ [data-hogtid="halloween"] .sq-cell:not(.is-na)::before{ content:"";position:absolute;left:0;top:0;width:56%;height:56%;z-index:2;pointer-events:none; background:var(--hw-web);border-top-left-radius:var(--r-sm); -webkit-mask:url("/public/images/icons/hw-nat-horn.svg") top left/contain no-repeat; mask:url("/public/images/icons/hw-nat-horn.svg") top left/contain no-repeat; transform-origin:0 0;opacity:0;transform:scale(1.6) rotate(-14deg); transition:opacity .35s ease-in,transform .35s ease-in} [data-hogtid="halloween"] .sq-cell[data-state="none"]:not(.is-na)::before{opacity:1;transform:none} /* ── 5. PROFILEN — kyrkogården i omslaget ────────────────────────────────── */ .hw-sky{position:absolute;left:0;right:0;bottom:0;height:84px;z-index:2;pointer-events:none} .hw-sky svg{display:block;width:100%;height:100%} .hw-pk{position:absolute;z-index:7;width:24px;height:22px;pointer-events:none; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))} .hw-pk svg{display:block;width:100%;height:100%} /* ── 6. HUBBEN — fladdermusen (kyrkogårdsremsan borttagen 2026-10-04, Kentas order) ── */ .hw-bat{position:absolute;z-index:3;left:-30px;top:16px;width:30px;height:13px;pointer-events:none; background:var(--ink2); -webkit-mask:url("/public/images/icons/hw-fladdermus.svg") center/contain no-repeat; mask:url("/public/images/icons/hw-fladdermus.svg") center/contain no-repeat; animation:hw-batx 2.6s ease-in forwards, hw-flap .28s ease-in-out infinite alternate} @keyframes hw-batx{0%{translate:0 0;opacity:0}10%{opacity:1}100%{translate:var(--hw-bx,600px) -26px;opacity:0}} @keyframes hw-flap{to{scale:1 .45}} /* ── 7. RÖRELSE AV ───────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .hw-lspd,.hw-nat::after, [data-hogtid="halloween"] .lbn-wmc::after,[data-hogtid="halloween"] .hb2-wmc::after, [data-hogtid="halloween"] .sq-mx::after,[data-hogtid="halloween"] .sp .sp-hd::after{animation:none} .hw-bat{display:none} [data-hogtid="halloween"] .sq-cell:not(.is-na)::before{transition:none} }