/* ============================================================================ KIDOORY — "Open Book" Create Flow (Phase 2 · v2 — single alternating spread) ---------------------------------------------------------------------------- Active ONLY when js/book-flow.js adds `.bf-on` to #s1. If the module never runs (or errors), none of this applies and the original wizard is untouched. The live-preview book is removed during creation. The create flow is one open-book spread where the QUESTION alternates sides page by page, and the facing leaf shows a faint Kidoory wax-seal page. Existing fields are MOVED in (never cloned) so all ids/listeners + generation/payment logic are untouched. ============================================================================ */ /* ---- Pre-hide wizard chrome while book-flow.js initialises (bf-loading on ) ---- */ /* Prevents the 100ms window where old wizard would briefly flash before .bf-on takes over */ html.bf-loading .wiz-progress, html.bf-loading .live-book-wrap, html.bf-loading .wiz-step{ visibility:hidden; pointer-events:none; } /* ---- Hide the old wizard chrome we're replacing ---- */ .bf-on .wiz-progress, .bf-on .live-book-wrap, .bf-on > .wiz-step, .bf-on .wiz-step{ display:none !important; } /* Cancel the .screen{margin-top:60px} when bf-on is active — bf-stage handles its own nav clearance via padding-top, so the .screen margin-top would double-count. */ #s1.bf-on{ margin-top:0 !important; } /* Reduce bottom padding — bf-stage already has its own bottom padding */ @media (max-width:760px){ #s1.bf-on{ padding-bottom:16px !important; } } /* ---- The open book ---- */ .bf-stage{ max-width:1080px; margin:0 auto 0; perspective:2400px; /* padding-top clears the fixed nav (≈72px) + comfortable breathing room */ padding:90px 16px 40px; } .bf-page{ display:none; gap:0; align-items:stretch; justify-content:center; } .bf-page.bf-active{ display:flex; animation:bfTurnIn .52s cubic-bezier(.22,.61,.36,1) both; } .bf-page.bf-active.bf-back{ animation:bfTurnInBack .52s cubic-bezier(.22,.61,.36,1) both; } @keyframes bfTurnIn{ from{ opacity:0; transform:perspective(1600px) rotateY(-18deg) translateX(20px); transform-origin:left center; } to { opacity:1; transform:perspective(1600px) rotateY(0) translateX(0); } } @keyframes bfTurnInBack{ from{ opacity:0; transform:perspective(1600px) rotateY(18deg) translateX(-20px); transform-origin:right center; } to { opacity:1; transform:perspective(1600px) rotateY(0) translateX(0); } } @media (prefers-reduced-motion:reduce){ .bf-page.bf-active{ animation:none !important; } } /* a leaf (both content + deco share the paper look) */ .bf-content, .bf-deco{ flex:1 1 0; min-height:540px; background:linear-gradient(135deg,#FFFDF8 0%,#F7F1E6 100%); position:relative; overflow:hidden; } .bf-content{ border-radius:4px 16px 16px 4px; box-shadow:0 30px 70px -28px rgba(40,28,12,.55), inset 14px 0 26px -18px rgba(80,55,20,.30); padding:40px 42px 28px; display:flex;flex-direction:column; z-index:2; } .bf-deco{ border-radius:16px 4px 4px 16px; box-shadow:0 30px 70px -30px rgba(40,28,12,.45), inset -14px 0 26px -18px rgba(80,55,20,.22); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px; z-index:1; } [data-theme=dark] .bf-content, [data-theme=dark] .bf-deco{ background:linear-gradient(135deg,#2a2218 0%,#211a12 100%); color:#F3ECDF; } /* question on the LEFT → deco on right (default flex order: content,deco) */ /* question on the RIGHT → reverse so content sits right, deco left */ .bf-page.side-right{ flex-direction:row-reverse; } .bf-page.side-right .bf-content{ border-radius:16px 4px 4px 16px; box-shadow:0 30px 70px -28px rgba(40,28,12,.55), inset -14px 0 26px -18px rgba(80,55,20,.30); } .bf-page.side-right .bf-deco{ border-radius:4px 16px 16px 4px; box-shadow:0 30px 70px -30px rgba(40,28,12,.45), inset 14px 0 26px -18px rgba(80,55,20,.22); } /* wide pages (characters) use the full spread for their tools */ .bf-page.bf-wide .bf-deco{ display:none; } .bf-page.bf-wide .bf-content{ flex:1 1 100%; border-radius:14px; padding:36px 40px 26px; } .bf-page.bf-wide .bf-pips{ display:none; } /* characters: Design-Your-Own (tier 3) on the LEFT, Photo→AI (tier 2) on the RIGHT */ .bf-on #wiz-tier-cards .wiz-tier-card[data-tier="3"]{ order:-1; } .bf-stage{ position:relative; } /* faint wax-seal art on the facing leaf */ .bf-deco-seal{ width:130px;height:130px;opacity:.16;filter:saturate(.6); } .bf-deco-word{ font-family:'Fraunces',Georgia,serif;letter-spacing:6px;font-size:13px;opacity:.32;text-transform:uppercase; } .bf-deco-line{ width:54px;height:1px;background:currentColor;opacity:.18; } .bf-deco-tag{ font-size:11px;opacity:.4;font-style:italic; } /* ---- Heading on the content leaf ---- */ .bf-head{ margin-bottom:18px; } .bf-eyebrow{ font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold,#b8862a);font-weight:600;margin-bottom:6px; } .bf-title{ font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:26px;line-height:1.2;margin:0 0 4px; } .bf-title em{ font-style:italic;color:var(--gold,#b8862a); } .bf-sub{ font-size:13.5px;line-height:1.55;opacity:.7;margin:0;max-width:40ch; } /* re-style any moved native step header to match */ .bf-content .wiz-step-hd{ margin-bottom:18px; } .bf-content .wiz-step-eyebrow{ font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold,#b8862a);font-weight:600; } .bf-content .wiz-step-title{ font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:25px;line-height:1.2;margin:4px 0; } .bf-content .wiz-step-title em{ font-style:italic;color:var(--gold,#b8862a); } .bf-body{ flex:1;display:flex;flex-direction:column;gap:16px;justify-content:flex-start; } /* magic pages: show their two cards as a clean stack/grid */ .bf-body .kdy-magic-card{ width:100%; } /* ---- Footer / page-turn controls ---- */ .bf-foot{ display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:22px;flex-wrap:wrap; } .bf-foot-actions{ display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto; } .bf-back-btn{ appearance:none;border:none;background:transparent;cursor:pointer;font-size:13px;color:inherit;opacity:.6; display:inline-flex;align-items:center;gap:6px;padding:8px 4px;transition:opacity .2s; } .bf-back-btn:hover{ opacity:1; } .bf-back-btn.bf-hide{ visibility:hidden; } .bf-btn{ appearance:none;border:none;cursor:pointer; background:linear-gradient(135deg,#d8a93f 0%,#b8862a 100%);color:#fff;font-weight:600;font-size:15px;letter-spacing:.3px; padding:13px 24px;border-radius:100px;display:inline-flex;align-items:center;gap:8px; box-shadow:0 10px 24px -10px rgba(184,134,42,.7);transition:transform .15s,box-shadow .2s,opacity .2s; } .bf-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -10px rgba(184,134,42,.85); } .bf-btn:disabled{ opacity:.4;cursor:not-allowed;transform:none;box-shadow:none; } .bf-btn-ghost{ background:transparent;color:var(--gold,#b8862a);border:1.5px solid var(--gold-lt,#e3c98a); box-shadow:none;font-weight:600; } .bf-btn-ghost:hover{ background:rgba(184,134,42,.08);box-shadow:none; } .bf-arrow{ font-size:17px; } /* progress pips (7 stages) */ .bf-pips{ display:flex;gap:7px;align-items:center;justify-content:center;margin:0 auto 4px; } .bf-pip{ width:7px;height:7px;border-radius:50%;background:rgba(120,90,40,.22);transition:all .25s; } .bf-pip.on{ background:var(--gold,#b8862a);transform:scale(1.25); } .bf-pip.done{ background:rgba(184,134,42,.55); } [data-theme=dark] .bf-pip{ background:rgba(255,255,255,.18); } /* the moved generate button keeps its native label but matches the book buttons */ .bf-foot .wiz-continue-btn, .bf-foot #wiz-final-generate{ appearance:none;border:none;cursor:pointer; background:linear-gradient(135deg,#d8a93f 0%,#b8862a 100%);color:#fff;font-weight:600;font-size:15px; padding:14px 26px;border-radius:100px;box-shadow:0 10px 24px -10px rgba(184,134,42,.7); } /* ---- Responsive ---- */ /* Compact two-pane: 761px–1100px — keep side-by-side but tighter */ @media (min-width:761px) and (max-width:1100px){ /* padding-top clears fixed nav (≈75px on tablet) + breathing room */ .bf-stage{ padding:88px 12px 32px; } .bf-content{ padding:28px 26px 20px; } .bf-content,.bf-deco{ min-height:480px; } .bf-title{ font-size:22px; } } /* Single-column stack: ≤760px (phones + portrait tablets) */ @media (max-width:760px){ /* ── Stage container ───────────────────────────────────────────── */ /* padding-top clears fixed nav (~69px) + breathing room; side padding 16px gives premium breathing room from screen edges */ .bf-stage{ padding:80px 16px 16px; } /* ── Page layout ───────────────────────────────────────────────── */ .bf-page{ flex-direction:column !important; gap:8px; } .bf-page.side-right{ flex-direction:column !important; } /* ── Content panel (the form card) ─────────────────────────────── */ .bf-content,.bf-deco{ min-height:0; border-radius:20px !important; } /* CRITICAL: override base overflow:hidden → visible so cards render. flex:none → sizes to natural content height (not 50/50 split). */ .bf-content{ box-shadow:0 16px 40px -20px rgba(40,28,12,.4) !important; padding:28px 24px 20px; overflow:visible !important; flex:none; } /* ── Tighter typography on mobile ──────────────────────────────── */ .bf-head{ margin-bottom:14px; } .bf-eyebrow{ font-size:10.5px; letter-spacing:2px; margin-bottom:5px; } .bf-title{ font-size:21px; } .bf-sub{ font-size:13px; line-height:1.5; } .bf-content .wiz-step-eyebrow{ font-size:10.5px; letter-spacing:2px; } .bf-content .wiz-step-title{ font-size:21px; } /* ── Body spacing ──────────────────────────────────────────────── */ .bf-body{ gap:12px; } /* ── Footer / navigation ───────────────────────────────────────── */ .bf-foot{ padding-top:16px; } .bf-pips{ gap:5px; margin-top:12px; margin-bottom:2px; } .bf-pip{ width:6px; height:6px; } /* ── Hide spine shadow on single-column ────────────────────────── */ .bf-page:not(.bf-wide)::after{ display:none; } /* ── Welcome-back deco: hide on mobile — data is already restored, a clipped banner looks unpremium. Desktop/tablet still shows it. ── */ .bf-deco--wb{ display:none !important; } .bf-wb-box{ max-width:100%; padding:0 4px; } .bf-wb-btns{ flex-direction:row; justify-content:center; flex-wrap:wrap; } /* ── Decorative deco (seal strip) — compact on mobile ──────────── */ .bf-deco:not(.bf-deco--wb){ min-height:0; padding:8px 12px; justify-content:center; flex-direction:row; gap:8px; flex:none; opacity:.7; } .bf-deco:not(.bf-deco--wb) .bf-deco-seal{ width:28px; height:28px; } .bf-deco:not(.bf-deco--wb) .bf-deco-word{ font-size:9px; letter-spacing:2.5px; } .bf-deco:not(.bf-deco--wb) .bf-deco-line, .bf-deco:not(.bf-deco--wb) .bf-deco-tag{ display:none; } .bf-deco:not(.bf-deco--wb) .bf-wb-link{ font-size:11px; } } /* hide original floating banners — replaced by deco-pane content on page 1 */ .bf-on #kdy-returning-bar, .bf-on #kd-welcome-back{ display:none !important; } /* Extra mobile safety — hide with higher specificity in case of timing issues */ @media (max-width:760px){ #s1.bf-on #kd-welcome-back, #s1.bf-on #kdy-returning-bar{ display:none !important; visibility:hidden !important; height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; border:none !important; } } /* welcome-back + resume link content inside the who-page deco leaf */ .bf-wb-box{ text-align:center;padding:0 20px;max-width:260px; } .bf-wb-hi{ font-family:'Fraunces',Georgia,serif;font-size:17px;font-weight:600;color:var(--ink,#1A1510);margin-bottom:6px; } .bf-wb-sub{ font-size:12.5px;opacity:.65;line-height:1.5;margin-bottom:18px; } .bf-wb-btns{ display:flex;flex-direction:column;gap:8px;margin-bottom:14px; } .bf-wb-link{ background:none;border:none;font-size:11.5px;opacity:.5;color:inherit;text-decoration:underline;cursor:pointer;padding:0;font-family:inherit;margin-top:4px; } .bf-wb-link:hover{ opacity:.8; } .bf-resume-inline{ width:100%;padding:0 16px;box-sizing:border-box;text-align:left; } .bf-resume-label{ font-size:12px;opacity:.6;margin-bottom:6px; } .bf-resume-url{ width:100%;box-sizing:border-box;padding:9px 14px;border:1.5px solid rgba(201,168,92,.4);border-radius:100px;font-size:12px;margin-bottom:8px;outline:none;background:#FFFDF8;color:var(--ink,#1A1510); } .bf-resume-url:focus{ border-color:var(--gold,#C9A85C); } [data-theme=dark] .bf-resume-url{ background:#211a12; } /* ============================================================================ PHASE 1 — preview flipbook: alternate illustration/text sides per chapter (post-generation preview; not gated by .bf-on) ============================================================================ */ .flipbook-page.fp-alt{ flex-direction:row-reverse; } .flipbook-page.fp-alt .fp-right::before{ left:auto; right:0; }