/* ========================= 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} }