/* ══════════════════════════════════════════════════════════════════ CANVAS SYSTEM — fixed export dimensions + on-screen fit + atmosphere Every template markup:

…

brand.js scales .canvas to fit the viewport (screen preview). For a pixel-perfect export add ?export=1 (scale locked to 1) then screenshot the .canvas element / size the viewport to the format. ══════════════════════════════════════════════════════════════════ */ html, body { height: 100%; background: #08090a; } body { font-family: var(--font-body); color: var(--text); display: grid; place-items: center; min-height: 100vh; padding: 32px; } .stage { display: grid; place-items: center; } /* the exportable artboard */ .canvas { position: relative; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 14 6 6; /* trennt NUR Monster-Wörter (Selbstständigkeit), nie Display-Type */ overflow: hidden; background: var(--bg); color: var(--text); transform: scale(var(--fit, 1)); transform-origin: top left; box-shadow: 0 40px 120px -30px rgba(0,0,0,0.8); isolation: isolate; } body.export, body.export .stage { padding: 0; } body.export .canvas { box-shadow: none; } /* ── formats (px = export size) ─────────────────────────────────── */ .fmt-square { width: 1080px; height: 1080px; } /* IG post 1:1 */ .fmt-portrait { width: 1080px; height: 1350px; } /* IG post 4:5 */ .fmt-story { width: 1080px; height: 1920px; } /* Story/Reel 9:16 */ .fmt-thumb { width: 1280px; height: 720px; } /* YT thumbnail */ .fmt-banner { width: 2560px; height: 1440px; } /* YT channel art */ .fmt-wide { width: 1600px; height: 900px; } /* web hero shot */ .fmt-a4 { width: 794px; height: 1123px; } /* A4 @96dpi */ .fmt-li-post { width: 1200px; height: 1200px; } /* LinkedIn square */ .fmt-li-wide { width: 1200px; height: 627px; } /* LinkedIn 1.91:1 */ .fmt-li-banner{ width: 1584px; height: 396px; } /* LinkedIn profile cover */ .fmt-x { width: 1600px; height: 900px; } /* X / Twitter 16:9 */ .fmt-email { width: 1200px; height: 400px; } /* email header 3:1 */ /* ── atmosphere utilities (opt-in) ──────────────────────────────── */ /* film grain — strength from --grain (0 disables) */ .grain::after { content: ""; position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: var(--grain, 0); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* radial vignette toward edges */ .vignette::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(0,0,0,0.55) 100%); } /* accent halo glow — place a .halo element or use util */ .halo-tl, .halo-tr, .halo-bl, .halo-br { position: absolute; z-index: 0; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--halo) 0%, transparent 70%); filter: blur(20px); pointer-events: none; } .halo-tl { top: -20%; left: -15%; } .halo-tr { top: -20%; right: -15%; } .halo-bl { bottom: -20%; left: -15%; } .halo-br { bottom: -20%; right: -15%; } /* hairline dot / line grids */ .grid-dots { background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 32px 32px; } .grid-lines { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; } /* ── shared primitives templates can lean on ────────────────────── */ .kicker { font-family: var(--font-kicker, var(--font-mono)); font-style: var(--kicker-style, normal); text-transform: var(--kicker-case, uppercase); letter-spacing: var(--tracking-kicker); font-size: var(--kicker-size, 0.72rem); color: var(--accent); font-weight: var(--kicker-weight, 500); } .accent-bar { height: 4px; width: 72px; background: var(--accent); border-radius: 99px; } .chip { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; } .pill-accent { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.04em; padding: 12px 22px; border-radius: 99px; } /* ── editorial utilities (2026: oversized type, overlap, zine) ──── */ /* outline display type — pair filled + outline words for tension. fill = bg + paint-order pushes the stroke BEHIND the fill, which kills the ugly inner-contour "wireframe" artifact of raw text-stroke. */ .type-outline { color: var(--bg); -webkit-text-stroke: 3px var(--text); paint-order: stroke fill; } .type-outline-accent { color: var(--bg); -webkit-text-stroke: 3px var(--accent); paint-order: stroke fill; } /* ghost type — huge, faint, behind content (z-index 0) */ .type-ghost { position: absolute; z-index: 0; pointer-events: none; font-family: var(--font-display); font-weight: var(--weight-display); text-transform: var(--case-display); color: var(--text); opacity: 0.05; letter-spacing: -0.03em; line-height: 0.85; white-space: nowrap; } /* giant numbers (stats, steps) */ .big-num { font-family: var(--font-display); font-weight: var(--weight-display); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 0.9; } /* slight rotations — zine energy, use sparingly */ .tilt-1 { transform: rotate(-2deg); } .tilt-2 { transform: rotate(1.5deg); } .tilt-3 { transform: rotate(-1deg); } /* sticker / tape chip — accent block that breaks the grid */ .sticker { display: inline-block; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 18px; transform: rotate(-2deg); box-shadow: 4px 4px 0 rgba(0,0,0,0.35); } /* full-width accent band (diagonal poster strip) */ .band { position: absolute; left: -10%; right: -10%; z-index: 2; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: var(--weight-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; padding: 10px 0; text-align: center; letter-spacing: 0.04em; } /* thick accent underline for a single word — gradient background sits safely BEHIND the glyphs (box-shadow variant clipped g/y descenders) */ .mark-accent { background: linear-gradient(transparent 68%, var(--accent) 68%, var(--accent) 94%, transparent 94%); } /* hairline inner frame (editorial page border) */ .frame-line::after { content: ""; position: absolute; inset: 28px; z-index: 1; border: 1px solid var(--line); pointer-events: none; } /* terminal / scanline texture (tech brands) */ .scanlines::before { content: ""; position: absolute; inset: 0; z-index: 39; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.14) 3px 4px); } /* photo slot — set --photo: url(...) inline to drop an image in */ .photo-slot { background: var(--photo, linear-gradient(160deg, var(--surface-2), var(--bg-2))); background-size: cover; background-position: center; } .photo-slot .photo-hint { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); border: 1px dashed var(--line); border-radius: 99px; padding: 8px 16px; } /* hints are working aids — never ship them in exports */ body.export .photo-hint { display: none; } /* duotone overlay to sit on photos so text stays readable */ .photo-tint::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.72) 78%); } /* ── brand logo lockup (populated by brand.js) ──────────────────── */ .brand-logo img { height: 1em; width: auto; } .brand-logo .wordmark { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: -0.02em; } .brand-logo .wordmark .accent { color: var(--accent); } /* ── floating controls (hidden on export / ?ui=0 / screenshots) ─── */ #dz-ui { position: fixed; z-index: 9999; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; padding: 8px 10px; background: rgba(16,17,19,0.92); border: 1px solid #2a2c31; border-radius: 99px; backdrop-filter: blur(12px); font-family: 'JetBrains Mono', monospace; font-size: 12px; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.6); } #dz-ui button { border: 1px solid transparent; background: transparent; color: #cfd2d0; padding: 6px 11px; border-radius: 99px; cursor: pointer; letter-spacing: 0.04em; transition: all 150ms var(--ease); } #dz-ui button:hover { background: #23262b; color: #fff; } #dz-ui button[data-active="1"] { background: var(--accent, #aef03d); color: #0a0a0a; border-color: transparent; } #dz-ui .sep { width: 1px; height: 20px; background: #33363c; margin: 0 4px; } #dz-ui .grp { display: flex; gap: 4px; } body.export #dz-ui { display: none !important; }