/* =========================================================================== Our Book of Memories Light pink on one half, baby blue on the other, cream paper in between. =========================================================================== */ :root { --blush-50: #fff5f8; --blush-100: #ffe8ef; --blush-200: #ffd4e2; --blush-300: #ffb9ce; --blush-400: #f79ab7; --blush-500: #e77ea1; --blush-600: #cf6389; --blush-700: #ab4c6e; --baby-50: #f5faff; --baby-100: #e8f3ff; --baby-200: #d4e8fb; --baby-300: #b9d8f6; --baby-400: #9ac3ee; --baby-500: #7eabe0; --baby-600: #6390c9; --baby-700: #4c72a6; --paper-50: #fffdf7; --paper-100: #fdf6e9; --paper-200: #f7ecd9; --ink: #4a3b42; --ink-soft: #7a6670; --hand: "Caveat", "Segoe Script", cursive; --hand-neat: "Patrick Hand", "Caveat", cursive; --title: "Playfair Display", Georgia, serif; --flip-ms: 900ms; } *, *::before, *::after { box-sizing: border-box; } html, body { min-height: 100%; margin: 0; } /* The gradient goes on as well as : if only carries it and the page scrolls even slightly, the strip above it is painted by the browser canvas instead, which comes out black. */ html, body { background: radial-gradient(900px 700px at 50% -5%, rgba(255, 255, 255, 0.55) 0%, transparent 65%), linear-gradient(100deg, var(--blush-200) 0%, var(--blush-100) 34%, #f3f1fa 50%, var(--baby-100) 66%, var(--baby-200) 100%); background-attachment: fixed; background-repeat: no-repeat; } body { color: var(--ink); font-family: var(--hand-neat); overscroll-behavior: none; -webkit-font-smoothing: antialiased; } ::selection { background: var(--blush-200); } button { font: inherit; cursor: pointer; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .thin-scroll { scrollbar-width: thin; scrollbar-color: var(--blush-300) transparent; } .thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; } .thin-scroll::-webkit-scrollbar-thumb { background: var(--blush-300); border-radius: 999px; } /* ---------------------------------------------------------- paper texture */ .paper-texture::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: radial-gradient(circle at 20% 30%, rgba(180, 150, 120, 0.05) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(180, 150, 120, 0.05) 0 1px, transparent 1px), radial-gradient(circle at 45% 85%, rgba(180, 150, 120, 0.04) 0 1px, transparent 1px), radial-gradient(circle at 85% 15%, rgba(180, 150, 120, 0.04) 0 1px, transparent 1px); background-size: 37px 41px, 53px 47px, 29px 31px, 61px 59px; } .paper-texture::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(150, 110, 90, 0.07) 100%); } /* ================================================================ buttons */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 1rem; border: 1px solid var(--blush-300); border-radius: 999px; background: rgba(255, 253, 247, 0.85); color: var(--ink); font-family: var(--title); font-size: 0.9rem; text-decoration: none; transition: background 150ms, transform 120ms; } .btn:hover { background: var(--paper-50); } .btn:active { transform: scale(0.97); } .btn.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper-50); } .btn.blue { border-color: var(--baby-300); } .btn.blue:hover { background: var(--baby-50); } .btn.primary { background: var(--blush-500); border-color: var(--blush-500); color: #fff; box-shadow: 0 10px 20px -8px rgba(207, 99, 137, 0.6); } .btn.primary:hover { background: var(--blush-600); } .btn.big { height: 3rem; padding: 0 1.4rem; font-size: 1rem; } .btn:disabled { opacity: 0.4; cursor: default; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: 0.85rem; transition: background 150ms; } .icon-btn:hover { background: var(--blush-100); } .icon-btn.danger:hover { background: #fee2e2; } .icon-btn:disabled { opacity: 0.25; cursor: default; } /* ================================================================= topbar */ .topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem 1rem 0.25rem; } .brand h1 { margin: 0; font-family: var(--title); font-size: 1.6rem; line-height: 1.1; } .brand p { margin: 0; font-family: var(--hand); font-size: 1.15rem; color: var(--blush-600); } .topbar-actions { display: flex; align-items: center; gap: 0.5rem; } .members { display: none; align-items: center; gap: 0.6rem; padding: 0.35rem 0.8rem; border: 1px solid var(--blush-200); border-radius: 999px; background: rgba(255, 253, 247, 0.8); font-family: var(--hand); font-size: 1.1rem; } .member { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; } .member-dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; } /* =================================================================== book */ .stage-wrap { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem 0.5rem 7rem; } .book-desktop { display: none; width: 100%; max-width: min(94vw, 74rem, calc((100dvh - 13rem) * 1.6)); } .book-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; perspective: 2400px; perspective-origin: 50% 45%; } .cover { position: absolute; inset: -1.1%; display: flex; overflow: hidden; border-radius: 22px; box-shadow: 0 35px 60px -20px rgba(120, 110, 160, 0.45); } .cover-half { width: 50%; height: 100%; } .cover-pink { border-radius: 22px 0 0 22px; background: linear-gradient(145deg, #ffd7e5 0%, #f9a9c3 55%, #ec89aa 100%); } .cover-blue { border-radius: 0 22px 22px 0; background: linear-gradient(215deg, #d9ecff 0%, #a8ccef 55%, #85b0e0 100%); } .cover-grain { position: absolute; inset: -1.1%; border-radius: 22px; opacity: 0.4; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.25) 0 2px, transparent 2px 6px); } .spine { position: absolute; top: -1%; bottom: -1%; left: 50%; width: 0.75rem; transform: translateX(-50%); border-radius: 999px; background: linear-gradient(to right, rgba(171, 76, 110, 0.45), rgba(140, 120, 170, 0.6), rgba(76, 114, 166, 0.45)); } .ribbon { position: absolute; top: -1.1%; z-index: 60; width: 1.5rem; pointer-events: none; } .ribbon-tail { width: 100%; border-radius: 0 0 2px 2px; box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.25); } .ribbon-tip { width: 0; height: 0; margin: 0 auto; border-left: 12px solid transparent; border-right: 12px solid transparent; } .ribbon-pink { left: calc(50% - 2.6rem); } .ribbon-pink .ribbon-tail { height: 9.5rem; background: linear-gradient(to bottom, var(--blush-600), var(--blush-400)); } .ribbon-pink .ribbon-tip { border-top: 9px solid var(--blush-400); } .ribbon-blue { left: calc(50% + 1.2rem); } .ribbon-blue .ribbon-tail { height: 7rem; background: linear-gradient(to bottom, var(--baby-600), var(--baby-400)); } .ribbon-blue .ribbon-tip { border-top: 9px solid var(--baby-400); } /* --------------------------------------------------------- inside covers */ .inside-covers { position: absolute; inset: 0; display: flex; } .inside-cover { position: relative; width: 50%; height: 100%; overflow: hidden; } .inside-left { border-radius: 10px 0 0 10px; background: var(--blush-100); } .inside-right { border-radius: 0 10px 10px 0; background: var(--baby-100); } .inside-plate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; padding: 0 12%; text-align: center; } .inside-plate .heart { font-size: 1.8rem; opacity: 0.7; } .inside-plate h2 { margin: 0; font-family: var(--title); font-style: italic; font-size: 1.8rem; line-height: 1.15; } .inside-rule { width: 6rem; height: 1px; background: linear-gradient(to right, var(--blush-400), var(--baby-400)); } .inside-plate p { margin: 0; font-family: var(--hand); font-size: 1.4rem; color: var(--ink-soft); } .inside-plate .turn { margin-top: 1.4rem; font-size: 1.15rem; opacity: 0.6; } .inside-end { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 2.5rem; margin: 0; text-align: center; font-family: var(--hand); font-size: 1.4rem; color: rgba(122, 102, 112, 0.6); } /* ---------------------------------------------------------------- sheets */ .sheets { position: absolute; inset: 0; transform-style: preserve-3d; } .sheet { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-style: preserve-3d; transform-origin: left center; transition: transform var(--flip-ms) cubic-bezier(0.55, 0.05, 0.25, 1); will-change: transform; } .sheet.flipped { transform: rotateY(-180deg); } .sheet-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .sheet-face.back { transform: rotateY(180deg); } /* ----------------------------------------------------------- flip arrows */ .flip-arrow { position: absolute; top: 50%; z-index: 70; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; transform: translateY(-50%); border: 1px solid var(--blush-300); border-radius: 999px; background: rgba(255, 253, 247, 0.95); color: var(--ink); font-size: 1.8rem; line-height: 1; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.35); transition: background 150ms, opacity 200ms; } .flip-arrow.left { left: -2rem; } .flip-arrow.right { right: -2rem; } .flip-arrow:disabled { opacity: 0; pointer-events: none; } .spread-counter { margin: 1rem 0 0; font-family: var(--hand); font-size: 1.25rem; color: var(--ink-soft); } /* =================================================================== page */ .page { position: relative; width: 100%; height: 100%; overflow: hidden; } .paper--cream { background: linear-gradient(160deg, #fffdf7 0%, #fdf6e9 55%, #f9f0de 100%); } .paper--blush { background: linear-gradient(160deg, #fff7fa 0%, #ffeef4 55%, #ffe4ee 100%); } .paper--mint { background: linear-gradient(160deg, #f8fffb 0%, #eefaf3 55%, #e3f5ea 100%); } .paper--sky { background: linear-gradient(160deg, #f8fbff 0%, #eef5fd 55%, #e4eefb 100%); } .page.side-left { border-radius: 10px 0 0 10px; } .page.side-right { border-radius: 0 10px 10px 0; } .page.side-single { border-radius: 10px; } .page-spine { position: absolute; top: 0; bottom: 0; width: 14%; pointer-events: none; } /* A left-hand page is bound on its right edge, and the other way round. */ .page.side-left .page-spine { right: 0; background: linear-gradient(to right, transparent 91%, rgba(120, 80, 70, 0.05) 97%, rgba(120, 80, 70, 0.16) 100%); } .page.side-right .page-spine { left: 0; background: linear-gradient(to left, transparent 91%, rgba(120, 80, 70, 0.05) 97%, rgba(120, 80, 70, 0.16) 100%); } .page.side-single .page-spine { display: none; } .page-inner { position: absolute; inset: 0; padding: 6% 7% 9%; } .page.side-left .page-inner { padding-left: 7%; padding-right: 9%; } .page.side-right .page-inner { padding-left: 9%; padding-right: 7%; } .page-number { position: absolute; bottom: 2.5%; font-family: var(--hand-neat); font-size: 0.85rem; color: rgba(122, 102, 112, 0.7); pointer-events: none; } .page.side-left .page-number { left: 8%; } .page.side-right .page-number, .page.side-single .page-number { right: 8%; } /* page title */ .page-title { position: absolute; top: 3%; left: 7%; right: 7%; z-index: 400; text-align: center; } .page-title-text { margin: 0; font-family: var(--title); font-style: italic; font-size: 1.25rem; } .page-title-text:empty { display: none; } .page-title-input { display: none; width: 100%; padding-bottom: 2px; border: 0; border-bottom: 1px dashed rgba(255, 185, 206, 0.7); background: transparent; color: var(--ink); font-family: var(--title); font-style: italic; font-size: 1.25rem; text-align: center; outline: none; } .page-title-input:focus { border-bottom-color: var(--blush-400); } .editing .page-title-text { display: none; } .editing .page-title-input { display: block; } /* the area items live in */ .entry-layer { position: relative; width: 100%; height: 100%; } .page-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; text-align: center; pointer-events: none; } .page-empty-icon { font-size: 1.8rem; opacity: 0.4; } .page-empty p { margin: 0; font-family: var(--hand); font-size: 1.4rem; color: rgba(122, 102, 112, 0.6); } .page:not(.is-empty) .page-empty { display: none; } .page-empty-edit { display: none; } .editing .page-empty-read { display: none; } .editing .page-empty-edit { display: block; } .page.drag-over::after { content: ""; position: absolute; inset: 0.75rem; border: 4px dashed rgba(247, 154, 183, 0.8); border-radius: 0.75rem; background: rgba(255, 232, 239, 0.4); pointer-events: none; } /* ================================================================ entries */ .entry { position: absolute; } .editing .entry { touch-action: none; } .editing .entry .entry-body { cursor: move; } .editing .entry:hover .entry-body { outline: 1px dashed var(--blush-300); outline-offset: 4px; border-radius: 0.5rem; } .editing .entry.selected .entry-body { outline: 2px solid var(--blush-400); outline-offset: 4px; border-radius: 0.5rem; } .entry.selected { z-index: 500 !important; } .entry-meta { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.25rem; font-family: var(--hand); font-size: 1rem; line-height: 1; white-space: nowrap; opacity: 0.55; pointer-events: none; transition: opacity 150ms; } .entry:hover .entry-meta, .entry.selected .entry-meta { opacity: 1; } .entry--sticker .entry-meta { opacity: 0; } .entry--sticker:hover .entry-meta { opacity: 0.8; } .meta-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; } .meta-when { color: rgba(122, 102, 112, 0.7); } /* rich text */ .rich-text { min-height: 1.5em; padding: 0.1rem 0.25rem; font-family: var(--hand); font-size: 1.45rem; line-height: 1.5; word-break: break-word; outline: none; } .rich-text b, .rich-text strong { font-weight: 700; } .rich-text a { color: var(--blush-600); } .rich-text ul { padding-left: 1.25rem; list-style: disc; } .rich-text ol { padding-left: 1.25rem; list-style: decimal; } .rich-text:empty::before { content: attr(data-placeholder); color: var(--ink-soft); opacity: 0.55; } .rich-text[contenteditable="true"] { cursor: text; } .sticker { font-size: clamp(28px, 7vw, 96px); line-height: 1; text-align: center; user-select: none; } .photo { margin: 0; padding: 0.5rem 0.5rem 0.75rem; border-radius: 10px; background: var(--paper-50); box-shadow: 0 12px 20px -8px rgba(74, 59, 66, 0.35); outline: 1px solid rgba(0, 0, 0, 0.05); } .photo img { display: block; width: 100%; border-radius: 4px; object-fit: cover; } .page:not(.editing-host) .photo img { cursor: zoom-in; } .photo figcaption { padding-top: 0.25rem; font-family: var(--hand); font-size: 1.15rem; line-height: 1.2; text-align: center; color: var(--ink-soft); } .video { padding: 0.25rem; border-radius: 10px; background: rgba(74, 59, 66, 0.9); box-shadow: 0 12px 20px -8px rgba(74, 59, 66, 0.4); } .video video { display: block; width: 100%; border-radius: 6px; } .spotify { overflow: hidden; border-radius: 14px; box-shadow: 0 10px 18px -8px rgba(207, 99, 137, 0.5); } .editing .spotify { pointer-events: none; } .spotify-bad { padding: 1.25rem 1rem; border: 1px dashed var(--blush-300); border-radius: 1rem; background: rgba(255, 245, 248, 0.8); text-align: center; font-family: var(--hand-neat); color: var(--ink-soft); } /* item toolbar + resize handle, added by the script */ .entry-tools { position: absolute; top: -2.5rem; left: 0; z-index: 40; display: flex; align-items: center; gap: 0.1rem; padding: 0.25rem 0.4rem; border: 1px solid var(--blush-200); border-radius: 999px; background: rgba(255, 253, 247, 0.96); box-shadow: 0 10px 20px -8px rgba(207, 99, 137, 0.5); } .entry-tools .sep { width: 1px; height: 1.25rem; margin: 0 0.2rem; background: var(--blush-200); } .resize-handle { position: absolute; right: -0.5rem; bottom: -0.5rem; width: 1.5rem; height: 1.5rem; border: 2px solid #fff; border-radius: 999px; background: var(--blush-500); box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.3); cursor: nwse-resize; touch-action: none; } /* ============================================================ text editor */ .rt-tools { position: absolute; top: -3rem; left: 0; z-index: 60; display: flex; align-items: center; gap: 0.1rem; padding: 0.25rem 0.4rem; border: 1px solid var(--blush-200); border-radius: 999px; background: var(--paper-50); box-shadow: 0 10px 20px -8px rgba(207, 99, 137, 0.5); } .rt-swatches, .rt-emoji { position: absolute; top: 2.75rem; left: 0; display: flex; gap: 0.35rem; padding: 0.5rem; border: 1px solid var(--blush-200); border-radius: 1rem; background: var(--paper-50); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.3); } .rt-emoji { display: grid; grid-template-columns: repeat(6, 1fr); width: 14rem; gap: 0.25rem; font-size: 1.25rem; } .rt-emoji button { border: 0; border-radius: 0.5rem; background: transparent; padding: 0.25rem 0; } .rt-emoji button:hover { background: var(--blush-100); } .swatch { width: 1.5rem; height: 1.5rem; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 999px; transition: transform 120ms; } .swatch:hover { transform: scale(1.12); } .rt-wheel { display: block; width: 1rem; height: 1rem; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 999px; background: conic-gradient(#cf6389, #c2410c, #b45309, #3f7d5c, #3b6ea5, #7c4dbd, #cf6389); } /* ============================================================= bottom bar */ .bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 2rem 0.75rem 1rem; background: linear-gradient(to top, var(--baby-100), rgba(255, 232, 239, 0.85), transparent); } .bottombar .label { display: none; } .hint-pill { position: fixed; left: 50%; bottom: 6rem; z-index: 95; transform: translateX(-50%); padding: 0.25rem 1rem; border-radius: 999px; background: rgba(74, 59, 66, 0.8); color: var(--paper-50); font-family: var(--hand); font-size: 1.15rem; text-align: center; pointer-events: none; } /* =================================================================== menu */ .add-wrap { position: relative; } .add-menu { position: absolute; right: 0; bottom: 100%; z-index: 50; width: 16rem; margin-bottom: 0.75rem; padding: 0.5rem; border: 1px solid var(--blush-200); border-radius: 1.5rem; background: var(--paper-50); box-shadow: 0 20px 40px -12px rgba(207, 99, 137, 0.5); } .add-menu ul { margin: 0; padding: 0; list-style: none; } .add-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6rem 0.75rem; border: 0; border-radius: 1rem; background: transparent; text-align: left; } .add-item:hover { background: var(--blush-100); } .add-item .ico { font-size: 1.25rem; } .add-item .name { display: block; font-family: var(--title); font-size: 1rem; } .add-item .hint { display: block; font-family: var(--hand); font-size: 1rem; line-height: 1.1; color: rgba(122, 102, 112, 0.8); } .panel-head { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--blush-100); font-family: var(--title); } .sticker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; padding-top: 0.5rem; } .sticker-grid button { padding: 0.5rem 0; border: 0; border-radius: 0.75rem; background: transparent; font-size: 1.5rem; } .sticker-grid button:hover { background: var(--blush-100); } .field { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--blush-200); border-radius: 0.75rem; background: #fff; color: var(--ink); font-family: var(--hand-neat); font-size: 1rem; outline: none; } .field:focus { border-color: var(--blush-400); } .panel-note { margin: 0.35rem 0.25rem 0; font-family: var(--hand); font-size: 1rem; color: rgba(122, 102, 112, 0.8); } /* =============================================================== contents */ .drawer { position: fixed; inset: 0; z-index: 110; display: flex; justify-content: flex-end; background: rgba(74, 59, 66, 0.4); backdrop-filter: blur(3px); } .drawer-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 28rem; height: 100%; overflow: hidden; background: var(--paper-100); box-shadow: -20px 0 40px -20px rgba(0, 0, 0, 0.5); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--blush-200); } .drawer-head h2 { margin: 0; font-family: var(--title); font-size: 1.5rem; } .drawer-head p { margin: 0; font-family: var(--hand); font-size: 1.15rem; color: var(--ink-soft); } .drawer-close { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font-size: 1.5rem; } .drawer-close:hover { background: var(--blush-100); } .toc-list { flex: 1; overflow-y: auto; margin: 0; padding: 0.75rem; list-style: none; } .toc-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; padding: 0.6rem 0.75rem; border: 1px solid rgba(255, 212, 226, 0.7); border-radius: 1rem; background: rgba(255, 253, 247, 0.8); } .toc-row.current { border-color: var(--blush-400); background: rgba(255, 232, 239, 0.8); } .toc-jump { display: flex; flex: 1; align-items: center; gap: 0.75rem; min-width: 0; border: 0; background: transparent; text-align: left; } .toc-num { display: flex; flex: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: rgba(255, 185, 206, 0.6); font-family: var(--title); } .toc-text { min-width: 0; } .toc-summary { display: block; overflow: hidden; font-family: var(--hand-neat); font-size: 1.1rem; text-overflow: ellipsis; white-space: nowrap; } .toc-count { display: block; font-family: var(--hand); font-size: 1rem; color: rgba(122, 102, 112, 0.8); } .toc-tools { display: flex; flex: none; gap: 0.1rem; } .drawer-foot { padding: 1rem; border-top: 1px solid var(--blush-200); } .drawer-foot .btn { width: 100%; justify-content: center; } /* =============================================================== lightbox */ .lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(74, 59, 66, 0.7); backdrop-filter: blur(3px); } .lightbox figure { max-width: 100%; max-height: 100%; margin: 0; padding: 0.75rem; border-radius: 1rem; background: var(--paper-50); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); } .lightbox img, .lightbox video { display: block; max-width: 88vw; max-height: 80dvh; border-radius: 0.75rem; object-fit: contain; } .lightbox figcaption { padding-top: 0.5rem; text-align: center; font-family: var(--hand); font-size: 1.3rem; color: var(--ink-soft); } .lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; background: var(--paper-50); font-size: 1.5rem; } /* ================================================================ uploads */ .uploads { position: fixed; left: 1rem; bottom: 1rem; z-index: 115; width: min(22rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: 0.5rem; } .upload-job { padding: 0.7rem 1rem; border: 1px solid var(--blush-200); border-radius: 1rem; background: rgba(255, 253, 247, 0.96); box-shadow: 0 16px 30px -12px rgba(207, 99, 137, 0.5); } .upload-top { display: flex; align-items: center; gap: 0.5rem; font-family: var(--hand-neat); } .upload-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upload-pct { font-family: var(--hand); color: var(--ink-soft); } .upload-bar { height: 6px; margin-top: 0.5rem; overflow: hidden; border-radius: 999px; background: var(--blush-100); } .upload-fill { height: 100%; border-radius: 999px; background: var(--blush-500); transition: width 200ms; } .upload-job.error .upload-fill { background: #f87171; } .upload-msg { margin: 0.25rem 0 0; font-family: var(--hand); font-size: 1rem; color: #dc2626; } /* =============================================================== our song */ .oursong { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; } .oursong-panel { width: min(22rem, calc(100vw - 2rem)); padding: 0.75rem; border: 1px solid var(--blush-200); border-radius: 1.5rem; background: rgba(255, 253, 247, 0.96); box-shadow: 0 20px 40px -12px rgba(207, 99, 137, 0.5); } .oursong-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0.25rem 0.5rem; font-family: var(--title); font-style: italic; } .oursong-head button { border: 0; background: transparent; color: var(--blush-600); font-family: var(--hand); font-size: 1.15rem; } .oursong-toggle { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border: 0; border-radius: 999px; background: var(--blush-500); color: #fff; font-size: 1.5rem; box-shadow: 0 16px 30px -10px rgba(207, 99, 137, 0.6); animation: sway 6s ease-in-out infinite; } .oursong-toggle:hover { background: var(--blush-600); } /* ================================================================ mobile */ .book-mobile { display: block; width: 100%; } .mobile-stage { position: relative; width: 100%; max-width: 28rem; height: min(calc(100dvh - 19rem), 40rem); aspect-ratio: 3 / 4; margin: 0 auto; perspective: 1400px; } .mobile-cover { position: absolute; inset: -0.5rem; display: flex; overflow: hidden; border-radius: 18px; box-shadow: 0 20px 40px -14px rgba(120, 110, 160, 0.5); } .mobile-cover .cover-pink { border-radius: 18px 0 0 18px; } .mobile-cover .cover-blue { border-radius: 0 18px 18px 0; } .mobile-slot { position: absolute; inset: 0; } .mobile-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; font-family: var(--hand); font-size: 1.25rem; color: var(--ink-soft); } .round-btn { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 1px solid var(--blush-300); border-radius: 999px; background: rgba(255, 253, 247, 0.9); color: var(--ink); font-size: 1.5rem; } .round-btn:disabled { opacity: 0.3; } @keyframes page-in-forward { from { transform: rotateY(-60deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } } @keyframes page-in-back { from { transform: rotateY(60deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } } .mobile-slot.in-forward { animation: page-in-forward 420ms cubic-bezier(0.3, 0.7, 0.3, 1) both; transform-origin: left center; } .mobile-slot.in-back { animation: page-in-back 420ms cubic-bezier(0.3, 0.7, 0.3, 1) both; transform-origin: right center; } /* ------------------------------------------------------------ breakpoint */ @media (min-width: 768px) { .book-desktop { display: block; } .book-mobile { display: none; } .members { display: flex; } .topbar { padding: 1rem 2rem 0.25rem; } .brand h1 { font-size: 1.9rem; } .bottombar { position: static; padding: 0 0.75rem 1.5rem; background: none; } .bottombar .label { display: inline; } .stage-wrap { padding: 0.5rem 1.5rem 0; } .hint-pill { bottom: 5.5rem; } } @media (max-width: 767px) { .desktop-only { display: none !important; } } /* ============================================================ decorations */ @keyframes float-heart { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 0.85; } 100% { transform: translateY(-120px) scale(1.25); opacity: 0; } } .floating-heart { position: absolute; bottom: 5rem; animation: float-heart 4.5s ease-out infinite; } @keyframes sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } } @media (prefers-reduced-motion: reduce) { .sheet { transition-duration: 1ms; } .floating-heart, .oursong-toggle, .mobile-slot.in-forward, .mobile-slot.in-back { animation: none; } } /* ================================================================= login */ .login-main { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 1.25rem; } .login-hearts { position: fixed; inset: 0; overflow: hidden; pointer-events: none; } .login-box { position: relative; width: 100%; max-width: 28rem; } .login-glow { position: absolute; inset: -0.75rem; z-index: -1; display: flex; overflow: hidden; border-radius: 2rem; filter: blur(18px); } .login-glow div { width: 50%; height: 100%; } .login-glow .g-pink { background: rgba(255, 185, 206, 0.7); } .login-glow .g-blue { background: rgba(185, 216, 246, 0.7); } .login-card { position: relative; overflow: hidden; padding: 2rem; border: 1px solid var(--blush-200); border-radius: 1.75rem; background: var(--paper-50); box-shadow: 0 30px 55px -20px rgba(171, 76, 110, 0.4); } .login-card .ribbon { top: -0.25rem; z-index: 5; width: 1.75rem; } .login-card .ribbon.a { left: auto; right: 4rem; } .login-card .ribbon.b { left: auto; right: 1.75rem; } .login-card .ribbon.a .ribbon-tail { height: 4rem; background: var(--blush-400); } .login-card .ribbon.a .ribbon-tip { border-top: 10px solid var(--blush-400); border-left-width: 14px; border-right-width: 14px; } .login-card .ribbon.b .ribbon-tail { height: 2.75rem; background: var(--baby-400); } .login-card .ribbon.b .ribbon-tip { border-top: 10px solid var(--baby-400); border-left-width: 14px; border-right-width: 14px; } .login-kicker { margin: 0; font-family: var(--hand); font-size: 1.4rem; color: var(--blush-500); } .login-card h1 { margin: 0.25rem 0 0; font-family: var(--title); font-size: 2.25rem; line-height: 1.1; } .login-card h1 em { font-style: italic; } .login-sub { margin: 0.5rem 0 0; font-family: var(--hand-neat); font-size: 1.15rem; color: var(--ink-soft); } .login-rule { height: 1px; margin: 1.5rem 0; background: linear-gradient(to right, var(--blush-300), transparent, var(--baby-300)); } .login-form label { display: block; margin-bottom: 1rem; } .login-form .label-text { display: block; margin-bottom: 0.25rem; font-family: var(--hand-neat); font-size: 1.15rem; color: var(--ink-soft); } .login-form input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--blush-200); border-radius: 1rem; background: rgba(255, 253, 247, 0.9); color: var(--ink); font-family: var(--hand-neat); font-size: 1.15rem; outline: none; transition: border-color 150ms, box-shadow 150ms; } .login-form input:focus { border-color: var(--blush-400); box-shadow: 0 0 0 4px rgba(255, 212, 226, 0.6); } .login-form button { width: 100%; margin-top: 0.5rem; padding: 0.85rem; border: 0; border-radius: 999px; background: var(--blush-500); color: #fff; font-family: var(--title); font-size: 1.1rem; letter-spacing: 0.02em; box-shadow: 0 14px 26px -10px rgba(207, 99, 137, 0.6); } .login-form button:hover { background: var(--blush-600); } .alert { padding: 0.6rem 1rem; margin-bottom: 1rem; border-radius: 1rem; background: var(--blush-100); color: var(--blush-700); font-family: var(--hand-neat); text-align: center; } .login-foot { margin: 1.5rem 0 0; text-align: center; font-family: var(--hand-neat); font-size: 0.95rem; color: rgba(122, 102, 112, 0.8); } /* ================================================================= setup */ .setup-main { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; } .setup-card { padding: 2rem; border: 1px solid var(--blush-200); border-radius: 1.5rem; background: var(--paper-50); box-shadow: 0 30px 55px -20px rgba(171, 76, 110, 0.35); } .setup-card h1 { margin: 0 0 0.25rem; font-family: var(--title); font-size: 2rem; } .setup-card h2 { margin: 1.75rem 0 0.5rem; font-family: var(--title); font-size: 1.2rem; } .setup-card p { line-height: 1.5; } .setup-card code { padding: 0.1rem 0.35rem; border-radius: 0.3rem; background: var(--blush-100); font-size: 0.95em; } .setup-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 600px) { .setup-grid { grid-template-columns: 1fr 1fr; } } .setup-check { margin: 0.35rem 0; font-family: var(--hand-neat); } .ok { color: #15803d; } .bad { color: #b91c1c; } .warn { color: #b45309; }