/* Momie Tales web. The night-blue shelf of the original Momie Tales (2017), built with MomentCam 15's materials: frosted glass pills, blurred ambient art, the cream "moon" accent. Day = the dusk-lavender sky of the original store screenshots. */ :root { --bg0: #0B1230; --bg1: #16224A; --bg2: #2C437F; --ink: #F5F1E6; --mut: rgba(226,232,255,.68); --line: rgba(255,255,255,.12); --glass: rgba(38,56,112,.46); --glass-strong: rgba(26,38,82,.78); --glass-border: rgba(255,255,255,.14); --moon: #F8EFD3; --moon-ink: #1B1832; --sky-ink: #7FD8FF; --star: #FFD66B; --rose: #FF6B7A; --danger: #E8705F; --paper: #FBF5E6; --paper-2: #F3EAD3; --paper-ink: #2C2642; --paper-mut: #6B6283; --shadow: 0 18px 40px rgba(3,8,30,.45); --pill-shadow: 0 6px 16px rgba(3,8,30,.28); --stars-o: 1; --ui: "Fredoka", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif; --read: "Andika", "Fredoka", ui-rounded, system-ui, sans-serif; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); color-scheme: dark; } :root[data-theme="day"] { --bg0: #FFF6DC; --bg1: #CDEBFF; --bg2: #8FD3FF; --ink: #1B2A4A; --mut: #4E5E80; --line: rgba(27,42,74,.12); --glass: rgba(255,255,255,.55); --glass-strong: rgba(255,255,255,.88); --glass-border: rgba(255,255,255,.8); --moon: #FFB938; --moon-ink: #3A2400; --sky-ink: #1F7AE0; --star: #FFB938; --shadow: 0 18px 40px rgba(30,70,140,.22); --pill-shadow: 0 6px 16px rgba(30,70,140,.14); --stars-o: 0; color-scheme: light; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; background: var(--bg0); color: var(--ink); font-family: var(--ui); } body { overflow: hidden; overscroll-behavior: none; } button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; } button:disabled { opacity: .4; cursor: default; } button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--sky-ink); outline-offset: 2px; } img { display: block; max-width: 100%; } .ico { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .tnum { font-variant-numeric: tabular-nums; } [hidden] { display: none !important; } /* ---------- desktop preview: phone / foldable / Duo / full screen ---------- */ .desk { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(90% 70% at 50% 0%, #26365F, #0A0F22 70%); } .frame { position: relative; width: 100%; height: 100%; } .app { position: absolute; inset: 0; overflow: clip; background: var(--bg1); container-type: size; container-name: app; } /* the preview bar wears the app's own glass: navy + cream at night, white + amber by day */ .desk-bar { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; border-radius: 999px; background: var(--glass-strong); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); border: .5px solid var(--glass-border); color: var(--ink); box-shadow: var(--pill-shadow); } .desk-bar .seg { background: color-mix(in srgb, var(--ink) 9%, transparent); } .desk-ico { width: 30px; height: 30px; border-radius: 8px; } .desk-title { font-weight: 600; font-size: 15px; margin-right: 6px; } .desk-note { margin: 0; color: rgba(255,255,255,.5); font-size: 13px; } body:not(.is-desk) .desk { background: none; } body.is-desk .frame { flex: none; padding: 12px; background: #07080c; box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 2px #23252c; } body.is-desk[data-frame="phone"] .frame { width: 393px; height: min(852px, calc(100vh - 140px)); border-radius: 54px; } body.is-desk[data-frame="phone"] .app { inset: 12px; border-radius: 42px; --safe-top: 40px; --safe-bottom: 18px; } /* iPhone Duo, exact (iOS 27.1 simulator profile): folded = the outer screen, 466×678 pt, square corners on the hinge side; open = the inner screen, 951×669 pt, one continuous panel (no visible crease, like the real Duo). */ body.is-desk[data-frame="duo-folded"] .frame { width: 486px; height: 698px; padding: 10px; border-radius: 14px 68px 68px 14px; } body.is-desk[data-frame="duo-folded"] .app { inset: 10px; border-radius: 8px 59px 59px 8px; --safe-top: 30px; --safe-bottom: 16px; } body.is-desk[data-frame="duo-open"] .frame { width: 971px; height: 689px; padding: 10px; border-radius: 64px; } body.is-desk[data-frame="duo-open"] .app { inset: 10px; border-radius: 55px; --safe-top: 14px; --safe-bottom: 12px; } body.is-desk .frame { transform-origin: 50% 0; } body.is-desk[data-frame="full"] .frame { width: 100%; height: auto; flex: 1; padding: 0; background: none; box-shadow: none; } body.is-desk[data-frame="full"] .desk { gap: 0; justify-content: flex-start; } body.is-desk[data-frame="full"] .desk-bar { position: fixed; z-index: 200; left: 14px; bottom: 14px; } body.is-desk[data-frame="full"] .desk-bar > :not(.seg), body.is-desk[data-frame="full"] .desk-note { display: none; } .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255,255,255,.1); } :root[data-theme="day"] .app .seg { background: rgba(28,35,80,.08); } .seg button { height: 30px; padding: 0 13px; border-radius: 999px; font-size: 14px; font-weight: 500; color: inherit; opacity: .78; white-space: nowrap; } .seg button[aria-checked="true"] { background: var(--moon); color: var(--moon-ink); opacity: 1; box-shadow: 0 1px 4px rgba(0,0,0,.18); } .seg.small button { height: 28px; padding: 0 12px; font-size: 13px; } /* ---------- the night sky under every screen ---------- */ .sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(130% 75% at 50% -5%, var(--bg2), var(--bg1) 48%, var(--bg0)); } .sky .stars { position: absolute; inset: -10%; opacity: var(--stars-o); } .sky .s1 { background-image: radial-gradient(1.6px 1.6px at 12% 18%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 32% 42%, #fff 60%, transparent), radial-gradient(2px 2px at 58% 12%, #FFE9A8 60%, transparent), radial-gradient(1.3px 1.3px at 76% 34%, #fff 60%, transparent), radial-gradient(1.6px 1.6px at 88% 70%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 22% 78%, #fff 60%, transparent), radial-gradient(1.8px 1.8px at 46% 64%, #FFE9A8 60%, transparent), radial-gradient(1.1px 1.1px at 66% 88%, #fff 60%, transparent); background-size: 340px 340px; animation: twinkle 5s ease-in-out infinite alternate; } .sky .s2 { background-image: radial-gradient(1px 1px at 8% 52%, #fff 60%, transparent), radial-gradient(1px 1px at 38% 8%, #fff 60%, transparent), radial-gradient(1.4px 1.4px at 62% 46%, #fff 60%, transparent), radial-gradient(1px 1px at 84% 14%, #fff 60%, transparent), radial-gradient(1px 1px at 52% 92%, #fff 60%, transparent); background-size: 230px 230px; opacity: calc(var(--stars-o) * .7); animation: twinkle 7s 1s ease-in-out infinite alternate-reverse; } :root[data-theme="day"] .sky { background: linear-gradient(180deg, var(--bg2), var(--bg1) 45%, var(--bg0)); } :root[data-theme="day"] .sky .glow { left: auto; right: -14vmax; top: -16vmax; transform: none; width: 52vmax; height: 52vmax; filter: none; background: radial-gradient(closest-side, #FFF8D6 0 18%, rgba(255,214,94,.85) 24%, rgba(255,214,94,.28) 46%, transparent); } :root[data-theme="day"] .sky .s1 { opacity: .9; animation: drift 60s linear infinite; background-size: 900px 520px; background-image: radial-gradient(60px 26px at 18% 22%, rgba(255,255,255,.9) 60%, transparent 62%), radial-gradient(44px 22px at 24% 19%, rgba(255,255,255,.9) 60%, transparent 62%), radial-gradient(70px 28px at 70% 48%, rgba(255,255,255,.75) 60%, transparent 62%), radial-gradient(48px 22px at 76% 45%, rgba(255,255,255,.75) 60%, transparent 62%); } :root[data-theme="day"] .sky .s2 { display: none; } @keyframes drift { to { background-position: 900px 0; } } .sky .glow { position: absolute; width: 70vmax; height: 70vmax; left: 50%; top: -38vmax; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sky-ink) 22%, transparent), transparent); filter: blur(10px); } @keyframes twinkle { from { opacity: calc(var(--stars-o) * .55); } to { opacity: var(--stars-o); } } /* ---------- screens, bars, glass ---------- */ .screen { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; overflow: hidden; } .glass { background: var(--glass); backdrop-filter: blur(24px) saturate(1.25); -webkit-backdrop-filter: blur(24px) saturate(1.25); border: .5px solid var(--glass-border); box-shadow: var(--pill-shadow); } .topbar { position: relative; z-index: 5; flex: none; display: grid; grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); align-items: center; gap: 10px; padding: calc(var(--safe-top) + 10px) 16px 10px; } .topbar > :first-child { justify-self: start; } .topbar > :last-child { justify-self: end; } .pill { height: 44px; min-width: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; font-weight: 500; font-size: 15px; } .icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 999px; padding: 0; } .pill.icon-btn { padding: 0; } .spacer { width: 44px; } .moon-pill { background: var(--moon); color: var(--moon-ink); font-weight: 600; box-shadow: var(--pill-shadow); } .reader-title { font-weight: 600; font-size: 17px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52cqw; } .scroller { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px calc(var(--safe-bottom) + 28px); scrollbar-width: none; } .scroller::-webkit-scrollbar { display: none; } .btn { height: 48px; padding: 0 20px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 16px; } .btn.small { height: 38px; padding: 0 14px; border-radius: 12px; font-size: 14px; } .btn.moon { background: var(--moon); color: var(--moon-ink); box-shadow: var(--pill-shadow); } .btn.ghost { background: color-mix(in srgb, var(--ink) 10%, transparent); border: .5px solid var(--line); } .btn.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } .btn.wide { width: 100%; margin-top: 12px; } .field { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); border: .5px solid var(--line); border-radius: 14px; padding: 12px 14px; outline: 0; } .field::placeholder { color: var(--mut); } .field.big { font-size: 20px; font-weight: 600; } .note { color: var(--mut); font-size: 14px; line-height: 1.45; margin: 4px 2px 10px; font-family: system-ui, -apple-system, sans-serif; } .spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--ink) 18%, transparent); border-top-color: var(--ink); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- the square picture of a page ---------- */ .art { position: relative; aspect-ratio: 1; width: 100%; overflow: hidden; background: var(--paper-2); user-select: none; -webkit-user-select: none; } .art > img, .art .head img { position: absolute; } .art .base, .art .top { inset: 0; width: 100%; height: 100%; object-fit: cover; } .art .head { position: absolute; transform-origin: 50% 50%; } .art .head img { inset: 0; width: 100%; height: 100%; max-width: none; } .art:empty { background: radial-gradient(circle at 50% 45%, #fff 0, var(--paper) 30%, var(--paper-2)); } /* ---------- library ---------- */ .wordmark { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 26px; letter-spacing: .5px; color: var(--sky-ink); text-shadow: 0 2px 0 color-mix(in srgb, var(--bg0) 60%, transparent), 0 0 24px color-mix(in srgb, var(--sky-ink) 40%, transparent); } .wordmark .ico { color: var(--star); fill: var(--star); stroke: none; transform: rotate(-20deg); } .family-btn { padding: 0 6px; gap: 0; } .bubble { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 2px solid var(--moon); background: var(--paper); margin-left: -8px; } .bubble:first-child { margin-left: 0; } .bubble img { width: 100%; height: 100%; object-fit: cover; } .hello { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left; padding: 16px 18px; border-radius: 22px; margin: 6px 0 4px; } .hello-t { font-weight: 600; font-size: 18px; } .hello-s { grid-column: 1; color: var(--mut); font-size: 14px; font-family: system-ui, -apple-system, sans-serif; } .hello-cta { grid-row: 1 / 3; grid-column: 2; align-self: center; display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 12px 0 16px; border-radius: 999px; background: var(--moon); color: var(--moon-ink); font-weight: 600; } .shelf-title { font-size: 19px; font-weight: 600; margin: 22px 4px 12px; } .shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 26px 22px; } @container app (max-width: 520px) { .shelf { grid-template-columns: 1fr; padding: 0 18px; gap: 30px; } } .book-card { display: flex; flex-direction: column; text-align: left; animation: rise .5s calc(var(--i, 0) * 60ms) both cubic-bezier(.2,.8,.2,1); } @keyframes rise { from { opacity: 0; transform: translateY(18px); } } .cover { position: relative; border-radius: 4px 12px 12px 4px; overflow: hidden; box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,.2) inset; transform: translateZ(0); transition: transform .25s; } .book-card:active .cover { transform: scale(.98); } @media (hover: hover) { .book-card:hover .cover { transform: translateY(-4px) rotate(-.4deg); } } .cover .spine { position: absolute; inset: 0 auto 0 0; width: 7%; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.32), rgba(255,255,255,.22) 35%, rgba(0,0,0,.12) 60%, transparent); } .cover .ribbon { position: absolute; top: -4px; right: 13%; width: 16px; height: 52px; background: linear-gradient(#E0303F, #B81F2E); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); box-shadow: 0 2px 4px rgba(0,0,0,.3); } .badge-new { position: absolute; top: 34px; right: calc(13% - 10px); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--rose); color: #fff; font-weight: 700; font-size: 16px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); } .cover .progress { position: absolute; left: 7%; right: 0; bottom: 0; height: 5px; background: rgba(0,0,0,.25); } .cover .progress::after { content: ""; position: absolute; inset: 0; width: calc(var(--p) * 100%); background: var(--star); } .card-label { margin: -10px 12px 0; position: relative; z-index: 1; padding: 12px 14px 10px; border-radius: 0 0 14px 14px; background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: .5px solid var(--glass-border); border-top: 0; display: flex; flex-direction: column; gap: 2px; } .card-title { font-weight: 600; font-size: 17px; line-height: 1.2; } .card-sub { color: var(--mut); font-size: 13.5px; } .make-cover { aspect-ratio: 2 / 1; display: grid; place-content: center; justify-items: center; gap: 8px; font-weight: 600; font-size: 17px; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 2px dashed color-mix(in srgb, var(--ink) 28%, transparent); box-shadow: none; color: var(--mut); } /* Duo / dual-screen: keep everything off the hinge */ body.dual .library .shelf { grid-template-columns: 1fr 1fr; column-gap: calc(var(--hinge-gap, 0px) + 44px); padding: 0 6px; } body.dual .library .topbar { grid-template-columns: auto 1fr auto; } body.dual .library .wordmark { justify-self: start; } body.dual .family .family-grid, body.dual .parents .settings, body.dual .editor .ed { column-gap: calc(var(--hinge-gap, 0px) + 40px); } /* ---------- reader: the book ---------- */ .reader .ambient { position: absolute; inset: -80px; z-index: 0; background: center/cover no-repeat; filter: blur(50px) saturate(1.2); opacity: .5; transition: background-image .6s; } .reader .ambient::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg1) 45%, transparent); } .reader .topbar { grid-template-columns: auto minmax(0, 1fr) auto; } .reader .reader-title { max-width: none; min-width: 0; font-size: 16px; } .read-btn { padding: 0 16px 0 13px; } @container app (max-width: 430px) { .read-btn { width: 44px; padding: 0; } .read-btn span { display: none; } } .read-btn.on { background: var(--moon); color: var(--moon-ink); } .desk-area { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* a long perspective: a turning page barely grows towards you, so it never pokes out of the screen */ .book { position: absolute; pointer-events: auto; perspective: 8000px; touch-action: pan-y; cursor: pointer; } .slot { position: absolute; top: 0; width: var(--pg); height: 100%; transform-style: preserve-3d; } .slot.left { left: 0; } .slot.right { left: calc(var(--pg) + var(--gap)); } .reader:not(.spread) .slot.right, .reader:not(.spread) .spine-gap { display: none; } .reader:not(.spread) .slot.left { width: 100%; } .face { position: absolute; inset: 0; overflow: hidden; background: var(--paper); color: var(--paper-ink); } /* spread: picture page left, words page right, a soft gutter shadow at the spine */ .reader.spread .art-face { border-radius: 10px 2px 2px 10px; box-shadow: var(--shadow); } .reader.spread .art-face::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 9%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0,0,0,.22)); } .reader.spread .text-face { border-radius: 2px 10px 10px 2px; box-shadow: var(--shadow); background: radial-gradient(120% 90% at 70% 40%, #FFFDF6, var(--paper) 55%, var(--paper-2)); } .reader.spread .text-face::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 9%; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.18), transparent); } .spine-gap { position: absolute; top: 2%; bottom: 2%; left: var(--pg); width: var(--gap); } .text-face .words { position: absolute; inset: 11% 12% 14% 14%; display: flex; flex-direction: column; justify-content: center; gap: .6em; } .story-text { margin: 0; font-family: var(--read); font-size: clamp(15px, calc(var(--pg) * .056), 30px); line-height: 1.5; color: var(--paper-ink); text-wrap: pretty; } .story-text::first-letter { font-family: var(--ui); font-weight: 700; color: #C0473E; font-size: 1.35em; line-height: 1; } .folio { position: absolute; bottom: 5.5%; left: 0; right: 0; text-align: center; color: var(--paper-mut); font-size: clamp(11px, calc(var(--pg) * .03), 15px); } .folio::before, .folio::after { content: "✦"; margin: 0 .7em; color: #E1B85B; font-size: .8em; } .title-page .words { text-align: center; align-items: center; } .belongs { margin: 0; color: var(--paper-mut); font-size: clamp(13px, calc(var(--pg) * .04), 20px); } .belongs-name { margin: 0; font-family: var(--ui); font-weight: 700; font-size: clamp(28px, calc(var(--pg) * .11), 60px); color: #C0473E; line-height: 1.1; } .belongs-cast { margin: .4em 0 0; font-family: var(--read); font-size: clamp(14px, calc(var(--pg) * .042), 22px); } .hint { margin: 1.6em 0 0; color: var(--paper-mut); font-size: clamp(11px, calc(var(--pg) * .03), 15px); font-family: system-ui, sans-serif; } .end-t { margin: 0; font-family: var(--ui); font-weight: 600; text-align: center; font-size: clamp(20px, calc(var(--pg) * .07), 38px); color: var(--paper-ink); } .end-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 1em; } .text-face .btn.moon, .single-face .btn.moon { background: #2A3A78; color: #fff; } .text-face .btn.ghost, .single-face .btn.ghost { color: var(--paper-ink); border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.05); } .cover-band { position: absolute; left: 6%; right: 6%; bottom: 5%; padding: .55em .9em .6em; border-radius: 14px; display: flex; flex-direction: column; align-items: center; background: rgba(16,24,60,.55); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); color: #FFF7E3; text-align: center; font-size: clamp(12px, calc(var(--pg) * .04), 22px); } .cover-title { font-weight: 700; font-size: 1.5em; line-height: 1.15; } .cover-star { opacity: .85; font-size: .95em; } .end-art .art { filter: saturate(.6) brightness(.7); } .end-word { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ui); font-weight: 700; color: #FFF7E3; font-size: clamp(34px, calc(var(--pg) * .14), 80px); text-shadow: 0 4px 24px rgba(0,0,0,.45); } /* phone: one page, picture above the words */ .single-face { border-radius: 6px 16px 16px 6px; box-shadow: var(--shadow); display: flex; flex-direction: column; background: radial-gradient(120% 60% at 60% 100%, #FFFDF6, var(--paper) 60%, var(--paper-2)); } .single-face::before { content: ""; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 5%; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.2), transparent); } .single-face > .face { position: relative; inset: auto; flex: none; aspect-ratio: 1; } .single-face > .words { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: .3em; padding: 4% 8% 5% 9%; text-align: left; } .single-face .story-text { font-size: clamp(15px, calc(var(--pg) * .05), 22px); line-height: 1.45; } .single-face .belongs, .single-face .belongs-name, .single-face .belongs-cast, .single-face .hint { text-align: center; } .single-face .belongs-name { font-size: clamp(24px, calc(var(--pg) * .085), 40px); } .single-face .hint { margin-top: .4em; } /* the book itself: a cloth hardcover behind the pages, the page block's edges on the outer sides, and the paper curving down into the spine */ .book::before { content: ""; position: absolute; z-index: -1; inset: -12px -14px; border-radius: 14px; background: radial-gradient(120% 120% at 50% 0%, #34508F, #1E2C5C 70%), #1E2C5C; box-shadow: 0 26px 50px rgba(3,8,30,.55), inset 0 0 0 2px rgba(255,255,255,.06), inset 0 -3px 0 rgba(0,0,0,.25); } :root[data-theme="day"] .book::before { background: radial-gradient(120% 120% at 50% 0%, #6E86D8, #4A5FAE 70%); } .reader.spread .book::after { content: ""; position: absolute; z-index: -1; top: -12px; bottom: -12px; left: calc(var(--pg) + var(--gap) / 2 - 7px); width: 14px; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.08) 50%, rgba(0,0,0,.35)); border-radius: 3px; } .reader.spread .slot.left .face { box-shadow: var(--edges-left); } .reader.spread .slot.right .face { box-shadow: var(--edges-right); } .reader.spread .art-face::after { width: 14%; background: linear-gradient(90deg, transparent, rgba(0,0,0,.08) 55%, rgba(0,0,0,.30)); } .reader.spread .text-face::before { width: 16%; background: linear-gradient(90deg, rgba(0,0,0,.24), rgba(0,0,0,.07) 45%, transparent); } .reader.spread .art-face { border-radius: 6px 2px 2px 6px; } .reader.spread .text-face { border-radius: 2px 6px 6px 2px; } .reader:not(.spread) .slot.left > .face { box-shadow: var(--edges-right); } .reader:not(.spread) .book::before { inset: -10px -12px -10px -16px; border-radius: 10px 14px 14px 10px; } .leaf .face { box-shadow: none !important; } /* the turning leaf */ .leaf { position: absolute; inset: 0; z-index: 4; transform-style: preserve-3d; will-change: transform; } .leaf-front, .leaf-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .leaf-back { transform: rotateY(180deg); } .leaf-front > .face, .leaf-back > .face { position: absolute; inset: 0; } .leaf-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 40%); opacity: .8; } .reader-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 16px calc(var(--safe-bottom) + 10px); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .reader-foot > * { pointer-events: auto; } body.dual .reader-foot { align-items: flex-end; padding-right: 24px; } .page-dots { font-size: 13px; color: var(--mut); height: 22px; display: grid; place-items: center; } .rec-bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 8px; border-radius: 999px; max-width: 100%; } .rec-status { font-size: 13.5px; color: var(--mut); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; padding-right: 4px; } .btn.rec { height: 44px; border-radius: 999px; background: var(--rose); color: #fff; padding: 0 16px; font-size: 15px; } .btn.rec.live { animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--rose) 30%, transparent); } } /* ---------- family ---------- */ .family-grid { display: grid; gap: 18px; align-content: start; } @container app (min-width: 640px) { .family-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } .family-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 4px; } .family-preview .cover { width: min(100%, 360px); } .fp-cap { margin: 0; font-weight: 600; font-size: 17px; } .members { display: grid; gap: 12px; } .member { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 14px; border-radius: 22px; align-items: center; } .member-head { position: relative; } .head-preview { position: relative; width: 92px; height: 120px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; color: var(--mut); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--moon) 40%, transparent), color-mix(in srgb, var(--ink) 6%, transparent)); } .head-preview img { position: absolute; max-width: none; } .busy { position: absolute; inset: 0; border-radius: 18px; display: grid; place-content: center; justify-items: center; gap: 6px; font-size: 13px; background: var(--glass-strong); } .member-body { display: grid; gap: 8px; min-width: 0; } .member-top { display: flex; align-items: baseline; gap: 8px; } .member-label { font-weight: 600; font-size: 17px; } .member-hint { color: var(--mut); font-size: 13px; flex: 1; } .member-top .icon-btn { width: 32px; height: 32px; margin: -6px -4px -6px 0; color: var(--mut); } .member-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .done-btn { font-weight: 600; } /* ---------- parents ---------- */ .settings { display: flex; flex-direction: column; } .rows { display: grid; gap: 10px; } .row { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 8px 8px 8px; border-radius: 18px; } .row-cover { width: 56px; border-radius: 6px; overflow: hidden; } .row-text { display: flex; flex-direction: column; min-width: 0; } .row-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-s { color: var(--mut); font-size: 13px; } .chips-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; } .chip-book { display: flex; flex-direction: column; gap: 6px; font-size: 13px; text-align: left; line-height: 1.25; } .chip-cover { border-radius: 4px 10px 10px 4px; overflow: hidden; box-shadow: var(--pill-shadow); } .set { border-radius: 20px; padding: 6px 14px; } .set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; flex-wrap: wrap; padding: 6px 0; } .set-row + .set-row { border-top: .5px solid var(--line); } .set-row > span { font-weight: 500; } /* ---------- editor ---------- */ .ed { display: flex; flex-direction: column; gap: 14px; } .ed-meta { display: grid; gap: 10px; padding: 14px; border-radius: 22px; } .ed-pages { display: grid; gap: 14px; } @container app (min-width: 640px) { .ed-pages { grid-template-columns: 1fr 1fr; } .ed-pages > .btn { grid-column: 1 / -1; } } .ed-page { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 12px; padding: 12px; border-radius: 22px; position: relative; } .ed-num { position: absolute; top: 18px; left: 18px; z-index: 2; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; } .ed-tile { aspect-ratio: 1; border-radius: 12px; overflow: hidden; position: relative; display: grid; place-content: center; justify-items: center; gap: 6px; font-size: 13px; color: var(--mut); } .ed-tile.empty { border: 2px dashed color-mix(in srgb, var(--ink) 28%, transparent); background: color-mix(in srgb, var(--ink) 5%, transparent); } .ed-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ed-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ed-text { flex: 1; resize: none; min-height: 90px; font-family: var(--read); font-size: 15px; line-height: 1.4; } .ed-tools { display: flex; justify-content: flex-end; gap: 2px; } .ed-tools .icon-btn { width: 38px; height: 38px; color: var(--mut); } /* ---------- sheets, gate, toast ---------- */ .scrim { position: absolute; inset: 0; z-index: 60; background: rgba(4,8,26,.5); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; } .scrim.out { opacity: 0; transition: opacity .2s; } @keyframes fade { from { opacity: 0; } } .sheet { width: min(100%, 520px); max-height: 90%; display: flex; flex-direction: column; border-radius: 28px 28px 0 0; background: var(--glass-strong); backdrop-filter: blur(30px) saturate(1.3); -webkit-backdrop-filter: blur(30px) saturate(1.3); border: .5px solid var(--glass-border); padding-bottom: calc(var(--safe-bottom) + 14px); animation: up .28s cubic-bezier(.2,.8,.2,1); } @container app (min-width: 640px) { .scrim { align-items: center; } .sheet { border-radius: 28px; } } @keyframes up { from { transform: translateY(40px); opacity: 0; } } .sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 4px 22px; } .sheet-head h2 { margin: 0; font-size: 19px; font-weight: 600; } .sheet-body { padding: 4px 22px 8px; overflow-y: auto; } .confirm p { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; color: var(--mut); margin: 4px 0 16px; } .row-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .gate { display: flex; flex-direction: column; align-items: center; gap: 12px; } .gate-q { margin: 0; font-size: 18px; text-align: center; } .gate-val { min-width: 120px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; font-weight: 600; background: color-mix(in srgb, var(--ink) 8%, transparent); } .gate-val.shake { animation: shake .35s; } @keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } } .gate-keys { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; } .gate-key { height: 56px; border-radius: 16px; font-size: 22px; font-weight: 600; background: color-mix(in srgb, var(--ink) 9%, transparent); } .gate-key.ok { background: var(--moon); color: var(--moon-ink); font-size: 18px; } .toast { position: absolute; z-index: 80; left: 50%; bottom: calc(var(--safe-bottom) + 70px); transform: translateX(-50%); padding: 12px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; animation: up .25s; transition: opacity .3s; background: var(--glass-strong); } .toast.out { opacity: 0; } /* ---------- screen motion ---------- */ .enter-push { animation: pushIn .34s cubic-bezier(.2,.8,.2,1) both; } .leave-push { animation: fadeOut .34s both; } .enter-pop { animation: fadeIn .34s both; } .leave-pop { animation: pushOut .34s cubic-bezier(.4,0,.6,1) both; z-index: 3; } @keyframes pushIn { from { transform: translateX(30%); opacity: 0; } } @keyframes pushOut { to { transform: translateX(30%); opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } } @keyframes fadeOut { to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* avatar bubbles: the avatar's own 200px white-T-shirt bust */ .face-bubble, .mini-face, .chip-face, .hp-face { display: inline-block; position: relative; overflow: hidden; border-radius: 50%; background: #fff; flex: none; } .face-bubble img, .mini-face img, .chip-face img, .hp-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* a character portrait (partEl): the part's costumed body, the member's head in its slot, then what is drawn over the head */ .part-art { display: inline-block; position: relative; overflow: hidden; border-radius: 50%; flex: none; isolation: isolate; background: radial-gradient(circle at 50% 38%, #FFFBF1 0, #FBEFD6 70%, #F4E1BC); border: 3px solid #F6E6C6; } .part-art > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; } .part-art .head { position: absolute; transform-origin: 50% 50%; } .part-art .head img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; } .mini-face { width: 30px; height: 30px; border: 2px solid var(--moon); margin-left: -8px; } .mini-face:first-child { margin-left: 0; } .cast-btn { padding: 0 7px; } .top-right { display: flex; gap: 8px; justify-self: end; } .hp-face { width: 92px; height: 92px; } .head-preview .hp-face { width: 100%; height: 100%; border-radius: 18px; } .cast { display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; } .cast-label { margin: 0 0 8px; font-weight: 600; } .cast-chips { display: flex; flex-wrap: wrap; gap: 10px; } .cast-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; padding: 8px 4px; border-radius: 18px; font-size: 14px; border: 2px solid transparent; background: color-mix(in srgb, var(--ink) 6%, transparent); } .cast-chip.on { border-color: var(--moon); background: color-mix(in srgb, var(--moon) 18%, transparent); } .chip-face { width: 60px; height: 60px; } .add-family { align-self: flex-start; } .hero-star { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--mut); } .hero-star.on { color: var(--star); } .hero-star .ico { fill: none; } .hero-star.on .ico { fill: currentColor; } .grow { flex: 1; } .add-row { display: flex; flex-wrap: wrap; gap: 8px; } .welcome-note { margin: 0 2px 4px; font-size: 16px; line-height: 1.45; color: var(--mut); grid-column: 1 / -1; } .hero-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 2px 0; } .hero-row-t { font-weight: 600; font-size: 15px; margin-right: 4px; } .hero-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 5px; border-radius: 999px; background: var(--glass); border: .5px solid var(--glass-border); font-weight: 500; } .hero-chip.on { background: var(--moon); color: var(--moon-ink); } .hero-chip .mini-face { margin: 0; } .bubble { width: 34px; height: 34px; } .home-btn { padding: 0 16px 0 12px; font-weight: 600; } @container app (max-width: 430px) { .reader .home-btn span { display: none; } .reader .home-btn { width: 44px; padding: 0; } } /* the closed book: its cover (picture with the cast, title, who stars) on the hardcover */ .cover-face { background: #1E2C5C; display: flex; flex-direction: column; border-radius: 4px 12px 12px 4px; box-shadow: var(--shadow); } .cover-face::before { content: ""; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 6%; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.18) 40%, rgba(0,0,0,.15) 70%, transparent); } .cover-face > .art { flex: none; } .cover-info { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45em; padding: 4% 6% 5%; text-align: center; color: #FFF7E3; font-size: clamp(12px, calc(var(--pg) * .042), 22px); background: radial-gradient(120% 100% at 50% 0%, #34508F, #1E2C5C 75%); } .cover-info .cover-title { font-weight: 700; font-size: 1.55em; line-height: 1.15; } .cover-cast { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em .9em; } .cover-person { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; } .cover-person .mini-face { width: 2em; height: 2em; margin: 0; border-color: #F8EFD3; } .cover-open { font-size: .8em; opacity: .75; animation: breathe 2.4s ease-in-out infinite; } @keyframes breathe { 50% { opacity: .35; } } /* spread: the closed cover sits on the right, the hardcover only behind it */ .reader.spread .cover-face > .art { position: absolute; inset: 0; } .reader.spread .cover-info { position: absolute; left: 5%; right: 5%; bottom: 4%; flex: none; border-radius: 14px; padding: .7em 1em .8em; background: rgba(16,24,60,.62); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); } .reader.spread.closed .book::before { left: calc(var(--pg) + var(--gap) - 8px); } .reader.closed .book::after { display: none; } .reader.closed .slot.right .face, .reader.closed .slot.left > .face { box-shadow: 4px 4px 0 #D3C5A2, 0 22px 40px rgba(3,8,30,.5); } /* phone, closed: the cover fills the page card, picture on top, title and cast below on the cloth */ .reader:not(.spread) .cover-face { position: absolute; inset: 0; } /* inside cover */ .endpaper { display: grid; place-items: center; border-radius: 6px 2px 2px 6px; background: radial-gradient(circle at 20% 20%, rgba(255,214,107,.35) 0 2px, transparent 3px) 0 0 / 34px 34px, radial-gradient(circle at 70% 60%, rgba(127,216,255,.30) 0 2px, transparent 3px) 0 0 / 46px 46px, #26386E; } .endpaper-cast { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em 1.4em; padding: 10%; font-size: clamp(12px, calc(var(--pg) * .045), 20px); color: #FFF7E3; } .ep-person { display: flex; flex-direction: column; align-items: center; gap: .4em; font-weight: 600; } .ep-face { width: 4.2em; height: 4.2em; border: 3px solid #F8EFD3; box-shadow: 0 6px 16px rgba(0,0,0,.35); } .endpaper.drawn { background: #F3EFE6; } .endpaper.drawn img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: .9; } .single-face > .endpaper { position: relative; inset: auto; aspect-ratio: 1; flex: none; border-radius: 0; } /* ---------- characters ---------- */ .member { text-align: left; width: 100%; } .member-cta { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; color: var(--sky-ink); } .hero-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--star); } .hero-tag .ico { fill: currentColor; stroke: none; } .person { display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; } .ps-top { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; } .ps-face { position: relative; width: 112px; height: 112px; border-radius: 24px; overflow: hidden; display: grid; place-items: center; color: var(--mut); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--moon) 40%, transparent), color-mix(in srgb, var(--ink) 6%, transparent)); } .ps-bust { position: absolute; inset: 0; border-radius: 0; } .ps-bust img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ps-face .busy { border-radius: 24px; } .ps-fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ps-role { font-size: 13px; color: var(--mut); font-weight: 600; } .ps-actions { display: flex; flex-wrap: wrap; gap: 8px; } .ps-label { margin: 0; font-weight: 600; font-size: 14px; color: var(--mut); } .name-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .name-rec .btn.live { background: #E5484D; color: #fff; } .name-rec .icon-btn:disabled { opacity: .35; } .name-nudge { position: absolute; z-index: 6; left: 50%; bottom: calc(var(--safe-bottom, 0px) + 40px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; height: 40px; white-space: nowrap; animation: nudge-in .35s ease-out; } @keyframes nudge-in { from { opacity: 0; transform: translate(-50%, 8px); } } .ps-hint { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--mut); } .age-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; } .age-chip { min-width: 40px; height: 36px; padding: 0 10px; border-radius: 12px; font-weight: 600; background: color-mix(in srgb, var(--ink) 8%, transparent); } .age-chip.on { background: var(--moon); color: var(--moon-ink); } .ps-foot { display: flex; justify-content: space-between; align-items: center; } .danger-ico { color: var(--danger); } /* ---------- Face Edit (MomentCam 15 web's, in the night theme): big preview, docked panel, Back / Save under the thumb ---------- */ .faceedit { background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--bg2) 70%, transparent), transparent 70%); } .fe-stage { position: relative; flex: 0 0 42%; min-height: 220px; display: grid; place-items: center; padding: calc(var(--safe-top) + 30px) 12px 0; } .fe-glow { position: absolute; left: 50%; top: 56%; width: min(78%, 330px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--moon) 30%, transparent), transparent); pointer-events: none; } .fe-pv { position: relative; height: 100%; max-width: 100%; aspect-ratio: .8; } .fe-pv img { position: absolute; width: 172.56%; max-width: none; left: -36.32%; top: -30.07%; filter: drop-shadow(0 10px 18px rgba(3,8,30,.35)); user-select: none; -webkit-user-select: none; } .fe-title { position: absolute; top: calc(var(--safe-top) + 8px); left: 16px; right: 16px; text-align: center; font-weight: 600; font-size: 16px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fe-title b { color: var(--ink); font-weight: 600; } .fe-spin { position: absolute; right: 18px; bottom: 12px; } .fe-saving { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 8px; font-weight: 600; background: color-mix(in srgb, var(--bg0) 55%, transparent); } .fe-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px 26px 0 0; border-bottom: 0; background: var(--glass-strong); } .fe-colors { display: flex; align-items: center; gap: 10px; padding: 12px 14px 2px; flex: none; overflow-x: auto; scrollbar-width: none; } .fe-colors::-webkit-scrollbar, .fe-packs::-webkit-scrollbar, .fe-tabs::-webkit-scrollbar { display: none; } .fe-colors:empty { display: none; } .fe-swatch { width: 34px; height: 34px; border-radius: 50%; background: var(--c); flex: none; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); } .fe-swatch .ico { stroke-width: 3; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); } .fe-swatch.on { box-shadow: 0 0 0 3px var(--moon), inset 0 0 0 2px rgba(255,255,255,.55); } .fe-own { display: flex; padding: 3px; border-radius: 999px; flex: none; box-shadow: inset 0 0 0 1.5px var(--line); margin-right: 4px; } .fe-flip { flex: none; width: 38px; height: 38px; margin-left: auto; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 10%, transparent); } .fe-flip.on { background: var(--moon); color: var(--moon-ink); } .fe-packs { display: flex; align-items: center; gap: 6px; padding: 10px 14px 4px; overflow-x: auto; scrollbar-width: none; flex: none; } .fe-gender { flex: none; width: 34px; height: 32px; border-radius: 999px; font-size: 17px; font-weight: 600; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--mut); } .fe-gender[aria-pressed="true"] { background: color-mix(in srgb, var(--sky-ink) 30%, transparent); color: var(--ink); } .fe-sep { flex: none; width: 1.5px; height: 22px; background: var(--line); margin: 0 4px; } .fe-pack { white-space: nowrap; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; flex: none; background: color-mix(in srgb, var(--ink) 8%, transparent); } .fe-pack.on { background: var(--moon); color: var(--moon-ink); } .fe-grid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px 12px; } .fe-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; } .fe-item { aspect-ratio: 1; border-radius: 16px; background: var(--paper) center/82% no-repeat; display: grid; place-items: center; color: var(--paper-mut); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); } .fe-item.on { box-shadow: 0 0 0 3px var(--moon), 0 0 0 5px color-mix(in srgb, var(--moon) 30%, transparent); } .fe-item.loading { background: color-mix(in srgb, var(--ink) 10%, transparent); animation: shimmer 1.2s ease-in-out infinite; } @keyframes shimmer { 50% { opacity: .5; } } .fe-empty { padding: 20px; text-align: center; color: var(--mut); display: grid; justify-items: center; gap: 10px; } .fe-empty p { margin: 0; } .fe-tabs { display: flex; gap: 2px; padding: 6px 8px 4px; overflow-x: auto; scrollbar-width: none; flex: none; border-top: .5px solid var(--line); } .fe-tab { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 58px; padding: 5px 6px; border-radius: 14px; font-size: 11.5px; font-weight: 600; color: var(--mut); white-space: nowrap; } .fe-tab-ico { width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; } .fe-tab.on { color: var(--moon); background: color-mix(in srgb, var(--moon) 14%, transparent); } .fe-actions { flex: none; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 6px 12px calc(var(--safe-bottom) + 10px); } .fe-actions .btn { height: 50px; } /* wide and landscape (open Duo, tablet, desktop): the preview on the left, the panel on the right */ @container app (min-width: 700px) and (orientation: landscape) { .faceedit { flex-direction: row; } .fe-stage { flex: 1; min-height: 0; padding-bottom: 24px; } .fe-panel { flex: 0 0 min(440px, 46%); border-radius: 26px 0 0 26px; border-right: 0; } .fe-actions { padding-bottom: calc(var(--safe-bottom) + 14px); } } body.dual .faceedit .fe-panel { flex-basis: calc(50% - var(--hinge-gap) / 2); } /* ---------- photo → avatar layers (create.js): camera, "Who is this for?", the painters ---------- */ .cr-layer { position: absolute; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--bg1); animation: fade .2s; } .cr-layer.finding { background: rgba(4,8,26,.5); display: grid; place-items: center; } .cr-finding { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 999px; font-weight: 600; } .cr-layer.camera { background: #000; } .cr-layer.camera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } .cr-layer.camera video.back { transform: none; } .cam-guide { position: absolute; left: 50%; top: 44%; width: 58%; aspect-ratio: .78; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed rgba(255,255,255,.7); pointer-events: none; } .cam-top { position: absolute; top: calc(var(--safe-top) + 10px); left: 16px; z-index: 2; } .cam-bot { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 22px); display: flex; align-items: center; justify-content: space-around; z-index: 2; } .cam-side { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; } .cam-shutter { width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; } .cam-shutter i { width: 60px; height: 60px; border-radius: 50%; background: #fff; transition: transform .1s; } .cam-shutter:active i { transform: scale(.9); } .cam-off { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: var(--bg1); } .cam-off h2 { margin: 0; font-size: 20px; } .cam-off p { margin: 0 0 8px; color: var(--mut); line-height: 1.45; } .cam-off .btn { width: min(100%, 280px); } .fp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px calc(var(--safe-bottom) + 20px); display: flex; flex-direction: column; gap: 12px; } .fp-body .note { margin: 0; text-align: center; } .fp-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .fp-tile { width: 76px; height: 76px; border-radius: 50%; background: center/cover; box-shadow: 0 0 0 2px var(--line); } .fp-tile:hover, .fp-tile.hot { box-shadow: 0 0 0 3px var(--moon); } .fp-photo { position: relative; border-radius: 18px; overflow: hidden; align-self: center; max-width: 100%; } .fp-photo img { width: 100%; max-height: 52cqh; object-fit: contain; } .fp-photo.manual { cursor: crosshair; } .fp-ring { position: absolute; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 0 5px rgba(0,0,0,.25); } .fp-ring:hover, .fp-ring.hot { box-shadow: 0 0 0 3px var(--moon), 0 0 0 6px rgba(0,0,0,.25); } .cr-layer.creating { align-items: center; justify-content: center; overflow: hidden; } .cr-bg { position: absolute; inset: -40px; background: center/cover; filter: blur(30px) saturate(1.1); opacity: .45; } .cr-col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 24px; width: min(100%, 360px); } .cr-photo { position: relative; width: 62%; aspect-ratio: .8; margin-bottom: 16px; } .cr-pic { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; box-shadow: var(--shadow); border: 3px solid var(--moon); } .cr-painter { position: absolute; width: 58%; right: -26%; bottom: -14%; } .cr-mini { position: absolute; width: 28px; transition: opacity .3s; } .cr-label { font-weight: 600; font-size: 20px; text-align: center; } .cr-step { color: var(--mut); min-height: 1.4em; text-align: center; } .cr-bar { width: 100%; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; } .cr-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--moon); transition: width .1s linear; } .cr-foot { position: absolute; left: 16px; right: 16px; bottom: calc(var(--safe-bottom) + 16px); display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--mut); font-size: 13px; text-align: center; } .face-first { position: relative; display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; } .face-first .note { margin: 0 2px 4px; } .face-first .btn.wide { margin: 0; } .face-first .busy { border-radius: 18px; z-index: 2; } .btn-link { align-self: center; padding: 10px 14px; color: var(--sky-ink); font-weight: 600; font-size: 15px; } /* ---------- who's in this story ---------- */ .cast-current { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .cast-face-btn { border-radius: 50%; } .chip-face.big { width: 76px; height: 76px; border: 3px solid var(--moon); } .cast-who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .cast-name { font-weight: 700; font-size: 20px; } .cover-cast-btn { background: rgba(255,255,255,.16); color: #FFF7E3; height: 34px; border-radius: 999px; } .cover-intro { font-family: var(--read); font-size: .92em; line-height: 1.35; opacity: .92; max-width: 34em; text-wrap: pretty; } .reader.spread .cover-intro { font-size: .85em; } .blurb { position: absolute; inset: 8% 6% 8% 4%; border-radius: 22px; display: flex; flex-direction: column; justify-content: center; gap: .8em; padding: 6% 7%; color: var(--ink); font-size: clamp(13px, calc(var(--pg) * .043), 21px); } .blurb .cover-title { font-weight: 700; font-size: 1.5em; line-height: 1.15; } .blurb .cover-intro { font-size: 1em; opacity: 1; } .blurb .cover-cast { justify-content: flex-start; } .blurb .cover-person .mini-face { border-color: var(--moon); } .blurb .cover-cast-btn { align-self: flex-start; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); } .blurb .cover-open { opacity: .7; } .reader.spread .cover-info { top: auto; bottom: 5%; padding: .55em 1em .6em; } .reader.closed .slot.left > .blurb { box-shadow: none; } /* ---------- family tree ---------- */ .tree { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 8px 0 20px; } .tree-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; } .tree-line { display: block; width: 2px; height: 26px; margin: 6px 0; background: linear-gradient(var(--glass-border), color-mix(in srgb, var(--moon) 50%, transparent)); border-radius: 2px; } .tree-node { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; } .tree-face { position: relative; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--moon) 70%, transparent), var(--pill-shadow); } .tree-bust { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; } .tree-bust img { width: 100%; height: 100%; object-fit: cover; } .tree-node.hero .tree-face { box-shadow: 0 0 0 3px var(--star), 0 0 18px color-mix(in srgb, var(--star) 50%, transparent); } .tree-star { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--star); color: #3A2400; display: grid; place-items: center; } .tree-star .ico { fill: currentColor; stroke: none; } .tree-name { font-weight: 600; font-size: 14px; text-align: center; line-height: 1.2; } .tree-age { font-size: 12px; color: var(--mut); margin-top: -4px; } .tree-node.add .tree-face { background: transparent; box-shadow: none; border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); color: var(--mut); } .tree-node.add .tree-name { color: var(--mut); font-weight: 500; font-size: 13px; } .tree-friends { margin-top: 26px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 16px; border-top: .5px solid var(--line); } .tree-label { margin: 0; font-weight: 600; color: var(--mut); font-size: 14px; } .family-btn .ico { stroke-width: 1.8; } /* story options */ .opts { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; } .opt-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 7%, transparent); text-align: left; font-weight: 600; } .opt-row > span { flex: 1; } .opt-row.static { flex-wrap: wrap; } /* a folded page corner, bottom right: the page wants to be turned */ .page-corner { position: absolute; z-index: 4; right: 0; bottom: 0; width: clamp(34px, calc(var(--pg) * .12), 60px); aspect-ratio: 1; pointer-events: none; background: linear-gradient(135deg, rgba(20,24,50,.55) 0 48%, transparent 48.5%), linear-gradient(135deg, transparent 50%, #E2D6B8 50%, #FFFDF6 70%, #CDBE98); filter: drop-shadow(-3px -3px 4px rgba(0,0,0,.18)); border-top-left-radius: 6px; transform-origin: 100% 100%; } .page-corner.curl { animation: curl 3.6s ease-in-out 1.2s infinite; } @keyframes curl { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.35); } 90% { transform: scale(1.1); } } .reader.spread .slot.right .page-corner { border-bottom-right-radius: 6px; } .single-face .page-corner { border-bottom-right-radius: 16px; } .leaf .page-corner { display: none; } .cover-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .blurb .cover-btns { justify-content: flex-start; } .voice-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; } .voice-chip { height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--ink) 9%, transparent); display: inline-flex; align-items: center; gap: 6px; } .voice-chip.on { background: var(--moon); color: var(--moon-ink); } .vip-tag { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--star); color: #3A2400; } /* the personalised title printed at the top of the cover, storybook style (the original app put it there) */ .cover-top-title { position: absolute; z-index: 3; left: 6%; right: 6%; top: 5%; text-align: center; font-family: var(--ui); font-weight: 700; font-size: calc(clamp(18px, calc(var(--pg) * .085), 46px) * var(--tt-k, 1)); line-height: 1.08; letter-spacing: .3px; /* like the printed books: a coloured fill (per book) with a thick white outline, a soft shadow and a little gloss */ color: var(--tc, #E8526B); -webkit-text-stroke: .16em #fff; paint-order: stroke fill; background: linear-gradient(180deg, rgba(255,255,255,.55) 0 32%, transparent 46%), var(--tc, #E8526B); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke-width: .18em; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); } .reader:not(.spread) .cover-face .cover-top-title { font-size: calc(clamp(18px, calc(var(--pg) * .08), 40px) * var(--tt-k, 1)); } .reader.spread .cover-info { display: none; } .cover-face .cover-info .cover-title { display: none; } /* the portraits read better a little bigger than a plain face */ .cover-person .mini-face.part-art { width: 2.6em; height: 2.6em; border-width: 2px; border-color: #F6E6C6; } .ep-face.part-art { width: 5.4em; height: 5.4em; border-color: #F6E6C6; } .ep-person > span:last-child { max-width: 9em; text-align: center; line-height: 1.25; } /* the personalised title on the shelf covers: up to two lines, centred on the art (spine strip excluded), clear of the ribbon */ .book-card .cover .shelf-title-art { left: 26%; right: 19%; top: 5%; font-size: clamp(14px, 7cqw, 36px); line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .book-card .cover { container-type: inline-size; } .book-card .cover .shelf-title-art.t-sm { font-size: clamp(12px, 5.9cqw, 30px); } .book-card .cover .shelf-title-art.t-xs { left: 21%; right: 14%; font-size: clamp(11px, 5cqw, 26px); } /* where the story comes from + one fun fact, under the intro */ .cover-origin { display: block; margin: .4em auto 0; max-width: 34em; padding: .55em .8em; border-radius: 12px; background: rgba(255,255,255,.07); font-size: .86em; line-height: 1.4; color: var(--mut, #c9cbe8); text-align: center; } .cover-origin b { display: block; color: var(--ink2, #FFF7E3); font-weight: 600; margin-bottom: .15em; } /* the language picker (shelf globe, story settings) */ .lang-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; } .lang-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 14px; text-align: left; font-size: 15px; font-weight: 600; background: color-mix(in srgb, var(--ink) 7%, transparent); } .lang-item.on { background: var(--moon); color: var(--moon-ink); } /* ---------- the cover's intro panel: title, intro, origin, who plays each part (edited right here), Start reading ---------- */ .top-left { display: flex; gap: 8px; justify-self: start; } .blurb { inset: auto 5% auto 2%; top: 50%; transform: translateY(-50%); max-height: calc(100% + 2 * var(--blurb-out, 0px)); display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; padding: 5% 6%; cursor: default; } .blurb-scroll { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0 -4px; padding: 0 4px; } .blurb .start-btn { margin-top: .7em; } .blurb-in { margin: auto 0; display: flex; flex-direction: column; gap: .75em; } /* centred, and still scrolls from the top when it is taller */ .blurb .cover-origin { margin: 0; text-align: left; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--mut); } .blurb .cover-origin b { color: var(--ink); } .part-head { margin: .2em 0 0; font-weight: 700; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); } .part-list { display: flex; flex-direction: column; gap: .5em; margin-top: .4em; } .part-row { display: flex; align-items: center; gap: .7em; min-height: 3.4em; padding: .35em .5em .35em .35em; border-radius: 1.1em; background: color-mix(in srgb, var(--ink) 6%, transparent); border: .5px solid var(--line); } .part-pic { display: inline-flex; border-radius: 50%; align-self: flex-start; } .part-add { display: flex; flex-direction: column; align-items: flex-start; gap: .1em; text-align: left; border-radius: 8px; } .part-face { width: 2.9em; height: 2.9em; border-width: 2px; flex: none; } .part-face:not(.part-art) { border: 2px solid var(--moon); } .part-ph { display: grid; place-items: center; border-radius: 50%; color: color-mix(in srgb, var(--ink) 55%, transparent); background: color-mix(in srgb, var(--ink) 9%, transparent); border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent) !important; } .part-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35em; line-height: 1.2; } .part-txt b { font-weight: 600; font-size: .95em; } .part-txt small { font-size: .74em; color: var(--mut); } .part-row.empty .part-txt b { color: var(--mut); } .part-btns { display: flex; flex-wrap: wrap; gap: 6px; } .part-btn { height: 2.3em; padding: 0 .85em; border-radius: 999px; font-size: .82em; gap: .35em; } .part-btn[aria-expanded="true"] { background: var(--moon); color: var(--moon-ink); } .part-pick { display: flex; flex-wrap: wrap; gap: 8px; padding: .3em .2em .4em; } .part-pick .cast-chip { width: 76px; font-size: 13px; } .part-pick .chip-face { width: 50px; height: 50px; } .start-btn { width: 100%; height: 52px; margin-top: .3em; font-size: 17px; flex: none; } .blurb .cover-btns { gap: 6px; } /* phone, closed: the same panel under the picture, on the cloth; it scrolls when the parts don't fit */ .reader:not(.spread) .cover-info { justify-content: flex-start; align-items: stretch; min-height: 0; gap: .5em; padding: 3% 5% 4%; } .cover-info .blurb-scroll { flex: 1 1 auto; scrollbar-width: none; } .cover-info .blurb-in { gap: .45em; align-items: center; } .cover-info .cover-intro { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cover-info .cover-btns { justify-content: center; } .reader:not(.spread) .cover-info .cover-origin { display: none; } .cover-info .part-head { color: rgba(255,247,227,.7); text-align: left; align-self: stretch; } .cover-info .cover-cast-edit { align-self: stretch; text-align: left; } .cover-info .part-row { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); } .cover-info .part-txt small, .cover-info .part-row.empty .part-txt b { color: rgba(255,247,227,.72); } .cover-info .part-ph { color: rgba(255,247,227,.8); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4) !important; } .cover-info .btn.ghost { color: #FFF7E3; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.18); } .cover-info .start-btn { height: 2.9em; font-size: 1.1em; margin: 0; } .theme-btn .ico { stroke-width: 2; } :root[data-theme="day"] .theme-btn { color: #B86E00; } .cover-info .btn.small { height: 2.4em; font-size: .85em; padding: 0 .9em; } /* ---------- day: a sunny sky and warm cream; nothing stays night-navy ---------- */ :root[data-theme="day"] .reader .ambient { opacity: .22; } :root[data-theme="day"] .reader .ambient::after { background: transparent; } :root[data-theme="day"] .book::before { background: radial-gradient(120% 120% at 50% 0%, #F4C978, #D99A45 72%), #D99A45; box-shadow: 0 22px 44px rgba(120,80,20,.28), inset 0 0 0 2px rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.12); } :root[data-theme="day"] .reader.spread .book::after { background: linear-gradient(90deg, rgba(90,50,0,.28), rgba(255,255,255,.2) 50%, rgba(90,50,0,.28)); } :root[data-theme="day"] .cover-face { background: #FFF4DC; } :root[data-theme="day"] .cover-info { background: radial-gradient(120% 100% at 50% 0%, #FFFBEF, #FBEBC8 80%); color: #3A2A10; } :root[data-theme="day"] .cover-info .part-head, :root[data-theme="day"] .cover-info .part-txt small, :root[data-theme="day"] .cover-info .part-row.empty .part-txt b { color: #6E5530; } :root[data-theme="day"] .cover-info .part-row { background: rgba(120,80,20,.07); border-color: rgba(120,80,20,.14); } :root[data-theme="day"] .cover-info .part-ph { color: #8A6A3A; background: rgba(120,80,20,.06); border-color: rgba(120,80,20,.35) !important; } :root[data-theme="day"] .cover-info .btn.ghost { color: #3A2A10; background: rgba(120,80,20,.09); border-color: rgba(120,80,20,.16); } :root[data-theme="day"] .reader.closed .slot.right .face, :root[data-theme="day"] .reader.closed .slot.left > .face { box-shadow: 4px 4px 0 #E3CFA2, 0 22px 40px rgba(120,80,20,.25); } :root[data-theme="day"] .endpaper:not(.drawn) { background: radial-gradient(circle at 20% 20%, rgba(255,185,56,.45) 0 2px, transparent 3px) 0 0 / 34px 34px, radial-gradient(circle at 70% 60%, rgba(31,122,224,.25) 0 2px, transparent 3px) 0 0 / 46px 46px, #FFF1D2; } :root[data-theme="day"] .endpaper-cast { color: #3A2A10; } :root[data-theme="day"] .desk { background: radial-gradient(90% 70% at 50% 0%, #BFE6FF, #FFF3D6 75%); } :root[data-theme="day"] .desk-note { color: rgba(27,42,74,.6); } /* the shelf's top bar holds four round buttons and the wordmark; on a phone they share the width */ @container app (max-width: 430px) { .library .topbar { gap: 6px; padding-left: 12px; padding-right: 12px; } .library .topbar .icon-btn { width: 40px; height: 40px; min-width: 40px; } .library .top-left, .library .top-right { gap: 6px; } .library .wordmark { font-size: 20px; } .library .wordmark .ico { width: 17px; height: 17px; } } /* the person sheet: the avatar and its buttons first, then the name, girl/boy, age */ .ps-fields .ps-actions { flex-direction: column; align-items: stretch; gap: 6px; } .ps-fields .ps-actions .btn { justify-content: flex-start; } .btn-link.small-link { align-self: flex-start; padding: 4px 2px; font-size: 13px; } .person > .seg { align-self: flex-start; } /* Face Edit wide: the preview never pushes the panel off the screen (a tall window made the stage wider than its share) */ @container app (min-width: 700px) and (orientation: landscape) { .fe-stage { min-width: 0; overflow: hidden; container-type: size; } .fe-pv { height: auto; width: min(100cqw - 24px, (100cqh - 60px) * .8, 560px); } } /* day: Face Edit wears the sunny sky too, its preview glow warm */ :root[data-theme="day"] .faceedit { background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.5), transparent 70%); } :root[data-theme="day"] .fe-pv img { filter: drop-shadow(0 10px 18px rgba(120,80,20,.22)); } :root[data-theme="day"] .fe-saving { background: rgba(255,248,230,.6); } :root[data-theme="day"] .btn-link { color: #1660B8; } /* ---------- immersive spread (Duo open, a wide full screen): the open book IS the screen ---------- left page = left half, right page = right half, the spine on the centre; no hardcover, cloth, rails or top bar; the pictures bleed to the edges (cropped square art aimed at the heads); the controls float in one glass pill */ .ctrl-pill { display: none; } .reader.immersive .topbar { display: none; } .reader.immersive .ambient { inset: 0; filter: blur(40px) saturate(1.2); } .reader.immersive .book { perspective: 2600px; } .reader.immersive .book::before, .reader.immersive .book::after { display: none; } .reader.immersive .slot .face, .reader.immersive .slot.left > .face, .reader.immersive .slot.right > .face, .reader.immersive.closed .slot.right .face { border-radius: 0; box-shadow: none; } .reader.immersive.spread .art-face > .art, .reader.immersive.spread .cover-face > .art { position: absolute; inset: auto; width: var(--side); height: var(--side); aspect-ratio: auto; left: clamp(calc(var(--pg) - var(--side)), calc(var(--pg) / 2 - var(--fx, .5) * var(--side)), 0px); top: clamp(calc(var(--ph) - var(--side)), calc(var(--ph) / 2 - var(--fy, .5) * var(--side)), 0px); } /* the gutter: paper curving into the spine, soft on both sides of the centre line */ .reader.immersive .art-face::after { width: 7%; background: linear-gradient(90deg, transparent, rgba(0,0,0,.06) 50%, rgba(0,0,0,.26)); } .reader.immersive .text-face::before { width: 9%; background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.05) 45%, transparent); } .reader.immersive .endpaper { border-radius: 0; } .reader.immersive .text-face .words { inset: 9% 11% 13% 12%; max-width: 34em; margin: 0 auto; } .reader.immersive .text-face .folio { bottom: 6%; } .reader.immersive .cover-face::before { width: 3%; } .reader.immersive .cover-face .cover-top-title { left: 8%; right: 8%; } .reader.immersive .slot.right .page-corner { border-bottom-right-radius: 0; } /* closed: the cover fills the right half; the intro panel floats in the left half over the blurred cover */ .reader.immersive .blurb { left: 7%; right: 7%; max-height: calc(100% - 2 * max(28px, var(--safe-top)) - 96px); margin-top: -28px; max-width: 30em; margin-left: auto; margin-right: auto; } .reader.immersive.closed .slot.left { background: transparent; } /* the floating controls */ .reader.immersive .ctrl-pill { position: absolute; z-index: 8; left: 50%; bottom: calc(var(--safe-bottom, 0px) + 14px); transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; white-space: nowrap; color: var(--ink); background: var(--glass-strong); transition: opacity .35s ease, transform .35s ease; } .cp-btn { height: 42px; min-width: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; font-weight: 500; font-size: 15px; } .cp-btn:hover, .ctrl-pill .theme-btn:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); } .cp-home { padding: 0 14px 0 11px; } .cp-cast { padding: 0 6px; } .cp-play.on { background: var(--moon); color: var(--moon-ink); } .cp-count { min-width: 64px; padding: 0 10px; text-align: center; font-size: 14px; color: var(--mut); border-left: .5px solid var(--line); border-right: .5px solid var(--line); line-height: 28px; } .ctrl-pill .theme-btn { width: 42px; height: 42px; min-width: 42px; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .reader.immersive.chrome-off .ctrl-pill { opacity: 0; pointer-events: none; transform: translate(-50%, 14px); } .reader.immersive .reader-foot { bottom: 64px; } .reader.immersive .reader-foot .page-dots { display: none; } .reader.immersive .name-nudge { bottom: calc(var(--safe-bottom, 0px) + 74px); } @media (prefers-reduced-motion: reduce) { .reader.immersive .ctrl-pill { transition: opacity .2s; } } /* the shelf on an open Duo: a wider grid, two columns on each side of the fold */ body.dual .library .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(var(--hinge-gap, 0px) + 26px); row-gap: 24px; padding: 0 10px; } /* the turning leaf casts a soft shadow so it reads apart from the page under it; the folded corner would sit in the screen's rounded corner, so the hint text does that job here */ .reader.immersive .leaf-front, .reader.immersive .leaf-back { box-shadow: 0 0 28px rgba(20,16,40,.28), 0 0 2px rgba(20,16,40,.25); } .reader.immersive .leaf-shade { background: linear-gradient(90deg, rgba(0,0,0,.22), transparent 45%, rgba(0,0,0,.06)); } .reader.immersive .page-corner { display: none; } /* the small pencil on a cast portrait (tap the face to make / edit that avatar) */ .ep-pic, .part-pic { position: relative; display: inline-flex; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; } .edit-badge { position: absolute; right: 2%; bottom: 2%; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #FFF3D6; color: #3A2A10; border: 2px solid #1B2142; box-shadow: 0 2px 6px rgba(0,0,0,.35); pointer-events: none; } .ep-pic .edit-badge { width: 1.7em; height: 1.7em; } .ep-pic:hover .edit-badge, .part-pic:hover .edit-badge { background: #FFE19A; } /* more below: the bottom fades and a small arrow bobs (cover panel, cast list) */ .blurb-scroll { position: relative; } .blurb-scroll.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 46px), transparent); mask-image: linear-gradient(#000 calc(100% - 46px), transparent); } .blurb:has(.blurb-scroll.more)::after { content: ""; position: absolute; left: 50%; bottom: calc(5% + 64px); width: 12px; height: 12px; margin-left: -6px; border: solid var(--moon); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); animation: bob 1.4s ease-in-out infinite; pointer-events: none; } @keyframes bob { 50% { translate: 0 4px; } } .note.fine { font-size: 12px; line-height: 1.4; opacity: .75; margin: 2px 4px 0; } /* the inside cover of an open book: the cast list on the endpaper */ .endpaper-edit { width: min(86%, 420px); max-height: 90%; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: .6em; color: #FFF7E3; cursor: default; } .endpaper-edit .part-head { margin: 0 0 .2em; } .endpaper-edit .part-row { background: rgba(10,18,52,.55); } /* liquid glass: a small, clear pill of three icons (back, play, settings) and the page number */ .reader.immersive .ctrl-pill { gap: 4px; padding: 6px; background: rgba(255,255,255,.5); backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8); border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(3,8,30,.35); } .reader.immersive .ctrl-pill .cp-btn { width: 44px; min-width: 44px; height: 44px; padding: 0; color: #1B2142; } .reader.immersive .ctrl-pill .cp-play { background: rgba(255,255,255,.75); } .reader.immersive .ctrl-pill .cp-count { min-width: 0; border: 0; color: rgba(27,33,66,.75); font-size: 13px; padding: 0 10px 0 4px; } /* Private / AI enhanced, before the photo */ .mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 4px; } .mode-card { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); } .mode-card b { font-size: 14px; } .mode-card small { grid-column: 1 / -1; font-size: 12px; line-height: 1.35; color: var(--mut); } .mode-card.on { background: color-mix(in srgb, var(--moon) 16%, transparent); box-shadow: inset 0 0 0 2px var(--moon); } /* the AI touch-up countdown */ .ai-count { position: absolute; inset: 0; display: grid; place-items: center; } .ai-ring { position: absolute; width: 112px; height: 112px; border-radius: 50%; --p: 0; background: conic-gradient(var(--moon) calc(var(--p) * 360deg), rgba(255,255,255,.18) 0); -webkit-mask: radial-gradient(circle, transparent 47px, #000 48px); mask: radial-gradient(circle, transparent 47px, #000 48px); } .ai-num { position: relative; font-size: 34px; font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); } /* Face Edit tiles: a quiet blue-grey glass instead of cream paper, so the hair and faces carry the colour */ /* the catalogue pictures are opaque JPEGs on cream: show each as a round token on a quiet blue-grey tile */ .fe-item { position: relative; background-color: rgba(120,138,180,.18) !important; background-size: 0 0 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .fe-item::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background-image: inherit; background-size: 118%; background-position: center; background-repeat: no-repeat; opacity: .96; } :root[data-theme="day"] .fe-item { background-color: rgba(60,80,120,.10) !important; } /* "look straight at the camera": on the live camera and before choosing a photo */ .cam-tip { position: absolute; z-index: 2; left: 50%; top: calc(44% + 31vw); transform: translateX(-50%); max-width: 86%; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; text-align: center; color: #fff; white-space: nowrap; } @media (min-aspect-ratio: 3/4) { .cam-tip { top: auto; bottom: calc(var(--safe-bottom) + 118px); } } .front-tip { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; background: color-mix(in srgb, var(--sky-ink) 14%, transparent); } .front-face { font-size: 22px; } /* the Face Edit portrait (head + T-shirt): the whole picture, centred, not the book-head crop */ .fe-pv img.bust { position: absolute; inset: auto; left: 50%; top: 50%; width: 150%; height: auto; max-height: 120%; object-fit: contain; transform: translate(-50%, -48%); } /* ---------- family list (replaces the tree) ---------- */ .fam-list { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 560px; margin: 8px auto 12px; } .fam-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px 10px 10px; border-radius: 18px; text-align: left; background: color-mix(in srgb, var(--ink) 6%, transparent); border: .5px solid var(--glass-border); color: var(--ink); } .fam-row:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); } .fam-face { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fff; } .fam-bust { position: absolute; inset: 0; } .fam-bust img { width: 100%; height: 100%; object-fit: cover; } .fam-row.hero .fam-face { box-shadow: 0 0 0 2.5px var(--star); } .fam-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fam-name { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fam-sub { font-size: 13px; color: var(--mut); } .fam-star { color: var(--star); display: grid; } .fam-star .ico { fill: currentColor; stroke: none; } .fam-row > .ico:last-child { color: var(--mut); flex: none; } .fam-row.add { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--ink) 28%, transparent); } .fam-row.add .fam-face { background: transparent; color: var(--mut); } .fam-row.add .fam-name { color: var(--mut); font-weight: 500; } .fam-hint { text-align: center; max-width: 560px; margin: 0 auto 16px; } .family .scroller > .welcome-note, .family .scroller > .btn.wide { max-width: 560px; margin-left: auto; margin-right: auto; } .family .scroller > .welcome-note { text-align: center; } .note.fam-hint { display: block; width: 100%; text-align: center; } .note.side-tip { margin: 0; font-size: 13px; color: var(--star); } /* "How do you say Mia?" before the Storyteller starts */ .ask-names { display: grid; gap: 18px; } .ask-name h3 { font-size: 16px; margin: 0 0 8px; } .ask-names .start-btn { justify-self: stretch; } /* ---------- the live site: a book that feels like a book ---------- A wide window: an open book lying on the sky, the page block growing on the side already read, the paper curving down into the spine (top and bottom edges dip, the gutter shades). A phone: the page IS the screen, spine on the left, the unread pages as a thin block on the right. */ .reader.open-book .slot.left > .face, .reader.open-book .slot.left .face { border-radius: 7px 34% 34% 7px / 7px 16px 16px 7px; box-shadow: var(--edges-left); } .reader.open-book .slot.right > .face, .reader.open-book .slot.right .face { border-radius: 34% 7px 7px 34% / 16px 7px 7px 16px; box-shadow: var(--edges-right); } .reader.open-book.closed .slot.right .face { border-radius: 4px 9px 9px 4px; box-shadow: var(--edges-right); } .reader.open-book .endpaper { border-radius: 7px 34% 34% 7px / 7px 16px 16px 7px; } .reader.open-book .art-face::after { width: 15%; background: linear-gradient(90deg, transparent, rgba(30,20,10,.05) 40%, rgba(30,20,10,.16) 76%, rgba(30,20,10,.38)); } .reader.open-book .text-face::before { width: 15%; background: linear-gradient(90deg, rgba(30,20,10,.34), rgba(30,20,10,.12) 26%, rgba(30,20,10,.03) 62%, transparent); } .reader.open-book .endpaper::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 15%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0,0,0,.14) 70%, rgba(0,0,0,.36)); } /* a little tooth in the paper, so it never reads as a flat fill */ .reader .text-face::after, .reader .single-face > .words::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } .reader.open-book .story-text { font-size: clamp(16px, calc(var(--pg) * .036), 27px); } /* phone, full screen */ .reader.immersive:not(.spread) .slot.left > .face, .reader.immersive:not(.spread) .leaf-front > .face { border-radius: 0; box-shadow: none; } .reader.immersive:not(.spread) .single-face::after { content: ""; position: absolute; z-index: 3; inset: 0 0 0 auto; width: var(--rest, 4px); pointer-events: none; background: repeating-linear-gradient(90deg, #CDBE98 0 1px, #F1E8D0 1px 2px); box-shadow: -3px 0 6px rgba(40,28,10,.16); } .reader.immersive:not(.spread) .single-face > .words { position: relative; padding: 5% calc(8% + var(--rest, 4px)) calc(var(--safe-bottom, 0px) + 70px) 9%; } .reader.immersive:not(.spread) .single-face .story-text { font-size: clamp(18px, calc(var(--pg) * .056), 28px); line-height: 1.5; } .reader.immersive:not(.spread) .single-face > .folio { bottom: calc(var(--safe-bottom, 0px) + 16px); } .reader.immersive:not(.spread) .ambient { display: none; } /* the pill over a page: dark glass reads on any picture and on paper alike */ @container app (max-width: 430px) { .reader.immersive .ctrl-pill .cp-btn { width: 46px; min-width: 46px; height: 46px; } } /* native touch: no double-tap zoom delay, no text selection or image callouts while reading; a press answers at once */ html { touch-action: manipulation; -webkit-text-size-adjust: 100%; } .app { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .app input, .app textarea, .app [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } .app img { -webkit-user-drag: none; } .pill:active, .btn:active, .cp-btn:active, .book-card:active .cover { transform: scale(.97); transition: transform .08s; } /* Add to Home Screen */ .install-tip { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 10px 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.35; } .install-tip .ico { flex: none; } .install-tip span { flex: 1; min-width: 0; } .install-tip .icon-btn { width: 36px; height: 36px; flex: none; } /* the words read from across a bed: bigger on a big page */ .reader.open-book .story-text { font-size: clamp(18px, calc(var(--pg) * .046), 34px); line-height: 1.5; } .reader.open-book .text-face .words { justify-content: center; } .book { -webkit-user-select: none; user-select: none; } /* the family screen on a big screen: everything on one centred column */ .family .scroller > .btn.wide { display: flex; width: 100%; } .family .scroller > .family-hint, .family .scroller > .note { text-align: center; max-width: 560px; margin-left: auto; margin-right: auto; } @container app (min-width: 700px) { .welcome-note { font-size: 18px; } } .family .fam-hint { text-align: center; } /* phone cover: the Start button sits above the floating controls */ .reader.immersive:not(.spread) .cover-info { padding-bottom: calc(var(--safe-bottom, 0px) + 74px); } /* ---------- the web's front door ---------- */ .landing .lp-top { grid-template-columns: auto 1fr auto; } .lp-scroll { padding-inline: clamp(16px, 5cqw, 64px); scrollbar-width: thin; } .lp-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 5cqw, 64px); align-items: center; max-width: 1120px; margin: clamp(8px, 4cqh, 40px) auto 0; } .lp-title { margin: 0; font-size: clamp(32px, 5.2cqw, 60px); line-height: 1.08; font-weight: 700; text-wrap: balance; color: var(--ink); } .lp-lead { margin: 16px 0 0; font-family: var(--read); font-size: clamp(17px, 1.9cqw, 22px); line-height: 1.45; color: var(--mut); max-width: 32em; } .lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .lp-cta .btn, .lp-end .btn { min-height: 52px; padding-inline: 24px; font-size: 17px; } .lp-show { position: relative; width: min(100%, 460px); justify-self: center; } .lp-cover { width: 100%; transform: rotate(1.6deg); box-shadow: 10px 22px 44px rgba(3,8,30,.5); } .lp-photo { position: absolute; left: -7%; bottom: 8%; width: 27%; aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 10px 26px rgba(3,8,30,.45); } .lp-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .lp-arrow { position: absolute; right: -14%; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--moon); color: var(--moon-ink); box-shadow: 0 4px 12px rgba(3,8,30,.4); } .lp-books, .lp-how, .lp-whys, .lp-end, .lp-foot { max-width: 1120px; margin-inline: auto; } .lp-books { margin-top: clamp(32px, 7cqh, 72px); scroll-margin-top: 8px; } .landing h2:not(.lp-title) { margin: 0; font-size: clamp(24px, 3cqw, 34px); font-weight: 700; } .lp-sub { margin: 6px 0 16px; color: var(--mut); font-size: 16px; } .lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr)); gap: 22px 16px; } .lp-grid .card-sub { display: none; } .lp-grid .badge-new { display: none; } .lp-how { margin-top: clamp(36px, 7cqh, 72px); } .lp-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 14px 0 0; } .lp-step { padding: 18px; border-radius: 20px; } .lp-step b { display: block; margin-top: 10px; font-size: 18px; } .lp-step p { margin: 6px 0 0; color: var(--mut); line-height: 1.4; font-size: 15px; } .lp-step-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--moon); color: var(--moon-ink); } .lp-whys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; } .lp-why { display: flex; gap: 10px; } .lp-why .ico { flex: none; color: var(--star); margin-top: 2px; } .lp-why b { font-size: 16px; } .lp-why p { margin: 3px 0 0; color: var(--mut); font-size: 14px; line-height: 1.4; } .lp-end { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-top: clamp(36px, 7cqh, 72px); } .lp-foot { text-align: center; margin-top: 28px; padding-bottom: 8px; font-size: 14px; } .lp-foot a { color: var(--mut); } @container app (max-width: 720px) { .lp-hero { grid-template-columns: 1fr; } .lp-show { width: min(78%, 340px); order: -1; } .lp-steps, .lp-whys { grid-template-columns: 1fr; } .lp-cta .btn { flex: 1 1 auto; } } /* Face Edit on a big screen: the whole head and whatever is on it stays on screen, and the choices get the room */ @container app (min-width: 700px) and (orientation: landscape) { .fe-pv { width: min(100cqw - 72px, (100cqh - 96px) * .8, 460px); } .fe-pv img.bust { width: 112%; max-height: 104%; transform: translate(-50%, -50%); } .fe-items { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; } } .lp-cover { container-type: inline-size; } .lp-cover .shelf-title-art { position: absolute; left: 22%; right: 16%; top: 6%; font-size: clamp(18px, 7.4cqw, 38px); line-height: 1.05; text-align: center; } /* phone Face Edit: the head a little smaller, so hair and hats stay in view above the choices */ @container app (max-width: 520px) { .fe-pv img.bust { width: 134%; transform: translate(-50%, -50%); } } /* ---------- home: the top of the shelf, and room around the books ---------- */ .home-top { margin: 8px 0 0; padding: 14px 16px 12px; border-radius: 24px; } .home-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .home-head h2 { margin: 0; font-size: clamp(20px, 2.6cqw, 28px); font-weight: 700; min-width: 0; } .home-manage { display: inline-flex; align-items: center; gap: 2px; flex: none; font-weight: 600; font-size: 15px; color: var(--mut); min-height: 44px; } .home-faces { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 8px 2px 2px; } .home-faces::-webkit-scrollbar { display: none; } .home-face { flex: none; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .home-face-pic { position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 16%, transparent); } .home-face.on .home-face-pic { box-shadow: 0 0 0 3px var(--moon); } .home-bust { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .home-bust img { width: 100%; height: 100%; object-fit: cover; } .home-face-edit { position: absolute; right: -3px; bottom: -3px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--moon); color: var(--moon-ink); } .home-face.add .home-face-pic { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 28%, transparent); } .home-face-name { max-width: 100%; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @container app (min-width: 700px) { .library .scroller { padding-inline: clamp(28px, 6cqw, 96px); } .library .topbar { padding-inline: clamp(16px, 6cqw - 12px, 84px); } .library .shelf { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 24px; } } body.dual .library .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* the language you can read, top right */ .lang-pill { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px 0 11px; font-weight: 600; font-size: 15px; white-space: nowrap; } @container app (max-width: 520px) { .lang-pill { width: 44px; padding: 0; justify-content: center; } .lang-pill span { display: none; } } /* a short page (the iPhone Duo folded, a small phone): the picture gives way so the words always fit above the controls */ .reader.immersive:not(.spread) .single-face > .face { aspect-ratio: auto; height: min(var(--pg), calc(var(--ph) * .6)); overflow: hidden; } .reader.immersive:not(.spread) .single-face > .face > .art { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); } .reader.immersive:not(.spread) .single-face .story-text { font-size: clamp(16px, min(calc(var(--pg) * .056), calc(var(--ph) * .031)), 28px); } .library .lp-hero { margin-bottom: 8px; } /* the body's skin, tinted: over the page, under the head */ .art .skin { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .reader.immersive.spread .art-face > .art .skin, .reader.immersive.spread .cover-face > .art .skin { inset: 0; } /* the front page: one child and book after the other, the photo beside its cartoon */ .lp-show { aspect-ratio: 1; } .lp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; } .lp-slide.on { opacity: 1; } .lp-slide .lp-cover { position: absolute; inset: 0; } /* purchases */ .badge-free{position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:999px;background:#fff;color:#2b2150;font:700 11px/1.5 inherit;box-shadow:0 1px 4px rgba(0,0,0,.25)} .pay-sheet{display:flex;flex-direction:column;gap:10px} .pay-lead{margin:0 0 4px;opacity:.85} .pay-plan{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 16px;text-align:start} .pay-plan b{display:block} .pay-plan small{display:block;opacity:.75;font-weight:400} .pay-plan .pay-price{white-space:nowrap;font-weight:700} .pay-link{background:none;border:0;color:inherit;text-decoration:underline;padding:10px;min-height:44px;font:inherit;cursor:pointer} .pay-fine{font-size:12px;opacity:.7;margin:4px 0 0} .pay-email{width:100%;min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid rgba(127,127,127,.5);background:transparent;color:inherit;font:inherit;box-sizing:border-box} .pay-benefits{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:4px;font-size:14px} .pay-benefits li{padding-inline-start:22px;position:relative} .pay-benefits li::before{content:'✓';position:absolute;inset-inline-start:2px;font-weight:700;opacity:.85} .cover-top-title.in-box{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.08} .book-card .cover .shelf-title-art.in-box,.lp-cover .shelf-title-art.in-box{font-size:5.6cqw} .cover-photo{position:absolute;left:5%;bottom:5%;z-index:4;width:24%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);background:#fff} .cover-photo img{width:100%;height:100%;object-fit:cover;display:block} .cat-row{display:flex;gap:8px;overflow-x:auto;padding:4px 0 14px;scrollbar-width:none} .cat-row::-webkit-scrollbar{display:none} .cat-chip{flex:none;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:inherit;font:inherit;font-size:14px;font-weight:600;cursor:pointer} .cat-chip[aria-pressed=true]{background:var(--moon,#f6edd2);color:#1a1740;border-color:transparent} .lp-private{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;font-size:14px;line-height:1.35;opacity:.8;max-width:46ch} .lp-private svg{flex:none;margin-top:2px} .reader.whole-art.immersive.spread .art-face > .art, .reader.whole-art.immersive.spread .cover-face > .art { left: 0; top: calc((var(--ph) - var(--side)) / 2); } .reader.whole-art .art-face { background: var(--paper, #fbf4e6); }