/* ============================================================ launch-studio.css — DFY Website onboarding ("Launch Studio") Pixel-for-pixel port of the signed-off Claude Design mockups (design-handoff/Website Launch Studio *.html). Values are copied verbatim from the mockups; the ONLY change is that every selector is scoped under its page id so the generic class names (.lane, .drop, .welcome, .foot, …) cannot collide with other SPA pages in app.html. Design tokens (--accent, --surface, --good, --accent-softer, …) all resolve from app-shell.css — confirmed present, no drift. ⚠️ THE LANE + DROP COMPONENT HAS A SECOND SCOPE: `.brl`. Alex, 2026-08-02: "You should be referring all design things to the website at Launchpad… I thought we had a central CSS for this or you should at least be using the same CSS as that page is using so we wouldn't have all these issues. It shouldn't be like individual editing of the design." He is right, and the page-id scoping above is exactly what stopped it: the course wizard could not reuse `.lane` / `.drop` because the rules only matched inside `#page-launch-bring-content`, so it grew its own lookalike and drifted. The scoping intent is kept — these names are still too generic to be global — but the scope is now "this page OR anything that opts in with .brl", not "this page only". ONE definition, two consumers. Restyle here and both move together. ============================================================ */ /* The Launch Studio top-bar's "Save & exit" button is flush to the right edge (page-wrap right padding is only 36px), so it collides with whichever fixed-position control lives in the top-right corner — and which one that is depends on width: • Desktop (>1024px): the "Ask AI / Help" launcher (support-widget.js) at top:14px right:20px, ~108px band. • Tablet/mobile (≤1100px): the app-shell hamburger (.hamburger-btn) at top:12px right:12px, ~56px band. (At ≤1024px the Help launcher has already dropped to the bottom-right, so only the hamburger remains up top.) Shift the top-bar actions left far enough to clear whichever applies, on every #page-launch-* screen. */ @media (min-width: 1025px) { [id^="page-launch-"] .topbar-actions { margin-right: 96px; }} @media (max-width: 1024px) { [id^="page-launch-"] .topbar-actions { margin-right: 60px; }} /* ---- Step 1 · Bring your content (#page-launch-bring-content) ---- */ /* Page container: NO own padding / max-width / centering — it inherits the platform's content column (#mainContent.page-wrap → 28px 36px 80px), so the left/top spacing from the sidebar matches the Outreach/Community pages exactly. The breadcrumb + actions row reuses the global .topbar + .page-head-crumbs design-system styles (uppercase JetBrains Mono, "/" separators) — same as Community/Outreach. Only .save-hint is page-specific. */ #page-launch-bring-content .save-hint { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; } #page-launch-bring-content .save-hint svg { width: 14px; height: 14px; color: var(--good); } #page-launch-bring-content .welcome { margin-bottom: 22px; max-width: 720px; } #page-launch-bring-content .welcome-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } #page-launch-bring-content .welcome-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } #page-launch-bring-content .welcome h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 33px; margin: 0; letter-spacing: -0.02em; line-height: 1.06; } #page-launch-bring-content .welcome h1 .accent { color: var(--accent); } #page-launch-bring-content .welcome .lede { color: var(--text-2); font-size: 15.5px; margin-top: 10px; line-height: 1.55; } #page-launch-bring-content .welcome .lede b { color: var(--text); font-weight: 600; } /* Item 5 — chosen-design banner: the template this site was built from. */ #page-launch-bring-content .chosen-design { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; margin: 0 0 20px; max-width: 720px; } #page-launch-bring-content .chosen-design .cd-thumb { width: 64px; height: 44px; border-radius: 8px; overflow: hidden; flex: 0 0 64px; position: relative; } #page-launch-bring-content .chosen-design .cd-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } #page-launch-bring-content .chosen-design .cd-meta { flex: 1; min-width: 0; } #page-launch-bring-content .chosen-design .cd-lbl { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } #page-launch-bring-content .chosen-design .cd-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; color: var(--text); margin-top: 2px; } #page-launch-bring-content .chosen-design .cd-view { font-size: 12.5px; font-weight: 600; color: var(--text-2); text-decoration: none; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; } #page-launch-bring-content .chosen-design .cd-view:hover { background: var(--surface-2); color: var(--text); } #page-launch-bring-content .chosen-design .cd-change { font-size: 12.5px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; font-family: inherit; padding: 7px 4px; } #page-launch-bring-content .chosen-design .cd-change:hover { color: var(--accent-deep); text-decoration: underline; } /* import lanes */ #page-launch-bring-content .lanes, .brl .lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } #page-launch-bring-content .lane, .brl .lane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } #page-launch-bring-content .lane.wide, .brl .lane.wide { grid-column: 1 / -1; } #page-launch-bring-content .lane-head, .brl .lane-head { padding: 18px 22px 14px; display: flex; align-items: flex-start; gap: 13px; } #page-launch-bring-content .lane-ic, .brl .lane-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-bring-content .lane-ic svg, .brl .lane-ic svg { width: 21px; height: 21px; } #page-launch-bring-content .lane-head .t, .brl .lane-head .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; } #page-launch-bring-content .lane-head .s, .brl .lane-head .s { font-size: 13px; color: var(--text-3); margin-top: 2px; line-height: 1.45; } #page-launch-bring-content .lane-head .rec, .brl .lane-head .rec { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--good); background: var(--good-soft); padding: 4px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; } #page-launch-bring-content .lane-body, .brl .lane-body { padding: 0 22px 20px; flex: 1; } /* URL field */ #page-launch-bring-content .url-row { display: flex; gap: 10px; } #page-launch-bring-content .url-input { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s; } #page-launch-bring-content .url-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } #page-launch-bring-content .url-input svg { width: 16px; height: 16px; color: var(--text-4); flex-shrink: 0; } #page-launch-bring-content .url-input input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 14.5px; color: var(--text); } #page-launch-bring-content .url-input input::placeholder { color: var(--text-4); } #page-launch-bring-content .btn-pull { background: var(--accent); color: #fff; border: none; border-radius: 11px; padding: 0 20px; font-size: 14px; font-weight: 600; white-space: nowrap; } #page-launch-bring-content .btn-pull:hover { background: var(--accent-deep); } #page-launch-bring-content .url-found { display: none; margin-top: 14px; background: var(--good-soft); border: 1px solid #c4e6d3; border-radius: 12px; padding: 13px 15px; gap: 11px; align-items: center; } #page-launch-bring-content .url-found.show { display: flex; } #page-launch-bring-content .url-found .ck { width: 30px; height: 30px; border-radius: 8px; background: var(--good); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-bring-content .url-found .ck svg { width: 16px; height: 16px; } #page-launch-bring-content .url-found .ft { flex: 1; min-width: 0; } #page-launch-bring-content .url-found .ft b { font-size: 13.5px; color: var(--good); font-weight: 700; } #page-launch-bring-content .url-found .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } #page-launch-bring-content .url-found .fc { font-size: 11px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border-soft); border-radius: 999px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 5px; } #page-launch-bring-content .url-found .fc .sw { width: 11px; height: 11px; border-radius: 3px; } /* website scan — choose what to bring in */ #page-launch-bring-content .scan-msg { margin-top: 12px; font-size: 13px; color: var(--text-2); } #page-launch-bring-content .scan-msg.ok { color: var(--good); } #page-launch-bring-content .scan-msg.err { color: var(--bad, #c0392b); } #page-launch-bring-content .scan-results { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } /* background-scan progress */ #page-launch-bring-content .scan-progress { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 18px; } #page-launch-bring-content .scan-progress-head { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); } #page-launch-bring-content .scan-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--accent-soft); border-top-color: var(--accent); animation: lsspin .8s linear infinite; flex-shrink: 0; } @keyframes lsspin { to { transform: rotate(360deg); } } #page-launch-bring-content .scan-progress-track { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 12px 0 10px; } #page-launch-bring-content .scan-progress-bar { display: block; height: 100%; width: 40%; border-radius: 999px; background: var(--accent); animation: lsbar 1.4s ease-in-out infinite; } @keyframes lsbar { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } #page-launch-bring-content .scan-progress-note { font-size: 13px; color: var(--text); font-weight: 600; } #page-launch-bring-content .scan-progress-sub { font-size: 12.5px; color: var(--text-2); margin-top: 4px; line-height: 1.5; } #page-launch-bring-content .scan-grp { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; } #page-launch-bring-content .scan-grp-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 15px; background: var(--surface-2); border: none; cursor: pointer; font-family: inherit; text-align: left; } #page-launch-bring-content .scan-grp-t { font-size: 14px; font-weight: 700; color: var(--text); } #page-launch-bring-content .scan-grp-meta { font-size: 12px; color: var(--text-4); flex: 1; } #page-launch-bring-content .scan-chev { width: 16px; height: 16px; color: var(--text-4); transition: transform .15s; } #page-launch-bring-content .scan-grp.open .scan-chev { transform: rotate(180deg); } #page-launch-bring-content .scan-grp-body { display: none; padding: 8px 15px 14px; flex-direction: column; gap: 8px; } #page-launch-bring-content .scan-grp.open .scan-grp-body { display: flex; } #page-launch-bring-content .scan-item { display: flex; gap: 11px; align-items: flex-start; padding: 10px; border: 1px solid var(--border-soft); border-radius: 10px; cursor: pointer; } #page-launch-bring-content .scan-item input.scan-pick { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; } #page-launch-bring-content .scan-item-main { flex: 1; min-width: 0; } #page-launch-bring-content .scan-item-label { font-size: 13.5px; font-weight: 600; color: var(--text); } #page-launch-bring-content .scan-item-text { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.5; } #page-launch-bring-content .scan-item-sub { font-size: 11.5px; color: var(--text-4); margin-top: 2px; } #page-launch-bring-content .scan-note { width: 100%; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-family: inherit; font-size: 12.5px; color: var(--text); background: var(--surface-2); outline: none; } #page-launch-bring-content .scan-note:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } #page-launch-bring-content .scan-extracted { color: var(--good); font-weight: 700; } #page-launch-bring-content .scan-item-label b { font-weight: 700; } /* scan save row — accent button, sensibly placed */ #page-launch-bring-content .scan-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; } #page-launch-bring-content #lsSaveSource { padding: 11px 22px; } #page-launch-bring-content #lsSaveSource:disabled { opacity: .7; cursor: default; } #page-launch-bring-content .scan-saved { font-size: 13px; color: var(--good); font-weight: 600; } /* LinkedIn / Instagram inputs */ #page-launch-bring-content .social-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; } #page-launch-bring-content .social-ic { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-4); } #page-launch-bring-content .social-ic svg { width: 22px; height: 22px; } #page-launch-bring-content .social-input { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 11px; padding: 10px 13px; font-family: inherit; font-size: 14px; color: var(--text); background: var(--surface-2); outline: none; } #page-launch-bring-content .social-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } #page-launch-bring-content .social-status { font-size: 12px; flex: 0 0 auto; max-width: 42%; line-height: 1.3; } #page-launch-bring-content .social-status.ok { color: var(--good); } #page-launch-bring-content .social-status.err { color: var(--bad, #c0392b); } #page-launch-bring-content .social-status.warn { color: #b8860b; } #page-launch-bring-content .social-status.checking { color: var(--text-2); } /* 4th panel — one notes box for everything */ #page-launch-bring-content .notes-panel { margin-top: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 18px 20px; } #page-launch-bring-content .notes-head { display: flex; gap: 12px; align-items: flex-start; } #page-launch-bring-content .notes-head .lane-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-bring-content .notes-head .lane-ic svg { width: 19px; height: 19px; } #page-launch-bring-content .notes-head .t { font-size: 16px; font-weight: 700; color: var(--text); } #page-launch-bring-content .notes-head .s { font-size: 13px; color: var(--text-2); margin-top: 3px; line-height: 1.55; } #page-launch-bring-content .notes-body { margin-top: 13px; } #page-launch-bring-content .notes-ta { width: 100%; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 14px; line-height: 1.55; color: var(--text); background: var(--surface-2); outline: none; resize: vertical; } #page-launch-bring-content .notes-ta:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } #page-launch-bring-content .notes-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; } #page-launch-bring-content .notes-saved { font-size: 13px; color: var(--good); font-weight: 600; } #page-launch-bring-content #lsNotesSave { padding: 10px 20px; } #page-launch-bring-content #lsNotesSave:disabled { opacity: .7; cursor: default; } /* "Speak instead" voice button (same look as the questions screen) */ #page-launch-bring-content .voice-btn { background: linear-gradient(135deg, #f17d6e, #e85a8a); color: #fff; border: none; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } #page-launch-bring-content .voice-btn:hover { filter: brightness(1.06); } #page-launch-bring-content .voice-btn.recording { background: #dc2626; animation: ls-dpulse 1.2s ease-in-out infinite; } #page-launch-bring-content .voice-btn svg { width: 14px; height: 14px; } /* recognition card — prove this is their site */ #page-launch-bring-content .scan-recog { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 4px; } #page-launch-bring-content .scan-recog-main { flex: 1; min-width: 0; } #page-launch-bring-content .scan-recog-title { font-size: 15px; font-weight: 700; color: var(--text); } #page-launch-bring-content .scan-recog-url { font-size: 12px; color: var(--text-4); margin-top: 2px; word-break: break-all; } #page-launch-bring-content .scan-recog-summary { font-size: 13px; color: var(--text-2); margin-top: 8px; line-height: 1.55; } #page-launch-bring-content .scan-logo { flex-shrink: 0; flex-direction: column; gap: 6px; align-items: center; padding: 10px; max-width: 150px; } #page-launch-bring-content .scan-logo img { max-width: 120px; max-height: 64px; object-fit: contain; } #page-launch-bring-content .scan-logo-cap { font-size: 11px; font-weight: 600; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; } /* selectable pills (colours / fonts / images / logo) */ #page-launch-bring-content .scan-pills, #page-launch-bring-content .scan-thumbs { display: flex; flex-wrap: wrap; gap: 10px; } #page-launch-bring-content .scan-thumbs { gap: 8px; } #page-launch-bring-content .scan-pill { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1.5px solid var(--border); border-radius: 11px; background: var(--surface-2); cursor: pointer; opacity: .55; transition: opacity .12s, border-color .12s, box-shadow .12s; } #page-launch-bring-content .scan-pill.is-on { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } #page-launch-bring-content .scan-pill .scan-pick { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } #page-launch-bring-content .scan-tick { display: none; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--accent); } #page-launch-bring-content .scan-pill.is-on .scan-tick { display: inline-flex; } #page-launch-bring-content .scan-sw { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.08); flex-shrink: 0; } #page-launch-bring-content .scan-sw-meta { display: flex; flex-direction: column; font-size: 11px; color: var(--text-4); line-height: 1.3; } #page-launch-bring-content .scan-sw-meta b { font-size: 12px; color: var(--text); } #page-launch-bring-content .scan-font-meta { display: flex; flex-direction: column; font-size: 11px; color: var(--text-4); line-height: 1.3; } #page-launch-bring-content .scan-font-meta b { font-size: 14px; color: var(--text); } #page-launch-bring-content .scan-thumb { padding: 0; overflow: hidden; width: 96px; height: 72px; } #page-launch-bring-content .scan-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } #page-launch-bring-content .scan-thumb .scan-tick { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); } /* dropzone */ #page-launch-bring-content .drop, .brl .drop { border: 1.5px dashed var(--border-strong); border-radius: 14px; background: var(--surface-2); padding: 26px 20px; text-align: center; transition: border-color .15s, background .15s; cursor: pointer; } #page-launch-bring-content .drop:hover, .brl .drop:hover { border-color: var(--accent-2); background: var(--accent-softer); } #page-launch-bring-content .drop.dragover, .brl .drop.dragover { border-color: var(--accent); background: var(--accent-soft); border-style: solid; } #page-launch-bring-content .drop .di, .brl .drop .di { width: 46px; height: 46px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; } #page-launch-bring-content .drop .di svg, .brl .drop .di svg { width: 22px; height: 22px; } #page-launch-bring-content .drop .dt, .brl .drop .dt { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; } #page-launch-bring-content .drop .dt b, .brl .drop .dt b { color: var(--accent-deep); } #page-launch-bring-content .drop .ds, .brl .drop .ds { font-size: 12px; color: var(--text-3); margin-top: 4px; } #page-launch-bring-content .file-list, .brl .file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } #page-launch-bring-content .file { display: flex; align-items: center; gap: 11px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 13px; } #page-launch-bring-content .file .fi { width: 32px; height: 32px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 600; } #page-launch-bring-content .file .fm { flex: 1; min-width: 0; } #page-launch-bring-content .file .fn { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-launch-bring-content .file .fs { font-size: 11.5px; color: var(--text-4); } #page-launch-bring-content .file .fdone { width: 20px; height: 20px; border-radius: 50%; background: var(--good); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-bring-content .file .fdone svg { width: 12px; height: 12px; } #page-launch-bring-content .file .fx { width: 26px; height: 26px; border-radius: 7px; border: none; background: transparent; color: var(--text-4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; } #page-launch-bring-content .file .fx:hover { background: var(--surface); color: var(--bad, #c0392b); } #page-launch-bring-content .file .fx svg { width: 15px; height: 15px; } /* link chips */ #page-launch-bring-content .link-grid { display: flex; flex-wrap: wrap; gap: 8px; } #page-launch-bring-content .link-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); border-radius: 10px; padding: 9px 13px; font-size: 13px; font-weight: 500; } #page-launch-bring-content .link-chip:hover { border-color: var(--accent-2); color: var(--accent-deep); background: var(--accent-softer); } #page-launch-bring-content .link-chip svg { width: 15px; height: 15px; } #page-launch-bring-content .link-chip.added { background: var(--good-soft); border-color: #c4e6d3; color: var(--good); } /* footer bar */ #page-launch-bring-content .foot { margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } #page-launch-bring-content .foot .l { font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 10px; max-width: 520px; line-height: 1.45; } #page-launch-bring-content .foot .l svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; } #page-launch-bring-content .foot .l b { color: var(--text); font-weight: 600; } #page-launch-bring-content .foot .actions { display: flex; gap: 10px; align-items: center; } #page-launch-bring-content .btn-skip { background: transparent; border: none; color: var(--text-3); font-size: 13.5px; font-weight: 500; } #page-launch-bring-content .btn-skip:hover { color: var(--text); text-decoration: underline; } #page-launch-bring-content .btn-next { background: var(--accent); color: #fff; border: none; border-radius: 11px; padding: 12px 22px; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; box-shadow: 0 10px 24px -10px rgba(106,76,241,0.6); } #page-launch-bring-content .btn-next:hover { background: var(--accent-deep); } #page-launch-bring-content .btn-next svg { width: 15px; height: 15px; } /* tiny step rail under welcome */ #page-launch-bring-content .ministep { display: inline-flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-top: 14px; } #page-launch-bring-content .ministep .seg { width: 26px; height: 4px; border-radius: 2px; background: var(--surface-3); } #page-launch-bring-content .ministep .seg.on { background: var(--accent); } @media (max-width: 820px) { #page-launch-bring-content .lanes, .brl .lanes { grid-template-columns: 1fr; } #page-launch-bring-content .url-row { flex-direction: column; } #page-launch-bring-content .btn-pull { padding: 12px; }} @media (max-width: 760px) { /* padding is inherited from the platform page-wrap (responsive there too) */ #page-launch-bring-content .welcome h1 { font-size: 26px; } #page-launch-bring-content .foot { flex-direction: column; align-items: stretch; }} /* ============================================================ Step 2 · Start here — business questions with Maya (#page-launch-phase-one). Verbatim port of the mockup workspace; chrome (breadcrumb + padding) conforms to the platform like Step 1. Keyframes namespaced (ls-*) so they can't clash globally. ============================================================ */ #page-launch-phase-one .save-hint { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; } #page-launch-phase-one .save-hint svg { width: 14px; height: 14px; color: var(--good); } #page-launch-phase-one .welcome { margin-bottom: 22px; } #page-launch-phase-one .welcome-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } #page-launch-phase-one .welcome-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } #page-launch-phase-one .welcome h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 34px; margin: 0; letter-spacing: -0.02em; line-height: 1.06; } #page-launch-phase-one .welcome h1 .accent { color: var(--accent); } #page-launch-phase-one .welcome .lede { color: var(--text-2); font-size: 15.5px; max-width: 600px; margin-top: 10px; line-height: 1.55; } #page-launch-phase-one .welcome .lede b { color: var(--text); font-weight: 600; } /* The WORKSPACE (.phase-grid / .ls-fcard / .ls-fhead / .coach-avatar / .focus-progress / .ls-fbody / .maya-intro / .q-* / .composer / .chips / .nudge / .focus-foot / .rail / .design-card / .road / .bg-strip) moved to css/guided-workspace.css, scoped to `.gw`, so the course wizard can wear the same guided layout instead of growing a second one. This page opts in by adding `gw` in showLaunchPhaseOne. */ /* ============================================================ Review Plan (#page-launch-review-plan) — verbatim port of design-handoff/Website Launch Studio Review Plan.html, scoped to the page id. The mockup's page-card header class was `.page-head`, which collides with the platform's global universal header, so the page-card family is prefixed `rp-` here (visual is identical). Chrome (sidebar/topbar) is the real shell; breadcrumb uses global .page-head-crumbs like the other Launch Studio screens. ============================================================ */ #page-launch-review-plan .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; } #page-launch-review-plan .topbar-actions { display: flex; align-items: center; gap: 10px; } #page-launch-review-plan .save-hint { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; } #page-launch-review-plan .save-hint svg { width: 14px; height: 14px; color: var(--good); } #page-launch-review-plan .welcome { margin-bottom: 22px; max-width: 720px; } #page-launch-review-plan .welcome-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } #page-launch-review-plan .welcome-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } #page-launch-review-plan .welcome h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 33px; margin: 0; letter-spacing: -0.02em; line-height: 1.06; } #page-launch-review-plan .welcome h1 .accent { color: var(--accent); } #page-launch-review-plan .welcome .lede { color: var(--text-2); font-size: 15.5px; margin-top: 10px; line-height: 1.55; } #page-launch-review-plan .welcome .lede b { color: var(--text); font-weight: 600; } #page-launch-review-plan .plan-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; align-items: start; } #page-launch-review-plan .heard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; } #page-launch-review-plan .heard-head { padding: 16px 22px 14px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, var(--accent-softer), var(--surface)); } #page-launch-review-plan .heard-head .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-review-plan .heard-head .ic svg { width: 19px; height: 19px; } #page-launch-review-plan .heard-head .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } #page-launch-review-plan .heard-head .s { font-size: 12.5px; color: var(--text-3); margin-top: 1px; } #page-launch-review-plan .heard-head .edit { margin-left: auto; } #page-launch-review-plan .heard-grid { padding: 18px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; } #page-launch-review-plan .heard-item .k { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); margin-bottom: 4px; } #page-launch-review-plan .heard-item .v { font-size: 14px; color: var(--text); line-height: 1.4; font-weight: 500; } @media (max-width: 620px) { #page-launch-review-plan .heard-grid { grid-template-columns: 1fr; }} #page-launch-review-plan .plan-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 2px 12px; } #page-launch-review-plan .plan-bar .l { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; } #page-launch-review-plan .plan-bar .r { font-size: 12.5px; color: var(--text-3); } #page-launch-review-plan .plan-bar .r b { color: var(--text-2); font-weight: 600; } #page-launch-review-plan .rp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 12px; transition: border-color .15s, box-shadow .15s; } #page-launch-review-plan .rp-card.open { box-shadow: 0 22px 50px -38px rgba(21,23,43,0.4); } #page-launch-review-plan .rp-chead { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 16px 20px; cursor: pointer; } #page-launch-review-plan .rp-chead:hover { background: var(--surface-2); } #page-launch-review-plan .rp-ico { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-2); font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; } #page-launch-review-plan .rp-card.home .rp-ico { background: var(--accent-soft); color: var(--accent-deep); } #page-launch-review-plan .rp-meta { min-width: 0; } #page-launch-review-plan .rp-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #page-launch-review-plan .tag { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.02em; } #page-launch-review-plan .tag-home { background: var(--accent-soft); color: var(--accent-deep); } #page-launch-review-plan .tag-new { background: var(--good-soft); color: var(--good); } #page-launch-review-plan .rp-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; } #page-launch-review-plan .rp-count { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--text-3); white-space: nowrap; } #page-launch-review-plan .rp-chev { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--text-3); transition: transform .25s, background .12s; } #page-launch-review-plan .rp-chead:hover .rp-chev { background: var(--surface-3); color: var(--text); } #page-launch-review-plan .rp-card.open .rp-chev { transform: rotate(180deg); } #page-launch-review-plan .rp-chev svg { width: 15px; height: 15px; } #page-launch-review-plan .rp-body { display: none; padding: 4px 20px 18px; border-top: 1px solid var(--border-soft); } #page-launch-review-plan .rp-card.open .rp-body { display: block; } #page-launch-review-plan .seo-row { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 11px 14px; margin: 14px 0 16px; } #page-launch-review-plan .seo-row .seo-ico { width: 28px; height: 28px; border-radius: 7px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; } #page-launch-review-plan .seo-row .seo-ico svg { width: 14px; height: 14px; } #page-launch-review-plan .seo-row .seo-txt { min-width: 0; } #page-launch-review-plan .seo-row .seo-ttl { font-size: 13.5px; color: #1a55c4; font-weight: 500; line-height: 1.3; } #page-launch-review-plan .seo-row .seo-desc { font-size: 12.5px; color: var(--text-3); margin-top: 2px; line-height: 1.4; } #page-launch-review-plan .sections { display: flex; flex-direction: column; gap: 2px; } #page-launch-review-plan .sec-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 9px; } #page-launch-review-plan .sec-row:hover { background: var(--surface-2); } #page-launch-review-plan .sec-num { width: 26px; height: 26px; border-radius: 7px; background: var(--surface-3); color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 11px; flex-shrink: 0; } #page-launch-review-plan .sec-meta { min-width: 0; } #page-launch-review-plan .sec-role { font-size: 11px; font-family: "JetBrains Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 500; } #page-launch-review-plan .sec-summary { font-size: 13.5px; color: var(--text-2); line-height: 1.4; margin-top: 1px; } #page-launch-review-plan .approve-bar { position: sticky; bottom: 16px; margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 50px -28px rgba(21,23,43,0.5); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } #page-launch-review-plan .approve-bar .l { font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 10px; } #page-launch-review-plan .approve-bar .l b { color: var(--text); font-weight: 600; } #page-launch-review-plan .approve-bar .l svg { width: 16px; height: 16px; color: var(--good); flex-shrink: 0; } #page-launch-review-plan .approve-bar .actions { display: flex; gap: 10px; align-items: center; } #page-launch-review-plan .btn-changes { background: transparent; border: 1px solid var(--border); color: var(--text-2); border-radius: 10px; padding: 11px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; } #page-launch-review-plan .btn-changes:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } #page-launch-review-plan .btn-approve { background: var(--accent); color: #fff; border: none; border-radius: 11px; padding: 12px 22px; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; box-shadow: 0 10px 24px -10px rgba(106,76,241,0.6); cursor: pointer; } #page-launch-review-plan .btn-approve:hover { background: var(--accent-deep); } #page-launch-review-plan .btn-approve svg { width: 15px; height: 15px; } /* ── Plan editor — section remove / undo controls (v1: section removal) ── */ #page-launch-review-plan .sec-remove { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-3); font-size: 19px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s, color .12s, border-color .12s; } #page-launch-review-plan .sec-remove:hover { background: rgba(192,57,43,0.1); color: var(--bad, #c0392b); border-color: rgba(192,57,43,0.25); } #page-launch-review-plan .sec-remove.disabled { opacity: 0.25; cursor: not-allowed; } #page-launch-review-plan .sec-kept { font-size: 10.5px; font-weight: 600; color: var(--text-3); background: var(--surface-3); border-radius: 6px; padding: 3px 8px; letter-spacing: 0.03em; flex-shrink: 0; white-space: nowrap; } #page-launch-review-plan .sec-row.sec-removed { background: var(--surface-2); opacity: 0.7; } #page-launch-review-plan .sec-row.sec-removed .sec-role s { color: var(--text-3); } #page-launch-review-plan .sec-removed-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bad, #c0392b); margin-left: 4px; } #page-launch-review-plan .sec-undo { background: transparent; border: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 8px; flex-shrink: 0; } #page-launch-review-plan .sec-undo:hover { text-decoration: underline; } #page-launch-review-plan .rp-removed-count { color: var(--bad, #c0392b); font-weight: 600; } /* ── Plan rail "Your design" — same big thumbnail as the My websites card ── */ .rp-did-shot { aspect-ratio: 16/9; position: relative; background: var(--surface-3); overflow: hidden; border-bottom: 1px solid var(--border); } .rp-did-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .rp-did-shot .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-4); font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 22px; background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); } .rp-did-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .rp-did-meta { flex: 1; min-width: 0; } .rp-did-lbl { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } .rp-did-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; color: var(--text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-did-view { font-size: 12px; font-weight: 600; color: var(--text-2); text-decoration: none; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; flex-shrink: 0; } .rp-did-view:hover { background: var(--surface-2); color: var(--text); } #page-launch-review-plan .rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 18px; } #page-launch-review-plan .design-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } #page-launch-review-plan .design-card-head { padding: 15px 18px 12px; } #page-launch-review-plan .design-card-head .ey { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; } #page-launch-review-plan .design-card-head .ti { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; } #page-launch-review-plan .design-card-head .ti .badge { font-family: "Fraunces", serif; font-style: italic; font-weight: 500; font-size: 14px; color: var(--accent-deep); } #page-launch-review-plan .mini-frame { margin: 4px 14px 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } #page-launch-review-plan .mini-bar { display: flex; align-items: center; gap: 6px; padding: 8px 11px; background: var(--surface-2); border-bottom: 1px solid var(--border-soft); } #page-launch-review-plan .mini-bar i { width: 7px; height: 7px; border-radius: 50%; } #page-launch-review-plan .mini-bar .u { flex: 1; margin-left: 6px; font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--text-4); } #page-launch-review-plan .mini-site { --s-bg:#fcfaf6; --s-ink:#1c2e22; --s-ink2:#51625a; --s-acc:#2d5d3a; background: var(--s-bg); color: var(--s-ink); font-family: "Fraunces", serif; } #page-launch-review-plan .mini-site .mn { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid rgba(28,46,34,0.08); } #page-launch-review-plan .mini-site .mn .lg { font-weight: 600; font-size: 11px; } #page-launch-review-plan .mini-site .mn .ct { background: var(--s-acc); color: #fff; font-family: "Inter",sans-serif; font-size: 7.5px; font-weight: 600; padding: 4px 8px; border-radius: 999px; } #page-launch-review-plan .mini-site .mh { padding: 22px 16px 18px; text-align: center; } #page-launch-review-plan .mini-site .mk { font-family: "Inter",sans-serif; font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-acc); font-weight: 600; margin-bottom: 9px; } #page-launch-review-plan .mini-site .mt { font-family: "Fraunces", serif; font-weight: 600; font-size: 18px; line-height: 1.12; letter-spacing: -0.01em; margin: 0 auto 9px; max-width: 15ch; } #page-launch-review-plan .mini-site .mt em { font-style: italic; color: var(--s-acc); font-weight: 500; } #page-launch-review-plan .mini-site .ml { font-family: "Inter",sans-serif; font-size: 9.5px; line-height: 1.45; color: var(--s-ink2); max-width: 30ch; margin: 0 auto 12px; } #page-launch-review-plan .mini-site .mb { display: inline-block; background: var(--s-acc); color: #fff; font-family: "Inter",sans-serif; font-size: 8.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; } #page-launch-review-plan .design-note { padding: 0 18px 16px; font-size: 12px; color: var(--text-3); line-height: 1.45; } #page-launch-review-plan .design-note b { color: var(--text-2); font-weight: 600; } #page-launch-review-plan .nav-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; } #page-launch-review-plan .nav-card .rt { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; } #page-launch-review-plan .nav-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } #page-launch-review-plan .nav-chip { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 8px; } #page-launch-review-plan .nav-arrow { color: var(--text-4); font-size: 12px; } #page-launch-review-plan .road { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; } #page-launch-review-plan .road .rt { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; } #page-launch-review-plan .road ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } #page-launch-review-plan .road li { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 9px; } #page-launch-review-plan .road li .m { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--border-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--text-4); } #page-launch-review-plan .road li .m svg { width: 12px; height: 12px; } #page-launch-review-plan .road li .nm { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--text-2); } #page-launch-review-plan .road li .st { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-4); } #page-launch-review-plan .road li.done .m { background: var(--good); border-color: var(--good); color: #fff; } #page-launch-review-plan .road li.done .nm { color: var(--text-3); } #page-launch-review-plan .road li.done .st { color: var(--good); } #page-launch-review-plan .road li.now { background: var(--accent-soft); } #page-launch-review-plan .road li.now .m { background: var(--accent); border-color: var(--accent); color: #fff; } #page-launch-review-plan .road li.now .nm { color: var(--accent-deep); font-weight: 600; } #page-launch-review-plan .road li.now .st { color: var(--accent); } #page-launch-review-plan .road li.locked { opacity: 0.7; } @media (max-width: 1080px) { #page-launch-review-plan .plan-grid { grid-template-columns: 1fr; } #page-launch-review-plan .rail { position: static; flex-direction: row; flex-wrap: wrap; } #page-launch-review-plan .design-card, #page-launch-review-plan .nav-card, #page-launch-review-plan .road { flex: 1; min-width: 280px; }} @media (max-width: 760px) { #page-launch-review-plan .welcome h1 { font-size: 26px; } #page-launch-review-plan .approve-bar { flex-direction: column; align-items: stretch; } #page-launch-review-plan .approve-bar .actions { justify-content: stretch; } #page-launch-review-plan .btn-approve { flex: 1; justify-content: center; }} @keyframes ls-spin { to { transform: rotate(360deg); } } @keyframes ls-dpulse { 0%,100%{opacity:.4} 50%{opacity:1} } @keyframes ls-shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} } /* ============================================================ Writing Copy (#page-launch-writing-copy) — verbatim port of design-handoff/Website Launch Studio Writing Copy.html, scoped to the page id. Live build-progress screen: drives off the real ai_studio run (pages done / total + current page). Keyframes namespaced (ls-spin/ls-dpulse/ls-shimmer); chrome is the real shell; breadcrumb uses global .page-head-crumbs. ============================================================ */ #page-launch-writing-copy .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; } #page-launch-writing-copy .topbar-actions { display: flex; align-items: center; gap: 10px; } #page-launch-writing-copy .save-hint { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; } #page-launch-writing-copy .save-hint svg { width: 14px; height: 14px; color: var(--good); } #page-launch-writing-copy .welcome { margin-bottom: 20px; max-width: 720px; } #page-launch-writing-copy .welcome-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } #page-launch-writing-copy .welcome-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ls-dpulse 1.5s ease-in-out infinite; } #page-launch-writing-copy .welcome h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 33px; margin: 0; letter-spacing: -0.02em; line-height: 1.06; } #page-launch-writing-copy .welcome h1 .accent { color: var(--accent); } #page-launch-writing-copy .welcome .lede { color: var(--text-2); font-size: 15.5px; margin-top: 10px; line-height: 1.55; } #page-launch-writing-copy .welcome .lede b { color: var(--text); font-weight: 600; } #page-launch-writing-copy .progress-strip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; } #page-launch-writing-copy .ps-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-writing-copy .ps-ico svg { width: 22px; height: 22px; } #page-launch-writing-copy .progress-strip.done .ps-ico { background: var(--good-soft); color: var(--good); } #page-launch-writing-copy .ps-mid { min-width: 0; } #page-launch-writing-copy .ps-label { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; } #page-launch-writing-copy .ps-now { font-size: 12.5px; color: var(--text-3); margin-top: 2px; min-height: 17px; } #page-launch-writing-copy .ps-now b { color: var(--text-2); font-weight: 600; } #page-launch-writing-copy .ps-bar { width: 100%; height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin-top: 11px; } #page-launch-writing-copy .ps-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; width: 0%; transition: width .5s cubic-bezier(.33,1.1,.5,1); } #page-launch-writing-copy .progress-strip.done .ps-bar i { background: var(--good); } #page-launch-writing-copy .ps-pct { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 26px; color: var(--accent); white-space: nowrap; } #page-launch-writing-copy .progress-strip.done .ps-pct { color: var(--good); } #page-launch-writing-copy .live-tag { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; } #page-launch-writing-copy .live-tag .d { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: ls-dpulse 1.4s ease-in-out infinite; } #page-launch-writing-copy .build-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 18px; align-items: start; } #page-launch-writing-copy .pages { display: flex; flex-direction: column; gap: 12px; } #page-launch-writing-copy .pg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .2s, box-shadow .2s, opacity .3s; } #page-launch-writing-copy .pg.writing { border-color: var(--accent-2); box-shadow: 0 22px 50px -38px rgba(106,76,241,0.5); } #page-launch-writing-copy .pg.queued { opacity: 0.6; } #page-launch-writing-copy .pg-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 15px 20px; } #page-launch-writing-copy .pg-ico { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-3); font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 14px; } #page-launch-writing-copy .pg.writing .pg-ico { background: var(--accent-soft); color: var(--accent-deep); } #page-launch-writing-copy .pg.done .pg-ico { background: var(--good-soft); color: var(--good); } #page-launch-writing-copy .pg-meta { min-width: 0; } #page-launch-writing-copy .pg-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; } #page-launch-writing-copy .pg-status { font-size: 12px; color: var(--text-3); margin-top: 2px; display: flex; align-items: center; gap: 7px; } #page-launch-writing-copy .pg-status .spin { width: 12px; height: 12px; border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: ls-spin .6s linear infinite; } #page-launch-writing-copy .pg-right { display: flex; align-items: center; gap: 10px; } #page-launch-writing-copy .pg-frac { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--text-3); white-space: nowrap; } #page-launch-writing-copy .pg-review { display: none; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; align-items: center; gap: 6px; cursor: pointer; } #page-launch-writing-copy .pg.done .pg-review { display: inline-flex; } #page-launch-writing-copy .pg-review:hover { color: var(--accent-deep); border-color: var(--accent-2); background: var(--accent-softer); } #page-launch-writing-copy .pg-review svg { width: 13px; height: 13px; } #page-launch-writing-copy .pg-check { width: 22px; height: 22px; border-radius: 50%; background: var(--good); color: #fff; display: none; align-items: center; justify-content: center; } #page-launch-writing-copy .pg.done .pg-check { display: inline-flex; } #page-launch-writing-copy .pg.done .pg-frac { display: none; } #page-launch-writing-copy .pg-check svg { width: 13px; height: 13px; } #page-launch-writing-copy .pg-secs { display: none; padding: 4px 20px 16px; border-top: 1px solid var(--border-soft); } #page-launch-writing-copy .pg.writing .pg-secs { display: block; } #page-launch-writing-copy .pg-secs .sgrid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } #page-launch-writing-copy .schip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--text-3); } #page-launch-writing-copy .schip .m { width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid var(--border-strong); } #page-launch-writing-copy .schip .m svg { width: 9px; height: 9px; } #page-launch-writing-copy .schip.done { background: var(--good-soft); border-color: #bfe6cf; color: var(--good); } #page-launch-writing-copy .schip.done .m { background: var(--good); border-color: var(--good); color: #fff; } #page-launch-writing-copy .schip.active { background: var(--accent-soft); border-color: var(--accent-2); color: var(--accent-deep); } #page-launch-writing-copy .schip.active .m { border-color: var(--accent); background: var(--accent); color:#fff; } #page-launch-writing-copy .schip.active .m .sp { width: 8px; height: 8px; border: 1.5px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 50%; animation: ls-spin .6s linear infinite; } #page-launch-writing-copy .done-banner { display: none; background: linear-gradient(110deg, #10331f 0%, #14532d 60%, #1c6b3a 100%); border-radius: var(--radius-lg); color: #fff; padding: 22px 26px; margin-bottom: 16px; align-items: center; gap: 20px; position: relative; overflow: hidden; } #page-launch-writing-copy .done-banner.show { display: flex; } #page-launch-writing-copy .done-banner::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 88% 50%, rgba(93,212,168,0.35), transparent 60%); pointer-events:none; } #page-launch-writing-copy .done-banner .ck { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: #6ee7b7; flex-shrink: 0; position: relative; z-index: 1; } #page-launch-writing-copy .done-banner .ck svg { width: 26px; height: 26px; } #page-launch-writing-copy .done-banner .info { flex: 1; position: relative; z-index: 1; } #page-launch-writing-copy .done-banner h2 { margin: 0 0 3px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -0.015em; } #page-launch-writing-copy .done-banner p { margin: 0; color: rgba(255,255,255,0.78); font-size: 13.5px; } #page-launch-writing-copy .done-banner .go { background: #fff; color: #14532d; border: none; border-radius: 11px; padding: 13px 20px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 1; white-space: nowrap; cursor: pointer; } #page-launch-writing-copy .done-banner .go svg { width: 15px; height: 15px; } #page-launch-writing-copy .rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 18px; } #page-launch-writing-copy .design-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } #page-launch-writing-copy .design-card-head { padding: 15px 18px 12px; } #page-launch-writing-copy .design-card-head .ey { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; } #page-launch-writing-copy .design-card-head .ti { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; } #page-launch-writing-copy .mini-frame { margin: 4px 14px 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; position: relative; } #page-launch-writing-copy .mini-bar { display: flex; align-items: center; gap: 6px; padding: 8px 11px; background: var(--surface-2); border-bottom: 1px solid var(--border-soft); } #page-launch-writing-copy .mini-bar i { width: 7px; height: 7px; border-radius: 50%; } #page-launch-writing-copy .mini-bar .u { flex: 1; margin-left: 6px; font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--text-4); } #page-launch-writing-copy .mini-site { --s-bg:#fcfaf6; --s-ink:#1c2e22; --s-ink2:#51625a; --s-acc:#2d5d3a; background: var(--s-bg); color: var(--s-ink); font-family: "Fraunces", serif; } #page-launch-writing-copy .mini-site .mn { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid rgba(28,46,34,0.08); } #page-launch-writing-copy .mini-site .mn .lg { font-weight: 600; font-size: 11px; } #page-launch-writing-copy .mini-site .mn .ct { background: var(--s-acc); color: #fff; font-family: "Inter",sans-serif; font-size: 7.5px; font-weight: 600; padding: 4px 8px; border-radius: 999px; } #page-launch-writing-copy .mini-site .mh { padding: 22px 16px 18px; text-align: center; } #page-launch-writing-copy .mini-site .mk { font-family: "Inter",sans-serif; font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-acc); font-weight: 600; margin-bottom: 9px; } #page-launch-writing-copy .mini-site .mt { font-family: "Fraunces", serif; font-weight: 600; font-size: 18px; line-height: 1.12; letter-spacing: -0.01em; margin: 0 auto 9px; max-width: 15ch; transition: opacity .4s; } #page-launch-writing-copy .mini-site .ml { font-family: "Inter",sans-serif; font-size: 9.5px; line-height: 1.45; color: var(--s-ink2); max-width: 30ch; margin: 0 auto 12px; transition: opacity .4s; } #page-launch-writing-copy .mini-site .mb { display: inline-block; background: var(--s-acc); color: #fff; font-family: "Inter",sans-serif; font-size: 8.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; } #page-launch-writing-copy .ph { color: transparent !important; position: relative; border-radius: 4px; background: linear-gradient(90deg, var(--surface-3) 25%, #e9e6da 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: ls-shimmer 1.4s ease infinite; } #page-launch-writing-copy .ph em { color: transparent !important; } #page-launch-writing-copy .design-foot { margin: 0 14px 16px; border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; background: var(--surface-2); display: flex; align-items: center; gap: 10px; } #page-launch-writing-copy .design-foot .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: ls-dpulse 1.4s ease-in-out infinite; } #page-launch-writing-copy .design-foot.done .pulse { background: var(--good); animation: none; } #page-launch-writing-copy .design-foot .ft { flex: 1; font-size: 12px; color: var(--text-2); line-height: 1.4; } #page-launch-writing-copy .design-foot .ft b { color: var(--text); font-weight: 600; } #page-launch-writing-copy .road { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; } #page-launch-writing-copy .road .rt { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; } #page-launch-writing-copy .road ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } #page-launch-writing-copy .road li { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 9px; } #page-launch-writing-copy .road li .m { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--border-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--text-4); } #page-launch-writing-copy .road li .m svg { width: 12px; height: 12px; } #page-launch-writing-copy .road li .nm { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--text-2); } #page-launch-writing-copy .road li .st { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-4); } #page-launch-writing-copy .road li.done .m { background: var(--good); border-color: var(--good); color: #fff; } #page-launch-writing-copy .road li.done .nm { color: var(--text-3); } #page-launch-writing-copy .road li.done .st { color: var(--good); } #page-launch-writing-copy .road li.now { background: var(--accent-soft); } #page-launch-writing-copy .road li.now .m { background: var(--accent); border-color: var(--accent); color: #fff; } #page-launch-writing-copy .road li.now .nm { color: var(--accent-deep); font-weight: 600; } #page-launch-writing-copy .road li.now .st { color: var(--accent); } #page-launch-writing-copy .road li.locked { opacity: 0.7; } #page-launch-writing-copy .reassure { font-size: 12px; color: var(--text-3); line-height: 1.5; padding: 0 4px; display: flex; gap: 9px; align-items: flex-start; } #page-launch-writing-copy .reassure svg { width: 15px; height: 15px; color: var(--good); flex-shrink: 0; margin-top: 1px; } @media (max-width: 1080px) { #page-launch-writing-copy .build-grid { grid-template-columns: 1fr; } #page-launch-writing-copy .rail { position: static; flex-direction: row; flex-wrap: wrap; } #page-launch-writing-copy .design-card, #page-launch-writing-copy .road { flex: 1; min-width: 280px; }} @media (max-width: 760px) { #page-launch-writing-copy .welcome h1 { font-size: 26px; } #page-launch-writing-copy .progress-strip { grid-template-columns: auto 1fr; } #page-launch-writing-copy .ps-pct { grid-column: 2; text-align: right; } #page-launch-writing-copy .done-banner { flex-direction: column; align-items: flex-start; }} /* ============================================================ Review Copy (#page-launch-review-copy) — verbatim port of design-handoff/Website Launch Studio Review Copy.html. Generic mockup classes are rc-prefixed so global rules (esp. `display`) can't leak in; keyframes namespaced (rc-flash / rc-micpulse); chrome is the real shell; the section canvas + Maya refine panel + finish bar are driven by the real page-sections / refine-section endpoints (no demo "alts"). ============================================================ */ #page-launch-review-copy .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; } #page-launch-review-copy .topbar-actions { display: flex; align-items: center; gap: 10px; } #page-launch-review-copy .save-hint { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; } #page-launch-review-copy .save-hint svg { width: 14px; height: 14px; color: var(--good); } #page-launch-review-copy .welcome { margin-bottom: 16px; max-width: 760px; } #page-launch-review-copy .welcome-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; display: flex; align-items: center; gap: 8px; } #page-launch-review-copy .welcome-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } #page-launch-review-copy .welcome h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 30px; margin: 0; letter-spacing: -0.02em; line-height: 1.06; } #page-launch-review-copy .welcome h1 .accent { color: var(--accent); } #page-launch-review-copy .welcome .lede { color: var(--text-2); font-size: 15px; margin-top: 8px; line-height: 1.5; } #page-launch-review-copy .welcome .lede b { color: var(--text); font-weight: 600; } @keyframes rc-flash { 0% { background: var(--accent-softer, var(--accent-soft)); } 100% { background: var(--surface); } } @media (max-width: 760px) { #page-launch-review-copy .welcome h1 { font-size: 24px; }} /* ============================================================ Top menu + Footer tabs (js/site-chrome-editor.js) The two chrome tabs sit after a divider in the same .rc-ptabs row, so they inherit the page tabs' look and only the grouping is new. Everything under .rc-chrome is the VAULT'S design language, copied from vltStyles() in js/launch-studio.js (line ~6676) so the two surfaces are one system: .vltc-card > .vltc-head > .vltc-body, .vltc-fld, .vltc-rows/.vltc-row, .vltc-switch, .vltc-pill, .vltc-add, .vltc-bar. Values and token fallbacks are the Vault's verbatim. The Vault inlines its copy because it renders as a standalone page; this one lives here and is scoped to the review-copy page so the generic vltc-* names cannot collide anywhere else. Classes the Vault does not have are scx-prefixed. ============================================================ */ /* .rc-grid is display:grid and .rc-finish is display:flex, and BOTH beat the UA stylesheet's [hidden]{display:none} /* ============================================================ Overview (#page-launch-overview) — personalise hub. Verbatim port of design-handoff/Website Launch Studio Overview.html; generic structural classes ov-prefixed so global rules can't leak; stage states + ring + counts driven by launch_processes.steps. ============================================================ */ #page-launch-overview .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; } #page-launch-overview .topbar-actions { display: flex; align-items: center; gap: 10px; } #page-launch-overview .save-hint { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; } #page-launch-overview .save-hint svg { width: 14px; height: 14px; color: var(--good); } #page-launch-overview .ov-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; margin-bottom: 22px; } #page-launch-overview .welcome-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } #page-launch-overview .welcome-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); } #page-launch-overview .ov-head h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 34px; margin: 0; letter-spacing: -0.02em; line-height: 1.05; } #page-launch-overview .ov-head h1 .accent { color: var(--accent); } #page-launch-overview .ov-head .lede { color: var(--text-2); font-size: 15.5px; margin-top: 10px; line-height: 1.55; max-width: 560px; } #page-launch-overview .ov-head .lede b { color: var(--text); font-weight: 600; } #page-launch-overview .ov-ringwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; } #page-launch-overview .ov-ring { position: relative; width: 116px; height: 116px; } #page-launch-overview .ov-ring svg { transform: rotate(-90deg); } #page-launch-overview .ov-ring .track { stroke: var(--surface-3); } #page-launch-overview .ov-ring .fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.33,1,.5,1); } #page-launch-overview .ov-ring .c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } #page-launch-overview .ov-ring .c .n { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 26px; line-height: 1; } #page-launch-overview .ov-ring .c .l { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; } #page-launch-overview .ov-ringwrap .eta { font-size: 12px; color: var(--text-3); } #page-launch-overview .ov-ringwrap .eta b { color: var(--text-2); font-weight: 600; } #page-launch-overview .ov-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; align-items: start; } #page-launch-overview .ov-stages { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } #page-launch-overview .ov-stage { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 0; position: relative; transition: border-color .15s, box-shadow .15s, transform .15s; } #page-launch-overview .ov-stage.next { border-color: var(--accent-2, var(--accent)); box-shadow: 0 26px 56px -36px rgba(106,76,241,0.5); } #page-launch-overview .stage-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; } #page-launch-overview .stage-num { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px; background: var(--surface-3); color: var(--text-3); } #page-launch-overview .ov-stage.done .stage-num { background: var(--good); color: #fff; } #page-launch-overview .ov-stage.next .stage-num { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -8px rgba(106,76,241,0.7); } #page-launch-overview .stage-num svg { width: 20px; height: 20px; } #page-launch-overview .stage-tl { flex: 1; min-width: 0; } #page-launch-overview .stage-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; } #page-launch-overview .stage-tag { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.02em; } #page-launch-overview .ov-stage.done .stage-tag { background: var(--good-soft, var(--accent-soft)); color: var(--good); } #page-launch-overview .ov-stage.next .stage-tag { background: var(--accent-soft); color: var(--accent-deep); } #page-launch-overview .ov-stage.locked .stage-tag { background: var(--surface-3); color: var(--text-3); } #page-launch-overview .stage-desc { font-size: 13.5px; color: var(--text-2); margin-top: 4px; line-height: 1.5; } #page-launch-overview .stage-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } #page-launch-overview .stage-meta { font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; } #page-launch-overview .stage-meta svg { width: 14px; height: 14px; } #page-launch-overview .ov-stage.done .stage-meta { color: var(--good); } #page-launch-overview .stage-cta { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: none; } #page-launch-overview .stage-cta.primary { background: var(--accent); color: #fff; } #page-launch-overview .stage-cta.primary:hover { background: var(--accent-deep); } #page-launch-overview .stage-cta.ghost { background: var(--surface); color: var(--text-2); border: 1px solid var(--border); } #page-launch-overview .stage-cta.ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } #page-launch-overview .stage-cta svg { width: 14px; height: 14px; } #page-launch-overview .stage-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } #page-launch-overview .scheck { font-size: 11.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 999px; padding: 5px 10px; } #page-launch-overview .scheck .d { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; } #page-launch-overview .scheck.ok .d { background: var(--good); border-color: var(--good); color: #fff; } #page-launch-overview .scheck.ok { color: var(--text-2); } #page-launch-overview .scheck .d svg { width: 8px; height: 8px; } #page-launch-overview .ov-golive { margin-top: 18px; background: linear-gradient(110deg, #15102e 0%, #221a52 60%, #2d2470 100%); border-radius: var(--radius-lg); color: #fff; padding: 20px 26px; display: flex; align-items: center; gap: 20px; position: relative; overflow: hidden; } #page-launch-overview .ov-golive::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 88% 50%, rgba(139,109,255,0.4), transparent 60%); pointer-events:none; } #page-launch-overview .ov-golive .gi { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #b07aff; flex-shrink: 0; position: relative; z-index: 1; } #page-launch-overview .ov-golive .gi svg { width: 23px; height: 23px; } #page-launch-overview .ov-golive .gt { flex: 1; position: relative; z-index: 1; } #page-launch-overview .ov-golive .gt b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; } #page-launch-overview .ov-golive .gt .s { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 2px; } #page-launch-overview .ov-golive .gt .s code { font-family: "JetBrains Mono", monospace; color: #c9bcff; } #page-launch-overview .ov-golive .gbtn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.6); border-radius: 11px; padding: 13px 20px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 1; white-space: nowrap; cursor: pointer; text-decoration: none; } #page-launch-overview .ov-golive .gbtn.ready { background: #fff; color: #15102e; border-color: #fff; cursor: pointer; } #page-launch-overview .ov-golive .gbtn svg { width: 15px; height: 15px; } #page-launch-overview .ov-rail { display: flex; flex-direction: column; gap: 16px; } #page-launch-overview .ov-design { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } #page-launch-overview .design-card-head { padding: 15px 18px 12px; } #page-launch-overview .design-card-head .ey { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; } #page-launch-overview .design-card-head .ti { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; } #page-launch-overview .design-card-head .ti .badge { font-family: "Fraunces", serif; font-style: italic; font-weight: 500; font-size: 14px; color: var(--accent-deep); } #page-launch-overview .ov-mini { margin: 4px 14px 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } #page-launch-overview .mini-bar { display: flex; align-items: center; gap: 6px; padding: 8px 11px; background: var(--surface-2); border-bottom: 1px solid var(--border-soft); } #page-launch-overview .mini-bar i { width: 7px; height: 7px; border-radius: 50%; } #page-launch-overview .mini-bar .u { flex: 1; margin-left: 6px; font-family: "JetBrains Mono", monospace; font-size: 9px; color: var(--text-4); } #page-launch-overview .ov-minisite { --s-bg:#fcfaf6; --s-ink:#1c2e22; --s-ink2:#51625a; --s-acc:#2d5d3a; background: var(--s-bg); color: var(--s-ink); font-family: "Fraunces", serif; } #page-launch-overview .ov-minisite .mn { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid rgba(28,46,34,0.08); } #page-launch-overview .ov-minisite .mn .lg { font-weight: 600; font-size: 11px; } #page-launch-overview .ov-minisite .mn .ct { background: var(--s-acc); color: #fff; font-family: "Inter",sans-serif; font-size: 7.5px; font-weight: 600; padding: 4px 8px; border-radius: 999px; } #page-launch-overview .ov-minisite .mh { padding: 22px 16px 18px; text-align: center; } #page-launch-overview .ov-minisite .mk { font-family: "Inter",sans-serif; font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-acc); font-weight: 600; margin-bottom: 9px; } #page-launch-overview .ov-minisite .mt { font-family: "Fraunces", serif; font-weight: 600; font-size: 18px; line-height: 1.12; letter-spacing: -0.01em; margin: 0 auto 9px; max-width: 15ch; } #page-launch-overview .ov-minisite .mt em { font-style: italic; color: var(--s-acc); font-weight: 500; } #page-launch-overview .ov-minisite .ml { font-family: "Inter",sans-serif; font-size: 9.5px; line-height: 1.45; color: var(--s-ink2); max-width: 30ch; margin: 0 auto 12px; } #page-launch-overview .ov-minisite .mb { display: inline-block; background: var(--s-acc); color: #fff; font-family: "Inter",sans-serif; font-size: 8.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; } #page-launch-overview .design-foot { margin: 0 14px 16px; border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; background: var(--surface-2); display: flex; align-items: center; gap: 10px; } #page-launch-overview .design-foot .ck { width: 26px; height: 26px; border-radius: 7px; background: var(--good-soft, var(--accent-soft)); color: var(--good); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-overview .design-foot .ck svg { width: 14px; height: 14px; } #page-launch-overview .design-foot .ft { flex: 1; font-size: 12px; color: var(--text-2); line-height: 1.4; } #page-launch-overview .design-foot .ft b { color: var(--text); font-weight: 600; } #page-launch-overview .ov-bg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; } #page-launch-overview .ov-bg .rt { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; display: flex; align-items: center; gap: 7px; } #page-launch-overview .ov-bg .rt .live { width: 6px; height: 6px; border-radius: 50%; background: var(--good); } #page-launch-overview .bg-list { display: flex; flex-direction: column; gap: 9px; } #page-launch-overview .bg-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); } #page-launch-overview .bg-item .ck { width: 18px; height: 18px; border-radius: 50%; background: var(--good); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-overview .bg-item .ck svg { width: 11px; height: 11px; } @media (max-width: 1080px) { #page-launch-overview .ov-grid { grid-template-columns: 1fr; } #page-launch-overview .ov-rail { flex-direction: row; flex-wrap: wrap; } #page-launch-overview .ov-design, #page-launch-overview .ov-bg { flex: 1; min-width: 280px; }} @media (max-width: 720px) { #page-launch-overview .ov-head { grid-template-columns: 1fr; } #page-launch-overview .ov-head h1 { font-size: 27px; } #page-launch-overview .ov-stages { grid-template-columns: 1fr; } #page-launch-overview .ov-golive { flex-direction: column; align-items: flex-start; }} /* ============================================================ Look (#page-launch-look) — personalise · colours & fonts. Verbatim port of design-handoff/Website Launch Studio Look.html. Conforms to the style-review.js engine: palettes map to the 4-role cssVars model {brand,accent,text,bg}; fonts to a {heading,body,...,gUrl} pair; preview updates live (client-side), selection persists on "Save & continue" via PUT /apply-styles. Structural classes lk-prefixed; preview-only mini-site classes are scoped under #page-launch-look .lk-site (id+class specificity keeps platform globals from leaking in). ============================================================ */ #page-launch-look .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; } #page-launch-look .topbar-actions { display: flex; align-items: center; gap: 10px; } #page-launch-look .save-hint { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; } #page-launch-look .save-hint svg { width: 14px; height: 14px; color: var(--good); } #page-launch-look .welcome { margin-bottom: 16px; max-width: 720px; } #page-launch-look .welcome-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; display: flex; align-items: center; gap: 8px; } #page-launch-look .welcome-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } #page-launch-look .welcome h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 30px; margin: 0; letter-spacing: -0.02em; line-height: 1.06; } #page-launch-look .welcome h1 .accent { color: var(--accent); } #page-launch-look .welcome .lede { color: var(--text-2); font-size: 15px; margin-top: 8px; line-height: 1.5; } #page-launch-look .welcome .lede b { color: var(--text); font-weight: 600; } #page-launch-look .lk-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 18px; align-items: start; } #page-launch-look .lk-preview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } #page-launch-look .lk-pvbar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); } #page-launch-look .lk-pvbar .dots { display: flex; gap: 5px; } #page-launch-look .lk-pvbar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-strong); } #page-launch-look .lk-pvbar .u { flex: 1; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; max-width: 300px; margin: 0 auto; } #page-launch-look .lk-pvbar .pages { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 2px; } #page-launch-look .lk-pvbar .pages button { border: none; background: transparent; padding: 4px 11px; font-size: 11.5px; font-weight: 600; color: var(--text-3); border-radius: 5px; font-family: "Inter", sans-serif; cursor: pointer; } #page-launch-look .lk-pvbar .pages button.on { background: var(--text); color: var(--bg); } #page-launch-look .lk-site { --m-bg:#fcfaf6; --m-text:#1c2e22; --m-text2:#51625a; --m-acc:#2d5d3a; --m-acc2:#4a8159; --m-surface:#ffffff; --m-border:rgba(0,0,0,0.08); --m-display:"Fraunces",serif; --m-body:"Inter",sans-serif; background: var(--m-bg); color: var(--m-text); font-family: var(--m-body); max-height: 70vh; overflow-y: auto; transition: background .4s, color .4s; } #page-launch-look .lk-site * { transition: background-color .35s, color .35s, border-color .35s; } #page-launch-look .lk-site .nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; border-bottom: 1px solid var(--m-border); } #page-launch-look .lk-site .logo { font-family: var(--m-display); font-weight: 600; font-size: 19px; } #page-launch-look .lk-site .links { display: flex; gap: 22px; font-size: 12.5px; color: var(--m-text2); } #page-launch-look .lk-site .navcta { background: var(--m-acc); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; } #page-launch-look .lk-site .hero { padding: 56px 32px 44px; text-align: center; max-width: 680px; margin: 0 auto; } #page-launch-look .lk-site .eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--m-acc); font-weight: 600; margin-bottom: 16px; } #page-launch-look .lk-site .h1 { font-family: var(--m-display); font-weight: 600; font-size: 46px; line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 18px; } #page-launch-look .lk-site .h1 em { font-style: italic; color: var(--m-acc); font-weight: 500; } #page-launch-look .lk-site .lede2 { font-size: 16px; line-height: 1.55; color: var(--m-text2); max-width: 480px; margin: 0 auto 26px; } #page-launch-look .lk-site .ctas { display: inline-flex; gap: 12px; } #page-launch-look .lk-site .ctas a { padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 13.5px; } #page-launch-look .lk-site .ctas .p { background: var(--m-acc); color: #fff; } #page-launch-look .lk-site .ctas .g { border: 1.5px solid var(--m-acc); color: var(--m-acc); } #page-launch-look .lk-site .feat { padding: 56px 32px; background: var(--m-surface); } #page-launch-look .lk-site .feat-h { text-align: center; margin-bottom: 36px; } #page-launch-look .lk-site .feat-h h2 { font-family: var(--m-display); font-size: 32px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 10px; } #page-launch-look .lk-site .feat-h p { font-size: 14px; color: var(--m-text2); max-width: 460px; margin: 0 auto; } #page-launch-look .lk-site .feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; max-width: 820px; margin: 0 auto; } #page-launch-look .lk-site .fc { padding: 24px 20px; background: var(--m-bg); border-radius: 14px; border: 1px solid var(--m-border); } #page-launch-look .lk-site .fc .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--m-acc); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--m-display); font-weight: 600; margin-bottom: 14px; } #page-launch-look .lk-site .fc h3 { font-family: var(--m-display); font-weight: 600; font-size: 17px; margin: 0 0 5px; } #page-launch-look .lk-site .fc p { font-size: 12.5px; color: var(--m-text2); margin: 0; line-height: 1.5; } #page-launch-look .diy-actions { display: flex; gap: 8px; margin-top: 12px; } #page-launch-look .diy-actions button { flex: 1; border-radius: 9px; padding: 9px 10px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; } #page-launch-look .diy-actions .derive { background: var(--accent); color: #fff; border: none; } #page-launch-look .diy-actions .derive:hover { background: var(--accent-deep); } #page-launch-look .diy-actions .derive svg { width: 13px; height: 13px; } #page-launch-look .diy-actions .save { background: var(--surface); color: var(--text-2); border: 1px solid var(--border); } #page-launch-look .diy-actions .save:hover { color: var(--text); border-color: var(--border-strong); } #page-launch-look .diy-fonts { display: flex; flex-direction: column; gap: 10px; } #page-launch-look .diy-fonts label { display: block; } #page-launch-look .diy-fonts .fl { font-size: 11px; font-family: "JetBrains Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; } #page-launch-look .diy-fonts select { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font-family: inherit; font-size: 13.5px; color: var(--text); outline: none; } #page-launch-look .diy-fonts select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } #page-launch-look .lk-foot { position: sticky; bottom: 14px; margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 50px -28px rgba(21,23,43,0.5); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } #page-launch-look .lk-foot .l { font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 10px; } #page-launch-look .lk-foot .l svg { width: 16px; height: 16px; color: var(--accent); } #page-launch-look .lk-foot .l b { color: var(--text); font-weight: 600; } #page-launch-look .lk-foot .actions { display: flex; gap: 10px; align-items: center; } #page-launch-look .btn-back2 { background: transparent; border: 1px solid var(--border); color: var(--text-2); border-radius: 10px; padding: 11px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; } #page-launch-look .btn-back2:hover { background: var(--surface-2); color: var(--text); } #page-launch-look .btn-cont { background: var(--accent); color: #fff; border: none; border-radius: 11px; padding: 12px 22px; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; box-shadow: 0 10px 24px -10px rgba(106,76,241,0.6); cursor: pointer; } #page-launch-look .btn-cont:hover { background: var(--accent-deep); } #page-launch-look .btn-cont[disabled] { opacity: .6; cursor: not-allowed; } #page-launch-look .btn-cont svg { width: 15px; height: 15px; } @media (max-width: 1080px) { #page-launch-look .lk-grid { grid-template-columns: 1fr; }} @media (max-width: 760px) { #page-launch-look .welcome h1 { font-size: 24px; } #page-launch-look .lk-site .h1 { font-size: 32px; } #page-launch-look .lk-site .feat-grid { grid-template-columns: 1fr; } #page-launch-look .lk-foot { flex-direction: column; align-items: stretch; }} /* ============================================================ Photos (#page-launch-photos) — personalise · images. Verbatim port of design-handoff/Website Launch Studio Photos.html, wired to the real image engine (GET /images, /builder/pexels-search, /media, POST /api/media/upload, PUT /replace-image, /image-progress). Structural classes pho-prefixed; placeholder visual is .pho-ph. ============================================================ */ #page-launch-photos .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; } #page-launch-photos .topbar-actions { display: flex; align-items: center; gap: 10px; } #page-launch-photos .save-hint { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; } #page-launch-photos .save-hint svg { width: 14px; height: 14px; color: var(--good); } #page-launch-photos .welcome { margin-bottom: 16px; max-width: 720px; } #page-launch-photos .welcome-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; display: flex; align-items: center; gap: 8px; } #page-launch-photos .welcome-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } #page-launch-photos .welcome h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 30px; margin: 0; letter-spacing: -0.02em; line-height: 1.06; } #page-launch-photos .welcome h1 .accent { color: var(--accent); } #page-launch-photos .welcome .lede { color: var(--text-2); font-size: 15px; margin-top: 8px; line-height: 1.5; } #page-launch-photos .welcome .lede b { color: var(--text); font-weight: 600; } #page-launch-photos .rcard-h { padding: 14px 18px 10px; border-bottom: 1px solid var(--border-soft); } #page-launch-photos .rcard-h .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; } #page-launch-photos .rcard-h .hint { font-size: 12px; color: var(--text-3); margin-top: 2px; } #page-launch-photos .rcard-b { padding: 12px 16px 14px; } #page-launch-photos .btn-back2 { background: transparent; border: 1px solid var(--border); color: var(--text-2); border-radius: 10px; padding: 11px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; } #page-launch-photos .btn-back2:hover { background: var(--surface-2); color: var(--text); } #page-launch-photos .btn-cont { background: var(--accent); color: #fff; border: none; border-radius: 11px; padding: 12px 22px; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; box-shadow: 0 10px 24px -10px rgba(106,76,241,0.6); cursor: pointer; } #page-launch-photos .btn-cont:hover { background: var(--accent-deep); } #page-launch-photos .btn-cont svg { width: 15px; height: 15px; } /* One save for the whole page. Committing photo by photo meant a coach could not stage a set and look at them together before deciding. */ /* ── The crop overlay (photos-v2): one model, one renderer ─────────────── */ .phov-ov { position: fixed; inset: 0; z-index: 9200; background: rgba(20,16,50,.55); display: flex; align-items: center; justify-content: center; padding: 20px; } .phov { background: #fff; border-radius: 16px; box-shadow: 0 28px 70px -22px rgba(20,16,50,.55); display: flex; flex-direction: column; max-width: min(96vw, 1040px); max-height: 94vh; overflow: hidden; } .phov-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border, #e5e2f2); } .phov-head b { font-family: "Bricolage Grotesque", sans-serif; font-size: 15px; } .phov-name { font-size: 12.5px; color: var(--text-3, #8a86a3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .phov-seg { display: flex; border: 1px solid var(--border, #e5e2f2); border-radius: 999px; overflow: hidden; } .phov-seg button { border: 0; background: none; font: inherit; font-size: 12px; padding: 5px 14px; cursor: pointer; color: var(--text-2, #55506e); } .phov-seg button.on { background: var(--accent, #6a4cf1); color: #fff; } .phov-x { border: 0; background: none; font-size: 15px; cursor: pointer; color: var(--text-3, #8a86a3); padding: 4px 8px; } /* The dim photo may spill well past the window at high zoom. It shows in a generous halo and CLIPS there — never over the overlay's own controls. */ .phov-stagewrap { padding: 44px 44px 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow: hidden; } /* The window is the photo's real box on the page. TWO layers of the same picture at the same geometry: a dim one spilling outside the window (the rest of the photo is visible fact, not inference — the job the in-frame ghost used to guess at) and a full-strength one clipped to the window (the crop exactly as the page will show it). */ .phov-stage { position: relative; overflow: visible; cursor: grab; touch-action: none; outline: 2px solid var(--accent, #6a4cf1); outline-offset: -1px; border-radius: 4px; background: var(--surface-3, #f2f0fa); } /* The STAGE owns every pointer event; the picture layers are inert, so nothing a photo spills over can have its clicks stolen (the first E2E run caught the Keep button unclickable under a 2x dim spill). */ .phov-stage img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; } .phov-stage .phov-dimimg { opacity: .26; } .phov-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .phov-note { font-size: 12px; color: var(--text-3, #8a86a3); } .phov-foot { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--border, #e5e2f2); } .phov-zoom { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-2, #55506e); } .phov-zoom input[type=range] { width: 170px; accent-color: var(--accent, #6a4cf1); } .phov-zoom b { font-family: "JetBrains Mono", monospace; font-size: 11px; min-width: 38px; text-align: right; } .phov-lnk { border: 0; background: none; font: inherit; font-size: 12px; color: var(--accent, #6a4cf1); cursor: pointer; } .phov-gap { flex: 1; } @media (max-width: 760px) { #page-launch-photos .welcome h1 { font-size: 24px; }} /* ============================================================ Polish (#page-launch-polish) — pre_publish · final details. Verbatim port of design-handoff/Website Launch Studio Polish.html, wired to real saves: contact email → discover answer (key 'email'), favicon → POST /websites/:id/favicon/generate, booking link → PUT /launch-review/:id/booking-link. Continue marks pre_publish subtasks done and goes to Preview. pol- prefixed structural classes. ============================================================ */ #page-launch-polish .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; } #page-launch-polish .topbar-actions { display: flex; align-items: center; gap: 10px; } #page-launch-polish .save-hint { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; } #page-launch-polish .save-hint svg { width: 14px; height: 14px; color: var(--good); } #page-launch-polish .welcome { margin-bottom: 18px; max-width: 720px; } #page-launch-polish .welcome-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; display: flex; align-items: center; gap: 8px; } #page-launch-polish .welcome-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } #page-launch-polish .welcome h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 30px; margin: 0; letter-spacing: -0.02em; line-height: 1.06; } #page-launch-polish .welcome h1 .accent { color: var(--accent); } #page-launch-polish .welcome .lede { color: var(--text-2); font-size: 15px; margin-top: 8px; line-height: 1.5; } #page-launch-polish .welcome .lede b { color: var(--text); font-weight: 600; } #page-launch-polish .pol-strip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 16px; } #page-launch-polish .pol-strip .pt { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; white-space: nowrap; } #page-launch-polish .pol-strip .pt b { color: var(--accent); } #page-launch-polish .pol-strip .bar { flex: 1; height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; } #page-launch-polish .pol-strip .bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; width: 0%; transition: width .4s; } #page-launch-polish .pol-strip .you { font-size: 12.5px; color: var(--text-3); white-space: nowrap; } #page-launch-polish .pol-strip .you b { color: var(--text-2); font-weight: 600; } #page-launch-polish .pol-group { margin-bottom: 18px; } #page-launch-polish .group-t { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin: 0 2px 9px; } #page-launch-polish .items { display: flex; flex-direction: column; gap: 10px; } #page-launch-polish .pol-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 10px); padding: 16px 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; transition: border-color .15s, box-shadow .15s; } #page-launch-polish .pol-item.needs { border-color: var(--warn-soft, #ecd6a8); } #page-launch-polish .pol-item .mk { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } #page-launch-polish .pol-item.done .mk { background: var(--good); color: #fff; } #page-launch-polish .pol-item.needs .mk { background: var(--warn-soft, #fbf3df); color: var(--warn, #b8860b); border: 1.5px solid #ecd6a8; } #page-launch-polish .pol-item.auto .mk { background: var(--accent-soft); color: var(--accent-deep); } #page-launch-polish .pol-item .mk svg { width: 15px; height: 15px; } #page-launch-polish .pol-item .meta { min-width: 0; } #page-launch-polish .pol-item .nm { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } #page-launch-polish .pol-item .tag { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.02em; } #page-launch-polish .pol-item.auto .tag { background: var(--accent-soft); color: var(--accent-deep); } #page-launch-polish .pol-item.done .tag { background: var(--good-soft, var(--accent-soft)); color: var(--good); } #page-launch-polish .pol-item .ds { font-size: 12.5px; color: var(--text-3); margin-top: 2px; line-height: 1.4; } #page-launch-polish .pol-item .ds .val { color: var(--text); font-weight: 500; } #page-launch-polish .pol-item .act { display: flex; align-items: center; gap: 8px; } #page-launch-polish .pol-item .ablk { display: flex; gap: 8px; align-items: center; } #page-launch-polish .pol-item .fin { width: 190px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 11px; font-family: inherit; font-size: 13px; color: var(--text); outline: none; } #page-launch-polish .pol-item .fin:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } #page-launch-polish .pol-item .bdo { background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer; } #page-launch-polish .pol-item .bdo:hover { background: var(--accent-deep); } #page-launch-polish .pol-item .bdone { background: transparent; border: none; color: var(--good); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } #page-launch-polish .pol-item .bdone svg { width: 14px; height: 14px; } @media (max-width: 720px) { #page-launch-polish .pol-item { grid-template-columns: auto 1fr; } #page-launch-polish .pol-item .act { grid-column: 2; } #page-launch-polish .pol-item .fin { width: 100%; }} #page-launch-polish .pol-golive { margin-top: 20px; background: linear-gradient(110deg, #10331f 0%, #14532d 60%, #1c6b3a 100%); border-radius: var(--radius-lg); color: #fff; padding: 22px 26px; display: flex; align-items: center; gap: 20px; position: relative; overflow: hidden; } #page-launch-polish .pol-golive::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 88% 50%, rgba(93,212,168,0.32), transparent 60%); pointer-events:none; } #page-launch-polish .pol-golive .gi { width: 48px; height: 48px; border-radius: 13px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: #6ee7b7; flex-shrink: 0; position: relative; z-index: 1; } #page-launch-polish .pol-golive .gi svg { width: 24px; height: 24px; } #page-launch-polish .pol-golive .gt { flex: 1; position: relative; z-index: 1; } #page-launch-polish .pol-golive .gt b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 17px; } #page-launch-polish .pol-golive .gt .s { font-size: 13px; color: rgba(255,255,255,0.78); margin-top: 2px; } #page-launch-polish .pol-golive .gt .s code { font-family: "JetBrains Mono", monospace; color: #b6f0cf; } #page-launch-polish .pol-golive .gbtn { background: #fff; color: #14532d; border: none; border-radius: 12px; padding: 14px 24px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 9px; position: relative; z-index: 1; white-space: nowrap; cursor: pointer; } #page-launch-polish .pol-golive .gbtn[disabled] { opacity: 0.5; cursor: not-allowed; } #page-launch-polish .pol-golive .gbtn svg { width: 16px; height: 16px; } #page-launch-polish .pol-back { margin-top: 16px; } #page-launch-polish .pol-back button { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 13.5px; font-weight: 500; font-family: inherit; } #page-launch-polish .pol-back button:hover { color: var(--accent); } @media (max-width: 760px) { #page-launch-polish .welcome h1 { font-size: 24px; } #page-launch-polish .pol-golive { flex-direction: column; align-items: flex-start; }} /* ============================================================ Preview (#page-launch-preview) — pre_publish · device preview. Central mock-site replaced by a real iframe of each page (token editor-preview route) at desktop/tablet/phone widths; jump-back links + publish CTA wire to the real screens. pv- prefixed. ============================================================ */ #page-launch-preview .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; } #page-launch-preview .topbar-actions { display: flex; align-items: center; gap: 10px; } #page-launch-preview .save-hint { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; } #page-launch-preview .save-hint svg { width: 14px; height: 14px; color: var(--good); } #page-launch-preview .welcome { margin-bottom: 16px; max-width: 760px; } #page-launch-preview .welcome-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; display: flex; align-items: center; gap: 8px; } #page-launch-preview .welcome-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } #page-launch-preview .welcome h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 30px; margin: 0; letter-spacing: -0.02em; line-height: 1.06; } #page-launch-preview .welcome h1 .accent { color: var(--accent); } #page-launch-preview .welcome .lede { color: var(--text-2); font-size: 15px; margin-top: 8px; line-height: 1.5; } #page-launch-preview .welcome .lede b { color: var(--text); font-weight: 600; } /* Stacked layout: full-width preview on top, ready/jump cards below — gives the iframe the whole content width so it reads far closer to the real site. */ #page-launch-preview .pv-stack { display: flex; flex-direction: column; gap: 18px; } #page-launch-preview .pv-below { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; align-items: start; } #page-launch-preview .pv-preview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } #page-launch-preview .pv-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); } #page-launch-preview .pv-bar .pages { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 2px; overflow-x: auto; max-width: 55%; } #page-launch-preview .pv-bar .pages button { border: none; background: transparent; padding: 4px 11px; font-size: 11.5px; font-weight: 600; color: var(--text-3); border-radius: 5px; font-family: "Inter", sans-serif; white-space: nowrap; cursor: pointer; } #page-launch-preview .pv-bar .pages button.on { background: var(--text); color: var(--bg); } #page-launch-preview .pv-bar .u { flex: 1; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--text-3); } #page-launch-preview .pv-baractions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } #page-launch-preview .pv-opentab { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--accent-soft); background: var(--accent-soft); color: var(--accent-deep, var(--accent)); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; } #page-launch-preview .pv-opentab:hover { background: var(--accent); color: #fff; border-color: var(--accent); } #page-launch-preview .pv-opentab svg { width: 13px; height: 13px; } #page-launch-preview .pv-devices { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 2px; } #page-launch-preview .pv-devices button { border: none; background: transparent; width: 30px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); border-radius: 5px; cursor: pointer; } #page-launch-preview .pv-devices button.on { background: var(--text); color: var(--bg); } #page-launch-preview .pv-devices svg { width: 13px; height: 13px; } #page-launch-preview .pv-framewrap { background: var(--surface-3); padding: 22px; display: flex; justify-content: center; } #page-launch-preview .pv-frame { width: 100%; max-width: 100%; min-width: 0; height: 70vh; transition: max-width .35s ease; background: #fff; border: none; border-radius: 12px; box-shadow: 0 20px 50px -24px rgba(0,0,0,0.25); } #page-launch-preview .pv-framewrap.tablet .pv-frame { max-width: 640px; } #page-launch-preview .pv-framewrap.phone .pv-frame { max-width: 360px; } #page-launch-preview .pv-hint { display: flex; align-items: flex-start; gap: 9px; padding: 11px 16px; border-top: 1px solid var(--border-soft); background: var(--surface-2); font-size: 12.5px; line-height: 1.5; color: var(--text-2); } #page-launch-preview .pv-hint svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--text-3); } #page-launch-preview .pv-hint b { color: var(--text); } #page-launch-preview .pv-rail { display: flex; flex-direction: column; gap: 14px; } #page-launch-preview .pv-ready { background: linear-gradient(180deg, var(--accent-softer, var(--accent-soft)), var(--surface)); border: 1px solid var(--accent-soft); border-radius: var(--radius-lg); padding: 18px 20px; } #page-launch-preview .pv-ready h3 { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } #page-launch-preview .pv-ready .s { font-size: 13px; color: var(--text-2); margin-top: 4px; line-height: 1.5; } #page-launch-preview .pv-ready ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } #page-launch-preview .pv-ready li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); } #page-launch-preview .pv-ready li .ck { width: 19px; height: 19px; border-radius: 50%; background: var(--good); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-preview .pv-ready li .ck svg { width: 11px; height: 11px; } #page-launch-preview .pv-pub { margin-top: 16px; width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 12px; padding: 14px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 12px 26px -10px rgba(106,76,241,0.6); cursor: pointer; } #page-launch-preview .pv-pub:hover { background: var(--accent-deep); } #page-launch-preview .pv-pub svg { width: 16px; height: 16px; } #page-launch-preview .pv-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; } #page-launch-preview .pv-actions .pv-pub { margin-top: 0; } #page-launch-preview .pv-edit { width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong, var(--border)); border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 600; font-family: "Inter", sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; } #page-launch-preview .pv-edit:hover { background: var(--surface-2); } #page-launch-preview .pv-edit.on { border-color: var(--accent); color: var(--accent-deep, var(--accent)); background: var(--accent-soft); } #page-launch-preview .pv-edit svg { width: 15px; height: 15px; } #page-launch-preview .pv-editlist { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); } #page-launch-preview .pel-h { padding: 11px 14px; font-size: 12px; line-height: 1.5; color: var(--text-2); background: var(--surface-2); border-bottom: 1px solid var(--border-soft); } #page-launch-preview .pel-h b { color: var(--text); } #page-launch-preview .pel-rows { padding: 6px; display: flex; flex-direction: column; gap: 2px; } #page-launch-preview .pel-row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border: none; background: transparent; border-radius: 9px; cursor: pointer; text-align: left; font-family: "Inter", sans-serif; } #page-launch-preview .pel-row:hover { background: var(--surface-2); } #page-launch-preview .pel-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-3); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-preview .pel-ic svg { width: 14px; height: 14px; } #page-launch-preview .pel-nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-launch-preview .pel-go { font-size: 12px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } #page-launch-preview .pel-go svg { width: 12px; height: 12px; } #page-launch-preview .pv-reassure { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 12px 13px; background: var(--good-soft, rgba(52,168,83,0.08)); border: 1px solid var(--good-soft, rgba(52,168,83,0.18)); border-radius: 10px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); } #page-launch-preview .pv-reassure svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--good); } #page-launch-preview .pv-reassure b { color: var(--text); } #page-launch-preview .pv-jump { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } #page-launch-preview .jump-h { padding: 15px 18px 11px; } #page-launch-preview .jump-h .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } #page-launch-preview .jump-h .s { font-size: 12px; color: var(--text-3); margin-top: 2px; } #page-launch-preview .jump-list { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 2px; } #page-launch-preview .jrow { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 9px; cursor: pointer; } #page-launch-preview .jrow:hover { background: var(--surface-2); } #page-launch-preview .jrow .ji { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-3); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-preview .jrow .ji svg { width: 15px; height: 15px; } #page-launch-preview .jrow .jm { flex: 1; min-width: 0; } #page-launch-preview .jrow .jn { font-size: 13.5px; font-weight: 600; color: var(--text); } #page-launch-preview .jrow .jd { font-size: 11.5px; color: var(--text-3); margin-top: 1px; } #page-launch-preview .jrow .jgo { font-size: 12px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } #page-launch-preview .jrow .jgo svg { width: 12px; height: 12px; } @media (max-width: 1080px) { #page-launch-preview .pv-below { grid-template-columns: 1fr; }} @media (max-width: 620px) { #page-launch-preview .pv-bar .u { display: none; }} @media (max-width: 760px) { #page-launch-preview .welcome h1 { font-size: 24px; }} /* ============================================================ Publish (#page-launch-publish) — go_live. Free domain = auto-subdomain then POST /launch-review/:id/publish; setup → publishing → success states. pub2-card prefix; pub-bar/pub-btn kept. ============================================================ */ #page-launch-publish .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; } #page-launch-publish .topbar-actions { display: flex; align-items: center; gap: 10px; } #page-launch-publish .save-hint { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; } #page-launch-publish .save-hint svg { width: 14px; height: 14px; color: var(--good); } #page-launch-publish .welcome { margin-bottom: 22px; text-align: center; } #page-launch-publish .welcome-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; } #page-launch-publish .welcome-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } #page-launch-publish .welcome h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 34px; margin: 0; letter-spacing: -0.02em; line-height: 1.05; } #page-launch-publish .welcome h1 .accent { color: var(--accent); } #page-launch-publish .welcome .lede { color: var(--text-2); font-size: 15.5px; margin: 10px auto 0; line-height: 1.55; max-width: 540px; } #page-launch-publish .pub2-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; overflow: hidden; } #page-launch-publish .pub2-card + .pub2-card { margin-top: 14px; } #page-launch-publish .card-h { padding: 16px 22px 13px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 11px; } #page-launch-publish .card-h .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-publish .card-h .ic svg { width: 17px; height: 17px; } #page-launch-publish .card-h .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } #page-launch-publish .card-h .s { font-size: 12.5px; color: var(--text-3); margin-top: 1px; } #page-launch-publish .card-b { padding: 18px 22px; } #page-launch-publish .dopt { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s; } #page-launch-publish .dopt + .dopt { margin-top: 10px; } #page-launch-publish .dopt.on { border-color: var(--accent); background: var(--accent-softer, var(--accent-soft)); box-shadow: 0 0 0 3px var(--accent-soft); } #page-launch-publish .dopt .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); flex-shrink: 0; position: relative; } #page-launch-publish .dopt.on .radio { border-color: var(--accent); } #page-launch-publish .dopt.on .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); } #page-launch-publish .dopt .dm .dn { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 9px; } #page-launch-publish .dopt .dm .dn .free { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 600; background: var(--good-soft, var(--accent-soft)); color: var(--good); padding: 2px 8px; border-radius: 999px; } #page-launch-publish .dopt .dm .dd { font-size: 12.5px; color: var(--text-3); margin-top: 2px; } #page-launch-publish .dopt .url { font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--accent-deep); white-space: nowrap; } #page-launch-publish .custom-field { margin-top: 12px; display: none; gap: 10px; } #page-launch-publish .custom-field.show { display: flex; } #page-launch-publish .custom-field input { flex: 1; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 13px; font-family: inherit; font-size: 14px; color: var(--text); outline: none; } #page-launch-publish .custom-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } #page-launch-publish .custom-field button { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); border-radius: 10px; padding: 0 16px; font-size: 13px; font-weight: 600; cursor: pointer; } #page-launch-publish .pf { display: flex; flex-direction: column; gap: 9px; } #page-launch-publish .pf .r { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--text-2); } #page-launch-publish .pf .r .ck { width: 20px; height: 20px; border-radius: 50%; background: var(--good); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-publish .pf .r .ck svg { width: 12px; height: 12px; } #page-launch-publish .pf .r b { color: var(--text); font-weight: 600; } #page-launch-publish .pub-bar { margin-top: 18px; background: linear-gradient(110deg, #15102e 0%, #221a52 60%, #2d2470 100%); border-radius: var(--radius-lg); color: #fff; padding: 22px 26px; display: flex; align-items: center; gap: 20px; position: relative; overflow: hidden; } #page-launch-publish .pub-bar::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 88% 50%, rgba(139,109,255,0.4), transparent 60%); pointer-events:none; } #page-launch-publish .pub-bar .pt { flex: 1; position: relative; z-index: 1; } #page-launch-publish .pub-bar .pt b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 17px; } #page-launch-publish .pub-bar .pt .s { font-size: 13px; color: rgba(255,255,255,0.72); margin-top: 2px; } #page-launch-publish .pub-bar .pt .s code { font-family: "JetBrains Mono", monospace; color: #c9bcff; } #page-launch-publish .pub-btn { background: linear-gradient(135deg, #b07aff, #6a4cf1); color: #fff; border: none; border-radius: 12px; padding: 15px 26px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 9px; position: relative; z-index: 1; white-space: nowrap; box-shadow: 0 12px 28px -10px rgba(106,76,241,0.8); cursor: pointer; } #page-launch-publish .pub-btn:hover { filter: brightness(1.06); } #page-launch-publish .pub-btn[disabled] { opacity: .6; cursor: not-allowed; } #page-launch-publish .pub-btn svg { width: 16px; height: 16px; } #page-launch-publish .backrow { margin-top: 16px; text-align: center; } #page-launch-publish .backrow button { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 13.5px; font-weight: 500; font-family: inherit; } #page-launch-publish .backrow button:hover { color: var(--accent); } #page-launch-publish .stage-box { display: none; text-align: center; padding: 40px 26px; } #page-launch-publish .stage-box.show { display: block; } #page-launch-publish .spinner { width: 48px; height: 48px; border: 4px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: ls-spin .8s linear infinite; margin: 0 auto 18px; } #page-launch-publish .pub-steps { max-width: 360px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 10px; } #page-launch-publish .pub-steps .ps { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--text-3); transition: color .3s; } #page-launch-publish .pub-steps .ps.done { color: var(--text); } #page-launch-publish .pub-steps .ps .m { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-launch-publish .pub-steps .ps.done .m { background: var(--good); border-color: var(--good); color: #fff; } #page-launch-publish .pub-steps .ps.done .m svg { width: 11px; height: 11px; } #page-launch-publish .success .seal { width: 76px; height: 76px; border-radius: 50%; background: var(--good-soft, var(--accent-soft)); color: var(--good); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } #page-launch-publish .success .seal svg { width: 38px; height: 38px; } #page-launch-publish .success h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 28px; margin: 0 0 8px; letter-spacing: -0.02em; } #page-launch-publish .success p { color: var(--text-2); font-size: 15px; margin: 0 auto 6px; max-width: 440px; line-height: 1.55; } #page-launch-publish .success .live-url { display: inline-flex; align-items: center; gap: 9px; margin: 16px 0 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; font-family: "JetBrains Mono", monospace; font-size: 13.5px; color: var(--accent-deep); } #page-launch-publish .success .live-url .d { width: 8px; height: 8px; border-radius: 50%; background: var(--good); } #page-launch-publish .success .acts { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } #page-launch-publish .success .acts a, #page-launch-publish .success .acts button { border-radius: 11px; padding: 12px 20px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none; text-decoration: none; } #page-launch-publish .success .acts .primary { background: var(--accent); color: #fff; } #page-launch-publish .success .acts .primary:hover { background: var(--accent-deep); } #page-launch-publish .success .acts .ghost { background: var(--surface); color: var(--text-2); border: 1px solid var(--border); } #page-launch-publish .success .acts .ghost:hover { background: var(--surface-2); color: var(--text); } #page-launch-publish .success .acts svg { width: 15px; height: 15px; } @media (max-width: 680px) { #page-launch-publish .welcome h1 { font-size: 26px; } #page-launch-publish .pub-bar { flex-direction: column; align-items: stretch; text-align: center; }} /* ============================================================ Manage (#page-launch-manage) — post-publish dashboard. Live banner + real stats (per-page analytics) + edit cards that reopen each step + republish note (publish-status pendingChanges). Port of the Manage mockup. mg- prefixed structural classes. ============================================================ */ #page-launch-manage .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; } #page-launch-manage .topbar-actions { display: flex; align-items: center; gap: 10px; } #page-launch-manage .sec-h { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; margin: 0 2px 12px; } #page-launch-manage .sec-h .s { font-weight: 400; font-size: 13px; color: var(--text-3); font-family: "Inter", sans-serif; margin-left: 8px; } /* ============================================================ Sites hub (#page-launch-sites) — "My websites". Lists the customer's funnels_websites (resume in-progress / manage live / add). Port of the Sites mockup. st- prefixed structural classes. ============================================================ */ #page-launch-sites .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; } #page-launch-sites .crumbs { color: var(--text-3); font-size: 13px; } /* The CARD GRID (.st-head / .st-add / .st-sites / .st-card / .st-shot / .st-cbody / .st-prog / .st-acts / .st-addcard / .st-empty) moved to css/site-cards.css, scoped to `.st-grid`, so the Courses list can wear the same cards instead of growing a second set. This page opts in by adding `st-grid` in showLaunchSites. */ /* ============================================================ Gallery (#page-launch-gallery) — "Choose a design". Renders the real STARTER_TEMPLATES with /templates/thumbs/.jpg, category filters, live-demo + clone. gl- prefixed structural classes. ============================================================ */ #page-launch-gallery .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; } #page-launch-gallery .gl-hero { max-width: 760px; margin: 4px 0 22px; } #page-launch-gallery .gl-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } #page-launch-gallery .gl-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } #page-launch-gallery .gl-hero h1 { font-family: "Fraunces", serif; font-weight: 700; font-size: 38px; margin: 0; letter-spacing: -0.01em; line-height: 1.04; color: var(--text); } #page-launch-gallery .gl-hero h1 .accent { color: var(--accent); font-style: italic; } #page-launch-gallery .gl-hero .lede { color: var(--text-2); font-size: 15.5px; margin-top: 10px; line-height: 1.55; } #page-launch-gallery .gl-hero .lede b { color: var(--text); font-weight: 600; } /* Niche filter chips (landing parity) */ #page-launch-gallery .gl-filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; align-items: center; } #page-launch-gallery .niche-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; font-family: inherit; color: var(--text); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s, background .15s, color .15s; } #page-launch-gallery .niche-chip .emoji { font-size: 15px; } #page-launch-gallery .niche-chip .cnt { color: var(--text-3); font-weight: 500; font-size: 12px; } #page-launch-gallery .niche-chip:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 22px -14px rgba(106,76,241,0.5); } #page-launch-gallery .niche-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); } #page-launch-gallery .niche-chip.active .cnt { color: var(--bg); opacity: 0.7; } #page-launch-gallery .gl-count { margin-left: auto; font-size: 12.5px; color: var(--text-3); font-family: "JetBrains Mono", monospace; } #page-launch-gallery .gl-count b { color: var(--text-2); } /* Card grid (landing .tpl-* design, laid out as a responsive grid in-app) */ #page-launch-gallery .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } #page-launch-gallery .tpl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px -24px rgba(42,32,48,0.22); transition: transform .22s, box-shadow .22s; display: flex; flex-direction: column; } #page-launch-gallery .tpl-card:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -24px rgba(42,32,48,0.34); } #page-launch-gallery .tpl-shot { position: relative; height: 200px; overflow: hidden; border-bottom: 1px solid var(--border); } #page-launch-gallery .tpl-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } #page-launch-gallery .tpl-shot .makeit { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 3; background: var(--accent); color: #fff; font-size: 7.5px; font-weight: 700; writing-mode: vertical-rl; padding: 8px 4px; border-radius: 0 5px 5px 0; letter-spacing: 0.08em; box-shadow: 0 6px 16px -6px rgba(106,76,241,0.6); } #page-launch-gallery .tpl-body { padding: 18px 22px 22px; display: flex; flex-direction: column; flex: 1; } #page-launch-gallery .tpl-name-row { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; } #page-launch-gallery .tpl-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; } #page-launch-gallery .tpl-name { font-family: "Fraunces", serif; font-weight: 700; font-size: 19px; color: var(--text); } #page-launch-gallery .tpl-niche { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } #page-launch-gallery .tpl-persona { font-size: 13px; color: var(--text-3); margin-bottom: 7px; } #page-launch-gallery .tpl-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin-bottom: 16px; flex: 1; } #page-launch-gallery .tpl-actions { display: flex; flex-direction: column; gap: 8px; } #page-launch-gallery .tpl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 16px; border-radius: 10px; font-weight: 700; font-size: 13.5px; font-family: inherit; cursor: pointer; border: none; transition: transform .15s, background .15s, box-shadow .15s; } #page-launch-gallery .tpl-btn.demo { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } #page-launch-gallery .tpl-btn.demo:hover { background: var(--surface-3); border-color: var(--border-strong); } #page-launch-gallery .tpl-btn.pick { background: var(--accent); color: #fff; } #page-launch-gallery .tpl-btn.pick:hover { background: var(--accent-deep); transform: translateY(-1px); } #page-launch-gallery .tpl-btn.buy { background: linear-gradient(135deg, #ff3d8d, #d61f69); color: #fff; } #page-launch-gallery .tpl-btn.buy:hover { transform: translateY(-1px); } /* Preview + confirm modals (appended to , so unscoped) */ .gl-modal { position: fixed; inset: 0; z-index: 4000; background: rgba(20,16,28,0.62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 28px; } .gl-modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden; } .gl-preview { width: min(1100px, 96vw); height: min(86vh, 900px); } .gl-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .gl-modal-head .t { font-family: "Fraunces", serif; font-weight: 700; font-size: 16px; color: var(--text); } .gl-modal-head .acts { display: flex; gap: 8px; } .gl-mbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); } .gl-mbtn.ghost:hover { background: var(--surface-2); color: var(--text); } .gl-mbtn.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .gl-mbtn.primary:hover { background: var(--accent-deep); } .gl-mbtn[disabled] { opacity: 0.6; cursor: default; } /* In-app confirm modal (replaces the browser confirm() box). */ .ls-cmodal { position: fixed; inset: 0; z-index: 100060; background: rgba(20,16,28,0.62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: lsCmodalFade .14s ease; } @keyframes lsCmodalFade { from { opacity: 0; } to { opacity: 1; } } .ls-cmodal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55); width: 100%; max-width: 380px; padding: 26px 24px 20px; text-align: center; animation: lsCmodalPop .16s cubic-bezier(.34,1.56,.64,1); } @keyframes lsCmodalPop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ls-cmodal-ic { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-2); } .ls-cmodal-ic.danger { background: #fdecec; color: #c0392b; } .ls-cmodal-ic svg { width: 22px; height: 22px; } .ls-cmodal-title { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--text); } .ls-cmodal-msg { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); } .ls-cmodal-acts { display: flex; gap: 10px; margin-top: 22px; } .ls-cmodal-btn { flex: 1; padding: 11px 14px; border-radius: 11px; font-size: 14px; font-weight: 600; font-family: "Inter", sans-serif; cursor: pointer; border: 1px solid var(--border); } .ls-cmodal-btn.ghost { background: var(--surface); color: var(--text-2); } .ls-cmodal-btn.ghost:hover { background: var(--surface-2); color: var(--text); } .ls-cmodal-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .ls-cmodal-btn.primary:hover { background: var(--accent-deep, var(--accent)); } .ls-cmodal-btn.danger { background: #c0392b; color: #fff; border-color: #c0392b; } .ls-cmodal-btn.danger:hover { background: #a93226; } /* Forms & enquiries view (Manage → Forms & enquiries) */ .ls-enq { position: fixed; inset: 0; z-index: 100060; background: rgba(20,16,28,0.62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: lsCmodalFade .14s ease; } .ls-enq-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55); width: 100%; max-width: 620px; max-height: 84vh; display: flex; flex-direction: column; overflow: hidden; animation: lsCmodalPop .16s cubic-bezier(.34,1.56,.64,1); } .ls-enq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); } .ls-enq-head .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--text); } .ls-enq-x { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 4px; display: flex; border-radius: 8px; } .ls-enq-x:hover { background: var(--surface-2); color: var(--text); } .ls-enq-x svg { width: 18px; height: 18px; } .ls-enq-note { display: flex; align-items: center; gap: 14px; margin: 16px 20px 4px; padding: 13px 16px; background: var(--warn-soft, #fbf3df); border: 1px solid #ecd6a8; border-radius: 10px; } .ls-enq-note .nt { flex: 1; font-size: 12.5px; color: var(--text-2); line-height: 1.45; } .ls-enq-note .nt b { color: var(--text); } .ls-enq-rp { background: var(--warn, #b8860b); color: #fff; border: none; border-radius: 9px; padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .ls-enq-setting { margin: 12px 20px 4px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; } .ls-enq-setting .lbl { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; } .ls-enq-setting .ablk { display: flex; gap: 8px; align-items: center; } .ls-enq-setting .fin { flex: 1; min-width: 0; background: var(--surface); border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 11px; font-family: inherit; font-size: 13px; color: var(--text); outline: none; } .ls-enq-setting .fin:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .ls-enq-setting .bdo { background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; flex-shrink: 0; } .ls-enq-setting .bdo:hover { background: var(--accent-deep); } .ls-enq-setting .bdo:disabled { opacity: .6; cursor: default; } .ls-enq-setting .hint { margin-top: 8px; font-size: 12px; color: var(--text-3); line-height: 1.45; } .ls-enq-body { padding: 12px 20px 20px; overflow-y: auto; } .ls-enq-empty { padding: 30px 12px; text-align: center; color: var(--text-3); font-size: 13.5px; } .ls-enq-item { border: 1px solid var(--border); border-radius: 11px; margin-top: 10px; overflow: hidden; } .ls-enq-row { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto 18px; grid-template-areas: "who date chev" "meta meta chev"; gap: 2px 10px; align-items: center; padding: 12px 14px; background: var(--surface); border: none; cursor: pointer; text-align: left; } .ls-enq-row:hover { background: var(--surface-2); } .ls-enq-row .who { grid-area: who; font-weight: 600; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ls-enq-row .meta { grid-area: meta; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ls-enq-row .date { grid-area: date; font-size: 11.5px; color: var(--text-3); white-space: nowrap; } .ls-enq-row .chev { grid-area: chev; color: var(--text-4); display: flex; transition: transform .15s; } .ls-enq-row .chev svg { width: 16px; height: 16px; } .ls-enq-row.open .chev { transform: rotate(180deg); } .ls-enq-ans { padding: 4px 14px 12px; background: var(--surface-2); } .ls-enq-a { display: flex; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; } .ls-enq-a:first-child { border-top: none; } .ls-enq-a .al { flex-shrink: 0; min-width: 130px; color: var(--text-3); } .ls-enq-a .av { color: var(--text); word-break: break-word; } @media (max-width: 620px) { .ls-enq-note { flex-direction: column; align-items: stretch; } .ls-enq-a .al { min-width: 90px; }} /* ── Manage → Analytics (in-app; mirrors Community Analytics look) ──────── Rendered inside the .ls-enq modal shell but wider, with the light-theme app tokens (--surface / --text / --accent …) — a stat-card row, a metric-tab row and a date-window pill filter, matching the Community Analytics page. */ .ls-anlx-card { max-width: 940px; } .ls-anlx-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; } .ls-anlx-page { background: var(--surface); border: 1.5px solid var(--border); border-radius: 9px; padding: 8px 11px; font-family: inherit; font-size: 13px; color: var(--text); outline: none; max-width: 280px; } .ls-anlx-range { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-left: auto; } .ls-anlx-range button { border: 0; background: transparent; padding: 7px 15px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; } .ls-anlx-range button.active { background: var(--accent); color: #fff; } .ls-anlx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .ls-anlx-stat { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--surface-2); } .ls-anlx-stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); font-weight: 600; } .ls-anlx-stat .v { font-size: 26px; font-weight: 700; color: var(--text); margin-top: 6px; line-height: 1; } .ls-anlx-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; margin-bottom: 14px; } .ls-anlx-tabs button { border: 0; background: transparent; padding: 9px 12px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .ls-anlx-tabs button svg { width: 15px; height: 15px; } .ls-anlx-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); } .ls-anlx-empty { padding: 28px 12px; text-align: center; color: var(--text-3); font-size: 13px; } .ls-anlx-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-3); margin-bottom: 6px; } .ls-anlx-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; } .ls-anlx-legend .sw.pv { background: var(--accent-soft); } .ls-anlx-legend .sw.uv { background: var(--accent); } .ls-anlx-chart { display: flex; align-items: flex-end; gap: 3px; height: 180px; padding: 6px 2px 2px; overflow-x: auto; } .ls-anlx-col { flex: 1 0 8px; min-width: 8px; height: 100%; display: flex; align-items: flex-end; } .ls-anlx-barwrap { position: relative; width: 100%; height: 100%; } .ls-anlx-bar { position: absolute; bottom: 0; border-radius: 3px 3px 0 0; } .ls-anlx-bar.pv { left: 0; right: 0; background: var(--accent-soft); } .ls-anlx-bar.uv { left: 24%; right: 24%; background: var(--accent); } .ls-anlx-funnel { display: flex; flex-direction: column; gap: 12px; padding: 6px 0; } .ls-anlx-fstep .fh { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-2); margin-bottom: 6px; } .ls-anlx-fstep .fh b { color: var(--text); font-size: 15px; } .ls-anlx-fstep .fh .rt { color: var(--accent); font-weight: 600; margin-left: 8px; font-size: 12px; } .ls-anlx-ftrack { height: 22px; background: var(--surface-2); border-radius: 8px; overflow: hidden; } .ls-anlx-ffill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); border-radius: 8px; transition: width 0.2s ease; } .ls-anlx-bar-row { display: grid; grid-template-columns: 130px 1fr 52px; gap: 10px; align-items: center; margin-bottom: 9px; font-size: 13px; color: var(--text-2); } .ls-anlx-bar-row .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ls-anlx-bar-row .cnt { text-align: right; color: var(--text); font-weight: 600; } .ls-anlx-track { height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; } .ls-anlx-fill { height: 100%; background: var(--accent); border-radius: 6px; } .ls-anlx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .ls-anlx-table th { text-align: left; padding: 8px 10px; color: var(--text-3); font-weight: 600; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; } .ls-anlx-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: middle; } .ls-anlx-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .ls-anlx-badge svg { width: 12px; height: 12px; } .ls-anlx-badge.on { background: rgba(28, 142, 90, 0.12); color: var(--good); } .ls-anlx-badge.off { background: var(--surface-2); color: var(--text-3); } .ls-anlx-badge.idf { background: var(--accent-soft); color: var(--accent-deep); margin: 1px 0; } .ls-anlx-search { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; font-family: inherit; font-size: 13px; box-sizing: border-box; margin-bottom: 10px; color: var(--text); background: var(--surface); } @media (max-width: 680px) { .ls-anlx-stats { grid-template-columns: repeat(2, 1fr); }} /* ── "Your name & business" (identity) modal ───────────────────────────── A single logical flow: define + Save (does NOT touch the live site), then an optional "Update my live site" that corrects copy + republishes. */ #lsIdentityModal .id-wrap { display: flex; flex-direction: column; gap: 18px; } #lsIdentityModal .id-lbl { display: block; font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 8px; } #lsIdentityModal .id-inp { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface); outline: none; } #lsIdentityModal .id-inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } #lsIdentityModal .id-empty { color: var(--text-3); font-size: 13px; padding: 4px 0; } #lsIdentityModal .id-person { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; } #lsIdentityModal .id-person .id-inp { flex: 1; min-width: 0; } #lsIdentityModal .id-remove { border: 0; background: transparent; cursor: pointer; color: var(--text-3); padding: 4px; display: flex; } #lsIdentityModal .id-remove:hover { color: #d93a3f; } #lsIdentityModal .id-add { margin-top: 4px; padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px dashed var(--border-strong); background: transparent; color: var(--text-2); } #lsIdentityModal .id-add:hover { border-color: var(--accent); color: var(--accent); } #lsIdentityModal .id-saverow { display: flex; align-items: center; gap: 12px; } #lsIdentityModal .id-btn { border: 0; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; } #lsIdentityModal .id-btn.primary { padding: 9px 20px; background: var(--accent); color: #fff; } #lsIdentityModal .id-btn.primary:hover:not(:disabled) { background: var(--accent-deep); } #lsIdentityModal .id-btn.secondary { padding: 9px 18px; background: var(--surface); color: var(--accent); border: 1.5px solid var(--accent); } #lsIdentityModal .id-btn.secondary:hover:not(:disabled) { background: var(--accent-soft); } #lsIdentityModal .id-btn:disabled { opacity: .5; cursor: default; } #lsIdentityModal .id-savestate { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } #lsIdentityModal .id-savestate.saved { color: var(--good, #0a7d34); } #lsIdentityModal .id-savestate.dirty { color: var(--text-3); font-weight: 500; } /* Share-preview (OG) card — dirty-state indicator by the Save button, mirroring the Identity card's Save model (Save disabled until an edit; "Unsaved changes" while editing; "✓ Saved" once persisted). */ #lsShareModal .sh-savestate { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } #lsShareModal .sh-savestate.saved { color: var(--good, #0a7d34); } #lsShareModal .sh-savestate.dirty { color: var(--text-3); font-weight: 500; } #lsShareModal #shSave:disabled { opacity: .5; cursor: default; } #lsIdentityModal .id-help { font-size: 12.5px; color: var(--text-3); line-height: 1.45; margin-top: -8px; } #lsIdentityModal .id-update { border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } #lsIdentityModal .id-update-h { font-size: 15px; font-weight: 600; color: var(--text); } #lsIdentityModal .id-update-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.5; } #lsIdentityModal .id-update .id-btn { margin-top: 4px; } #lsIdentityModal .id-update-status { font-size: 13px; color: var(--text-2); line-height: 1.45; margin-top: 4px; } #lsIdentityModal .id-update-status.done { color: var(--good, #0a7d34); font-weight: 600; } .gl-frame-wrap { flex: 1; background: #fff; min-height: 0; } .gl-frame { width: 100%; height: 100%; border: 0; display: block; } .gl-confirm { width: min(440px, 94vw); padding: 30px 28px 24px; text-align: center; } .gl-confirm-mark { font-size: 26px; color: var(--accent); margin-bottom: 8px; } .gl-confirm h3 { font-family: "Fraunces", serif; font-weight: 700; font-size: 22px; margin: 0 0 8px; color: var(--text); } .gl-confirm h3 span { color: var(--accent); } .gl-confirm p { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0 0 18px; } .gl-field { display: block; text-align: left; margin-bottom: 20px; } .gl-field span { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 6px; } .gl-field input { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); font-size: 14.5px; font-family: inherit; } .gl-field input:focus { outline: none; border-color: var(--accent); } .gl-field input.gl-input-err { border-color: #e5484d; background: rgba(229, 72, 77, 0.04); } .gl-field input.gl-input-err:focus { border-color: #e5484d; } .gl-field-err { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 9px; font-size: 12.5px; line-height: 1.45; color: #d93a3f; } .gl-field-err .gl-suggest { appearance: none; border: 1px solid var(--border-strong); background: var(--surface); color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .gl-field-err .gl-suggest:hover { border-color: var(--accent); background: var(--surface-2); } .gl-confirm-acts { display: flex; gap: 10px; justify-content: flex-end; } @media (max-width: 760px) { #page-launch-gallery .gl-hero h1 { font-size: 28px; } #page-launch-gallery .tpl-grid { grid-template-columns: 1fr; } .gl-preview { height: 92vh; }} /* Anchored chooser for the duplicate + add-block controls. On (so the scrolling canvas and the section panes cannot clip it) and position:fixed, because it is placed from viewport coordinates. */ .rc-chooser { position: fixed; z-index: 9100; min-width: 232px; max-width: 300px; background: #fff; border: 1px solid var(--border, #e3e6e4); border-radius: 12px; box-shadow: 0 16px 40px -14px rgba(20,28,24,.42); padding: 5px; animation: rc-modal-in .12s ease; } .rc-chooser-opt { display: block; width: 100%; text-align: left; font-family: inherit; background: transparent; border: none; border-radius: 8px; padding: 9px 11px; cursor: pointer; } .rc-chooser-opt:hover, .rc-chooser-opt:focus { background: var(--surface-2, #f4f6f5); outline: none; } .rc-chooser-lbl { display: block; font-size: 13.5px; font-weight: 600; color: var(--text, #1b2320); } .rc-chooser-hint { display: block; font-size: 12px; color: var(--text-3, #6d7a74); margin-top: 2px; line-height: 1.4; } /* Confirmation modal (appended to — global rc-modal* scope) */ .rc-modal-ov { position: fixed; inset: 0; z-index: 9000; background: rgba(20,28,24,.44); display: flex; align-items: center; justify-content: center; padding: 20px; animation: rc-ov-in .14s ease; } @keyframes rc-ov-in { from { opacity: 0; } to { opacity: 1; } } .rc-modal { background: #fff; border-radius: 16px; max-width: 400px; width: 100%; padding: 26px 26px 20px; text-align: center; box-shadow: 0 24px 60px -20px rgba(20,28,24,.5); animation: rc-modal-in .16s ease; } @keyframes rc-modal-in { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } .rc-modal-ic { width: 46px; height: 46px; border-radius: 12px; background: #fdecec; color: #dc2626; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .rc-modal-ic svg { width: 22px; height: 22px; } .rc-modal-title { font-family: "Bricolage Grotesque", sans-serif; font-size: 19px; font-weight: 700; color: var(--text); margin: 0 0 8px; } .rc-modal-preview { font-size: 14px; color: var(--text); background: var(--surface-2); border-radius: 9px; padding: 9px 12px; margin: 0 0 10px; max-height: 80px; overflow: hidden; font-style: italic; } .rc-modal-msg { font-size: 13.5px; color: var(--text-3); line-height: 1.5; margin: 0 0 20px; } .rc-modal-actions { display: flex; gap: 10px; } .rc-modal-btn { flex: 1; font-family: inherit; font-size: 14px; font-weight: 600; padding: 11px 16px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border); transition: filter .12s, background .12s; } .rc-modal-btn.cancel { background: #fff; color: var(--text-2); } .rc-modal-btn.cancel:hover { background: var(--surface-2); } .rc-modal-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; } .rc-modal-btn.danger:hover { filter: brightness(1.07); } .rc-modal.rc-hist { max-width: 460px; text-align: left; } .rc-modal.rc-hist .rc-modal-title, .rc-modal.rc-hist .rc-modal-msg { text-align: left; } .rc-hist-list { max-height: 340px; overflow-y: auto; margin: 4px 0 18px; border: 1px solid var(--border); border-radius: 10px; } .rc-hist-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); } .rc-hist-row:last-child { border-bottom: none; } .rc-hist-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .rc-hist-lbl { font-size: 14px; font-weight: 600; color: var(--text); } .rc-hist-time { font-size: 12px; color: var(--text-3); } .rc-hist-restore { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--accent-deep); background: var(--accent-soft); border: none; border-radius: 8px; padding: 7px 14px; cursor: pointer; transition: filter .12s; } .rc-hist-restore:hover { filter: brightness(.97); } .rc-hist-empty { padding: 22px 16px; text-align: center; font-size: 13.5px; color: var(--text-3); line-height: 1.5; } /* ── Review Copy: Preview (v2) — publish-fidelity, inert, desktop-scaled ────── */ /* Toolbar Preview button — sits left of Version history in the pvbar. */ /* One preview button, everywhere it appears. The look is deliberately unscoped: a coach who learned "Preview" on the copy step must find the identical control on the photos step, not a cousin of it. */ .rc-prev-btn { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid transparent; border-radius: 8px; padding: 5px 10px; cursor: pointer; transition: filter .12s; } .rc-prev-btn svg { width: 14px; height: 14px; } .rc-prev-btn:hover { filter: brightness(.97); } /* Modal */ .rc-prev-ov { position: fixed; inset: 0; z-index: 9100; background: rgba(20,28,24,.55); display: flex; align-items: center; justify-content: center; padding: 22px; animation: rc-ov-in .14s ease; } .rc-prev-panel { background: #fff; border-radius: 16px; width: 100%; max-width: 1320px; height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 28px 70px -22px rgba(20,28,24,.55); animation: rc-modal-in .16s ease; } .rc-prev-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex: 0 0 auto; } .rc-prev-title { font-family: "Bricolage Grotesque", sans-serif; font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; } .rc-prev-note { font-size: 12.5px; color: var(--text-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-prev-seg { display: inline-flex; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex: 0 0 auto; } .rc-prev-seg .rc-prev-w { font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); background: #fff; border: none; padding: 6px 12px; cursor: pointer; transition: background .12s, color .12s; } .rc-prev-seg .rc-prev-w + .rc-prev-w { border-left: 1px solid var(--border); } .rc-prev-seg .rc-prev-w.on { background: var(--accent-soft); color: var(--accent-deep); } .rc-prev-close { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text-2); font-size: 14px; line-height: 1; cursor: pointer; transition: background .12s, color .12s; } .rc-prev-close:hover { background: #fff0f0; color: #dc2626; border-color: #f3c4c4; } .rc-prev-stage { flex: 1 1 auto; min-height: 0; background: #f4f6f5; overflow: hidden; position: relative; display: flex; justify-content: center; } .rc-prev-scaler { overflow: hidden; } .rc-prev-frame { border: 0; display: block; background: #fff; transform-origin: top left; box-shadow: 0 2px 20px rgba(20,28,24,.10); } .rc-prev-ov.loading .rc-prev-stage::after { content: "Building your preview…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-3); } .rc-prev-ov.loading .rc-prev-scaler { visibility: hidden; } /* Preview v2 — snippet view toggle + snippet scrolling */ .rc-prev-seg .rc-prev-v { font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); background: #fff; border: none; padding: 6px 12px; cursor: pointer; transition: background .12s, color .12s; } .rc-prev-seg .rc-prev-v + .rc-prev-v { border-left: 1px solid var(--border); } .rc-prev-seg .rc-prev-v.on { background: var(--accent-soft); color: var(--accent-deep); } .rc-prev-view { margin-right: 2px; } /* Snippet sections can be taller than the stage — allow it to scroll; sit content at the top. */ .rc-prev-stage { overflow: auto; align-items: flex-start; padding: 16px 0; } /* Preview v2 — page switcher + "preview only" flash */ .rc-prev-pages { display: flex; gap: 6px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--border); background: #fff; overflow-x: auto; flex: 0 0 auto; } .rc-prev-pages .rc-prev-pg { flex: 0 0 auto; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; } .rc-prev-pages .rc-prev-pg:hover { background: #fff; color: var(--text); } .rc-prev-pages .rc-prev-pg.on { background: var(--accent-soft); color: var(--accent-deep); border-color: transparent; } .rc-prev-flash { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(8px); background: #15172b; color: #fff; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; box-shadow: 0 10px 30px rgba(13,8,25,.28); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 5; max-width: 90%; text-align: center; } .rc-prev-flash.show { opacity: 1; transform: translateX(-50%) translateY(0); } #page-launch-review-copy .scx-pvhost { position: sticky; top: 0; z-index: 6; padding-bottom: 12px; background: var(--bg, #fff); } .rc-prev-panel.rc-prev-inline { height: auto; max-width: none; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 6px 22px -14px rgba(20,28,24,.45); } .rc-prev-panel.rc-prev-inline .rc-prev-stage { height: 300px; flex: 0 0 auto; padding: 0; } .rc-prev-panel.rc-prev-inline .rc-prev-bar { flex-wrap: wrap; row-gap: 8px; } .rc-prev-panel.rc-prev-inline .rc-prev-note { flex: 1 1 120px; } /* Refreshing dims the frame — it must never flash empty while a re-render lands. */ .rc-prev-panel.rc-prev-inline .rc-prev-frame { transition: opacity .18s ease; } .rc-prev-panel.rc-prev-inline.refreshing .rc-prev-frame { opacity: .45; } .rc-prev-panel.rc-prev-inline.refreshing .rc-prev-note::after { content: " · refreshing…"; } .rc-prev-panel.rc-prev-inline.loading .rc-prev-stage::after { content: "Building your preview…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13.5px; color: var(--text-3); } .rc-prev-panel.rc-prev-inline.loading .rc-prev-scaler { visibility: hidden; } /* Save / Publish, riding on the preview's own bar. */ .rc-prev-panel .scx-pvstate { font-size: 12px; color: var(--text-3); white-space: nowrap; flex: 0 0 auto; } .rc-prev-panel .scx-pvbtn { flex: 0 0 auto; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; cursor: pointer; transition: filter .12s, opacity .12s; } .rc-prev-panel .scx-pvbtn:hover:not(:disabled) { filter: brightness(.97); } .rc-prev-panel .scx-pvbtn.primary { background: var(--accent, #6a4cf1); border-color: transparent; color: #fff; } .rc-prev-panel .scx-pvbtn:disabled { opacity: .45; cursor: default; } /* On a narrow screen the panel would eat most of the height, so it scrolls with the page instead of pinning, and the tab goes back to the page's own scroll. */ @media (max-width: 900px) { #page-launch-review-copy .scx-pvhost { position: static; padding-bottom: 10px; } .rc-prev-panel.rc-prev-inline .rc-prev-stage { height: 220px; } .rc-prev-panel.rc-prev-inline .rc-prev-note { flex-basis: 100%; order: 5; }} #page-launch-review-copy .scx-logopick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #page-launch-review-copy .scx-logoimg { max-height: 46px; max-width: 190px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; background: var(--surface); } /* ── Photo lightbox: any photo, big, one click to close ── */ #phoLightbox { position: fixed; inset: 0; z-index: 4000; background: rgba(12,10,26,.82); display: flex; align-items: center; justify-content: center; cursor: zoom-out; } #phoLightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 10px; box-shadow: 0 24px 80px rgba(0,0,0,.5); background: #fff; } #phoLightbox button { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }