Hugging Face's logo

Spaces:
systms
/
ACTION-HF
Running on Zero

App Files Community
1
ACTION-HF
File size: 17,948 Bytes
86b17ed
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6f034fb
 
 
 
 
 
 
86b17ed
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
/* ========================= ACTION — page-specific overrides ========================= */

/* Hero variant — the figure wants to stand tall on the right, not fill-bleed */
.v-hero.v-action .stage{min-height:calc(100vh - 122px);background:radial-gradient(ellipse at 75% 60%, #1a1a1a 0%, #0A0A0A 55%)}
.v-hero.v-action .bg{display:none}
.v-hero.v-action .grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;opacity:0.35;pointer-events:none;mask-image:radial-gradient(ellipse at 70% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);-webkit-mask-image:radial-gradient(ellipse at 70% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%)}

/* Standing figure presentation zone */
.figure-stage{position:absolute;right:4%;top:0;bottom:0;width:48%;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.figure-stage .figure-img{max-height:86%;max-width:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 60px 60px rgba(0,0,0,0.8)) drop-shadow(0 0 0 transparent)}
.figure-stage .plinth{position:absolute;bottom:6%;left:10%;right:10%;height:120px;background:radial-gradient(ellipse at center, rgba(255,45,30,0.18) 0%, rgba(255,45,30,0) 70%);filter:blur(20px);z-index:-1}
.figure-stage .floor{position:absolute;bottom:6%;left:10%;right:10%;height:1px;background:linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent)}

/* Crosshair / reticle around figure */
.figure-crop{position:absolute;width:22px;height:22px;border:2px solid var(--accent);z-index:3}
.figure-crop.tl{top:8%;left:2%;border-right:0;border-bottom:0}
.figure-crop.tr{top:8%;right:2%;border-left:0;border-bottom:0}
.figure-crop.bl{bottom:8%;left:2%;border-right:0;border-top:0}
.figure-crop.br{bottom:8%;right:2%;border-left:0;border-top:0}

/* The left-side content */
.v-hero.v-action .left{width:52%;padding:60px 56px}
.v-hero.v-action h1{font-size:clamp(88px,13vw,180px);margin:12px 0 0;line-height:0.82;letter-spacing:-0.04em}
.v-hero.v-action .lead{max-width:480px}
.v-hero.v-action .side{display:none}

/* Figure callout chip — short label + stub line + dot pinned to an articulation point.
   Lives inside .figure-img-wrap so `top`/`right` are image-relative. The container is
   shifted up by half its height so `top` refers to the dot's vertical centre. */
.callout{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;transform:translateY(-50%);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.22em;color:var(--muted);text-transform:uppercase}
.callout .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(255,45,30,0.2);flex-shrink:0}
.callout .line{width:40px;height:1px;background:var(--line-2);flex-shrink:0}
.callout .lbl{background:rgba(10,10,10,0.85);border:1px solid var(--line-2);padding:4px 8px;border-radius:3px;backdrop-filter:blur(6px);color:var(--text);white-space:nowrap}
.callout.left-side{flex-direction:row-reverse}
.callout.left-side .line{transform:rotate(180deg)}

/* Vertical side rail, right edge */
.side-rail{position:absolute;right:18px;top:60px;bottom:60px;z-index:5;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.3em;color:var(--muted-2);text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);pointer-events:none}
.side-rail .tick{width:6px;height:1px;background:var(--line-2);margin:10px 0;transform:rotate(180deg)}

/* ========================= STUDIO VARIANT — figure grid backdrop ========================= */
.v-action.v-studio-figs .stage{padding:40px 28px 60px}
.v-action.v-studio-figs .fig-backdrop{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:2px;filter:saturate(0.92) brightness(0.6)}
.v-action.v-studio-figs .fig-backdrop .tile{position:relative;overflow:hidden;background:#0d0d0d}
.v-action.v-studio-figs .fig-backdrop .tile img{width:100%;height:100%;object-fit:cover;object-position:center}
.v-action.v-studio-figs .fig-backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.88) 55%, rgba(10,10,10,1) 100%)}

