:root { /* Cream parchment desk + sepia dot-grid (Y2K scrapbook page) */ --paper-cream: #f4e8cf; --paper-cream-warm: #f7ecd6; --paper-dot: rgba(120, 90, 55, 0.22); --paper: #fdfbf6; --paper-back: #f6efde; --ink: #4a3826; --ink-soft: #7a6a52; --shadow: 60, 40, 20; /* Decoration palette */ --washi-pink-a: #f4b9c5; --washi-pink-b: #fad5dc; --washi-blue-a: #b8c8e8; --washi-blue-b: #dde5f4; --star-yellow: #f4d35e; --heart-lilac: #c8b3e0; --heart-pink: #e8a8b8; --decor-ink: #3a2826; --polaroid-w: 220px; --polaroid-pad: 12px; --polaroid-bottom: 56px; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; } body { font-family: 'Kalam', system-ui, sans-serif; color: var(--ink); background: var(--paper-cream); /* Perspective lives on so .desk does NOT create its own stacking context. Otherwise polaroid z-indexes would be trapped inside .desk and could never rise above the scrim. */ perspective: 1200px; } .desk { /* position: absolute (not fixed). In Chromium, position: fixed always creates a stacking context, which would trap the focused polaroid's z-index inside .desk and put it behind the scrim. Absolute with z-index: auto does not. */ position: absolute; inset: 0; background-color: var(--paper-cream); /* Subtle warm gradient + sepia dot grid for the Y2K scrapbook page feel */ background-image: radial-gradient(ellipse at 30% 20%, var(--paper-cream-warm) 0%, transparent 65%), radial-gradient(circle, var(--paper-dot) 1.2px, transparent 1.7px); background-size: auto, 22px 22px; background-position: 0 0, 0 0; overflow: hidden; } /* ===== Page heading ===== */ .page-heading { position: fixed; top: 18px; left: 50%; transform: translateX(-50%) rotate(-2deg); font-family: 'Caveat', cursive; font-weight: 600; font-size: 56px; color: var(--decor-ink); letter-spacing: 1px; z-index: 50; pointer-events: none; text-shadow: 2px 2px 0 rgba(232, 168, 184, 0.45); white-space: nowrap; } @media (max-width: 640px) { .page-heading { font-size: 30px; top: 10px; } } /* ===== Lock Screen (Y2K pencil-drawn keypad) ===== */ .lock-screen { position: fixed; inset: 0; background-color: var(--paper-cream); background-image: radial-gradient(ellipse at 30% 20%, var(--paper-cream-warm) 0%, transparent 65%), radial-gradient(circle, var(--paper-dot) 1.2px, transparent 1.7px); background-size: auto, 22px 22px; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 1; transform: scale(1); transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .lock-screen.unlocking { opacity: 0; transform: scale(1.12); pointer-events: none; } .lock-content { text-align: center; padding: 32px; max-width: 380px; width: 100%; } .lock-title { font-family: 'Caveat', cursive; font-weight: 600; font-size: 52px; color: var(--decor-ink); margin-bottom: 6px; letter-spacing: 1px; transform: rotate(-2deg); text-shadow: 2px 2px 0 rgba(232, 168, 184, 0.4); } .lock-subtitle { font-family: 'Kalam', cursive; font-size: 19px; color: var(--ink-soft); margin-bottom: 32px; } .keypad-display { display: flex; justify-content: center; gap: 16px; margin-bottom: 32px; } .keypad-display .dot { width: 22px; height: 22px; border: 2.4px solid var(--decor-ink); border-radius: 50%; background: transparent; transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease; } .keypad-display .dot.filled { background: var(--decor-ink); transform: scale(1.12); } .keypad-display.success .dot { background: #5fb878; border-color: #5fb878; transform: scale(1.18); } .keypad-display.error .dot { background: #d65a5a; border-color: #d65a5a; } .keypad { display: grid; grid-template-columns: repeat(3, 80px); gap: 14px; justify-content: center; } .keypad-btn { font-family: 'Caveat', cursive; font-weight: 700; font-size: 36px; color: var(--decor-ink); background: var(--paper-cream-warm); border: 2.4px solid var(--decor-ink); border-radius: 12px; height: 64px; padding: 6px 0 10px; cursor: pointer; transform: rotate(var(--rot, 0deg)); box-shadow: 2px 3px 0 rgba(58, 40, 38, 0.32); transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; } .keypad-btn:hover { background: #fff5dc; transform: rotate(var(--rot, 0deg)) translateY(-2px); box-shadow: 2px 5px 0 rgba(58, 40, 38, 0.38); } .keypad-btn:active { transform: rotate(var(--rot, 0deg)) translateY(1px); box-shadow: 1px 2px 0 rgba(58, 40, 38, 0.28); } .keypad-btn-special { font-size: 30px; color: #b07474; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-12px); } 40%, 80% { transform: translateX(12px); } } .lock-screen.shake .lock-content { animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); } @media (max-width: 640px) { .lock-title { font-size: 38px; } .lock-subtitle { font-size: 16px; margin-bottom: 24px; } .keypad { grid-template-columns: repeat(3, 64px); gap: 11px; } .keypad-btn { font-size: 30px; height: 54px; } .keypad-display .dot { width: 18px; height: 18px; } } /* ===== Remote cursors ===== */ .cursor-layer { position: fixed; inset: 0; pointer-events: none; z-index: 6000; /* above scrim and focused polaroid */ } .remote-cursor { position: absolute; top: 0; left: 0; width: 22px; height: 22px; pointer-events: none; /* Tip is roughly at (3, 2) of the SVG; nudge so tip lands on the actual point. */ margin-left: -3px; margin-top: -2px; transition: transform 0.06s linear; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); } .remote-cursor svg { width: 100%; height: 100%; display: block; } /* ===== "you are " badge ===== */ .color-badge { position: fixed; bottom: 14px; left: 14px; z-index: 6500; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(245, 235, 215, 0.85); border: 1.5px solid var(--decor-ink); border-radius: 20px; font-family: 'Kalam', cursive; font-size: 13px; color: var(--decor-ink); pointer-events: none; box-shadow: 1px 2px 0 rgba(58, 40, 38, 0.2); } .color-badge .dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--decor-ink); } /* ===== Decorations (Y2K scrapbook backdrop) ===== Sits between the desk background and the polaroid pile. Pointer-events off so polaroids stay fully draggable; the scrim's backdrop-filter dims and blurs decorations along with non-focused polaroids. */ .decorations { position: absolute; inset: 0; pointer-events: none; /* No z-index → renders in document order, polaroid z-indexes (1+) cover it */ } .decor { position: absolute; pointer-events: none; user-select: none; -webkit-user-select: none; } .decor svg { display: block; width: 100%; height: 100%; overflow: visible; } /* Washi tape — repeating diagonal stripes, slight rotation, soft shadow */ .washi { height: 38px; box-shadow: 0 3px 6px rgba(40, 25, 10, 0.18); opacity: 0.92; } .washi-pink { background: repeating-linear-gradient( -42deg, var(--washi-pink-a) 0px, var(--washi-pink-a) 11px, var(--washi-pink-b) 11px, var(--washi-pink-b) 22px ); } .washi-blue { background: repeating-linear-gradient( -42deg, var(--washi-blue-a) 0px, var(--washi-blue-a) 11px, var(--washi-blue-b) 11px, var(--washi-blue-b) 22px ); } .washi-top-left { top: -10px; left: 8%; width: 200px; transform: rotate(-11deg); } .washi-top-right { top: -12px; right: 6%; width: 220px; transform: rotate(13deg); } /* Star, hearts, CD, sparkles — sized + positioned individually */ .decor-star { top: 22%; left: 4%; width: 60px; height: 60px; transform: rotate(-14deg); } .decor-heart-lilac { top: 52%; left: 3%; width: 56px; height: 52px; transform: rotate(-8deg); } .decor-heart-pink { top: 36%; right: 4%; width: 42px; height: 38px; transform: rotate(14deg); } .decor-heart-pink-bottom { bottom: 18%; right: 12%; width: 32px; height: 28px; transform: rotate(-18deg); } .decor-cd { bottom: 26px; left: 28px; width: 110px; height: 110px; transform: rotate(-12deg); filter: drop-shadow(0 6px 10px rgba(40, 25, 10, 0.22)); } .decor-tag { bottom: 6%; right: 5%; font-family: 'Caveat', cursive; font-size: 32px; color: var(--decor-ink); transform: rotate(-6deg); line-height: 1; } .decor-tag .heart { color: var(--heart-pink); margin-left: 4px; } .decor-sparkle { width: 14px; height: 14px; } .sparkle-1 { top: 12%; left: 32%; transform: rotate(15deg); } .sparkle-2 { top: 8%; left: 60%; width: 10px; height: 10px; } .sparkle-3 { top: 70%; left: 22%; width: 12px; height: 12px; transform: rotate(-20deg); } .sparkle-4 { top: 60%; right: 24%; width: 16px; height: 16px; transform: rotate(8deg); } .sparkle-5 { bottom: 10%; left: 48%; width: 11px; height: 11px; transform: rotate(28deg); } /* SVG fills/strokes — set via CSS so the var() palette stays the source of truth. (CSS variables don't work in SVG presentation attributes, so they go here.) */ .decor-star svg path, .decor-sparkle.sparkle-1 svg path, .decor-sparkle.sparkle-4 svg path { fill: var(--star-yellow); stroke: var(--decor-ink); } .decor-heart-lilac svg path, .decor-sparkle.sparkle-3 svg path { fill: var(--heart-lilac); stroke: var(--decor-ink); } .decor-heart-pink svg path, .decor-heart-pink-bottom svg path, .decor-sparkle.sparkle-2 svg path, .decor-sparkle.sparkle-5 svg path { fill: var(--heart-pink); stroke: var(--decor-ink); } /* Hide the heaviest decorations on small screens to keep the pile readable */ @media (max-width: 640px) { .washi-top-left { width: 130px; height: 28px; left: 4%; } .washi-top-right { width: 140px; height: 28px; right: 3%; } .decor-star { width: 42px; height: 42px; } .decor-heart-lilac { width: 38px; height: 36px; } .decor-heart-pink { width: 30px; height: 28px; } .decor-heart-pink-bottom { display: none; } .decor-cd { width: 70px; height: 70px; bottom: 14px; left: 14px; } .decor-tag { font-size: 22px; } .sparkle-1, .sparkle-3, .sparkle-5 { display: none; } } /* ===== Polaroid ===== */ .polaroid { /* Per-polaroid aspect ratio (photo height / photo width). Set inline by JS from item.aspectRatio. Fallback 1.08 matches the original square-ish frame. */ --photo-aspect: 1.08; --polaroid-h-actual: calc( var(--polaroid-pad) + (var(--polaroid-w) - var(--polaroid-pad) * 2) * var(--photo-aspect) + var(--polaroid-bottom) ); position: absolute; width: var(--polaroid-w); height: var(--polaroid-h-actual); top: 0; left: 0; --x: 0px; --y: 0px; --r: 0deg; transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(1); transform-origin: center center; transition: transform 0.55s cubic-bezier(0.32, 0.72, 0.24, 1), filter 0.4s ease, opacity 0.4s ease; will-change: transform; cursor: grab; user-select: none; -webkit-user-select: none; } .polaroid:hover:not(.focused):not(.dragging) { transform: translate3d(var(--x), calc(var(--y) - 8px), 0) rotate(var(--r)) scale(1); /* z-index is bumped permanently in JS via pointerenter, so the polaroid stays on top after the cursor leaves. */ } .polaroid.dragging { transition: none; cursor: grabbing; z-index: 9999 !important; } /* The 3D-flip carrier — no `filter` here (it would flatten preserve-3d AND force pre-transform rasterization, blurring the polaroid when scaled). */ .polaroid-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .polaroid.flipped .polaroid-inner { transform: rotateY(180deg); } .polaroid-face { position: absolute; inset: 0; background: var(--paper); border-radius: 2px; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: var(--polaroid-pad); padding-bottom: var(--polaroid-bottom); display: flex; flex-direction: column; box-shadow: 0 6px 14px rgba(var(--shadow), 0.28), 0 2px 4px rgba(var(--shadow), 0.18); transition: box-shadow 0.35s ease; } .polaroid:hover:not(.focused):not(.dragging) .polaroid-face { box-shadow: 0 14px 26px rgba(var(--shadow), 0.34), 0 4px 8px rgba(var(--shadow), 0.22); } .polaroid.focused .polaroid-face { box-shadow: 0 24px 60px rgba(var(--shadow), 0.45), 0 8px 18px rgba(var(--shadow), 0.28); } .polaroid-front { /* default front */ } .polaroid-back { transform: rotateY(180deg); background: var(--paper-back); padding: 22px 20px; /* Stripe height tracks the dynamic line-height so lines and text stay aligned even after auto-fit shrinks the font. */ background-image: repeating-linear-gradient( to bottom, transparent 0, transparent calc(var(--note-line-height, 24px) - 1px), rgba(150, 120, 80, 0.18) calc(var(--note-line-height, 24px) - 1px), rgba(150, 120, 80, 0.18) var(--note-line-height, 24px) ); } .polaroid-photo { flex: 1; background-size: cover; background-position: center; background-color: #d8cdb6; position: relative; } .polaroid-photo::after { /* a faint inner shadow so the photo sits inside the polaroid */ content: ""; position: absolute; inset: 0; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.18); pointer-events: none; } .polaroid-caption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-family: 'Caveat', cursive; font-size: 22px; color: var(--ink); padding: 0 12px; line-height: 1; letter-spacing: 0.2px; } .polaroid-back-header { font-family: 'Caveat', cursive; font-size: 18px; color: var(--ink-soft); border-bottom: 1px dashed rgba(150, 120, 80, 0.4); padding-bottom: 6px; margin-bottom: 10px; } .polaroid-note { flex: 1; font-family: 'Kalam', cursive; /* Both font and line-height are CSS variables so JS can shrink them per polaroid until the note fits the back without scrolling. */ font-size: var(--note-font-size, 14px); line-height: var(--note-line-height, 24px); color: var(--ink); white-space: pre-wrap; word-break: break-word; overflow-y: auto; /* Allow native vertical scroll inside the note (overrides body's touch-action: none). Used as a fallback if auto-fit can't shrink enough. */ touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(150, 120, 80, 0.5) transparent; } .polaroid-note::-webkit-scrollbar { width: 4px; } .polaroid-note::-webkit-scrollbar-thumb { background: rgba(150, 120, 80, 0.4); border-radius: 2px; } .polaroid-note::-webkit-scrollbar-track { background: transparent; } /* ===== Focused state (centered, scaled, others dimmed) ===== */ .scrim { position: fixed; inset: 0; background: rgba(20, 12, 4, 0.0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); pointer-events: none; transition: background 0.35s ease, backdrop-filter 0.35s ease; z-index: 500; } body.has-focus .scrim { background: rgba(20, 12, 4, 0.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: auto; } body.has-focus .polaroid:not(.focused) { filter: blur(2px) brightness(0.7); opacity: 0.65; pointer-events: none; } .polaroid.focused { /* Stay position: absolute (top:0/left:0) and just override the transform so the animation is purely transform-based and stays fluid. --focus-scale is set by JS per-polaroid so tall photos don't overflow the viewport. */ transform: translate(calc(50vw - var(--polaroid-w) / 2), calc(50vh - var(--polaroid-h-actual) / 2)) rotate(0deg) scale(var(--focus-scale, 1.7)) !important; cursor: pointer; z-index: 1000 !important; filter: none !important; } /* ===== Hint text on first load ===== */ .hint { position: fixed; left: 0; right: 0; bottom: 22px; text-align: center; font-family: 'Caveat', cursive; font-size: 22px; color: var(--ink); opacity: 0.55; pointer-events: none; z-index: 200; transition: opacity 0.6s ease; } .hint.fade { opacity: 0; } /* ===== Responsive: phone ===== */ @media (max-width: 640px) { :root { --polaroid-w: 150px; --polaroid-pad: 8px; --polaroid-bottom: 40px; } .polaroid-caption { font-size: 16px; bottom: 10px; } .polaroid-back { padding: 20px 16px; background-image: repeating-linear-gradient( to bottom, transparent 0, transparent 23px, rgba(150, 120, 80, 0.18) 23px, rgba(150, 120, 80, 0.18) 24px ); } .polaroid-back-header { font-size: 14px; margin-bottom: 8px; } .polaroid-note { font-size: 14px; line-height: 24px; } .polaroid.focused { transform: translate(calc(50vw - var(--polaroid-w) / 2), calc(50vh - var(--polaroid-h-actual) / 2)) rotate(0deg) scale(var(--focus-scale, 1.95)) !important; } .hint { font-size: 18px; } } @media (max-width: 380px) { :root { --polaroid-w: 130px; } .polaroid.focused { transform: translate(calc(50vw - var(--polaroid-w) / 2), calc(50vh - var(--polaroid-h-actual) / 2)) rotate(0deg) scale(var(--focus-scale, 2.05)) !important; } } /* ===== Background switcher (top-right) ===== Sits above the desk but below the lock screen (z-index: 10000). */ .bg-switcher { position: fixed; top: 14px; right: 14px; z-index: 60; display: flex; gap: 8px; padding: 6px 8px; background: rgba(245, 235, 215, 0.85); border: 1.5px solid var(--decor-ink); border-radius: 22px; box-shadow: 1px 2px 0 rgba(58, 40, 38, 0.22); font-family: 'Caveat', cursive; } .bg-option { width: 30px; height: 30px; border: 1.6px solid var(--decor-ink); border-radius: 50%; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; transition: transform 0.15s ease, border-width 0.15s ease, box-shadow 0.15s ease; } .bg-option:hover { transform: scale(1.08); } .bg-option.active { border-width: 2.6px; box-shadow: 0 0 0 2px rgba(232, 168, 184, 0.55); } .bg-option .swatch { display: block; width: 22px; height: 22px; border-radius: 50%; } .swatch-parchment { background: radial-gradient(circle, rgba(120, 90, 55, 0.35) 0.6px, transparent 1.1px) 0 0 / 4px 4px, radial-gradient(ellipse at 30% 25%, #f7ecd6 0%, #f4e8cf 70%); } .swatch-wood { background: repeating-linear-gradient(92deg, rgba(255, 200, 140, 0.10) 0, rgba(255, 200, 140, 0.10) 1px, transparent 1px, transparent 3px, rgba(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0.18) 4px, transparent 4px, transparent 7px), linear-gradient(110deg, #4f2c1a, #6b3e25 60%, #4f2c1a); } @media (max-width: 640px) { .bg-switcher { top: 10px; right: 10px; padding: 4px 6px; gap: 6px; } .bg-option { width: 26px; height: 26px; } .bg-option .swatch { width: 18px; height: 18px; } } /* ===== Polished wood theme ===== Activated by ``. Overrides the desk surface, the lock screen's surface, and the foreground colors that would otherwise vanish against dark walnut. */ body[data-bg="wood"] { background: #4a2818; } body[data-bg="wood"] .desk, body[data-bg="wood"] .lock-screen { background-color: #4a2818; background-image: /* polish highlight pooled toward the upper left */ radial-gradient(ellipse 70% 55% at 28% 18%, rgba(255, 205, 150, 0.18), transparent 70%), /* a couple of subtle knots */ radial-gradient(circle at 22% 62%, rgba(0, 0, 0, 0.32) 0, transparent 14px), radial-gradient(circle at 74% 32%, rgba(0, 0, 0, 0.28) 0, transparent 11px), /* horizontal plank seams every ~200px */ repeating-linear-gradient(0deg, transparent 0, transparent 198px, rgba(0, 0, 0, 0.42) 199px, rgba(0, 0, 0, 0.42) 200px, rgba(255, 200, 140, 0.05) 201px, transparent 204px), /* fine vertical grain */ repeating-linear-gradient(92deg, rgba(255, 200, 140, 0.04) 0, rgba(255, 200, 140, 0.04) 1px, transparent 1px, transparent 3px, rgba(0, 0, 0, 0.10) 3px, rgba(0, 0, 0, 0.10) 4px, transparent 4px, transparent 9px), /* base wood color variation */ linear-gradient(110deg, #4f2c1a 0%, #5e3924 35%, #4f2c1a 70%, #5e3924 100%); background-size: auto; background-position: 0 0; } /* Foreground readability against dark wood */ body[data-bg="wood"] .page-heading { color: #f4e0c0; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); } body[data-bg="wood"] .lock-title { color: #f4e0c0; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); } body[data-bg="wood"] .lock-subtitle { color: rgba(244, 224, 192, 0.82); } body[data-bg="wood"] .keypad-display .dot { border-color: #f4e0c0; } body[data-bg="wood"] .keypad-display .dot.filled { background: #f4e0c0; } body[data-bg="wood"] .keypad-btn { background: #f7ecd6; color: #3a2826; border-color: #2c1810; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.45); } body[data-bg="wood"] .keypad-btn:hover { background: #fff5dc; box-shadow: 2px 5px 0 rgba(0, 0, 0, 0.5); } body[data-bg="wood"] .decor-tag { color: #f4e0c0; } body[data-bg="wood"] .hint { color: rgba(244, 224, 192, 0.85); } body[data-bg="wood"] .bg-switcher { background: rgba(60, 38, 24, 0.78); border-color: #2c1810; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.38); } body[data-bg="wood"] .bg-option { border-color: #f4e0c0; } body[data-bg="wood"] .bg-option.active { box-shadow: 0 0 0 2px rgba(244, 224, 192, 0.45); } body[data-bg="wood"] .color-badge { background: rgba(60, 38, 24, 0.8); border-color: #f4e0c0; color: #f4e0c0; } body[data-bg="wood"] .color-badge .dot { border-color: #f4e0c0; }