twotalesanimation
22bc903041
Deploy / deploy (push) Successful in 1m5s
- nginx basic auth on /previz/ (login file lives on the server, mounted from docker/auth/, see DEPLOY.md step 8); private, no-store so Cloudflare never caches it - Print styles for previz pages: dark, A4 landscape, one section a page; videos print as poster frames with a link - scripts/previz-pdf.mjs (npm run previz:pdf) prints the page to public/previz/crowd/crowd-previz.pdf via Edge/Chrome DevTools - "PDF" download link on the page Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
116 lines
3.5 KiB
CSS
116 lines
3.5 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Phones held sideways: short landscape screens (tools in /set use a side column) */
|
|
@custom-variant land (@media (orientation: landscape) and (max-height: 540px));
|
|
|
|
:root {
|
|
--ink: #0a0a0b;
|
|
--ink-2: #111113;
|
|
--line: rgb(255 255 255 / 0.1);
|
|
--fg: #ecebe8;
|
|
--muted: #8d8c88;
|
|
--accent: #e8572a;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-ink: var(--ink);
|
|
--color-ink-2: var(--ink-2);
|
|
--color-line: var(--line);
|
|
--color-fg: var(--fg);
|
|
--color-muted: var(--muted);
|
|
--color-accent: var(--accent);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
--font-display: var(--font-josefin);
|
|
}
|
|
|
|
html {
|
|
color-scheme: dark;
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: 5rem;
|
|
}
|
|
|
|
body {
|
|
background: var(--ink);
|
|
color: var(--fg);
|
|
}
|
|
|
|
::selection {
|
|
background: var(--accent);
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* Film grain overlay */
|
|
.grain::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: -50%;
|
|
pointer-events: none;
|
|
z-index: 60;
|
|
opacity: 0.07;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
animation: grain 0.8s steps(4) infinite;
|
|
}
|
|
|
|
@keyframes grain {
|
|
0% { transform: translate(0, 0); }
|
|
25% { transform: translate(-3%, 2%); }
|
|
50% { transform: translate(2%, -3%); }
|
|
75% { transform: translate(-2%, -1%); }
|
|
100% { transform: translate(1%, 3%); }
|
|
}
|
|
|
|
/* Scroll reveal (toggled by <Reveal>) */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
|
|
}
|
|
.reveal.is-visible {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
@keyframes drift {
|
|
0%, 100% { transform: translate3d(-6%, -4%, 0) scale(1); }
|
|
50% { transform: translate3d(6%, 4%, 0) scale(1.15); }
|
|
}
|
|
.animate-drift { animation: drift 18s ease-in-out infinite; }
|
|
|
|
@keyframes scan {
|
|
from { transform: translateY(-10vh); }
|
|
to { transform: translateY(110vh); }
|
|
}
|
|
.animate-scan { animation: scan 7s linear infinite; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
.grain::after, .animate-drift, .animate-scan { animation: none; }
|
|
.reveal { opacity: 1; transform: none; transition: none; }
|
|
}
|
|
|
|
/* Previz pages (/previz/*) print/PDF dark, edge to edge, like the screen version.
|
|
Margins come from padding cloned onto every page instead of white @page margins.
|
|
The page sets its own @page (landscape, no margin) so it doesn't get the report's. */
|
|
@media print {
|
|
html:has(.previz), html:has(.previz) body { background: var(--ink) !important; color-scheme: dark; }
|
|
.previz {
|
|
padding-block: 12mm;
|
|
box-decoration-break: clone;
|
|
-webkit-box-decoration-break: clone;
|
|
print-color-adjust: exact;
|
|
-webkit-print-color-adjust: exact;
|
|
}
|
|
.previz.grain::after { display: none; }
|
|
.previz figure, .previz li, .previz img, .previz dl { break-inside: avoid; }
|
|
.previz h2 { break-after: avoid; }
|
|
}
|
|
|
|
/* Printable VFX report (/set/report/view): A4 paper, keep the accent colours */
|
|
@media print {
|
|
@page { size: A4; margin: 14mm 12mm; background: white; }
|
|
/* The site is dark-scheme; paper isn't (otherwise the page margins print dark) */
|
|
html, body { background: white !important; color-scheme: light; }
|
|
.report { print-color-adjust: exact; -webkit-print-color-adjust: exact; font-size: 11px; }
|
|
}
|