/* ═══════════════════════════════════════════════════════════════ AgencyOS — homepage-v5-app.css Glue between the reference Homepage stylesheet (homepage-v5.css, extracted unchanged and scoped to .hp5) and the live AgencyOS markup: token map, hiding the legacy chrome, and neutralising legacy layout rules. Scoped to #tab-homepage so no other screen is affected. ═══════════════════════════════════════════════════════════════ */ #tab-homepage .hp5 { --bg: var(--st-bg); --surface: var(--st-surface); --surface-2: var(--st-surface-2); --ink: var(--st-ink); --text: var(--st-ink); --muted: var(--st-muted); --line: var(--st-line); --primary: var(--st-primary); --primary-2: var(--st-primary-2); --teal: var(--st-teal); --shadow: var(--st-shadow); --teal-soft: var(--st-soft); --orange-soft: var(--st-soft); --accent: var(--st-primary); color: var(--st-ink); font-family: var(--app-font, Inter, 'Outfit', system-ui, sans-serif); font-size: 16px; line-height: 1.55; } #tab-homepage .hp5 *, #tab-homepage .hp5 *::before, #tab-homepage .hp5 *::after { box-sizing: border-box; } #smRowMenu.hp5 { --surface: var(--st-surface); --surface-2: var(--st-surface-2); --text: var(--st-ink); --muted: var(--st-muted); --line: var(--st-line); --primary: var(--st-primary); --shadow: var(--st-shadow); --ink: var(--st-ink); } #tab-homepage .hp5 { padding: 4px 24px 24px; } /* legacy chrome that the approved design does not have (markup + handlers stay in the DOM) */ #tab-homepage .hp5 > .section-header, #tab-homepage .hp5 > .version-bar, #tab-homepage .hp5 .preview-pane-header > .preview-pane-label, #tab-homepage .hp5 .preview-pane-header > .preview-pane-actions, #tab-homepage .hp5 .sm-panel-header { display: none !important; } /* the grid: manifest left, preview right */ #tab-homepage .hp5 #hpLayout { display: block; height: auto; min-height: 0; max-height: none; padding: 0; margin: 0; border: 0; background: none; } #tab-homepage .hp5 .homepageWorkspaceGrid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: stretch; height: calc(100vh - 214px - var(--ws-bottom-gap, 24px)); min-height: 520px; padding: 0; margin: 0; overflow: hidden; border: 0; background: none; } #tab-homepage .hp5 .homepageWorkspaceGrid.imagesWide { grid-template-columns: 560px minmax(0, 1fr); } #tab-homepage .hp5 .homepageWorkspaceGrid > .homepage-preview-pane { display: block; min-width: 0; min-height: 0; height: 100%; padding: 0; margin: 0; border: 0; background: none; flex: none; overflow: hidden; } #tab-homepage .hp5 .workspaceToolCard { position: static; top: auto; width: auto; height: 100%; min-height: 0; justify-self: stretch; display: flex; flex-direction: column; overflow: hidden; } #tab-homepage .hp5 .homepageWorkspaceGrid > .workspaceToolCard { grid-column: 1; } #tab-homepage .hp5 .homepageWorkspaceGrid > .homepage-preview-pane { grid-column: 2; } #tab-homepage .hp5 .hp5-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 8px 10px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } #tab-homepage .hp5 .hp5-body[hidden] { display: none; } #tab-homepage .hp5 .sm-panel { width: 100%; min-width: 0; border: 0; background: none; padding: 0; margin: 0; box-shadow: none; display: block; } #tab-homepage .hp5 .sm-panel .sm-list { padding: 0; max-height: none; overflow: visible; } #tab-homepage .hp5 .manifestList { display: grid; gap: 8px; max-height: none; overflow: visible; padding: 0; } #tab-homepage .hp5 .manifestItem { position: relative; } #tab-homepage .hp5 .manifestItem .manifestSelect { background: none; border: 0; } #tab-homepage .hp5 .manifestAdd { margin-left: auto; } #tab-homepage .hp5 .manifestExpand[hidden], #tab-homepage .hp5 .manifestAdd[hidden] { display: none; } #tab-homepage .hp5 .sm-panel-empty, #tab-homepage .hp5 .sm-panel-loading, #tab-homepage .hp5 .sm-panel-error { padding: 22px 12px; color: var(--muted); font-size: 12.5px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface-2); } /* the body-level row menu */ #smRowMenu.hp5 { padding: 0; border: 0; background: none; box-shadow: none; width: auto; min-width: 0; z-index: 3200; } #smRowMenu.hp5 .sectionActionsMenu { position: static; display: block; width: 235px; } #smRowMenu.hp5 .sectionActionsMenu button { display: block; width: 100%; } #smRowMenu.hp5 .sectionActionsMenu button:disabled { color: var(--muted); opacity: .45; cursor: not-allowed; } /* preview card */ #tab-homepage .hp5 .previewCard { height: 100%; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } #tab-homepage .hp5 .previewCard > .previewBar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; } #tab-homepage .hp5 .previewCard > .previewScrollTrack { flex: none; } #tab-homepage .hp5 .previewCard > .projectPreviewFrame { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; border: 0; background: #fff; } #tab-homepage .hp5 .previewCard > .projectPreviewFrame.mobile { width: 390px; max-width: 100%; margin-inline: auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } #tab-homepage .hp5 .previewCard > #homepagePreviewMock { flex: 1 1 auto; min-height: 0; overflow: auto; } #tab-homepage .hp5 .versionMenuFoot { padding: 8px 4px 2px; border-top: 1px solid var(--line); margin-top: 6px; } #tab-homepage .hp5 .hp5UseBtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } #tab-homepage .hp5 .hp5UseBtn:disabled { background: var(--surface-2); color: var(--muted); cursor: default; } #tab-homepage .hp5 .hp5UseBtn svg { width: 15px; height: 15px; } #tab-homepage .hp5 .previewMoreMenu button:disabled { color: var(--muted); opacity: .45; cursor: not-allowed; } #tab-homepage .hp5 .previewMoreMenu button svg, #tab-homepage .hp5 .previewBar svg { width: 16px; height: 16px; flex: none; } /* real image workspace sits inside the Images tab */ #tab-homepage .hp5 #imageWorkspacePanel-homepage { padding: 0 !important; margin: 0; } @media (max-width: 1100px) { #tab-homepage .hp5 .homepageWorkspaceGrid, #tab-homepage .hp5 .homepageWorkspaceGrid.imagesWide { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; } #tab-homepage .hp5 .homepageWorkspaceGrid > .workspaceToolCard, #tab-homepage .hp5 .homepageWorkspaceGrid > .homepage-preview-pane { grid-column: 1; height: auto; } #tab-homepage .hp5 .workspaceToolCard { max-height: 520px; } #tab-homepage .hp5 .previewCard { height: 680px; } } /* icons inside the reference controls (the reference sizes every svg via its icon helper) */ #tab-homepage .hp5 .manifestMore svg, #tab-homepage .hp5 .versionCopyAction svg, #tab-homepage .hp5 .iconSegmented svg, #tab-homepage .hp5 .themeControl svg, #tab-homepage .hp5 .manifestExpand svg { width: 16px; height: 16px; flex: none; } #tab-homepage .hp5 .manifestMore { display: grid; place-items: center; } #tab-homepage .hp5 .hp5-body { padding-top: 6px; } /* the reference resets buttons globally (button { font: inherit }) at element specificity so its own class rules still win */ .hp5 button, .hp5 input, .hp5 textarea, .hp5 select { font: inherit; } .hp5 button { color: inherit; cursor: pointer; } /* legacy .sm-row flex layout must not leak into the reference row */ #tab-homepage .hp5 .manifestItem.sm-row { display: block; gap: normal; } #tab-homepage .hp5 .manifestSelect, #tab-homepage .hp5 .manifestHeader button { padding: 1px 6px; } #tab-homepage .hp5 .manifestMore { padding: 3px 8px 2px; } /* Images tab: the real Image Workspace (section list + inspector) fits the 320px manifest card by stacking; the expand control (imagesWide) restores the two-column layout. */ #tab-homepage .hp5 #hp5ImagesBody .iw-root { flex-direction: column; gap: 14px; min-height: 0; } #tab-homepage .hp5 #hp5ImagesBody .iw-section-list { width: 100%; max-height: 190px; overflow-y: auto; border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 10px; } #tab-homepage .hp5 #hp5ImagesBody .iw-section-list-header { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .14em; } #tab-homepage .hp5 #hp5ImagesBody .iw-section-row { border-radius: 8px; padding: 8px 10px; } #tab-homepage .hp5 #hp5ImagesBody .iw-section-row-active { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-color: var(--primary); } #tab-homepage .hp5 #hp5ImagesBody .iw-inspector { width: 100%; } #tab-homepage .hp5 .homepageWorkspaceGrid.imagesWideIn #hp5ImagesBody .iw-root { flex-direction: row; } #tab-homepage .hp5 .homepageWorkspaceGrid.imagesWideIn #hp5ImagesBody .iw-section-list { width: 190px; max-height: none; border-right: 1px solid var(--line); border-bottom: 0; padding-right: 12px; padding-bottom: 0; } #tab-homepage .hp5 #hp5ImagesBody .iw-tabs { overflow-x: auto; scrollbar-width: none; } #tab-homepage .hp5 #hp5ImagesBody .iw-tab-btn { font-size: 13px; padding: 8px 12px; white-space: nowrap; } #tab-homepage .hp5 #hp5ImagesBody .iw-inspector { min-width: 0; overflow-x: auto; scrollbar-width: thin; } /* the live iframe sits inside the legacy .preview-pane-content wrapper */ #tab-homepage .hp5 .previewCard > .preview-pane-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; margin: 0; border: 0; background: none; overflow: hidden; } #tab-homepage .hp5 .preview-pane-content > .projectPreviewFrame { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; border: 0; background: #fff; } #tab-homepage .hp5 .preview-pane-content > .projectPreviewFrame.mobile { width: 390px; max-width: 100%; margin-inline: auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } #tab-homepage .hp5 .preview-pane-content > #homepagePreviewMock { flex: 1 1 auto; min-height: 0; overflow: auto; } /* an id rule in the legacy sheet sets the iframe width — match it with an id so the reference Mobile width wins */ #tab-homepage .hp5 #homepageEmbeddedFrame.mobile { width: 390px !important; max-width: 100%; flex: 0 0 auto; align-self: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } #tab-homepage .hp5 #homepageEmbeddedFrame.mobile { height: 100%; } /* ── Homepage loading skeleton (the #homepagePreviewMock placeholder): theme-aware, V5 tokens + shimmer ── */ #tab-homepage .hp5 .preview-pane-content:has(> #homepagePreviewMock:not([style*="display: none"])) { align-items: stretch; justify-content: stretch; padding: 0; overflow: hidden; } #tab-homepage .hp5 #homepagePreviewMock { width: 100%; max-width: none; height: 100%; } #tab-homepage .hp5 #homepagePreviewMock .mock-hero { position: relative; height: 100%; padding: 28px 44px 36px; gap: 16px; background: var(--surface); border: 0; border-radius: 0; align-content: start; overflow: hidden; } #tab-homepage .hp5 #homepagePreviewMock .mock-hero::before { content: ""; display: block; height: 46px; margin-bottom: 14px; border-radius: 12px; } #tab-homepage .hp5 #homepagePreviewMock .mock-hero::before, #tab-homepage .hp5 #homepagePreviewMock .mock-eyebrow, #tab-homepage .hp5 #homepagePreviewMock .mock-h1, #tab-homepage .hp5 #homepagePreviewMock .mock-sub, #tab-homepage .hp5 #homepagePreviewMock .mock-cta-ghost, #tab-homepage .hp5 #homepagePreviewMock .mock-screenshot { background-color: color-mix(in srgb, var(--muted) 14%, var(--surface)); background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent 80%); background-size: 220% 100%; background-repeat: no-repeat; animation: skv5Shimmer 1.3s ease-in-out infinite; } #tab-homepage .hp5 #homepagePreviewMock .mock-eyebrow { height: 12px; width: 120px; border-radius: 999px; } #tab-homepage .hp5 #homepagePreviewMock .mock-h1 { height: 36px; width: 64%; border-radius: 10px; } #tab-homepage .hp5 #homepagePreviewMock .mock-h1.short { width: 46%; } #tab-homepage .hp5 #homepagePreviewMock .mock-sub { height: 14px; width: 50%; border-radius: 8px; } #tab-homepage .hp5 #homepagePreviewMock .mock-sub.shorter { width: 38%; } #tab-homepage .hp5 #homepagePreviewMock .mock-ctas { gap: 12px; margin-top: 8px; } #tab-homepage .hp5 #homepagePreviewMock .mock-cta-primary { height: 44px; width: 150px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 26%, var(--surface)); animation: skv5Pulse 1.6s ease-in-out infinite; } #tab-homepage .hp5 #homepagePreviewMock .mock-cta-ghost { height: 44px; width: 150px; border-radius: 12px; border: 1px solid var(--line); } #tab-homepage .hp5 #homepagePreviewMock .mock-screenshot { flex: 1 1 auto; min-height: 200px; margin-top: 14px; border: 1px solid var(--line); border-radius: 16px; } @keyframes skv5Pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } } @media (prefers-reduced-motion: reduce) { #tab-homepage .hp5 #homepagePreviewMock * , #tab-homepage .hp5 #homepagePreviewMock .mock-hero::before { animation: none !important; } } #tab-homepage .hp5 #homepagePreviewMock .mock-hero { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } #tab-homepage .hp5 #homepagePreviewMock .mock-hero > *, #tab-homepage .hp5 #homepagePreviewMock .mock-hero::before { flex: 0 0 auto; } #tab-homepage .hp5 #homepagePreviewMock .mock-hero::before { width: 100%; } #tab-homepage .hp5 #homepagePreviewMock .mock-ctas { display: flex; } #tab-homepage .hp5 #homepagePreviewMock .mock-screenshot { flex: 1 1 auto; width: 100%; } /* Version chooser: icon must not shrink to a dot; "Use This Version" footer hidden (selection is automatic) */ #tab-homepage .hp5 .previewVersionLinks > button svg { flex: 0 0 auto; } #tab-homepage .hp5 .previewVersionLinksMenu .versionMenuFoot { display: none; } /* Version dropdown polish (Homepage + Pages workspace): clock icon box, copy-link button */ .hp5 .previewVersionLinks > button svg { box-sizing: border-box; width: 28px; height: 28px; padding: 6px; flex: 0 0 auto; } .hp5 .versionList .versionMenuRow .versionCopyAction { box-sizing: border-box; width: 34px; height: 34px; flex: none; border: 0; border-radius: 10px; background: transparent; color: var(--muted); transform: none; } .hp5 .versionList .versionMenuRow .versionCopyAction:hover { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); border: 0; transform: none; } .hp5 .versionList .versionMenuRow .versionCopyAction svg { width: 16px; height: 16px; padding: 0; } .hp5 .versionList .versionMenuRow { grid-template-columns: minmax(0, 1fr) 34px; padding: 4px 6px 4px 6px; overflow: hidden; } .hp5 .previewVersionLinks > button svg { width: 30px; height: 30px; padding: 4px; stroke-width: 2.2; } .hp5 .previewBar .previewVersionLinks > button svg { width: 30px !important; height: 30px !important; padding: 6px; } /* The preview iframe keeps scrolling (wheel / touch / keys) but shows no vertical scrollbar of its own: it is made one scrollbar wider than its card and the extra strip is clipped away. Progress is shown by the thin track under the preview bar instead. */ .hp5 :is(#homepageEmbeddedFrame, #pdvEmbeddedFrame) { width: calc(100% + var(--hp5-sbw, var(--hp5-sbw-default, 0px))) !important; max-width: none !important; clip-path: inset(0 var(--hp5-sbw, var(--hp5-sbw-default, 0px)) 0 0); } .hp5 :is(#homepageEmbeddedFrame, #pdvEmbeddedFrame).mobile { width: calc(390px + var(--hp5-sbw, var(--hp5-sbw-default, 0px))) !important; } /* Expanding / shrinking the image panel animates the column instead of snapping */ #tab-homepage .hp5 .homepageWorkspaceGrid { transition: grid-template-columns .38s cubic-bezier(.4, 0, .2, 1); } #tab-homepage .hp5 .homepageWorkspaceGrid #hp5ImagesBody .iw-section-list { transition: width .38s cubic-bezier(.4, 0, .2, 1); } @media (prefers-reduced-motion: reduce) { #tab-homepage .hp5 .homepageWorkspaceGrid, #tab-homepage .hp5 .homepageWorkspaceGrid #hp5ImagesBody .iw-section-list { transition: none; } }