/* public/coming-soon.css: the coming soon page at sitescalepro.com (brand update, 2026-09-11). A static page, so plain CSS. The colors are the approved light and dark pairs; coming-soon.js sets data-theme on before paint. The mark and the copy sit together as one centered composition, never wider than 1024px. */ @font-face { font-family: "SiteScale Plex"; font-style: normal; font-weight: 400; font-display: swap; src: url("/brand/fonts/IBMPlexSans-Regular.woff2") format("woff2"); } @font-face { font-family: "SiteScale Plex"; font-style: normal; font-weight: 600; font-display: swap; src: url("/brand/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); } :root { --cs-bg: #fbfcfe; --cs-ink: #252c36; --cs-muted: #607086; --cs-rule: #dde5ef; --cs-line: #bac8da; --cs-field: #ffffff; --cs-blue: #1267e5; --cs-button: #1267e5; --cs-button-text: #ffffff; --cs-corner: #d0dceb; --cs-corner-active: #b8c9df; --cs-rest: #afc3dd; --cs-error: #a52c37; color-scheme: light; } :root[data-theme="dark"] { --cs-bg: #141820; --cs-ink: #f3f6fb; --cs-muted: #a6b3c6; --cs-rule: #303e52; --cs-line: #4a5a70; --cs-field: #1a2230; --cs-blue: #79acff; --cs-button: #1267e5; --cs-button-text: #ffffff; --cs-corner: #34445b; --cs-corner-active: #465e7e; --cs-rest: #465e7e; --cs-error: #ffb4bc; color-scheme: dark; } /* Scripts off: the system setting still picks the theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --cs-bg: #141820; --cs-ink: #f3f6fb; --cs-muted: #a6b3c6; --cs-rule: #303e52; --cs-line: #4a5a70; --cs-field: #1a2230; --cs-blue: #79acff; --cs-button: #1267e5; --cs-button-text: #ffffff; --cs-corner: #34445b; --cs-corner-active: #465e7e; --cs-rest: #465e7e; --cs-error: #ffb4bc; color-scheme: dark; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { margin: 0; min-height: 100%; background: var(--cs-bg); } body { color: var(--cs-ink); font-family: "SiteScale Plex", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; } [hidden] { display: none !important; } button, input { font: inherit; } a { color: var(--cs-blue); text-decoration: none; } @media (hover: hover) { a:hover { text-decoration: underline; text-underline-offset: 4px; } } a:focus-visible, button:focus-visible { outline: 2px solid var(--cs-blue); outline-offset: 2px; border-radius: 2px; } /* The page: header, main (grows, so the footer sits at the bottom), footer. */ .cs-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .cs-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px 40px; } .cs-logo { width: 228px; height: auto; max-width: 100%; display: block; } .ss-logo-ink { fill: var(--cs-ink); } .ss-logo-blue { fill: var(--cs-blue); } .cs-account { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--cs-muted); } .cs-account a { font-size: 14px; font-weight: 600; white-space: nowrap; padding: 8px 0; } /* The mark and the copy are one composition: two columns, a fixed gap, centered together inside 1024px, so they never drift apart on a wide screen and the copy gets a comfortable measure. */ .cs-main { flex: 1 0 auto; width: 100%; max-width: 1024px; margin-inline: auto; display: grid; grid-template-columns: auto minmax(0, 500px); justify-content: center; align-content: center; align-items: center; column-gap: 104px; padding: 64px 72px 96px; min-height: 580px; } .cs-copy { order: 2; width: 100%; justify-self: start; } .cs-copy h1 { font-size: 52px; line-height: 1.04; letter-spacing: -1.6px; font-weight: 600; margin: 0 0 24px; text-wrap: balance; } /* One line says what the software does, in ink, balanced so a phrase never ends on a ragged last word. */ .cs-description { font-size: 20px; line-height: 1.5; letter-spacing: -0.2px; margin: 0; color: var(--cs-ink); text-wrap: balance; } /* Three short points. Each is marked with the mark's own origin square, small and blue. */ .cs-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; } .cs-points li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.45; color: var(--cs-ink); text-wrap: balance; } .cs-points li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; background: var(--cs-blue); } @media (max-width: 640px) { .cs-points { margin-top: 24px; } .cs-points li { font-size: 16px; } } /* The ask, set apart from the message by space, not by a box. */ .cs-form-zone { margin-top: 48px; } .cs-invite { font-size: 16px; line-height: 1.5; font-weight: 600; margin: 0 0 12px; color: var(--cs-ink); } .cs-fields { display: flex; gap: 8px; align-items: stretch; max-width: 440px; } .cs-fields input { min-width: 0; flex: 1; width: 100%; height: 48px; border: 1px solid var(--cs-line); border-radius: 6px; background: var(--cs-field); color: var(--cs-ink); padding: 10px 14px; font-size: 16px; } .cs-fields input::placeholder { color: var(--cs-muted); opacity: 1; } .cs-fields input:focus-visible { outline: 2px solid var(--cs-blue); outline-offset: 3px; border-color: var(--cs-blue); } .cs-fields input[aria-invalid="true"] { border-color: var(--cs-error); } .cs-fields input:disabled { opacity: .6; } .cs-fields input:-webkit-autofill, .cs-fields input:-webkit-autofill:hover, .cs-fields input:-webkit-autofill:focus { -webkit-text-fill-color: var(--cs-ink); caret-color: var(--cs-ink); box-shadow: 0 0 0 1000px var(--cs-field) inset; transition: background-color 600000s 0s; } .cs-submit { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-height: 48px; border: 0; border-radius: 6px; background: var(--cs-button); color: var(--cs-button-text); font-weight: 600; padding: 10px 20px; cursor: pointer; } @media (hover: hover) { .cs-submit:hover:not(:disabled) { filter: brightness(1.06); } } .cs-submit:disabled { opacity: .6; cursor: default; } /* Always in the page so a new message is announced; takes no space while empty. */ .cs-feedback { font-size: 15px; line-height: 1.5; color: var(--cs-error); margin: 10px 0 0; } .cs-feedback:empty { margin: 0; } .cs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .cs-confirm { border-left: 2px solid var(--cs-blue); padding: 2px 0 2px 16px; } .cs-confirm h2 { font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -.5px; margin: 0 0 6px; } .cs-confirm h2:focus { outline: none; } .cs-confirm p { font-size: 16px; line-height: 1.5; color: var(--cs-muted); margin: 0; } /* The mark: the origin square rests muted and turns blue while the form is engaged; the boundary traces once. */ .cs-identity { order: 1; display: flex; flex-direction: column; align-items: center; width: 224px; max-width: 100%; } .ss-live-mark { width: 224px; max-width: 100%; height: auto; display: block; overflow: visible; } .cs-tagline { font-size: 24px; line-height: 1.333; letter-spacing: -.5px; margin: 32px 0 0; text-align: center; color: var(--cs-ink); } .ss-live-corner { fill: var(--cs-corner); transition: fill 300ms; } .ss-live-origin { fill: var(--cs-rest); transition: fill 260ms; } .cs-page[data-engaged="true"] .ss-live-corner { fill: var(--cs-corner-active); } .cs-page[data-engaged="true"] .ss-live-origin, .cs-page[data-arriving="true"] .ss-live-origin { fill: var(--cs-blue); } .cs-page[data-arriving="true"] .ss-live-corner { fill: var(--cs-corner-active); } .ss-live-trace { fill: none; stroke: var(--cs-blue); stroke-width: .33; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; } .cs-page[data-tracing="true"] .ss-live-trace { animation: cs-trace-boundary 1000ms cubic-bezier(.3, 0, .15, 1) both; } @keyframes cs-trace-boundary { 0% { opacity: 0; stroke-dashoffset: 100; } 10% { opacity: .75; } 75% { opacity: .75; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } } .cs-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 40px; border-top: 1px solid var(--cs-rule); padding: 20px 0 calc(20px + env(safe-area-inset-bottom, 0px)); font-size: 12px; line-height: 1.5; color: var(--cs-muted); } .cs-footer-left { display: flex; align-items: center; gap: 24px; } .cs-footer-left a { color: var(--cs-muted); } .cs-appearance { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--cs-muted); padding: 4px 0; font: inherit; cursor: pointer; } .cs-appearance svg { width: 14px; height: 14px; flex: none; } @media (max-width: 900px) { .cs-main { column-gap: 64px; padding: 56px 48px 80px; min-height: 520px; grid-template-columns: auto minmax(0, 420px); } .cs-identity, .ss-live-mark { width: 180px; } .cs-copy h1 { font-size: 44px; } .cs-description { font-size: 18px; } .cs-account span { display: none; } } @media (max-width: 640px) { .cs-header { padding: 24px; } .cs-logo { width: 194px; } .cs-main { display: flex; flex-direction: column; align-items: stretch; gap: 40px; padding: 32px 24px 56px; min-height: 0; } /* On a phone the mark stands centered over its tagline and the message centers under it. The points stay left-aligned inside a centered block so their squares line up; the form stays full width. */ .cs-identity { width: 100%; flex-direction: column; align-items: center; gap: 16px; } .ss-live-mark { width: 104px; } .cs-tagline { margin: 0; text-align: center; font-size: 22px; } .cs-copy { text-align: center; } .cs-copy h1 { font-size: 40px; margin-bottom: 16px; } .cs-description { font-size: 18px; max-width: 26em; margin-inline: auto; } .cs-points { width: fit-content; max-width: 100%; margin: 24px auto 0; text-align: left; } .cs-form-zone { margin-top: 36px; } .cs-fields { max-width: none; } .cs-feedback, .cs-confirm { text-align: left; } .cs-footer { margin: 0 24px; flex-wrap: wrap; gap: 8px 24px; } .cs-footer-left { gap: 16px; } } @media (max-width: 360px) { .cs-header { padding: 24px 20px; } .cs-logo { width: 176px; } .cs-main { padding: 24px 20px 40px; } .ss-live-mark { width: 88px; } .cs-copy h1 { font-size: 36px; } .cs-description { font-size: 17px; } .cs-fields { flex-direction: column; } .cs-fields input { flex: auto; } .cs-footer { margin: 0 20px; } } @media (prefers-reduced-motion: reduce) { .ss-live-trace { display: none; } .ss-live-corner, .ss-live-origin { transition: none; } } @media (pointer: coarse) { .cs-account a, .cs-appearance, .cs-footer-left a { min-height: 44px; display: inline-flex; align-items: center; } }