/* ========================= BLISTER PACK VARIANT ========================= */
.v-blister .stage{position:relative;min-height:calc(100vh - 122px);padding:48px 28px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(180deg, #0A0A0A 0%, #111 100%)}
.v-blister .bp-backdrop{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;opacity:0.3;mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);-webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%)}
.blister{position:relative;z-index:5;width:min(1100px,94vw);height:min(720px,88vh);background:linear-gradient(180deg, #FF2D1E 0%, #D32515 100%);background:var(--accent);border-radius:4px;display:grid;grid-template-columns:1.3fr 1fr;gap:0;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,0.8), inset 0 0 0 2px rgba(0,0,0,0.2)}
.blister::before{content:"";position:absolute;inset:14px;border:2px dashed rgba(0,0,0,0.35);border-radius:2px;pointer-events:none;z-index:1}
.blister .header{position:absolute;top:28px;left:34px;right:34px;z-index:3;display:flex;justify-content:space-between;align-items:center}
.blister .header .wm{font-family:'Archivo',sans-serif;font-weight:900;font-stretch:condensed;font-size:44px;letter-spacing:-0.02em;color:#fff;line-height:1}
.blister .header .series{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.24em;color:rgba(255,255,255,0.85);text-transform:uppercase;text-align:right;line-height:1.5}
.blister .header .series b{display:block;font-size:14px;color:#fff}

.blister .bubble{position:relative;margin:88px 20px 80px 40px;background:rgba(255,255,255,0.12);border:2px solid rgba(255,255,255,0.25);border-radius:10px;backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.blister .bubble::before{content:"";position:absolute;top:8px;left:8px;right:40%;height:40%;background:linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%);border-radius:8px;pointer-events:none}
.blister .bubble img{max-height:86%;max-width:90%;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,0.5))}
.blister .bubble .base{position:absolute;bottom:0;left:0;right:0;height:70px;background:repeating-linear-gradient(45deg, rgba(0,0,0,0.15) 0 8px, rgba(0,0,0,0) 8px 16px);border-top:1px solid rgba(0,0,0,0.2)}

.blister .card-copy{padding:88px 40px 80px 20px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:2}
.blister .card-copy .big{font-family:'Archivo',sans-serif;font-weight:900;font-stretch:condensed;font-size:clamp(52px,6vw,82px);line-height:0.86;letter-spacing:-0.03em;margin:0 0 14px}
.blister .card-copy .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.24em;text-transform:uppercase;margin-bottom:6px;opacity:0.8}
.blister .card-copy .lead{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.04em;line-height:1.7;text-transform:uppercase;color:rgba(255,255,255,0.9);margin:0 0 18px;max-width:320px}
.blister .drop-b{background:#0A0A0A;border:2px solid #000;border-radius:6px;padding:20px;color:#fff}
.blister .drop-b .dp{border:1px dashed rgba(255,255,255,0.3);border-radius:4px;padding:20px 16px;text-align:center;cursor:pointer;transition:border-color .18s, background .18s}
.blister .drop-b .dp.over{border-color:#fff;background:rgba(255,255,255,0.06)}
.blister .drop-b .dp .t{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.22em;text-transform:uppercase}
.blister .drop-b .dp .s{margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.22em;color:var(--muted);text-transform:uppercase}
.blister .drop-b .sel{margin-top:12px;width:100%;padding:12px;background:var(--accent);color:#fff;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;border:none;cursor:pointer}
.blister .ages{position:absolute;bottom:24px;left:34px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.24em;color:#fff;text-transform:uppercase}
.blister .ages b{background:#fff;color:var(--accent);padding:3px 6px;margin-right:6px;font-weight:800}
.blister .barcode{position:absolute;bottom:24px;right:34px;display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.24em;color:rgba(255,255,255,0.9);text-transform:uppercase}
.blister .barcode .bc{display:flex;gap:2px;align-items:flex-end;height:26px}
.blister .barcode .bc span{display:inline-block;width:2px;height:100%;background:#fff}
.blister .barcode .bc span:nth-child(2n){width:1px;height:70%}
.blister .barcode .bc span:nth-child(3n){height:85%}

/* ========================= SAMPLE STRIP (inline hero — v1 / enlarged) ========================= */
.sample-strip{margin-top:44px;max-width:none;width:calc(100% - 4px)}
.sample-head{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.26em;color:var(--muted);text-transform:uppercase;margin-bottom:16px;padding-top:16px;border-top:1px solid var(--line)}
.sample-head .count{color:var(--text)}
.sample-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sample-card{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line-2);border-radius:10px;background:radial-gradient(ellipse at 50% 70%, #1c1c1c 0%, #0b0b0b 70%);box-shadow:0 20px 40px rgba(0,0,0,0.4);transition:transform .3s, border-color .3s, box-shadow .3s}
.sample-card::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;opacity:0.28;pointer-events:none}
.sample-card::after{content:"";position:absolute;bottom:6%;left:14%;right:14%;height:60px;background:radial-gradient(ellipse at center, rgba(255,45,30,0.22) 0%, rgba(255,45,30,0) 70%);filter:blur(12px);pointer-events:none}
.sample-card img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center;display:block;transition:transform .4s;filter:drop-shadow(0 24px 24px rgba(0,0,0,0.55))}
.sample-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 28px 48px rgba(0,0,0,0.5)}
.sample-card:hover img{transform:scale(1.04)}
.sample-card .s-tag{position:absolute;top:10px;left:10px;z-index:2;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.24em;text-transform:uppercase;padding:4px 8px;background:rgba(0,0,0,0.75);border:1px solid var(--line-2);border-radius:3px;color:var(--text)}
.sample-card .s-meta{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:14px 14px 12px;background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.92) 70%);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.22em;color:var(--muted);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.sample-card .s-meta .n{color:var(--text);font-size:10px;letter-spacing:0.2em}

/* ========================= FIGURE GRID (examples) ========================= */
.fig-examples{width:min(1280px,94vw);margin:60px auto 40px;position:relative;z-index:5}
.fig-examples-head{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px;margin-bottom:18px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.22em;color:var(--muted);text-transform:uppercase}
.fig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fig-grid.fig-grid-3{grid-template-columns:repeat(3,1fr)}
.fig-card{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:radial-gradient(ellipse at 50% 70%, #1a1a1a 0%, #0b0b0b 70%)}
.fig-card .fi{width:100%;height:100%;object-fit:contain;object-position:center;display:block;transition:transform .5s}
.fig-card:hover .fi{transform:scale(1.04)}
.fig-card .fi-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;opacity:0.25;pointer-events:none}
.fig-card .fi-tag{position:absolute;top:10px;left:10px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.22em;text-transform:uppercase;padding:4px 7px;background:rgba(0,0,0,0.7);border:1px solid var(--line-2);border-radius:3px;color:#fff}
.fig-card .fi-meta{position:absolute;bottom:0;left:0;right:0;padding:12px;background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 70%);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.22em;color:var(--muted);text-transform:uppercase;display:flex;justify-content:space-between}
.fig-card .fi-meta .n{color:var(--text)}

/* ========================= PROMPT RECIPE SECTION ========================= */
.recipe-sect{width:min(1280px,94vw);margin:60px auto 80px;position:relative;z-index:5;padding:60px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.recipe-intro{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:end;margin-bottom:50px}
.recipe-eyebrow{grid-column:1/-1;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.24em;color:var(--muted);text-transform:uppercase;margin-bottom:6px}
.recipe-h{font-size:clamp(52px,8vw,120px);margin:0;letter-spacing:-0.03em;line-height:0.88}
.recipe-lead{font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.75;color:#c8c8c6;text-transform:uppercase;letter-spacing:0.04em;max-width:520px;margin:0}
.recipe-lead b{color:var(--text);font-weight:600}

.recipe-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}

.recipe-prompt{background:#0b0b0b;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.recipe-prompt .tbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.22em;color:var(--muted);text-transform:uppercase}
.recipe-prompt .tbar .led{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.recipe-prompt .pbody{padding:24px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.85;color:var(--text)}
.recipe-prompt .pbody .key{color:var(--accent);font-weight:700}
.recipe-prompt .pbody .mute{color:var(--muted)}
.recipe-prompt .pbody .br{display:block;height:10px}
.recipe-prompt .pbody .tok{display:inline-block;padding:2px 7px;background:rgba(255,45,30,0.12);border:1px solid rgba(255,45,30,0.35);border-radius:4px;color:var(--accent);font-size:12px;margin:0 2px}
.recipe-prompt .pfoot{margin-top:auto;padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.22em;color:var(--muted);text-transform:uppercase}
.recipe-prompt .pfoot .copy-btn{font-family:inherit;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--text);background:transparent;border:1px solid var(--line-2);padding:6px 12px;border-radius:4px;cursor:pointer}
.recipe-prompt .pfoot .copy-btn:hover{border-color:var(--accent);color:var(--accent)}

.recipe-params{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start}
.param-card{background:#0b0b0b;border:1px solid var(--line);border-radius:10px;padding:20px;position:relative;overflow:hidden}
.param-card .pn{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.28em;color:var(--muted-2);text-transform:uppercase;margin-bottom:10px}
.param-card .pv{font-family:'Archivo',sans-serif;font-weight:900;font-stretch:condensed;font-size:42px;line-height:0.9;letter-spacing:-0.02em;color:var(--text)}
.param-card .pv .unit{font-size:16px;color:var(--muted);margin-left:4px;font-family:'JetBrains Mono',monospace;font-weight:400;letter-spacing:0.14em}
.param-card .pd{margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;line-height:1.6;color:var(--muted);text-transform:uppercase}
.param-card .pd .accent{color:var(--accent)}

/* Token strip (trigger words) */
.trigger-strip{grid-column:1/-1;margin-top:16px;background:#0b0b0b;border:1px solid var(--line);border-radius:10px;padding:20px 24px}
.trigger-strip .th{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.22em;color:var(--muted);text-transform:uppercase}
.trigger-strip .tokens{display:flex;flex-wrap:wrap;gap:8px}
.trigger-strip .tokens .tk{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--text);background:#101010;cursor:pointer;transition:all .15s}
.trigger-strip .tokens .tk:hover{border-color:var(--accent);color:var(--accent)}
.trigger-strip .tokens .tk.req{background:var(--accent);border-color:var(--accent);color:#fff}

/* Responsive */
@media (max-width: 1100px){
  .recipe-grid{grid-template-columns:1fr}
  .fig-grid{grid-template-columns:repeat(2,1fr)}
  .figure-stage{width:40%;right:2%}
  .v-hero.v-action .left{width:60%;padding:40px 30px}
}
@media (max-width: 760px){
  .blister{grid-template-columns:1fr;height:auto}
  .figure-stage{display:none}
  .v-hero.v-action .left{width:100%}
  .fig-grid{grid-template-columns:1fr}
}