/* ============================================================= WEITER v9 — Glass UI System Room is the stage. Everything floats above it. ============================================================= */ :root { --paper: #faf3e2; --paper-shade: #e8ddc0; --ink: #1d140a; --ink-soft: #4a3820; --ink-faint: #8a7656; --accent: #c96a2b; --accent-soft: rgba(201,106,43,.14); --warm-bg: #1a0f05; --frost: rgba(200,225,240,.78); --glass-bg: rgba(250,243,226,.06); --glass-border: rgba(250,243,226,.18); --glass-blur: 18px; --shadow-sm: 0 2px 8px rgba(20,10,0,.25); --shadow-md: 0 14px 30px -6px rgba(20,10,0,.4); --shadow-lg: 0 36px 70px -20px rgba(20,10,0,.55); --shadow-glass: 0 12px 28px -6px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.15) inset; --ease: cubic-bezier(.22,.9,.3,1); --ease-bounce: cubic-bezier(.22,1.3,.4,1); --font: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-display: "Cormorant Garamond", "Cormorant", "Spectral", Georgia, serif; --font-hand: "Patrick Hand", "Caveat", "Segoe Print", cursive; --font-mono: "IBM Plex Mono", "Courier Prime", monospace; } *,*::before,*::after{box-sizing:border-box;} html,body{margin:0;padding:0;height:100%;background:var(--warm-bg);overflow:hidden;overscroll-behavior:none;} body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} button{font-family:inherit;} .hidden{display:none !important;} /* ============================================================= ROOM + STAGE ============================================================= */ #room{position:relative;width:100vw;height:100vh;overflow:hidden;} #stage{ position:absolute;inset:0; background:var(--weiter-panorama, url("scene.jpg")); background-size:cover; background-position:center center; background-repeat:no-repeat; /* Brighter, friendlier — lift exposure noticeably, slight warmth */ filter:saturate(1.10) brightness(1.18) contrast(.96); z-index:1; } /* Soft warm overlay for cozy feel */ #stage::after{ content:"";position:absolute;inset:0; background:radial-gradient(ellipse at 50% 35%, rgba(255,234,200,.18) 0%, transparent 60%); pointer-events:none; } #stageOverlay{ position:absolute;inset:0;z-index:2;pointer-events:none; background: radial-gradient(ellipse 80% 70% at 50% 60%, transparent 30%, rgba(20,10,0,.35) 90%), linear-gradient(180deg, rgba(20,10,0,.18) 0%, transparent 25%, transparent 70%, rgba(20,10,0,.25) 100%); } /* Water animation overlay — sits over the lake visible through the window */ #waterAnim{ position:absolute; z-index:3; pointer-events:none; /* Lake area in the scene image: window centered, lake roughly at 45-65% horiz, 30-42% vert */ left:46%;top:32%;width:18%;height:14%; overflow:hidden; opacity:.45; mix-blend-mode:screen; } #waterAnim::before{ content:""; position:absolute;inset:-30%; background: radial-gradient(ellipse at 30% 50%, rgba(180,210,235,.4) 0%, transparent 35%), radial-gradient(ellipse at 70% 60%, rgba(160,200,225,.3) 0%, transparent 35%), radial-gradient(ellipse at 50% 30%, rgba(200,225,240,.35) 0%, transparent 35%); animation:waterDrift 14s ease-in-out infinite; filter:blur(8px); } #waterAnim::after{ content:""; position:absolute;inset:40% 0 0 0; background: repeating-linear-gradient(180deg, transparent 0px, transparent 8px, rgba(255,255,255,.08) 8px, rgba(255,255,255,.08) 9px, transparent 9px, transparent 18px); animation:waterShimmer 6s ease-in-out infinite alternate; opacity:.6; } @keyframes waterDrift{ 0%,100%{transform:translateX(0) translateY(0);} 33%{transform:translateX(-3%) translateY(1%);} 66%{transform:translateX(2%) translateY(-1%);} } @keyframes waterShimmer{ 0%{transform:translateX(0);opacity:.5;} 100%{transform:translateX(-2%);opacity:.7;} } /* Glass surface — host of everything floating */ #glass{ position:absolute;inset:0;z-index:10; } /* Entry lock */ #room[data-state="INIT"] #glass, #room[data-state="INIT"] #saveIndicator, #room[data-state="INIT"] #paperActions, #room[data-state="ENTRY_DELAY"] #glass, #room[data-state="ENTRY_DELAY"] #saveIndicator, #room[data-state="ENTRY_DELAY"] #paperActions{ opacity:0;pointer-events:none; } #glass, #saveIndicator, #paperActions{ transition:opacity 1000ms var(--ease) 300ms; } /* ============================================================= ANCHORS — fixed-position objects in the room Positioned to align with the room background. ============================================================= */ .anchor{ position:absolute; appearance:none;background:transparent;border:0;cursor:pointer; padding:0;margin:0; z-index:30; transition:transform 320ms var(--ease), filter 320ms var(--ease); -webkit-tap-highlight-color:transparent; background-size:contain; background-repeat:no-repeat; background-position:center; /* Drop shadow set per-anchor (lighting matches the room) */ } .anchor:hover{transform:translateY(-4px) scale(1.05);} .anchor:active{transform:translateY(-2px) scale(1.02);} .anchor:focus{outline:none;} .anchor:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px;} /* ============================================================= ANCHORS — invisible hotspots over the scene image. Positions are in % of the scene container so they stay aligned with the furniture as the viewport scales. The scene image has aspect ratio 1.5:1 (1313×875) — we lock the scene container to that ratio and position hotspots inside it. ============================================================= */ .anchor{ position:absolute; appearance:none;background:transparent;border:0;cursor:pointer; padding:0;margin:0; z-index:30; -webkit-tap-highlight-color:transparent; transition:background 220ms var(--ease), box-shadow 220ms; border-radius:6px; } /* Subtle hover hint — soft inner glow so user feels the click target without it looking like a button */ .anchor:hover{ background:radial-gradient(ellipse at center, rgba(255,240,200,.18) 0%, transparent 70%); box-shadow:0 0 24px rgba(255,235,200,.25) inset; } .anchor:active{filter:brightness(1.1);} .anchor:focus{outline:none;} .anchor:focus-visible{outline:2px solid rgba(255,200,150,.7);outline-offset:2px;} /* Position each hotspot in % of the scene/glass area, calibrated to the rendered furniture */ /* Trash — black bin bottom-left floor */ .anchor-trash{ left:4%;bottom:18%;width:7%;height:22%; } /* Recycling symbol overlay on the trash — dezent grün, perspektivisch leicht gekippt */ .anchor-trash::before{ content:""; position:absolute; left:50%;top:46%; transform:translate(-50%,-50%) rotateY(-12deg) rotateX(8deg); width:46%;height:38%; background-image:url("data:image/svg+xml;utf8,"); background-size:contain;background-repeat:no-repeat;background-position:center; pointer-events:none; opacity:.55; transition:opacity 220ms; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); } .anchor-trash:hover::before{opacity:.9;} .anchor-trash.armed::before{opacity:1;filter:drop-shadow(0 0 6px rgba(122,156,107,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.5));} /* Fridge — SMEG cream bottom-left */ .anchor-fridge{ left:11%;bottom:14%;width:11%;height:32%; } /* Cabinet — black drawers wall top-left */ .anchor-cabinet{ left:1%;top:18%;width:13%;height:32%; } /* Collection — cards/sideboard right bottom */ .anchor-collection{ right:3%;bottom:18%;width:20%;height:30%; } /* Postit-wall — colorful framed grid right top */ .anchor-postitwall{ right:6%;top:18%;width:13%;height:22%; } /* Calendar — white wall calendar right wall */ .anchor-calendar{ right:6%;top:32%;width:13%;height:22%; } /* Settings — gears in top-right corner */ .anchor-settings{ right:0.5%;top:18%;width:6%;height:32%; } /* Versions stack — clickable on the cabinet alternative; positioned on the table area for now (hidden) */ .anchor-stack{ display:none; } /* Tabletop hidden anchor */ .anchor-tabletop{ display:none; } /* Decorative desk lamp — already in the rendered scene image, no separate element needed */ .anchor-desklamp{ display:none; } /* ============================================================= DOCUMENT ZONE — paper sits in the center on the table ============================================================= */ /* ============================================================= PAPER — sits on the dark wood table in the scene image. Proper DIN-A4 proportions (1 : 1.414). Moved left toward the fridge so the lake and right side of the room stay visible. ============================================================= */ #documentZone{ position:absolute; /* Moved left from center 50% to ~36% — closer to the fridge, leaves the lake/window/right wall visible. */ left:38%;top:55%;transform:translate(-50%,-50%); width:min(420px, 38vw); /* Maintain DIN-A4 ratio: width × √2 */ height:min(594px, 53.7vw); perspective:2400px; z-index:60; pointer-events:none; } #paperStack{position:relative;width:100%;height:100%;pointer-events:none; transform:rotateX(7deg); transform-origin:center bottom; } .paper{ position:absolute;inset:0;pointer-events:auto; background: radial-gradient(ellipse at 22% 8%, rgba(255,250,235,.7), transparent 55%), radial-gradient(ellipse at 80% 92%, rgba(0,0,0,.05), transparent 60%), linear-gradient(165deg, #fefaeb 0%, #f7eed3 100%); border-radius:2px; padding:9.5% 9% 7%; box-shadow: 0 1px 0 rgba(255,250,240,.85) inset, 0 -1px 0 rgba(0,0,0,.06) inset, 1px 0 0 rgba(255,250,240,.4) inset, -1px 0 0 rgba(0,0,0,.04) inset, 0 1px 2px rgba(0,0,0,.08), 0 4px 8px -1px rgba(0,0,0,.18), 0 14px 24px -6px rgba(0,0,0,.32), 0 32px 60px -14px rgba(0,0,0,.55); transition:transform 560ms var(--ease), opacity 560ms var(--ease), box-shadow 560ms, filter 420ms; color:var(--ink); overflow:hidden; } .paper::before{ content:"";position:absolute;left:9%;top:0;bottom:0;width:1px; background:linear-gradient(to bottom, transparent, rgba(160,40,40,.14) 10%, rgba(160,40,40,.14) 90%, transparent); pointer-events:none; } .paper::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background-image:url("data:image/svg+xml;utf8,"); mix-blend-mode:multiply;opacity:.32; } .paper .page-window{ position:relative; width:100%;height:100%; overflow-y:auto; overflow-x:hidden; /* rc11: no top fade — sticky toolbar replaces the visual edge. Bottom kept unfaded. */ /* Hide scrollbar (we use typewriter scroll programmatically) */ scrollbar-width:none; -ms-overflow-style:none; } .paper .page-window::-webkit-scrollbar{display:none;} /* rc11: front paper — toolbar sits flush at the top; content gets its own side padding so it doesn't run into the paper edge. */ .paper.front{padding-top:0;} .paper.front .page-window{padding:0;} .paper.front .content{ padding:18px 9% 96px 9%; /* side padding replaces what the paper lost */ } /* Fallback: when the toolbar is hidden (e.g. day is frozen, or clipboard resting), give the content extra top-padding so the text doesn't sit flush against the paper edge. */ body:not(.editor-toolbar-on) .paper.front .content, .paper.front.frozen .content{ padding-top:54px; } /* Date label is shown in the bottom paper-nav on the front paper. Hide the absolute top-left date so the toolbar isn't crowded. */ .paper.front > .paper-date{display:none;} /* Also hide the snow indicator at the top for the front paper — freeze state is communicated via the toolbar action. */ .paper.front > .paper-snow{display:none;} .paper .content{ /* Spectral primary, Cormorant fallback. Reads exactly like a printed book page. */ font-family:"Spectral","Cormorant Garamond","Iowan Old Style",Georgia,serif; font-size:clamp(13px, 1.7cqi + 8px, 17px); font-weight:400; line-height:1.62; color:var(--ink); outline:none; word-wrap:break-word; overflow-wrap:break-word; hyphens:auto; max-width:60ch; margin:0 auto; padding:18px 0 96px 0; /* rc11: small top breathing space; bottom clears nav */ } .paper .content[data-placeholder]:empty::before{ content:attr(data-placeholder); color:var(--ink-faint); font-style:italic; pointer-events:none; } .paper .content p{margin:0 0 .9em;} .paper .content b, .paper .content strong{font-weight:600;} .paper .content i, .paper .content em{font-style:italic;} /* Container query so font scales with paper width on small screens */ .paper{container-type:inline-size;} .paper-date{ position:absolute;top:22px;left:42px; font:500 10px/1 var(--font-mono); letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint); } .paper-snow{position:absolute;top:22px;right:18px;font-size:16px;color:#5a93b8;display:none;} .paper.frozen .paper-snow{display:block;} /* rc11: .paper-toolbar styling moved to dedicated section near end of file. */ /* Save dot styling — see rc11 block at end of file. */ /* Eselsohr (dog-ear) — real folded-corner with clip-path. When bookmarked: top-right corner is "creased" — the paper itself has a triangular cut, and a small triangle of paper-back peeks out at the fold (slightly darker, like a real folded sheet). */ .paper-dogear{ display:none; } .paper.bookmarked{ /* Cut the top-right corner away */ clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); } .paper.bookmarked .paper-dogear{ display:block; position:absolute;top:0;right:0; width:28px;height:28px; /* Triangle showing the back of the sheet */ background:linear-gradient(135deg, #d9c89a 0%, #b89e6a 60%, #8e7a4a 100%); clip-path:polygon(100% 0, 100% 100%, 0 100%); box-shadow:-1px 1px 2px rgba(0,0,0,.18) inset, 0 0 6px rgba(0,0,0,.18); z-index:5; pointer-events:none; } @media (max-width:760px){ .paper.bookmarked{clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);} .paper.bookmarked .paper-dogear{width:22px;height:22px;} } /* Old paper-delete styling removed — now using .paper-tool */ .paper .content{ position:relative;z-index:2;outline:none; color:var(--ink); caret-color:var(--accent); padding-top:6px; /* No own scrollbar — typewriter scroll handles it via translateY. */ overflow:visible; /* Hide any inadvertent scrollbar */ scrollbar-width:none; -ms-overflow-style:none; } .paper .content::-webkit-scrollbar{display:none;} .paper .content h1{ font-family:var(--font-display); font-size:1.6em;font-weight:600;line-height:1.2; margin:.2em 0 .5em; letter-spacing:-.005em; } .paper .content h2{ font-family:var(--font-display); font-size:1.25em;font-weight:600;line-height:1.3; margin:.4em 0 .35em; } .paper .content ul, .paper .content ol{margin:.4em 0 .9em;padding-left:1.4em;} .paper .content ul li, .paper .content ol li{margin:.15em 0;} .paper .content ul.weiter-check{list-style:none;padding-left:0;} .paper .content ul.weiter-check li{ position:relative;padding-left:1.6em; } .paper .content ul.weiter-check li::before{ content:"";position:absolute;left:0;top:.35em; width:.95em;height:.95em;border:1.5px solid var(--ink-faint);border-radius:3px; background:transparent; } .paper .content ul.weiter-check li.done::before{ background:var(--ink-soft);border-color:var(--ink-soft); } .paper .content ul.weiter-check li.done::after{ content:"";position:absolute;left:.18em;top:.45em; width:.32em;height:.55em;border:solid #faf3e2;border-width:0 1.5px 1.5px 0; transform:rotate(45deg); } .paper .content [data-align="left"]{text-align:left;} .paper .content [data-align="center"]{text-align:center;} .paper .content [data-align="right"]{text-align:right;} .paper .content img.weiter-img, .paper .content .weiter-media{ display:block;max-width:100%;height:auto;margin:.7em 0;border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,.18); cursor:pointer; transition:outline 160ms; box-sizing:border-box; } .paper .content img.weiter-img.selected, .paper .content .weiter-media.selected{ outline:2px solid var(--accent);outline-offset:3px; } .paper .content img.weiter-img[data-align="left"], .paper .content .weiter-media[data-align="left"]{margin-right:auto;margin-left:0;} .paper .content img.weiter-img[data-align="center"], .paper .content .weiter-media[data-align="center"]{margin-left:auto;margin-right:auto;} .paper .content img.weiter-img[data-align="right"], .paper .content .weiter-media[data-align="right"]{margin-left:auto;margin-right:0;} .paper .content img.weiter-img[data-size="s"], .paper .content .weiter-media[data-size="s"]{max-width:38%;} .paper .content img.weiter-img[data-size="m"], .paper .content .weiter-media[data-size="m"]{max-width:65%;} .paper .content img.weiter-img[data-size="l"], .paper .content .weiter-media[data-size="l"]{max-width:100%;} /* Video block: video itself fills the .weiter-video container */ .paper .content .weiter-video{padding:0;background:#000;} .paper .content .weiter-video video{display:block;width:100%;height:auto;border-radius:2px;} /* Audio block: 1-2 lines with title above the player */ .paper .content .weiter-audio{ background:linear-gradient(180deg, rgba(244,232,205,.6), rgba(228,212,178,.5)); padding:8px 10px;border-radius:4px; border:1px solid rgba(120,90,40,.18); } .paper .content .weiter-audio .weiter-audio-title{ display:block;font-size:.85em;color:var(--ink);font-style:italic; margin-bottom:6px;text-align:left;letter-spacing:.02em; } .paper .content .weiter-audio audio{display:block;width:100%;height:32px;} /* File block: name + icon, dashed warm border */ .paper .content .weiter-file{ display:block;padding:14px 16px; border:1px dashed rgba(120,90,40,.42); border-radius:3px; color:var(--ink);font-size:.92em;font-style:italic; background:rgba(244,232,205,.34); text-align:left; } /* Text-attachment block (txt/md): warm left rule */ .paper .content .weiter-text-attach{ border-left:3px solid #c96a2b; padding:8px 12px;margin:.7em auto; background:rgba(201,106,43,.05); font-size:.92em;white-space:pre-wrap; border-radius:0 2px 2px 0; } .paper .content:empty::before{ content:attr(data-placeholder);color:var(--ink-faint);font-style:italic;opacity:.55; } .paper .content video{max-width:100%;display:block;margin:12px 0;border-radius:2px;box-shadow:var(--shadow-sm);} .paper.drop-target{outline:2px dashed var(--accent);outline-offset:6px;} /* Paper navigation: 4-way arrows on edges Left/right = previous/next day in quick-stack Up/down = previous/next page within day */ .paper-arrows-x{ position:absolute;left:0;right:0;top:50%; transform:translateY(-50%); display:flex;justify-content:space-between;align-items:center; padding:0 2px;pointer-events:none; z-index:5; } .paper-arrows-x .paper-arrow{ pointer-events:auto; } .paper-arrows-y{display:none;} .paper-arrow{ pointer-events:auto; appearance:none;border:0;background:rgba(29,20,10,.05); width:30px;height:30px;border-radius:50%;cursor:pointer; color:var(--ink-soft);font-size:14px;line-height:1; display:flex;align-items:center;justify-content:center;opacity:.45; transition:opacity 180ms, background 180ms; } .paper-arrow:hover{opacity:1;background:rgba(29,20,10,.14);} .paper-arrow:disabled{opacity:.1;cursor:default;} .paper-arrow svg{width:14px;height:14px;} .paper-page-dots{display:none;} /* Right-edge vertical page-rail */ .paper-page-rail{ position:absolute; top:50%;right:36px; transform:translateY(-50%); display:flex;flex-direction:column;align-items:center;gap:8px; z-index:6;pointer-events:auto; padding:6px 4px; background:rgba(254,250,235,.55); border:1px solid rgba(29,20,10,.08); border-radius:14px; backdrop-filter:blur(2px); box-shadow:0 2px 6px -2px rgba(0,0,0,.08); } .paper-rail-arrow{width:24px;height:24px;background:transparent;opacity:.55;} .paper-rail-arrow:hover{background:rgba(29,20,10,.08);opacity:1;} .paper-rail-arrow svg{width:11px;height:11px;} .paper-rail-pages{ display:flex;flex-direction:column;gap:4px; max-height:180px;overflow-y:auto;scrollbar-width:none; } .paper-rail-pages::-webkit-scrollbar{display:none;} .paper-rail-dot{ appearance:none;border:1px solid rgba(29,20,10,.18); width:22px;height:22px;border-radius:50%; background:transparent;cursor:pointer;color:var(--ink-soft); font:500 10px/1 var(--font-mono); display:flex;align-items:center;justify-content:center; transition:background 160ms, border-color 160ms, color 160ms, transform 160ms; padding:0; } .paper-rail-dot:hover{border-color:var(--accent);color:var(--ink);} .paper-rail-dot.active{background:var(--accent);border-color:var(--accent);color:#faf3e2;transform:scale(1.06);} .paper-rail-dot.bookmarked{border-color:#c8a868;box-shadow:0 0 0 1px #c8a868;} .paper-rail-dot.active.bookmarked{background:#c8a868;border-color:#c8a868;color:#1d140a;} /* 3-sheet stack — real layered paper feel */ .paper.front{z-index:30;cursor:text;} /* Ghost clone — used during page-break animation. Sits over the real DOM so the new front can render immediately underneath. */ .paper-ghost{ transform-origin:center bottom; will-change:transform, opacity; transition:transform 880ms cubic-bezier(.55, .05, .25, 1), opacity 880ms; } .paper-ghost.rolling-out{ transform:translateY(-110%) scale(.92) !important; opacity:0; } /* Roll-in: new blank page comes from below — rc12: no rotateX (felt wrong) */ .paper.front.rolling-in{ animation:paperRollIn 380ms cubic-bezier(.2, .7, .2, 1) forwards; } @keyframes paperRollIn{ 0% {transform:translateY(16px) scale(.99); opacity:0;} 100% {transform:translateY(0) scale(1); opacity:1;} } .paper.mid{ z-index:20;cursor:pointer; transform:translate(-22px, -26px) rotate(-2.4deg) scale(.97); filter:brightness(.94); box-shadow: 0 1px 0 rgba(255,250,240,.4) inset, 0 22px 38px -14px rgba(0,0,0,.5); pointer-events:auto; } .paper.mid:hover{ transform:translate(-16px, -30px) rotate(-1.8deg) scale(.99); filter:brightness(1.0); z-index:35; } .paper.mid .content, .paper.mid .page-window, .paper.mid .paper-toolbar, .paper.mid .paper-arrows-x, .paper.mid .paper-arrows-y, .paper.mid .paper-page-dots, .paper.mid .paper-save-dot, .paper.mid .paper-new-day, .paper.mid::before{display:none;} /* Mid bookmark indicator — folded corner top-right when mid is bookmarked */ .paper.mid.bookmarked::after{ content:"";position:absolute;top:0;right:0; width:0;height:0; border-style:solid; border-width:0 22px 22px 0; border-color:transparent #c8a868 transparent transparent; filter:drop-shadow(-2px 2px 2px rgba(0,0,0,.18)); background:none;mix-blend-mode:normal;opacity:1; } /* Small + icon top-right of the front paper — opens new day */ .paper-new-day{ position:absolute; top:10px;right:10px; width:30px;height:30px; display:flex;align-items:center;justify-content:center; background:rgba(250,243,226,.65); border:1.5px solid var(--ink); border-radius:50%; color:var(--ink); cursor:pointer; padding:0; z-index:8; transition:background 220ms, transform 220ms, box-shadow 220ms; -webkit-tap-highlight-color:transparent; } .paper-new-day svg{width:16px;height:16px;} .paper-new-day:hover{ background:var(--ink); color:var(--paper); transform:scale(1.1); box-shadow:0 4px 10px -2px rgba(0,0,0,.3); } .paper-new-day:focus{outline:none;} .paper-new-day:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} /* The .paper.back placeholder is removed in v17 — kept here for safety if old DOM lingers */ .paper.back{display:none;} /* Frost */ .paper .frost{ position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0; transition:opacity 720ms var(--ease); background: radial-gradient(ellipse at 30% 20%, transparent 15%, var(--frost) 85%), linear-gradient(135deg, rgba(255,255,255,0) 25%, rgba(188,216,230,.5) 100%); mix-blend-mode:screen;z-index:3; } .paper.frozen .frost{opacity:.62;} .paper.frozen .content{pointer-events:none;user-select:none;cursor:pointer;} .paper.freezing .frost{animation:freezeGrow 1300ms var(--ease) forwards;} @keyframes freezeGrow{0%{opacity:0;}100%{opacity:.62;}} .paper.flying{animation:flyToFridge 1100ms var(--ease) forwards;pointer-events:none;} @keyframes flyToFridge{ 0%{transform:scale(1);opacity:1;} 100%{transform:translate(-44vw, 18vh) scale(.1) rotate(-12deg);opacity:0;} } .paper.fly-to-trash{ animation:paperToTrash 900ms var(--ease) forwards;pointer-events:none; z-index:450; } @keyframes paperToTrash{ 0%{transform:scale(1) rotate(0);opacity:1;} 100%{transform:translate(-46vw, 32vh) scale(.08) rotate(-45deg);opacity:0;} } /* Writing mode — focus on paper */ #room[data-state="WRITING"] .anchor{opacity:.4;transition:opacity 500ms;} #room[data-state="WRITING"] .anchor:hover{opacity:1;} /* ============================================================= FLOAT LAYER — free-floating elements (cards, post-its, media) ============================================================= */ #floatLayer{position:absolute;inset:0;z-index:80;pointer-events:none;} #floatLayer > *{pointer-events:auto;} /* Generic floating element */ .float{ position:absolute; cursor:grab; transition:transform 280ms var(--ease), box-shadow 280ms; user-select:none; -webkit-user-select:none; touch-action:none; } .float:hover{transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--r,0deg)) scale(1.04);} .float.dragging{cursor:grabbing;transition:none;z-index:600 !important;filter:brightness(1.05);} .float.deleted{ transition:transform 280ms var(--ease), opacity 280ms; transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--r,0deg)) scale(.15); opacity:0;pointer-events:none; } /* POST-IT */ .float-postit{ width:152px;min-height:118px;padding:14px; background:#fde98a; font:17px/22px var(--font-hand);color:#2a1e08; box-shadow:0 14px 24px -8px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.05); border-radius:2px; transform:rotate(var(--r, -2deg)); z-index:220; } .float-postit .t{outline:none;min-height:80px;pointer-events:none;} .float-postit.editing{cursor:default;box-shadow:0 20px 34px -8px rgba(0,0,0,.6), 0 0 0 2px rgba(201,106,43,.4);} .float-postit.editing .t{pointer-events:auto;user-select:text;} .float-postit.color-yellow{background:#fde98a;} .float-postit.color-pink{background:#ffb5ad;} .float-postit.color-green{background:#bcd99a;} .float-postit.color-blue{background:#a8c4e0;} /* MEDIA on workbench */ .float-media{ max-width:200px;max-height:200px; border-radius:3px; background:#fff;padding:6px; border:1px solid rgba(29,20,10,.1); box-shadow:0 12px 24px -6px rgba(0,0,0,.4); transform:rotate(var(--r, 0deg)); z-index:150; cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none; } .float-media img, .float-media video{display:block;width:100%;height:auto;max-height:188px;object-fit:contain;border-radius:2px;pointer-events:none;-webkit-user-drag:none;user-drag:none;} .float-media video{pointer-events:auto;} /* video controls usable */ /* CARD — index card from the cabinet */ .float-card{ width:160px;height:104px; background:linear-gradient(180deg, #fffaee 0%, #f5ead0 100%); border:1px solid rgba(29,20,10,.15); border-radius:3px; padding:14px 16px; box-shadow:0 12px 24px -6px rgba(0,0,0,.35); font:13px/1.4 var(--font);color:var(--ink); transform:rotate(var(--r, 0deg)); z-index:180; overflow:hidden; } .float-card .card-name{font-weight:500;font-size:15px;margin-bottom:2px;} .float-card .card-group{font:9px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;} .float-card .card-meta{font-size:11px;color:var(--ink-soft);} /* ============================================================= TRASH ARMED state (when dragging over) ============================================================= */ .anchor-trash.armed{ transform:scale(1.15); filter:drop-shadow(-10px 14px 18px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(232,90,80,.7)); } /* ============================================================= SAVE INDICATOR ============================================================= */ #saveIndicator{ position:absolute;top:22px;right:26px;z-index:100; width:10px;height:10px;border-radius:50%; background:rgba(250,243,226,.3); transition:background 260ms, box-shadow 260ms; } #saveIndicator[data-state="saving"]{background:#e8c76a;box-shadow:0 0 12px rgba(232,199,106,.5);} #saveIndicator[data-state="saved"]{background:#9acf88;box-shadow:0 0 12px rgba(154,207,136,.5);} #saveIndicator[data-state="failed"]{background:#e87a6a;box-shadow:0 0 12px rgba(232,122,106,.5);} /* ============================================================= PAPER ACTIONS ============================================================= */ #paperActions{ position:absolute;left:50%;bottom:28px;transform:translateX(-50%); display:flex;gap:10px;z-index:70; } .pa-btn{ appearance:none;border:0;cursor:pointer; display:inline-flex;align-items:center;gap:7px; padding:11px 20px;border-radius:999px; font:500 13px/1 var(--font);letter-spacing:.02em; background:rgba(250,243,226,.92);color:var(--ink); box-shadow:var(--shadow-md); transition:transform 200ms var(--ease), background 200ms; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .pa-btn:hover{transform:translateY(-2px);background:#fff;} .pa-freeze{background:rgba(208,232,244,.95);color:#144868;} .pa-exit{background:rgba(250,243,226,.18);color:rgba(250,243,226,.92);box-shadow:none;} .pa-exit:hover{background:rgba(250,243,226,.32);} #welcomeHint{ position:absolute;left:50%;top:24%;transform:translate(-50%,-50%);z-index:90; font:italic 20px var(--font);color:rgba(250,243,226,.92); text-shadow:0 2px 8px rgba(0,0,0,.7); pointer-events:none;text-align:center; animation:fadeInOut 6s ease .6s; } @keyframes fadeInOut{0%,100%{opacity:0;}20%,70%{opacity:1;}} #leaveHint{ position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:120; font:italic 12px/1 var(--font); letter-spacing:.18em; color:rgba(250,243,226,.5); text-shadow:0 1px 4px rgba(0,0,0,.6); cursor:pointer; padding:8px 22px; transition:opacity 380ms var(--ease), color 220ms; pointer-events:auto; background:transparent; } #leaveHint:hover{color:rgba(250,243,226,.9);} #leaveHint.hidden{opacity:0;pointer-events:none;} #leaveHint:not(.hidden){opacity:1;} /* ============================================================= OVERLAYS — glass cards ============================================================= */ .overlay{ position:absolute;inset:0;z-index:400; display:flex;align-items:center;justify-content:center;padding:20px; background:rgba(20,10,0,.55); backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15); opacity:0;pointer-events:none; transition:opacity 380ms var(--ease); } .overlay:not(.hidden){opacity:1;pointer-events:auto;} .card{ position:relative;width:min(560px, 96vw);max-height:92vh;overflow:auto; background:linear-gradient(180deg, rgba(255,250,238,.97), rgba(245,234,208,.94)); color:var(--ink);padding:38px 36px 30px;border-radius:4px; box-shadow:0 60px 120px -24px rgba(20,10,0,.7); transform:translateY(14px);transition:transform 420ms var(--ease); border:1px solid rgba(29,20,10,.1); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .overlay:not(.hidden) .card{transform:translateY(0);} .card-close{ position:absolute;top:10px;right:12px; appearance:none;border:0;background:none;font-size:22px;cursor:pointer; color:var(--ink-faint);width:32px;height:32px;border-radius:50%; transition:background 180ms, color 180ms; } .card-close:hover{background:rgba(0,0,0,.06);color:var(--ink);} .card h2{ margin:0 0 12px;font:400 italic 24px/1.2 var(--font); color:#2a1e0c;letter-spacing:-.01em; } .card h3{ margin:0 0 10px;font:500 10px/1 var(--font-mono); letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint); } .card-actions{ display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:18px; } .card-actions button{ appearance:none;border:0;cursor:pointer; padding:10px 20px;border-radius:3px; font:13px/1 var(--font); background:rgba(29,20,10,.07);color:var(--ink); transition:background 180ms, transform 180ms var(--ease); } .card-actions button:hover{background:rgba(29,20,10,.14);} .card-actions .btn-primary, .btn-primary{ background:var(--accent);color:#fff;font-weight:500; text-transform:uppercase;letter-spacing:.1em;font-size:11px;padding:12px 22px; box-shadow:0 8px 18px -6px rgba(201,106,43,.5); } .btn-primary:hover{background:#d97a39;transform:translateY(-1px);} .s-hint{font:italic 13px/1.5 var(--font);color:var(--ink-soft);margin:6px 0;} .s-section{margin:20px 0;padding-top:16px;border-top:1px solid rgba(29,20,10,.08);} .s-section:first-of-type{border-top:0;padding-top:0;} .s-slider-label{font:14px/1 var(--font);color:var(--ink-soft);margin-bottom:12px;} .s-slider-label span{font:500 22px/1 var(--font);color:var(--ink);margin:0 4px;font-variant-numeric:tabular-nums;} #daysSlider{-webkit-appearance:none;appearance:none;width:100%;height:4px; background:linear-gradient(90deg, var(--accent-soft), rgba(201,106,43,.06)); border-radius:4px;outline:none;cursor:pointer;} #daysSlider::-webkit-slider-thumb{-webkit-appearance:none; width:22px;height:22px;border-radius:50%;background:var(--ink);border:3px solid #fffaee; box-shadow:var(--shadow-sm);cursor:grab;} #daysSlider::-moz-range-thumb{ width:22px;height:22px;border-radius:50%;background:var(--ink);border:3px solid #fffaee;box-shadow:var(--shadow-sm);} .s-contact{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;} .s-contact label{display:flex;flex-direction:column;gap:4px;} .s-contact label span{font:500 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);} .s-contact input, .s-recipient input{ appearance:none;border:0;background:transparent;border-bottom:1px solid rgba(29,20,10,.2); padding:7px 2px;font:15px/1 var(--font);color:var(--ink);outline:none; transition:border-color 180ms; } .s-contact input:focus, .s-recipient input:focus{border-bottom-color:var(--accent);} .s-radios{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px;} .s-radios label{ display:inline-flex;align-items:center;gap:6px;cursor:pointer; padding:7px 14px;border-radius:999px;background:rgba(29,20,10,.05);font-size:13px; } .s-radios input{accent-color:var(--accent);cursor:pointer;} #recipientList{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;} .recip-chip{ display:inline-flex;align-items:center;gap:6px; padding:5px 10px 5px 14px;background:rgba(29,20,10,.06);border-radius:999px;font-size:13px; } .recip-chip small{color:var(--ink-faint);} .recip-chip button{appearance:none;border:0;background:none;cursor:pointer;font-size:15px;color:var(--ink-faint);padding:0 2px;} .s-recipient{ display:grid;grid-template-columns:1.3fr 1fr 1fr auto auto;gap:6px;align-items:center; padding-top:8px;border-top:1px dashed rgba(29,20,10,.1); } .s-recipient select{ appearance:none;-webkit-appearance:none;border:0;background:rgba(29,20,10,.06); padding:7px 22px 7px 10px;border-radius:3px;font:13px var(--font);color:var(--ink);cursor:pointer;outline:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 8px center; } .s-recipient button{ appearance:none;border:0;cursor:pointer;padding:7px 12px;border-radius:3px; background:var(--ink);color:var(--paper);font:500 14px var(--font-mono); } #tierList{display:flex;flex-direction:column;gap:6px;} .tier{ display:flex;align-items:center;gap:10px;padding:10px 14px; background:rgba(29,20,10,.04);border-radius:3px;cursor:pointer; border:1px solid transparent;transition:background 180ms, border-color 180ms; } .tier:hover{background:rgba(29,20,10,.08);} .tier.active{background:var(--accent-soft);border-color:var(--accent);} .tier input{accent-color:var(--accent);} .tier-label{font-weight:500;font-size:15px;} .tier-note{font:italic 12px var(--font);color:var(--ink-soft);margin-left:auto;} .s-check{ display:flex;gap:10px;align-items:flex-start; padding:9px 12px;background:rgba(29,20,10,.03);border-radius:3px; font:13px/1.5 var(--font);cursor:pointer;margin-bottom:6px; } .s-check input{width:17px;height:17px;margin-top:2px;accent-color:var(--accent);cursor:pointer;} .announce-card{text-align:center;max-width:460px;} .announce-icon{color:#5a93b8;margin-bottom:4px;animation:breathe 2.8s ease-in-out infinite;} @keyframes breathe{0%,100%{opacity:.85;transform:scale(1);}50%{opacity:1;transform:scale(1.04);}} .announce-card p{font:15px/1.55 var(--font);color:var(--ink-soft);margin:10px 0;} /* ============================================================= ÜBERGABE-VORSCHAU — preview of what the recipient will see ============================================================= */ .preview-card{max-width:780px;} .preview-tier-bar{ display:flex;align-items:center;gap:10px; padding:10px 14px;margin:10px 0 18px; background:rgba(201,106,43,.06); border-left:3px solid var(--accent); border-radius:2px; font:13px/1.4 var(--font);color:var(--ink-soft); } .preview-tier-bar strong{color:var(--ink);font-weight:500;} .preview-stage{ background:linear-gradient(135deg, #2a1e0c 0%, #3a2a18 100%); padding:24px;border-radius:3px; box-shadow:inset 0 4px 12px rgba(0,0,0,.4); overflow:auto;max-height:62vh; } .preview-doc{ background:var(--paper); color:var(--ink); margin:0 auto; max-width:520px; padding:48px 52px 56px; box-shadow:0 16px 40px -10px rgba(0,0,0,.6); border-radius:1px; font:16px/1.65 "Iowan Old Style","Palatino Linotype","Source Serif Pro",Georgia,serif; background-image: radial-gradient(ellipse at 20% 0%, rgba(255,250,235,.5), transparent 55%), linear-gradient(165deg, #fefaeb 0%, #f5ead0 100%); } .preview-doc-header{ text-align:center; margin-bottom:38px; padding-bottom:24px; border-bottom:1px solid rgba(29,20,10,.12); } .preview-eyebrow{ font:500 9px/1 var(--font-mono); letter-spacing:.32em; text-transform:uppercase; color:var(--ink-faint); margin:6px 0 4px; } .preview-from, .preview-to{ font:italic 22px/1.2 var(--font); color:var(--ink); margin:0; } .preview-to{color:var(--accent);margin-bottom:4px;} .preview-divider{ color:var(--accent); font-size:24px; margin:6px 0; opacity:.5; } .preview-greeting{ font:italic 17px/1.5 var(--font); color:var(--ink-soft); margin-bottom:24px; padding-left:12px; border-left:2px solid rgba(201,106,43,.3); } .preview-body{ font:16px/1.7 var(--font); color:var(--ink); word-break:break-word; } .preview-body p{margin:0 0 16px;} .preview-body p:first-child::first-letter{ font-size:2.2em; float:left; line-height:.95; margin:4px 6px 0 0; font-style:italic; color:var(--accent); } .preview-body img, .preview-body video{ display:block; max-width:100%; height:auto; margin:20px auto; border-radius:2px; box-shadow:0 8px 20px -6px rgba(0,0,0,.3); /* Subtle photo enhancement */ filter:saturate(1.05) contrast(1.02); } .preview-body audio{display:block;margin:16px 0;width:100%;} .preview-body hr{ border:none; height:1px; background:linear-gradient(to right, transparent, rgba(29,20,10,.2), transparent); margin:28px 0; } .preview-doc-footer{ margin-top:38px; padding-top:24px; border-top:1px solid rgba(29,20,10,.12); text-align:right; } .preview-signature{ font:italic 18px/1 var(--font); color:var(--ink); margin-bottom:8px; } .preview-meta{ font:9px/1.4 var(--font-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); } #previewWarnings{margin:14px 0 4px;} .preview-warning{ display:flex;gap:10px;align-items:flex-start; padding:10px 14px;margin:6px 0; background:rgba(232,199,106,.12); border-left:3px solid #c8a836; border-radius:2px; font:13px/1.4 var(--font);color:var(--ink); } .preview-warning.warning-error{ background:rgba(232,90,80,.12); border-left-color:#c84838; } .preview-warning.warning-info{ background:rgba(90,147,184,.1); border-left-color:#5a93b8; } .preview-warning button{ appearance:none;border:0;cursor:pointer; background:var(--accent);color:#fff; font:500 10px/1 var(--font-mono); letter-spacing:.12em;text-transform:uppercase; padding:6px 12px;border-radius:2px; margin-left:auto; } /* Tier picker — Brief / Buch / Hand */ .tier{ display:flex;align-items:flex-start;gap:12px; padding:14px 16px; background:rgba(29,20,10,.04); border-radius:3px; cursor:pointer; border:1px solid transparent; transition:background 180ms, border-color 180ms; margin-bottom:8px; } .tier:hover{background:rgba(29,20,10,.08);} .tier.active{background:var(--accent-soft);border-color:var(--accent);} .tier input{accent-color:var(--accent);margin-top:3px;} .tier-info{flex:1;min-width:0;} .tier-label{font-weight:500;font-size:15px;display:block;} .tier-note{font:italic 12px/1.4 var(--font);color:var(--ink-soft);margin-left:0;display:block;margin-top:2px;} .tier-price{font:500 11px/1.4 var(--font-mono);color:var(--accent);margin-top:4px;display:block;letter-spacing:.04em;} @media (max-width:767px){ .preview-stage{padding:14px;max-height:50vh;} .preview-doc{padding:30px 28px 36px;font-size:15px;} .preview-from, .preview-to{font-size:18px;} .preview-body{font-size:14px;line-height:1.6;} } .upload-btn{ display:inline-block;cursor:pointer;margin:8px 0; padding:10px 18px;border-radius:3px;background:rgba(29,20,10,.06);font-size:13px; transition:background 180ms; } .upload-btn:hover{background:rgba(29,20,10,.12);} .upload-btn input{display:none;} .media-grid{ display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:10px; margin-top:10px;max-height:56vh;overflow-y:auto;padding:4px; } .media-item{ aspect-ratio:1;background:rgba(29,20,10,.05);border-radius:3px; display:flex;align-items:center;justify-content:center; font-size:10px;text-align:center;padding:6px;cursor:pointer; border:1px solid rgba(29,20,10,.08);overflow:hidden;position:relative; transition:transform 180ms; } .media-item:hover{transform:scale(1.03);} .media-item img, .media-item video{width:100%;height:100%;object-fit:cover;} .media-item .file-ic{font-size:28px;} .media-item .file-n{ position:absolute;bottom:0;left:0;right:0;padding:3px; background:rgba(0,0,0,.7);color:#fff;font-size:9px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .fridge-grid-item, .stack-grid-item{ aspect-ratio:.72;background:var(--paper); border:1px solid rgba(29,20,10,.12);border-radius:2px; padding:14px 10px;cursor:pointer;position:relative;overflow:hidden; box-shadow:var(--shadow-sm);transition:transform 180ms var(--ease), box-shadow 180ms; background-image:linear-gradient(transparent 16px, rgba(29,20,10,.04) 17px); background-size:100% 17px; } .fridge-grid-item:hover, .stack-grid-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);} .fridge-grid-item::before{content:"❄";position:absolute;top:6px;right:8px;color:#5a93b8;font-size:12px;} .stack-grid-item.is-frozen::before{content:"❄";position:absolute;top:6px;right:8px;color:#5a93b8;font-size:12px;} .stack-grid-item.is-archived{opacity:.7;background:#f0e6cc;} .stack-grid-item.is-archived::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 18px 18px 0;border-color:transparent #c8a868 transparent transparent;} .fi-d,.si-d{font:500 9px/1 var(--font-mono);letter-spacing:.12em;color:var(--ink-faint);} .fi-p,.si-p{font:10px/1.4 var(--font);color:var(--ink-soft);margin-top:6px; display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;} .stack-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:14px;margin-top:10px;max-height:60vh;overflow-y:auto;padding:4px;} .calendar-view{margin-top:14px;} .cal-grid-full{display:grid;grid-template-columns:repeat(7, 1fr);gap:4px;margin-top:10px;} .cal-cell-full{ aspect-ratio:1;background:rgba(29,20,10,.03);border-radius:2px; display:flex;flex-direction:column;align-items:center;justify-content:center; font:13px var(--font);color:var(--ink-soft);padding:4px; } .cal-cell-full.today{outline:2px solid var(--accent);color:var(--ink);font-weight:600;} .cal-cell-full.reminder{background:#e0574e;color:#fff;} .cal-cell-full.freeze{background:#6aa8d0;color:#fff;} .cal-cell-full.dispatch{background:#2a2a2a;color:#fff;} .signup-card{max-width:440px;} .signup-choice{display:flex;flex-direction:column;gap:10px;margin:16px 0;} .signup-choice label{ display:flex;align-items:center;gap:10px;padding:12px 14px; background:rgba(29,20,10,.04);border-radius:3px;cursor:pointer;font-size:14px; } .signup-choice label:hover{background:rgba(29,20,10,.09);} .signup-choice input{accent-color:var(--accent);} #simBanner{ position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:350; background:#ffc107;color:#3a2a00;padding:5px 18px; font:500 10px/1 var(--font-mono);letter-spacing:.24em;text-transform:uppercase; border-radius:0 0 4px 4px; } #farewell{ position:absolute;inset:0;z-index:500;display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity 1400ms var(--ease); background:rgba(20,10,0,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); } #farewell:not(.hidden){opacity:1;pointer-events:auto;} .farewell-card{padding:32px 56px;background:rgba(255,250,238,.94);border-radius:4px;box-shadow:var(--shadow-lg);} .farewell-card p{margin:0;font:italic 30px var(--font);color:var(--ink);} #room[data-state="EXITING"] #glass, #room[data-state="EXITING"] #saveIndicator, #room[data-state="EXITING"] #paperActions{ opacity:.15;transition:opacity 900ms var(--ease);pointer-events:none; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;} #stage{animation:none;} } /* Mobile */ @media (max-width:767px){ /* Paper smaller, sits over visible table area in cropped scene */ #documentZone{ width:74vw; height:62vh; top:50%; } .paper{padding:36px 26px 36px;} .paper .content{font:16px/26px var(--font);} /* Anchors get bigger touch targets even though hotspots are over fixed-width image */ .anchor{min-width:48px;min-height:48px;} /* (rc11: paper-toolbar mobile rules live in the dedicated rc11 block at end of file) */ /* Card overlays full width */ .card{padding:30px 20px 22px;} .card h2{font-size:20px;} .s-contact{grid-template-columns:1fr;} .s-recipient{grid-template-columns:1fr;} .booklet-page{width:150px;min-height:220px;padding:18px 14px;font-size:11px;} /* Mid + back papers on mobile: smaller offsets */ .paper.mid{transform:translate(-14px, -18px) rotate(-2deg) scale(.97);} .paper.back{transform:translate(18px, 24px) rotate(2deg) scale(.96);} } @media (max-width:480px){ #documentZone{ width:80vw; height:56vh; } .paper{padding:30px 20px 30px;} .paper .content{font:15px/25px var(--font);} } /* ============================================================= v18 — STACK LAYERING (Apple-Notes-Style) Front = newest page. Behind: up to 3 older pages, partly visible (~20%, ~12%, ~7% of top edge). Behind everything: the +Plus. ============================================================= */ .paper.stack-1{ transform:translateY(-7%) scale(.985); z-index:7; filter:brightness(.96) saturate(.95); box-shadow:0 22px 40px -14px rgba(0,0,0,.45), 0 4px 8px -2px rgba(0,0,0,.2); cursor:pointer; } .paper.stack-2{ transform:translateY(-12%) scale(.97); z-index:6; filter:brightness(.92) saturate(.9); box-shadow:0 18px 32px -12px rgba(0,0,0,.42); cursor:pointer; } .paper.stack-3{ transform:translateY(-15%) scale(.955); z-index:5; filter:brightness(.88) saturate(.85); box-shadow:0 14px 26px -10px rgba(0,0,0,.4); cursor:pointer; } .paper.stack-1:hover, .paper.stack-2:hover, .paper.stack-3:hover{ filter:brightness(1) saturate(1); } /* Hide front-only chrome on stacked papers */ .paper.stack-1 .paper-toolbar, .paper.stack-2 .paper-toolbar, .paper.stack-3 .paper-toolbar, .paper.stack-1 .paper-new-day, .paper.stack-2 .paper-new-day, .paper.stack-3 .paper-new-day, .paper.stack-1 .paper-arrows-x, .paper.stack-2 .paper-arrows-x, .paper.stack-3 .paper-arrows-x, .paper.stack-1 .paper-arrows-y, .paper.stack-2 .paper-arrows-y, .paper.stack-3 .paper-arrows-y, .paper.stack-1 .paper-page-dots, .paper.stack-2 .paper-page-dots, .paper.stack-3 .paper-page-dots, .paper.stack-1 .paper-save-dot, .paper.stack-2 .paper-save-dot, .paper.stack-3 .paper-save-dot{display:none;} /* Stack peek labels */ .paper-stack-peek{ position:absolute;left:9%;right:9%;top:6%; pointer-events:none; z-index:3; } .paper-stack-peek .peek-meta{ display:flex;justify-content:space-between;align-items:baseline; font:500 9px/1 var(--font-mono); letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint); margin-bottom:6px; } .paper-stack-peek .peek-lines{ font-family:"Spectral",Georgia,serif; font-size:11px;line-height:1.4; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; } /* Plus card — back of stack, always last */ .paper.plus-card{ transform:translateY(-18%) scale(.94); z-index:4; filter:brightness(.84) saturate(.8); box-shadow:0 12px 22px -8px rgba(0,0,0,.38); cursor:pointer; display:flex;align-items:center;justify-content:center; } .paper.plus-card .plus-glyph{ width:54px;height:54px;border-radius:50%; border:1.5px solid var(--ink-faint); display:flex;align-items:center;justify-content:center; color:var(--ink-faint); transition:transform 220ms var(--ease), border-color 220ms, color 220ms; } .paper.plus-card:hover .plus-glyph{ transform:scale(1.1); border-color:var(--accent);color:var(--accent); } .paper.plus-card .plus-glyph svg{width:24px;height:24px;} /* ============================================================= /* ============================================================= v18 — CABINET (Karteikasten) — Kreise + Personen ============================================================= */ .cabinet-card{max-width:560px;} .cabinet-circles{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:8px 0 18px; padding:14px 0; } .circle{ position:relative; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.4), rgba(0,0,0,.02)); border:1.5px solid rgba(29,20,10,.18); transition:background 200ms, border-color 200ms, transform 200ms var(--ease); cursor:default; } .circle.drop-hover{ border-color:var(--accent); background:rgba(201,106,43,.12); transform:scale(1.04); } .circle.locked{ cursor:pointer; background:rgba(29,20,10,.02); border-style:dashed; border-color:rgba(29,20,10,.14); } .circle.locked:hover{border-color:rgba(29,20,10,.32);} .circle-disc{ position:absolute;inset:6%; border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:8%; } .circle-label{ font-family:var(--font-display); font-size:15px;font-weight:500; color:var(--ink); letter-spacing:.005em; line-height:1.2; margin-bottom:4px; } .circle.locked .circle-label{color:var(--ink-faint);} .circle-count{ font:500 11px/1 var(--font-mono); letter-spacing:.18em; color:var(--ink-soft); text-transform:uppercase; } .circle-count[data-count]::after{ content:" Menschen"; font-size:10px; letter-spacing:.1em; } .circle-count[data-count="1"]::after{content:" Mensch";} .circle-plus{ font-family:var(--font); font-size:32px;font-weight:300; color:var(--ink-faint); line-height:1; } .circle.locked:hover .circle-plus{color:var(--ink-soft);} .circle-avatars{ display:flex;flex-wrap:wrap;justify-content:center; gap:3px;margin-top:6px;max-width:80%; } .circle-avatar{ display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;border-radius:50%; background:linear-gradient(135deg, #c96a2b, #8a5526); color:#faf3e2; font:600 10px/1 var(--font-mono); box-shadow:0 1px 2px rgba(0,0,0,.18); flex-shrink:0; } .circle-avatar-more{background:rgba(29,20,10,.16);color:var(--ink);font-weight:500;} .circle:not(.locked){cursor:pointer;} .circle:not(.locked):hover{background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), rgba(0,0,0,.03));} .cabinet-toolbar{ display:flex;gap:8px;flex-wrap:wrap; margin-bottom:10px; } .cabinet-toolbar button, .cabinet-import{ display:inline-block; appearance:none;border:1px solid rgba(29,20,10,.2); background:rgba(29,20,10,.03); color:var(--ink); padding:8px 14px;border-radius:8px; font:14px/1 var(--font); cursor:pointer; transition:background 160ms; } .cabinet-toolbar button:hover, .cabinet-import:hover{background:rgba(29,20,10,.08);} .cabinet-import input{display:none;} .cabinet-people{ display:flex;flex-wrap:wrap;gap:8px; min-height:40px; padding:10px; background:rgba(29,20,10,.04); border-radius:10px; border:1px dashed rgba(29,20,10,.14); } .cabinet-people:empty::before{ content:"Neue oder importierte Menschen warten hier — zieh sie in einen Kreis."; font-style:italic; color:var(--ink-faint); font-size:13px; padding:6px 4px; } .cabinet-people.drop-hover{ border-color:var(--accent); background:rgba(201,106,43,.08); } .person-chip{ display:inline-flex;align-items:center;gap:8px; padding:7px 12px 7px 10px; background:rgba(255,250,238,.95); border:1px solid rgba(29,20,10,.18); border-radius:18px; color:var(--ink); font:14px/1 var(--font); cursor:grab; user-select:none; transition:background 160ms, border-color 160ms, transform 160ms var(--ease); -webkit-user-select:none; touch-action:none; box-shadow:0 1px 2px rgba(0,0,0,.06); } .person-chip.dragging{ cursor:grabbing; z-index:600; transform:scale(1.08) rotate(-1deg); box-shadow:0 8px 20px rgba(0,0,0,.4); transition:none; } .person-chip:hover{background:#fff;border-color:rgba(29,20,10,.32);} .person-chip .chip-avatar{ width:22px;height:22px;border-radius:50%; background:linear-gradient(135deg, #c96a2b, #8a5526); color:#faf3e2; font:600 10px/22px var(--font-mono); text-align:center; flex-shrink:0; } .person-chip[data-group="Familie"]{border-color:rgba(201,106,43,.55);background:rgba(201,106,43,.06);} .person-chip[data-group="Freunde"]{border-color:rgba(90,147,184,.55);background:rgba(90,147,184,.06);} .person-chip[data-group="Wichtige Menschen"]{border-color:rgba(180,160,90,.55);background:rgba(180,160,90,.06);} /* ============================================================= v18 — LOCKED GROUP / FREE-YEAR-OVER cards ============================================================= */ .locked-card{max-width:440px;text-align:center;} .locked-card h2{ font-family:var(--font-display); font-weight:500; font-size:24px; margin:0 0 14px; color:var(--ink); letter-spacing:.005em; } .locked-body{ font-family:var(--font); font-size:15px;line-height:1.6; color:var(--ink-soft); margin:0 0 22px; } /* ============================================================= v18 — FREEZE CONFIRM ============================================================= */ .freeze-card{max-width:480px;} .freeze-group-choice{ display:flex;flex-direction:column;gap:6px; } .freeze-group-choice label{ display:flex;align-items:center;justify-content:space-between; padding:10px 14px; background:rgba(29,20,10,.03); border:1px solid rgba(29,20,10,.14); border-radius:8px; cursor:pointer; transition:background 140ms, border-color 140ms; color:var(--ink); } .freeze-group-choice label:hover{background:rgba(29,20,10,.06);} .freeze-group-choice label.disabled{opacity:.5;cursor:not-allowed;} .freeze-group-choice label input[type="radio"]{margin-right:10px;} .freeze-group-choice .group-meta{ font:11px/1.2 var(--font-mono); color:var(--ink-faint); letter-spacing:.08em; } #freezeScopeHint{margin-top:6px;} .card-close-btn{ appearance:none;border:1px solid rgba(29,20,10,.2); background:transparent;color:var(--ink-soft); padding:9px 18px;border-radius:8px; font:14px/1 var(--font);cursor:pointer; } /* ============================================================= v18 — PRICING TIERS (booklet preview) ============================================================= */ .booklet-tiers{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:14px 0 18px; } .booklet-tier{ position:relative; padding:18px 16px 16px; background:rgba(29,20,10,.03); border:1px solid rgba(29,20,10,.14); border-radius:10px; cursor:pointer; transition:background 160ms, border-color 160ms, transform 160ms var(--ease); text-align:left; display:flex;flex-direction:column; } .booklet-tier:hover{background:rgba(29,20,10,.06);border-color:rgba(29,20,10,.26);} .booklet-tier.selected{ border-color:var(--accent); background:rgba(201,106,43,.08); box-shadow:0 0 0 1px var(--accent) inset; } .booklet-tier-label{ font-family:var(--font-display); font-size:20px;font-weight:600; color:var(--ink); margin-bottom:4px; letter-spacing:.005em; } .booklet-tier-note{ font-family:var(--font); font-style:italic; font-size:13px;line-height:1.4; color:var(--ink-soft); margin-bottom:10px; } .booklet-tier-price{ font:11px/1.5 var(--font-mono); letter-spacing:.04em; color:var(--ink); margin-bottom:10px; padding:6px 0; border-top:1px solid rgba(29,20,10,.1); border-bottom:1px solid rgba(29,20,10,.1); } .booklet-tier-meta{ font:11px/1.5 var(--font-mono); letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase; margin-top:auto; } .booklet-tier-meta div{margin:2px 0;} /* ============================================================= v18 — PREVIEW DOCUMENT typography uses Spectral + Cormorant ============================================================= */ .preview-doc{ background:#faf3e2; color:var(--ink); padding:42px 38px 32px; border-radius:2px; box-shadow:0 14px 30px -8px rgba(0,0,0,.5); font-family:"Spectral",Georgia,serif; } .preview-doc-header{ text-align:center; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid rgba(29,20,10,.08); } .preview-eyebrow{ font:500 10px/1 var(--font-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 4px; } .preview-from, .preview-to{ font-family:var(--font-display); font-size:22px;font-weight:500; color:var(--ink); margin:0 0 8px; } .preview-divider{color:var(--ink-faint);margin:8px 0;} .preview-greeting{ font-family:var(--font-display); font-size:18px;font-weight:400; margin:0 0 18px; color:var(--ink); } .preview-body{ font-size:15px;line-height:1.7; color:var(--ink); margin:0 0 24px; } .preview-body h1{ font-family:var(--font-display); font-size:1.6em;font-weight:600; margin:.2em 0 .5em; } .preview-body h2{ font-family:var(--font-display); font-size:1.25em;font-weight:600; margin:.4em 0 .35em; } .preview-body p{margin:0 0 1em;} .preview-body img{ display:block;max-width:100%;height:auto; margin:1em 0;border-radius:1px; box-shadow:0 1px 3px rgba(0,0,0,.18); } .preview-body img[data-align="left"]{margin-right:auto;margin-left:0;} .preview-body img[data-align="center"]{margin-left:auto;margin-right:auto;} .preview-body img[data-align="right"]{margin-left:auto;margin-right:0;} .preview-body img[data-size="s"]{max-width:38%;} .preview-body img[data-size="m"]{max-width:65%;} .preview-body img[data-size="l"]{max-width:100%;} .preview-doc-footer{ border-top:1px solid rgba(29,20,10,.08); padding-top:14px; text-align:center; } .preview-signature{ font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--ink-soft); margin:0 0 6px; } .preview-meta{ font:11px/1.5 var(--font-mono); letter-spacing:.06em; color:var(--ink-faint); text-transform:uppercase; } /* Person card editor */ .person-card{max-width:420px;} /* Mobile tweaks */ @media (max-width:900px){ .cabinet-circles{grid-template-columns:1fr;gap:10px;} .circle{aspect-ratio:auto;height:84px;} .circle-disc{padding:0 16px;flex-direction:row;justify-content:space-between;} .circle-label{margin-bottom:0;font-size:16px;} .circle-plus{font-size:26px;} .booklet-tiers{grid-template-columns:1fr;} } /* Hide old recipientList styles if any references remain */ #recipientList{display:none;} /* ============================================================= CLIPBOARD — physical anchor for the paper stack ============================================================= */ #clipboard{ position:absolute; left:38%;top:55%;transform:translate(-50%,-50%); width:min(560px, 50vw); aspect-ratio:2/3; background-image:url("clipboard-active.png"); background-size:contain; background-repeat:no-repeat; background-position:center; z-index:55; pointer-events:none; transition:opacity 720ms var(--ease), transform 720ms var(--ease), filter 720ms; filter:drop-shadow(0 24px 40px rgba(0,0,0,.4)) drop-shadow(0 8px 14px rgba(0,0,0,.25)); } /* Resting state — clipboard lying flat on the desk, front-center area (where the book stacks were). We reuse clipboard-active.png and transform it into a shallow perspective so it reads as resting on the table without looking like a 3D-game prop. F2 (rc8): rotateX 28deg (was 58deg). Real desk-tilt feel, not game. F3 (rc8): no breathe animation — static, calm. */ body.clipboard-resting #clipboard{ background-image:url("clipboard-active.png"); aspect-ratio:2/3; width:min(260px, 24vw); left:54%;top:74%; transform:translate(-50%,-50%) perspective(1400px) rotateX(28deg) rotateZ(-9deg); transform-origin:center 60%; cursor:pointer; pointer-events:auto; filter:drop-shadow(0 12px 18px rgba(0,0,0,.45)) drop-shadow(0 3px 6px rgba(0,0,0,.28)); } body.clipboard-resting #clipboard:hover{ transform:translate(-50%,-51%) perspective(1400px) rotateX(26deg) rotateZ(-8deg) scale(1.025); filter:drop-shadow(0 16px 22px rgba(0,0,0,.5)) drop-shadow(0 5px 8px rgba(0,0,0,.32)); } /* Hide the paper stack while resting. */ body.clipboard-resting #documentZone{opacity:0;pointer-events:none;} /* Pickup hint, only visible in resting state. F5 (rc8): show immediately on resting state — no 800ms delay. The hint sits ABOVE the clipboard (in the air, like a written cue), not below — feels less UI, more poetic. */ #clipboardHint{ position:absolute; left:54%;top:60%;transform:translate(-50%,-50%); z-index:56;pointer-events:none; font:300 13px/1.4 var(--font); color:rgba(250,243,226,.55); letter-spacing:.06em;text-align:center; text-shadow:0 1px 4px rgba(0,0,0,.6); opacity:0;transition:opacity 1600ms ease; } body.clipboard-resting #clipboardHint{opacity:1;} @media (max-width:760px){ #clipboard{width:min(420px, 70vw);} body.clipboard-resting #clipboard{width:min(220px, 44vw);left:52%;top:72%;} #clipboardHint{left:52%;top:58%;font-size:12px;} } /* ============================================================= v18-rc8 — Room attention layer Subtle ambient response: when the user hovers a key UI object (clipboard at rest, cabinet, chest), the room dims slightly so the object reads as "addressed". No pulsing, no glow — just a change of attention. Mobile: triggered briefly on touchstart. ============================================================= */ #stage{ transition:filter 480ms var(--ease); } body.room-attention #stage{ filter:brightness(.92) saturate(.96); } /* Lift any element that the user is currently giving attention to, so it reads as "in focus" relative to the dimmed room. */ .attention-target{ position:relative; z-index:60; } /* ============================================================= v18-rc6 — Subtle lift animation on page/day change ============================================================= */ @keyframes paperLiftIn{ 0%{opacity:0;transform:translateY(10px);filter:blur(1px);} 100%{opacity:1;transform:translateY(0);filter:blur(0);} } .paper.front.lifting{ animation:paperLiftIn 460ms cubic-bezier(.22,.9,.3,1) both; } /* ============================================================= v18-rc9 — Single-paper view, professional editor ============================================================= */ /* Hide the legacy stack/peek/plus papers — we show only the front paper */ .paper.mid, .paper.back, .paper.peek, .paper.plus{display:none !important;} /* Hide the legacy x-arrows + y-rail — replaced by single bottom navigator */ .paper-arrows-x, .paper-arrows-y, .paper-page-rail{display:none !important;} /* New unified bottom navigator — calm, dezent, dokumentnah */ .paper-nav{ position:absolute; left:0;right:0;bottom:0; display:flex;align-items:center;justify-content:center;gap:14px; padding:8px 12px; background:linear-gradient(0deg, rgba(244,232,205,.7) 0%, rgba(244,232,205,.55) 70%, rgba(244,232,205,0) 100%); border-top:1px solid rgba(120,90,40,.18); color:rgba(74,56,32,.62); font-family:var(--font); font-size:12px; letter-spacing:.04em; user-select:none; z-index:6; transition:color 220ms; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); } .paper-nav:hover{color:rgba(40,28,12,.85);} .paper-nav-section{display:flex;align-items:center;gap:6px;} .paper-nav-sep{ width:1px;height:14px; background:rgba(74,56,32,.18); flex-shrink:0; } .paper-nav-btn{ appearance:none;border:0;background:transparent; width:22px;height:22px;border-radius:50%; display:flex;align-items:center;justify-content:center; cursor:pointer;color:inherit; transition:background 140ms, opacity 140ms; -webkit-tap-highlight-color:transparent;padding:0;flex-shrink:0; } .paper-nav-btn:hover{background:rgba(74,56,32,.10);} .paper-nav-btn:disabled{opacity:.25;cursor:default;} .paper-nav-btn:disabled:hover{background:transparent;} .paper-nav-btn svg{width:11px;height:11px;display:block;} .paper-nav-label{ font-variant-numeric:tabular-nums; min-width:36px;text-align:center; font-style:italic; color:inherit; } @media (max-width:760px){ .paper-nav{font-size:13px;bottom:14px;gap:12px;} .paper-nav-btn{width:28px;height:28px;} .paper-nav-btn svg{width:13px;height:13px;} } /* ============================================================= v18-rc11 — PAPER TOOLBAR The toolbar is a real child of .paper.front .page-window, sticky to its top edge. One source of truth. Layout: [editor tools] | [paper tools] | [media tools] | [zoom] Visibility: only on .paper.front when body.editor-toolbar-on ============================================================= */ /* Default: hidden. Shown only on the front paper while writable. */ .paper .paper-toolbar{display:none;} body.editor-toolbar-on .paper.front .paper-toolbar{display:flex;} .paper.front .paper-toolbar{ position:sticky; top:0; left:0; right:0; z-index:5; /* span the full page-window width (negate parent's content max-width logic) */ width:100%; box-sizing:border-box; padding:6px 8px; align-items:center; gap:0; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; /* Cremeton-Hintergrund — warmer paper, kein Tech-Look */ background:linear-gradient(180deg, rgba(248,238,212,.97) 0%, rgba(244,232,205,.94) 70%, rgba(244,232,205,.86) 100%); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); /* Haarline unten als sanfter Übergang */ border-bottom:1px solid rgba(120,90,40,.18); color:rgba(60,44,20,.78); user-select:none; -webkit-user-select:none; /* Hide scrollbar */ scrollbar-width:none; -ms-overflow-style:none; } .paper.front .paper-toolbar::-webkit-scrollbar{display:none;} /* rc12 — Bug 2: scroll-fade hint on the right edge of the toolbar so the user can see there's more content (right-align, size, remove, zoom buttons) when the toolbar overflows horizontally. */ .paper.front .page-window{position:relative;} .paper.front .page-window::after{ content:""; position:sticky; top:0; right:0; display:block; width:24px; height:42px; margin-top:-42px; margin-left:auto; background:linear-gradient(90deg, rgba(244,232,205,0), rgba(244,232,205,.96)); pointer-events:none; z-index:6; opacity:0; transition:opacity 220ms; } body.editor-toolbar-on .paper.front .page-window:has(.paper-toolbar.has-overflow)::after{ opacity:1; } /* Group container */ .paper-toolbar .pt-group{ display:inline-flex; align-items:center; gap:0; flex-shrink:0; } .paper-toolbar .pt-zoom{ margin-left:auto; } /* Buttons — base style (same for editor + paper-tools + media + zoom) */ .paper-toolbar .pt-btn, .paper-toolbar .paper-tool{ appearance:none; -webkit-appearance:none; border:0; background:transparent; cursor:pointer; width:30px;height:30px; min-width:30px; border-radius:6px; padding:0; display:flex;align-items:center;justify-content:center; color:rgba(60,44,20,.62); font:500 13px/1 var(--font, system-ui); transition:background 140ms, color 140ms, transform 180ms cubic-bezier(.34,1.6,.64,1), opacity 200ms; -webkit-tap-highlight-color:transparent; flex-shrink:0; transform-origin:center center; } .paper-toolbar .pt-btn:hover, .paper-toolbar .paper-tool:hover{ background:rgba(74,56,32,.10); color:rgba(40,28,12,.96); } .paper-toolbar .pt-btn:active, .paper-toolbar .paper-tool:active{ background:rgba(74,56,32,.16); } /* Button label modifiers */ .paper-toolbar .pt-btn.is-bold{font-weight:700;} .paper-toolbar .pt-btn.is-italic{font-style:italic;font-family:"Spectral",Georgia,serif;} .paper-toolbar .pt-btn.is-underline{text-decoration:underline;text-underline-offset:2px;} .paper-toolbar .pt-btn.is-big{font-size:15px;} .paper-toolbar .pt-btn-icon svg{ width:14px;height:14px;display:block; } /* Color accents on paper-tool hover (kept from rc10c, but warmer ink) */ .paper-toolbar .paper-tool svg{width:14px;height:14px;display:block;} .paper-toolbar .paper-tool.tool-bookmark.active{ color:#c96a2b; background:rgba(201,106,43,.16); } .paper-toolbar .paper-tool.tool-freeze:hover{color:#3a73a0;} .paper-toolbar .paper-tool.tool-archive:hover{color:#8a6428;} .paper-toolbar .paper-tool.tool-delete:hover{color:#8a2828;} /* Inner separator (same group) */ .paper-toolbar .pt-sep{ width:1px;height:14px; background:rgba(120,90,40,.20); margin:0 5px; flex-shrink:0; } /* Group divider (between groups) */ .paper-toolbar .pt-divider{ width:1px;height:18px; background:rgba(120,90,40,.28); margin:0 7px; flex-shrink:0; } /* Media group: dimmed unless an image/media is selected */ .paper-toolbar .pt-media{ opacity:.32; pointer-events:none; transition:opacity 240ms var(--ease, ease); } body.media-selected .paper-toolbar .pt-media{ opacity:1; pointer-events:auto; } /* Magnify on desktop only */ @media (hover: hover) and (pointer: fine){ .paper-toolbar .pt-btn:hover, .paper-toolbar .paper-tool:hover{ transform:scale(1.18); } } /* Mobile: fixed touch targets, no magnify */ @media (max-width:760px){ .paper.front .paper-toolbar{ padding:5px 6px; } .paper-toolbar .pt-btn, .paper-toolbar .paper-tool{ width:32px;height:32px;min-width:32px; font-size:14px; transform:none !important; } .paper-toolbar .pt-btn svg, .paper-toolbar .paper-tool svg{width:15px;height:15px;} .paper-toolbar .pt-sep{margin:0 3px;} .paper-toolbar .pt-divider{margin:0 5px;} } @media (max-width:420px){ .paper-toolbar .pt-btn, .paper-toolbar .paper-tool{ width:30px;height:30px;min-width:30px; } .paper-toolbar .pt-divider{margin:0 4px;} } /* Save status pulse — small dot near top-left of front paper */ .paper-save-dot{ position:absolute;top:14px;left:14px; width:6px;height:6px;border-radius:50%; background:transparent; transition:background 260ms, box-shadow 260ms; z-index:6; pointer-events:none; } .paper.is-saving .paper-save-dot{background:#e8c76a;box-shadow:0 0 8px rgba(232,199,106,.6);} .paper.is-saved .paper-save-dot{background:#9acf88;box-shadow:0 0 8px rgba(154,207,136,.5);} .paper.is-failed .paper-save-dot{background:#e87a6a;box-shadow:0 0 8px rgba(232,122,106,.5);} /* When user is writing on the front paper, fade the entire room subtly so the page reads as the focal plane. (Profi-Style: focus mode) */ body.writing-mode #stage{ filter:brightness(.88) saturate(.95); } body.writing-mode #scene-overlay, body.writing-mode #waterAnim{ opacity:.4; } /* ============================================================= rc12 — KLAPPDECKEL (Folio reveal after freeze) The "WOW": after Einfrieren, a portfolio-style folio opens in the center showing the frozen content beautifully laid out. Pure visual celebration of what was just sealed. ============================================================= */ #klappdeckelOverlay{ /* Fullscreen dim — but warm, not dramatic */ background:radial-gradient(ellipse at center, rgba(28, 22, 14, .82) 0%, rgba(12, 8, 4, .96) 65%, rgba(0, 0, 0, .98) 100%); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:9000; display:flex; align-items:center; justify-content:center; padding:40px 20px; } #klappdeckelOverlay .kd-stage{ position:relative; width:min(1080px, 96vw); max-height:92vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; perspective:2400px; transform-style:preserve-3d; } .kd-close{ position:absolute; top:-8px; right:-8px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:rgba(244,232,205,.78); font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; transition:background 200ms, transform 200ms; } .kd-close:hover{ background:rgba(255,255,255,.16); transform:scale(1.08); } /* The folio itself — three "pages" laid out: cover (left), inside-left, inside-right. On open, the cover swings outward (rotateY -160°) revealing the two inside pages. */ .kd-folio{ position:relative; width:min(960px, 92vw); aspect-ratio: 16 / 10; max-height:74vh; transform-style:preserve-3d; } /* Common page styling — paper, hand-feel, shadow */ .kd-cover, .kd-page{ position:absolute; top:0; bottom:0; width:50%; background: radial-gradient(circle at 18% 20%, rgba(255,250,235,.85), transparent 55%), linear-gradient(180deg, #faf2dc 0%, #f3e6c4 100%); box-shadow: inset 0 0 0 1px rgba(120,90,40,.18), inset 0 60px 80px -40px rgba(120,80,40,.10), 0 30px 60px -10px rgba(0,0,0,.5); backface-visibility:hidden; -webkit-backface-visibility:hidden; } /* COVER — sits on the left, hinges on its right edge */ .kd-cover{ left:0; right:50%; transform-origin: right center; z-index:3; border-radius:6px 2px 2px 6px; /* rc12: translateZ ensures the cover sits in front of inside pages in 3D space (preserve-3d ignores z-index). */ transform: rotateY(0deg) translateZ(2px); transition: transform 1400ms cubic-bezier(.62,.02,.18,1); background: repeating-linear-gradient(135deg, rgba(120,80,40,.04) 0 1px, transparent 1px 6px), radial-gradient(circle at 25% 30%, rgba(255,250,235,.6), transparent 60%), linear-gradient(180deg, #d9c08a 0%, #b89762 60%, #a07f49 100%); box-shadow: inset 0 0 0 1px rgba(80,55,20,.36), inset 0 0 30px rgba(80,55,20,.18), 0 30px 60px -10px rgba(0,0,0,.6); } .kd-cover-inner{ position:absolute; inset:32px; border:1px solid rgba(80,55,20,.34); border-radius:3px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:rgba(50,32,10,.86); text-align:center; background: radial-gradient(circle at 50% 35%, rgba(255,245,210,.18), transparent 60%); } .kd-cover-mark{ font-family:"Cormorant Garamond", Georgia, serif; font-size:90px; font-weight:300; font-style:italic; line-height:1; color:rgba(50,32,10,.92); text-shadow:0 1px 0 rgba(255,245,220,.4); margin-bottom:14px; } .kd-cover-line{ width:64px; height:1px; background:rgba(80,55,20,.4); margin:8px 0 18px; } .kd-cover-meta{ display:flex; flex-direction:column; gap:6px; text-align:center; } .kd-cover-eyebrow{ font-size:10px; letter-spacing:.4em; text-transform:uppercase; color:rgba(80,55,20,.62); font-weight:500; } .kd-cover-date{ font-family:"Cormorant Garamond", Georgia, serif; font-size:22px; font-style:italic; font-weight:400; color:rgba(50,32,10,.88); } .kd-cover-seal{ margin-top:32px; transform:rotate(-8deg); opacity:.92; } /* INSIDE LEFT — the actual frozen content */ .kd-page-left{ left:0; right:50%; z-index:1; border-radius:6px 0 0 6px; } /* INSIDE RIGHT — recipients, send info, signature */ .kd-page-right{ left:50%; right:0; z-index:1; border-radius:0 6px 6px 0; /* Subtle gutter shadow at the spine */ box-shadow: inset 12px 0 24px -8px rgba(120,80,40,.20), inset 0 0 0 1px rgba(120,90,40,.18), 0 30px 60px -10px rgba(0,0,0,.5); } .kd-page-inner{ position:absolute; inset:36px 36px 36px 36px; overflow:auto; } .kd-page-left .kd-page-inner{ padding-right:14px; } .kd-page-right .kd-page-inner{ padding-left:14px; } /* RECIPIENT — top of left page, italic salutation */ .kd-recipient{ font-family:"Cormorant Garamond", Georgia, serif; font-style:italic; font-size:26px; color:rgba(50,32,10,.88); margin-bottom:14px; } .kd-rule{ width:48px; height:1px; background:rgba(120,90,40,.4); margin:0 0 22px; } /* CONTENT — the frozen text, beautifully set */ .kd-content{ font-family:"Spectral", Georgia, serif; font-size:15px; line-height:1.7; color:rgba(40,28,12,.92); } .kd-content p, .kd-content div{ margin:0 0 .6em; } .kd-content h1, .kd-content h2, .kd-content h3{ font-family:"Cormorant Garamond", Georgia, serif; font-weight:500; font-style:italic; color:rgba(50,32,10,.92); margin:1.2em 0 .4em; letter-spacing:-.005em; } .kd-content h1{ font-size:24px; } .kd-content h2{ font-size:20px; } .kd-content img{ max-width:100%; height:auto; border-radius:2px; margin:.8em 0; box-shadow:0 4px 10px rgba(0,0,0,.18); } /* RIGHT PAGE — meta blocks */ .kd-meta-block{ margin-bottom:22px; } .kd-meta-block h4{ font-family:"Cormorant Garamond", Georgia, serif; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:rgba(80,55,20,.6); font-weight:500; margin:0 0 10px; } .kd-recipients{ list-style:none; margin:0; padding:0; } .kd-recipients li{ font-family:"Spectral", Georgia, serif; font-size:14px; line-height:1.6; color:rgba(40,28,12,.88); padding:6px 0; border-bottom:1px solid rgba(120,90,40,.14); } .kd-recipients li:last-child{ border-bottom:none; } .kd-recipients li small{ display:block; font-size:11px; color:rgba(80,55,20,.55); letter-spacing:.06em; margin-top:1px; } .kd-send-info{ font-family:"Spectral", Georgia, serif; font-size:14px; line-height:1.55; color:rgba(40,28,12,.78); font-style:italic; } .kd-signature{ margin-top:auto; padding-top:18px; } .kd-sig-mark{ font-family:"Cormorant Garamond", Georgia, serif; font-style:italic; font-size:22px; color:rgba(50,32,10,.92); } .kd-sig-meta{ font-size:11px; letter-spacing:.06em; color:rgba(80,55,20,.55); margin-top:4px; } /* OPEN STATE — cover swings out, revealing the inside */ #klappdeckelOverlay.is-open .kd-cover{ transform: rotateY(-162deg) translateZ(2px); box-shadow: inset 0 0 0 1px rgba(80,55,20,.36), inset 0 0 30px rgba(80,55,20,.18), -8px 30px 60px -10px rgba(0,0,0,.7); } #klappdeckelOverlay.is-open .kd-page-left, #klappdeckelOverlay.is-open .kd-page-right{ animation:kdPageReveal 480ms cubic-bezier(.2,.7,.2,1) 700ms both; } @keyframes kdPageReveal{ 0%{ opacity:0; transform:translateY(8px); } 100%{ opacity:1; transform:translateY(0); } } /* ACTIONS BAR */ .kd-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px; } .kd-btn-ghost, .kd-btn-primary{ appearance:none; -webkit-appearance:none; border:1px solid rgba(244,232,205,.22); background:transparent; color:rgba(244,232,205,.86); padding:11px 22px; font:500 12px/1 var(--font, system-ui); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; border-radius:2px; transition:background 180ms, color 180ms, border-color 180ms; } .kd-btn-ghost:hover{ background:rgba(244,232,205,.06); border-color:rgba(244,232,205,.4); color:rgba(244,232,205,1); } .kd-btn-primary{ background:linear-gradient(180deg, #d9b878 0%, #b89762 100%); color:#2a1c08; border-color:rgba(80,55,20,.5); font-weight:600; } .kd-btn-primary:hover{ background:linear-gradient(180deg, #e2c388 0%, #c0a26b 100%); } /* Mobile — fall back to single page (cover slides up) */ @media (max-width:760px){ .kd-folio{ aspect-ratio:auto; height:74vh; } .kd-cover, .kd-page-left, .kd-page-right{ left:0; right:0; width:100%; } .kd-cover{ transform-origin: center top; transform:rotateX(0); border-radius:6px 6px 2px 2px; } #klappdeckelOverlay.is-open .kd-cover{ transform:translateY(-110%); opacity:0; } .kd-page-left{ z-index:2; height:50%; top:0; bottom:auto; border-radius:6px 6px 0 0; } .kd-page-right{ z-index:1; height:50%; top:50%; bottom:0; border-radius:0 0 6px 6px; box-shadow: inset 0 12px 24px -8px rgba(120,80,40,.20), inset 0 0 0 1px rgba(120,90,40,.18), 0 30px 60px -10px rgba(0,0,0,.5); } .kd-page-inner{ inset:24px; } .kd-cover-mark{ font-size:64px; } }