/* ============================================================ 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; }} /* On a phone the actions take the first row (left of the hamburger) and the breadcrumb gets a row of its own under them (website round 9, F18, Margaret at 390: "Save & exit" wrapped to three lines and the breadcrumb shrank to "W / SU… / L… / B…"). Neither wraps inside itself. */ @media (max-width: 760px) { [id^="page-launch-"] .topbar { flex-wrap: wrap; row-gap: 10px; } [id^="page-launch-"] .topbar-actions { order: -1; margin-left: auto; flex-wrap: nowrap; } [id^="page-launch-"] .topbar-actions .save-hint, [id^="page-launch-"] .topbar-actions button, [id^="page-launch-"] .topbar-actions a { white-space: nowrap; } [id^="page-launch-"] .topbar .page-head-crumbs { flex: 1 1 100%; min-width: 0; } } /* ---- 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. */ /* flex-wrap: the "You changed from…" line is flex-basis 100% and goes on a line of its own; without wrap it squeezed the label over View and wrapped Change design (website round 9, N5). */ #page-launch-bring-content .chosen-design { display: flex; flex-wrap: wrap; 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 0 auto; min-width: 0; white-space: nowrap; } #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 { white-space: nowrap; flex-shrink: 0; 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 { white-space: nowrap; flex-shrink: 0; 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; } /* Paste box under the upload drop (website round 11, F15). */ #page-launch-bring-content .paste-in { margin-top: 14px; } #page-launch-bring-content .paste-lbl { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } #page-launch-bring-content .paste-ta { min-height: 84px; } #page-launch-bring-content .paste-in .btn-pull { padding: 10px 18px; } #page-launch-bring-content .paste-msg { font-size: 13px; color: var(--text-3); } #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; } /* The approve bar floats over the plan now that #mainContent lets it stick (batch 9, app-styles-v2.css). Beside the rail it ends well short of Help; once the rail drops below the plan (1080px and under) it is full width, so there it rides above Help, as every full-width bar does. */ #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 .l { flex: 1 1 auto; min-width: 0; } /* The buttons keep their words on one line (website round 9, F26, Robert: "Yes, build my site" wrapped onto four lines beside the long question). */ #page-launch-review-plan .approve-bar .actions { display: flex; gap: 10px; align-items: center; flex: none; } #page-launch-review-plan .btn-changes, #page-launch-review-plan .btn-approve { white-space: nowrap; } /* ⭐ THE WORDS GET ROOM, AND THE BAR NEVER COVERS THE PLAN (website round 11, F6, Brian at 1440 with both menus open: the plan's column was 540px, the two buttons kept theirs, and the explanation was squeezed to one or two words a line, a bar 380px tall floating over the page he had opened). The explanation keeps at least 300px and the buttons go under it before it is squeezed further. Where the column is too narrow for both on one line, the bar stops floating and sits at the end of the plan, after the last page, so it covers nothing; the approve button is where the reading ends. */ #page-launch-review-plan .approve-bar { flex-wrap: wrap; row-gap: 12px; } #page-launch-review-plan .approve-bar .l { flex: 1 1 300px; } #page-launch-review-plan .approve-bar .actions { margin-left: auto; } #page-launch-review-plan .plan-grid > div:first-child { container-type: inline-size; container-name: rpplan; } @container rpplan (max-width: 760px) { #page-launch-review-plan .approve-bar { position: static; box-shadow: none; } #page-launch-review-plan .approve-bar .l { flex-basis: 100%; } } #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; } /* The site's own home page, drawn small (round 9, F16): a 1200px wide page scaled to the box by width, no clicks. */ .rp-did-shot .rp-did-live { position: absolute; top: 0; left: 0; width: 1200px; height: 675px; border: 0; transform-origin: top left; transform: scale(var(--rp-did-scale, 0.26)); pointer-events: none; background: #fff; } .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-note { font-size: 11.5px; color: var(--text-3); margin-top: 2px; } .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) { /* minmax(0,1fr), not 1fr (website round 11, Michelle F6): a bare 1fr track is at least as wide as its widest unbreakable line, so at 390 the whole column was 391px and "Edit answers", "Kept" and the Approve button ran 13px off the right edge with no way to scroll to them. */ #page-launch-review-plan .plan-grid { grid-template-columns: minmax(0, 1fr); } #page-launch-review-plan .plan-grid > * { min-width: 0; } #page-launch-review-plan .approve-bar { bottom: calc(16px + var(--help-room, 0px)); } #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; } /* Stacked on a phone it stays at the end of the page, as the course guide's bar does (batch 9): pinned, it would cover a quarter of the screen. */ #page-launch-review-plan .approve-bar { position: static; } #page-launch-review-plan .approve-bar .actions { justify-content: stretch; flex-wrap: wrap; } /* Never wider than the phone (F6): the label wraps rather than running off. */ #page-launch-review-plan .btn-approve { flex: 1 1 auto; justify-content: center; white-space: normal; text-align: center; min-width: 0; }} @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[hidden] { display: none; } /* display:flex above beat [hidden] (TK-17) */ #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; } /* The coach's real draft home page in the Look preview (website round 3), scaled from a 1280px desktop. */ #page-launch-look .lk-site.lk-real { background: var(--surface); height: 70vh; max-height: 70vh; overflow-y: auto; overflow-x: hidden; } #page-launch-look .lk-site.lk-real .lk-real-box { position: relative; width: 100%; overflow: hidden; } #page-launch-look .lk-site.lk-real .lk-real-frame { position: absolute; top: 0; left: 0; width: 1280px; border: 0; transform-origin: top left; background: #fff; } #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); } /* Full width, so it rides above Help (batch 9: it floats now, app-styles-v2.css). */ #page-launch-look .lk-foot { position: sticky; bottom: calc(14px + var(--help-room, 0px)); 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; }} /* Stacked on a phone the bar stays at the end of the page, as the course guide's does (batch 9): pinned, it would cover a quarter of the screen. */ @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; position: static; }} /* ============================================================ 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 .save-hint.is-unsaved { color: var(--warn, #b45309); font-weight: 600; } #page-launch-photos .save-hint.is-unsaved svg { display: none; } #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; } /* ⚠️ MEASURED IN A PHONE VIEWPORT, 2026-08-26: the panel fits (350px inside 390) but THREE OF ITS FOUR CONTROLS DID NOT MEET THE 44px TOUCH FLOOR — the close ✕ came out 29×26, Reset 46×16, Cancel 58×21 — and the zoom slider was 16px tall, which is hard to catch with a thumb and is the one control this overlay exists for. This is the SHARED overlay: the website builder, the course cover and now a blog card all open it, so the fix reaches all three. Scoped to `(hover: none)` so nothing moves on a desktop, and it only ever makes a target bigger. */ @media (hover: none) { .phov-head button, .phov-foot button, .phov-lnk { min-height: 44px; min-width: 44px; padding-left: 12px; padding-right: 12px; } .phov-zoom input[type=range] { height: 44px; } .phov-foot { gap: 10px; flex-wrap: wrap; padding: 10px 14px; } /* The stage keeps its own drag; nothing here may eat the gesture. */ .phov-stage { touch-action: none; } } @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; flex-wrap: wrap; justify-content: flex-end; } #page-launch-polish .pol-item .ablk { display: flex; gap: 8px; align-items: center; } /* A booking link read from what the coach brought in, offered to save (website round 3). */ #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; } #page-launch-polish .pol-item .ds .val { word-break: break-all; } #page-launch-polish .pol-item .bchg { background: transparent; border: 1px solid var(--border); color: var(--text-2); border-radius: 9px; padding: 0 14px; min-height: 44px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } #page-launch-polish .pol-item .bchg:hover { border-color: var(--accent); color: var(--accent); } @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); min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; text-align: right; } /* A long free address (website round 9, N21, Robert at 390: "haines-retirement-coaching-2.pages.dev.replicants.ai") ran past the card's right edge and was cut off, while "Use my free domain" was squeezed onto three lines beside it. The address may break anywhere, it is never hidden, and on a narrow screen it takes its own line under the option's name. */ @media (max-width: 680px) { #page-launch-publish .dopt .url { grid-column: 2 / -1; text-align: left; } } #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; } /* A row is ONE run of text beside its tick (TK-35). It used to be a flex row, which made the words after the bold name their own flex item, so the 11px gap showed as a space before the colon ("Copy, look & photos : …") and long lines wrapped as a second column. The tick sits in the padding instead. */ #page-launch-publish .pf .r { display: block; position: relative; padding-left: 31px; min-height: 20px; line-height: 20px; font-size: 13.5px; color: var(--text-2); } #page-launch-publish .pf .r[hidden] { display: none; } /* display:block above beat [hidden] */ #page-launch-publish .pf .r .ck { position: absolute; left: 0; top: 0; 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; } /* The "[gaps]" still in the words, listed plainly under the pre-flight row (website round 3). */ #page-launch-publish .pub-gaps { margin: 2px 0 6px 31px; padding: 10px 12px; border: 1px dashed var(--warn); border-radius: 10px; background: var(--warn-soft); font-size: 12.5px; line-height: 1.5; color: var(--text-2); } #page-launch-publish .pub-gaps .pg-page + .pg-page { margin-top: 10px; } #page-launch-publish .pub-gaps ul { margin: 4px 0 6px; padding-left: 18px; } #page-launch-publish .pub-gaps .pg-gap { font-weight: 700; color: var(--warn); } #page-launch-publish .pub-gaps .pg-ctx { color: var(--text-3); } #page-launch-publish .pub-gaps .pg-fix { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; } /* One Remove per listed line (D8 = a): small, beside its line, its own target. */ #page-launch-publish .pub-gaps .pg-line-remove { margin-left: 6px; padding: 2px 10px; min-height: 28px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface, #fff); font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; } #page-launch-publish .pub-gaps .pg-line-remove:hover { color: var(--text); border-color: var(--text-3); } #page-launch-publish .pub-gaps .pg-line-remove:disabled { opacity: .6; cursor: default; } #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); } /* The address and its Copy link stay on a phone's screen (website round 11, Michelle F16: "Copy link" was cut off at 390). The address may break anywhere, and the button wraps under it rather than off the edge. */ #page-launch-publish .success .live-url { max-width: 100%; box-sizing: border-box; flex-wrap: wrap; justify-content: center; } #page-launch-publish .success .live-url #pubLiveUrl { min-width: 0; overflow-wrap: anywhere; } #page-launch-publish .success .live-url #pubCopy { flex: none; } #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, #page-funnel-gallery .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; } #page-launch-gallery .gl-hero, #page-funnel-gallery .gl-hero { max-width: 760px; margin: 4px 0 22px; } #page-launch-gallery .gl-eyebrow, #page-funnel-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, #page-funnel-gallery .gl-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } #page-launch-gallery .gl-hero h1, #page-funnel-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, #page-funnel-gallery .gl-hero h1 .accent { color: var(--accent); font-style: italic; } #page-launch-gallery .gl-hero .lede, #page-funnel-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, #page-funnel-gallery .gl-hero .lede b { color: var(--text); font-weight: 600; } /* Niche filter chips (landing parity) */ #page-launch-gallery .gl-filters, #page-funnel-gallery .gl-filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; align-items: center; } #page-launch-gallery .niche-chip, #page-funnel-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, #page-funnel-gallery .niche-chip .emoji { font-size: 15px; } #page-launch-gallery .niche-chip .cnt, #page-funnel-gallery .niche-chip .cnt { color: var(--text-3); font-weight: 500; font-size: 12px; } #page-launch-gallery .niche-chip:hover, #page-funnel-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, #page-funnel-gallery .niche-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); } #page-launch-gallery .niche-chip.active .cnt, #page-funnel-gallery .niche-chip.active .cnt { color: var(--bg); opacity: 0.7; } #page-launch-gallery .gl-count, #page-funnel-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, #page-funnel-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, #page-funnel-gallery .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } #page-launch-gallery .tpl-card, #page-funnel-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, #page-funnel-gallery .tpl-card:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -24px rgba(42,32,48,0.34); } #page-launch-gallery .tpl-shot, #page-funnel-gallery .tpl-shot { position: relative; height: 200px; overflow: hidden; border-bottom: 1px solid var(--border); } #page-launch-gallery .tpl-shot img, #page-funnel-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, #page-funnel-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, #page-funnel-gallery .tpl-body { padding: 18px 22px 22px; display: flex; flex-direction: column; flex: 1; } #page-launch-gallery .tpl-name-row, #page-funnel-gallery .tpl-name-row { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; } #page-launch-gallery .tpl-dot, #page-funnel-gallery .tpl-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; } #page-launch-gallery .tpl-name, #page-funnel-gallery .tpl-name { font-family: "Fraunces", serif; font-weight: 700; font-size: 19px; color: var(--text); } #page-launch-gallery .tpl-niche, #page-funnel-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, #page-funnel-gallery .tpl-persona { font-size: 13px; color: var(--text-3); margin-bottom: 7px; } #page-launch-gallery .tpl-desc, #page-funnel-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, #page-funnel-gallery .tpl-actions { display: flex; flex-direction: column; gap: 8px; } #page-launch-gallery .tpl-btn, #page-funnel-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, #page-funnel-gallery .tpl-btn.demo { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } #page-launch-gallery .tpl-btn.demo:hover, #page-funnel-gallery .tpl-btn.demo:hover { background: var(--surface-3); border-color: var(--border-strong); } #page-launch-gallery .tpl-btn.pick, #page-funnel-gallery .tpl-btn.pick { background: var(--accent); color: #fff; } #page-launch-gallery .tpl-btn.pick:hover, #page-funnel-gallery .tpl-btn.pick:hover { background: var(--accent-deep); transform: translateY(-1px); } /* The current design's place in the actions: a quiet status line, never a filled button (website round 8: it looked like every live "Pick this site"). */ #page-launch-gallery .tpl-status, #page-funnel-gallery .tpl-status { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px; color: var(--good, #15803d); background: transparent; border: 1px dashed var(--border-strong, #cfd3da); cursor: default; } #page-launch-gallery .tpl-status svg, #page-funnel-gallery .tpl-status svg { width: 14px; height: 14px; } #page-launch-gallery .tpl-btn.buy, #page-funnel-gallery .tpl-btn.buy { background: linear-gradient(135deg, #ff3d8d, #d61f69); color: #fff; } #page-launch-gallery .tpl-btn.buy:hover, #page-funnel-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; overflow-y: auto; } .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; margin-top: auto; margin-bottom: auto; } .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). */ /* Tall content scrolls instead of falling off-screen. */ .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; overflow-y: auto; } @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); margin-top: auto; margin-bottom: auto; } @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); } /* Whole words, never "…" (website round 8, Margaret: a download row read "visitor.priya@example.test …" and the download's name, in the badge beside it, was cut off until she opened the row). The row wraps instead. */ .ls-enq-row .who { grid-area: who; font-weight: 600; font-size: 14px; color: var(--text); min-width: 0; overflow-wrap: anywhere; } .ls-enq-row .meta { grid-area: meta; font-size: 12px; color: var(--text-3); min-width: 0; overflow-wrap: anywhere; } .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; } /* "Is this site about your whole business, or one programme or offer?" (website round 8, F13, D3). Two plain choices; the second opens its name and one line. The card scrolls on a short screen rather than losing its buttons below the fold. */ .gl-confirm { max-height: calc(100vh - 56px); overflow-y: auto; } .gl-focus { border: 0; padding: 0; margin: 0 0 16px; text-align: left; } .gl-focus legend { padding: 0; font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 8px; line-height: 1.4; } .gl-focus-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); cursor: pointer; } .gl-focus-opt + .gl-focus-opt { margin-top: 8px; } .gl-focus-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .gl-focus-opt input { margin: 3px 0 0; accent-color: var(--accent); flex: none; } .gl-focus-opt b { display: block; font-size: 14px; color: var(--text); font-weight: 600; } .gl-focus-opt small { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.45; margin-top: 2px; } .gl-focus-offer[hidden] { display: none; } @media (max-width: 760px) { #page-launch-gallery .gl-hero h1, #page-funnel-gallery .gl-hero h1 { font-size: 28px; } #page-launch-gallery .tpl-grid, #page-funnel-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; overflow-y: auto; } @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; margin-top: auto; margin-bottom: auto; } @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); } /* An undoable action (Restore) is the site's accent, never danger red (website round 5). */ .rc-modal-btn:not(.cancel):not(.danger) { background: var(--accent, #4f46e5); color: #fff; border-color: var(--accent, #4f46e5); } .rc-modal-btn:not(.cancel):not(.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: relative; 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; } /* A short screen keeps the pinned preview short, so the list under it has room (website round 9, F35: on 1440 x 900 a 300px preview left about 200px of the Top menu list showing). */ @media (min-width: 901px) and (max-height: 1000px) { #page-launch-review-copy .scx-pvhost .rc-prev-panel.rc-prev-inline .rc-prev-stage { height: 190px; } } /* 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; } /* Maya's questions: "I've read what you gave me and filled in N answers" (website round 3). */ #page-launch-phase-one .maya-intro .p1-prefilled { margin-top: 8px; font-weight: 600; color: var(--text); } /* ── Photos: the middle column is never squashed (website rounds 2 and 3) ── The three columns (260 + 330 fixed) were sized for the whole window, but the window is not what they get: at 1440 with both menus open the step is about 900px wide and the page view in the middle came out 278px, narrower than the picker beside it. Sized by the step's OWN width instead (a container query, website Photos only: the course screens that share the grid keep theirs): under 1080px the picker moves under the page view, and under 760px everything stacks. */ #page-launch-photos { container-type: inline-size; } @container (max-width: 1080px) { #page-launch-photos .pho-stage3 { grid-template-columns: 230px minmax(0, 1fr); } #page-launch-photos .pho-stage3 > :nth-child(3) { grid-column: 2; } } @container (max-width: 760px) { #page-launch-photos .pho-stage3 { grid-template-columns: 1fr; } #page-launch-photos .pho-stage3 > :nth-child(3) { grid-column: auto; } } /* The page bin on Manage (website round 9, F13, Patricia: 22x22 at 390px). On a phone or touch screen it is a 44px target, and it keeps a gap from the row's other controls. Its look (an icon, red on hover) is unchanged. */ @media (max-width: 760px), (pointer: coarse) { #page-launch-manage .mg-pgdel { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin-left: 10px !important; } } /* Polish: what a grey "Review & publish" waits for, each a link to it (website round 9, F33). */ #page-launch-polish .pol-golive .gt .pol-jump { font: inherit; color: #b6f0cf; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } #page-launch-polish .pol-golive .gt .pol-jump:hover { color: #fff; } /* ── Clear of the Help bubble on a phone (TK-38) ── Below 600px Help is a 44px round button fixed in the bottom-right corner (support-widget.js; --help-room-x is how far in from the right edge it reaches). A button at the right end of a row sat under it whenever that row was at the foot of the screen: the first Restore in Deleted websites, and the Edit on "How this page appears in Google" in the words editor. Those buttons keep out of the corner, as the sticky action bands do (ui-kit.css .rk-sticky-actions); the row's own padding and the page gutter (about 24px) already cover part of the way. */ @media (max-width: 599px) { #page-launch-sites [data-st-deleted] [data-st-restore], #page-launch-review-copy [data-rc-seo] [data-rc-seo-edit] { margin-right: max(0px, calc(var(--help-room-x, 0px) - 24px)); } }