/* Skier — kabdalis2 design system (ported from files2/Kåbdalis2.html). view.js attaches #kab2-skier-spray (canvas) + #kab2-skier-skier (svg div) to on first sight of a .kabdalis-skier marker. Both are fixed to the viewport bottom and pointer-events:none so they never intercept clicks. Colors come from theme tokens — falu (#9e4436) for the jacket/arms, pine (#2e5d49) for the helmet, ink for skis/boots/poles. Skin tone and goggle lens are semantic one-offs kept literal (see below). */ /* Marker element from save() — invisible on frontend (the actual animation lives on ). The wrapper has aria-hidden="true" already. */ .kabdalis-skier{ display: block; width: 0; height: 0; overflow: hidden; position: absolute; left: -9999px; visibility: hidden; } /* Editor preview — show a labelled badge so editors know the block is here */ .kabdalis-skier.kabdalis-skier--editor{ position: static; left: auto; width: auto; height: auto; overflow: visible; visibility: visible; } .kabdalis-skier-editor-badge{ display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-sm, 10px); background: color-mix(in srgb, var(--accent, #9c3a52) 5%, var(--surface, #fffdf9)); border: 1px solid var(--line, #e4ded2); color: var(--ink, #25211b); } .kabdalis-skier-editor-icon{ flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; background: color-mix(in srgb, var(--accent, #9c3a52) 12%, transparent); display: grid; place-items: center; font-size: 1.4rem; line-height: 1; } .kabdalis-skier-editor-text{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .kabdalis-skier-editor-title{ font-family: var(--font-display, serif); font-weight: var(--display-w, 540); font-size: 1rem; color: var(--ink, #25211b); } .kabdalis-skier-editor-body{ color: var(--ink-soft, #564e42); font-size: .88rem; line-height: 1.45; } /* ── Frontend animation surface (attached to by view.js) ───────── */ #kab2-skier-spray{ position: fixed; left: 0; bottom: 0; width: 100vw; height: 170px; z-index: 59; pointer-events: none; } #kab2-skier-skier{ position: fixed; left: 0; bottom: 0; z-index: 60; pointer-events: none; opacity: 0; will-change: transform, opacity; /* Soft outline so the skier reads against light AND dark page sections. Inner halo is white, outer drop is ink-derived (matches the trail). */ filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .85)) drop-shadow(0 8px 14px color-mix(in srgb, var(--ink) 22%, transparent)); } #kab2-skier-skier svg{ display: block; } /* Skier SVG parts — colors come from the theme palette. Reference hex (files2): ink #1d2421, legs #2c3531, jacket #9e4436, front arm #7d3429, helmet #2e5d49, skin #e8ddca, goggles #27343a. */ .kab2-skier-ink{ fill: var(--ink, #1d2421); } .kab2-skier-ink-line{ stroke: var(--ink, #1d2421); fill: none; } .kab2-skier-legs{ stroke: color-mix(in srgb, var(--ink, #1d2421) 92%, white); fill: none; } .kab2-skier-jacket{ fill: var(--falu, #9e4436); } .kab2-skier-arm-b{ stroke: var(--falu, #9e4436); fill: none; } .kab2-skier-arm-f{ stroke: color-mix(in srgb, var(--falu, #9e4436) 80%, black); fill: none; } .kab2-skier-head{ /* Skin tone — semantic, not a palette color */ fill: #e8ddca; } .kab2-skier-helmet{ fill: var(--pine, #2e5d49); } .kab2-skier-goggles{ /* Goggle lens — dark cool grey (semantic: tinted glass against the light skin tone). Direction-agnostic. */ stroke: #27343a; fill: none; } @media (max-width: 640px){ #kab2-skier-skier svg{ width: 50px; height: 38px; } } @media (prefers-reduced-motion: reduce){ #kab2-skier-spray, #kab2-skier-skier{ display: none; } }