/* copied from fbl-apps/site/public/assets/art.css by tools/dev/sync-fa.py — edit there (or the patch list here), not here */ /* ============================================================ FBL APPS · card art (assets/art.js → window.FA_ART). home.js wires it as
on cards and on the category tiles. A schematic of what each app does. Accent = the card's / tile's --c (category rgb triple), falling back to the site accent. Strokes keep their pixel width at every size (non-scaling). Motion: (1) first view — the lines trace themselves in once (art.js: .fa-pre → .fa-trace); (2) hover / keyboard focus of the card or tile, 600–900 ms. Nothing moves otherwise, and nothing moves at all in html.calm, html.lite or reduced motion. ============================================================ */ .fa-art,.fa-svg,.ctile .ca{--k:var(--c,var(--a))} /* the plate */ .fa-art,.ctile .ca{--sw:1.5px;position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--hair-2); background:radial-gradient(ellipse 62% 78% at 50% 50%,rgba(var(--k),.075),transparent 72%),linear-gradient(180deg,rgba(255,255,255,.012),transparent 60%),var(--bg); box-shadow:inset 0 2px 8px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.025)} .card.w2 .fa-art,.card.w3 .fa-art{--sw:1.6px;border-radius:14px} @media (max-width:620px){.fa-art{--sw:1.35px;border-radius:10px}} /* the category tile's smaller plate: ~100 px tall, drawing centred */ /* (display stays with apps.css, which hides the tile drawing on small phones) */ .ctile .ca{--sw:1.3px;height:100px;border-radius:10px} .ctile .ca .fa-svg{width:auto;height:100%;max-width:100%;margin:0 auto} /* the drawing */ .fa-svg{display:block;width:100%;height:auto;aspect-ratio:264/152;color:rgb(var(--k));stroke-width:var(--sw,1.5px);stroke-linecap:round;stroke-linejoin:round} .fa-svg *{vector-effect:non-scaling-stroke} /* strokes: neutral · faint neutral · accent · soft accent · dark (ticks on accent) */ .fa-svg .u{stroke:rgba(255,255,255,.27)} .fa-svg .u2{stroke:rgba(255,255,255,.14)} .fa-svg .k{stroke:rgb(var(--k))} .fa-svg .ks{stroke:rgba(var(--k),.45)} .fa-svg .kd{stroke:var(--bg);stroke-width:calc(var(--sw) + .3px)} .fa-svg .dl{stroke-dasharray:3 3.5} /* fills: frame · soft · softer-plus · bar · dark plate · white (grain source) · accent · faint accent · perforations · shares */ .fa-svg .f0{fill:rgba(255,255,255,.028)} .fa-svg .f1{fill:rgba(255,255,255,.055)} .fa-svg .f2{fill:rgba(255,255,255,.085)} .fa-svg .fb{fill:rgba(255,255,255,.15)} .fa-svg .fd{fill:var(--bg-1)} .fa-svg .fw{fill:#fff} .fa-svg .fk{fill:rgb(var(--k))} .fa-svg .fq{fill:rgba(var(--k),.13)} .fa-svg .kp{fill:rgba(var(--k),.4)} .fa-svg .s1{fill:rgba(var(--k),.7)} .fa-svg .s2{fill:rgba(var(--k),.48)} .fa-svg .s3{fill:rgba(var(--k),.26)} .fa-svg .s4{fill:rgba(var(--k),.12)} .fa-svg .o4{opacity:.4} .fa-svg .o5{opacity:.5} .fa-svg .nb{fill:none;stroke:none} /* type: mono labels (HEIC/JPG), the big @ (Unbounded), the watermark @ */ .fa-svg text{stroke:none;font-family:var(--mono);font-weight:600;text-anchor:middle;dominant-baseline:auto} .fa-svg .tx{font-size:20px;letter-spacing:.04em} .fa-svg .ts{font-size:14px} .fa-svg .tu{fill:rgba(255,255,255,.62)} .fa-svg .tk{fill:rgb(var(--k))} .fa-svg .tb{font-family:var(--head);font-weight:600;font-size:44px} .fa-svg .tm{font-family:var(--head);font-weight:600;font-size:18px;fill:rgb(var(--k))} .fa-svg .wm{opacity:.55} .fa-svg .fx{opacity:0} /* micro-type: literal field names (mono 8.5 units ≈ 10–11 px on a card), neutral */ .fa-svg .lb{font-size:8.5px;font-weight:500;letter-spacing:0;text-anchor:start;fill:rgba(255,255,255,.56)} .fa-svg .lm{font-size:9.5px;fill:rgba(255,255,255,.62)} /* ---------- motion: hover / focus of the card or tile ---------- */ .fa-svg :is(.a1,.a2,.a3,.a4,.a5,.a6,.a7){transform-box:fill-box;transform-origin:center;transition:transform .8s var(--ease),opacity .7s var(--ease)} .fa-svg .ck,.fa-svg .ct{transition:fill .5s var(--ease),stroke .5s var(--ease)} .fa-svg .fx{transition:none} /* origins that are not the element centre */ [data-art=twin-check] .a2{transform-box:view-box;transform-origin:190px 76px} [data-art=squeeze] .a1,[data-art=caption-check] .a1,[data-art=tt-region] .a3{transform-origin:left center} [data-art=frame-pick] .a2{transform-origin:center bottom} @keyframes fa-pulse{0%{opacity:0;transform:scale(1)}12%{opacity:.85}100%{opacity:0;transform:scale(2.7)}} @keyframes fa-sweep-x{0%{opacity:0;transform:translateX(0)}18%,78%{opacity:.9}100%{opacity:0;transform:translateX(104px)}} @keyframes fa-sweep-y{0%{opacity:0;transform:translateY(0)}18%,78%{opacity:.9}100%{opacity:0;transform:translateY(104px)}} @keyframes fa-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-26}} @media (hover:hover) and (prefers-reduced-motion:no-preference){ /* TT REGION: the pin pings, the leader flows, the region value lights up */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=tt-region] .a1{animation:fa-pulse .95s cubic-bezier(.2,.6,.35,1) both} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=tt-region] .a2{animation:fa-flow .9s var(--ease) both} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=tt-region] .a3{transform:scaleX(1.1)} /* PHONE LOOK: the cut slides left, more of the photo gets the phone look */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=phone-look] .a1{transform:translateX(-24px)} /* META CLEAN: an eraser pass, the struck values fade */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=meta-clean] .a2{opacity:.3} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=meta-clean] .a3{animation:fa-sweep-x .9s cubic-bezier(.45,.05,.3,1) both} /* PICKER: the picked frames lift, the rest step back */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=picker] .a1{transform:translateY(-3px)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=picker] .a2{opacity:.45} /* CONVERT: both stacks fan out, the arrows move forward */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=convert] .a1{transform:translate(4px,-4px)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=convert] .a2{transform:translate(2px,-2px)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=convert] .a5{transform:translate(4px,-4px)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=convert] .a6{transform:translate(2px,-2px)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=convert] .a7{transform:translateY(-2px)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=convert] .a3{transform:translateX(5px)} /* TWIN CHECK: the photo settles onto its reference, the ring turns */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=twin-check] .a1{transform:translate(-6px,-5px)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=twin-check] .a2{transform:rotate(40deg)} /* MARK: the watermark slides along its diagonal */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=mark] .a1{transform:translateX(19px)} /* SAFEZONE: the hatching marches, the safe area answers */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=safezone] .a1{transform:translateX(14px)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=safezone] .a2{transform:scale(1.03)} /* SQUEEZE: the clip squeezes further, the arrows push */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=squeeze] .a1{transform:scaleX(.9)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=squeeze] .a2{transform:translateX(-8px)} /* UPLOAD CHECK: a scan runs down the clip, the checks fill one by one */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=upload-check] .a5{animation:fa-sweep-y .9s cubic-bezier(.45,.05,.3,1) both} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=upload-check] .ck{fill:rgb(var(--k))} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=upload-check] .ct{stroke:var(--bg)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=upload-check] .a2>*{transition-delay:.1s} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=upload-check] .a3>*{transition-delay:.2s} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=upload-check] .a4>*{transition-delay:.3s} /* FRAME PICK: the focus brackets close in, the sharpest bar rises */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=frame-pick] .a1{transform:scale(.93)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=frame-pick] .a2{transform:scaleY(1.18)} /* CAPTION CHECK: the caption grows towards the limit */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=caption-check] .a1{transform:scaleX(1.1)} /* HANDLE: the variants step out one after another */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=handle] .a1{transform:translateX(4px)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=handle] .a2{transform:translateX(4px);transition-delay:.06s} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=handle] .a3{transform:translateX(4px);transition-delay:.12s} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=handle] .a4{transform:scale(1.04)} /* SPLIT CALC: the shares move apart */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=split-calc] .a1{transform:translateX(-5px)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=split-calc] .a2{transform:translateX(-1.5px)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=split-calc] .a3{transform:translateX(1.5px)} html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=split-calc] .a4{transform:translateX(5px)} /* POST CLOCK: the hand sweeps through the evening */ html:not(.calm,.lite) :is(.card,.ctile):is(:hover,:focus-visible) [data-art=post-clock] .a1{transform:rotate(30deg)} } /* Оптимизация: the static SVG filters (grain, blur) go too */ html.lite .fa-svg [filter]{filter:none} html.lite .fa-svg .fw[filter]{display:none} /* the PHONE LOOK grain is a white layer seen only through its noise filter: no filter, no layer */ /* ---------- first view: every line traces itself in once (~900 ms), fills and type fade in; order stagger via --td. Traced elements carry pathLength="1"; during the trace they drop non-scaling-stroke and divide the width by the drawing's scale (--s, set by art.js) so the line looks the same and the dash maths stays in user units (Chrome mis-measures pathLength under non-scaling-stroke). Dashed lines (.dl) keep their dash rhythm and only fade in. ---------- */ @keyframes fa-draw{from{stroke-dashoffset:1.002}to{stroke-dashoffset:0}} @keyframes fa-fill{from{fill-opacity:0}to{fill-opacity:1}} @keyframes fa-sfade{from{stroke-opacity:0}to{stroke-opacity:1}} @media (prefers-reduced-motion:no-preference){ html:not(.calm,.lite) :is(.fa-pre,.fa-trace) :is(path,rect,circle,ellipse):not(.dl){vector-effect:none;stroke-width:calc(var(--sw,1.5px) / var(--s,1))} html:not(.calm,.lite) :is(.fa-pre,.fa-trace) path.kd{stroke-width:calc((var(--sw,1.5px) + .3px) / var(--s,1))} html:not(.calm,.lite) :is(.fa-pre,.fa-trace) [pathLength]{stroke-dasharray:1 1.01} html:not(.calm,.lite) .fa-pre [pathLength]{stroke-dashoffset:1.002} html:not(.calm,.lite) .fa-pre :is(path,rect,circle,ellipse,text){fill-opacity:0} html:not(.calm,.lite) .fa-pre .dl{stroke-opacity:0} html:not(.calm,.lite) .fa-trace :is(path,rect,circle,ellipse,text){animation:fa-draw .9s cubic-bezier(.5,.1,.25,1) var(--td,0s) both,fa-fill .6s ease calc(var(--td,0s) + .35s) both} html:not(.calm,.lite) .fa-trace :is(.k,.ks,.kd,.fk,.fq,.kp,.tk,.tm,.s1,.s2,.s3,.s4){animation-delay:calc(var(--td,0s) + .2s),calc(var(--td,0s) + .55s)} html:not(.calm,.lite) .fa-trace .dl{animation:fa-sfade .6s ease calc(var(--td,0s) + .4s) both} }