/* ══════════════════════════════════════════════════════════════════ STUDIO MARKETING — shared stylesheet Token names mirror the circlescocollective-og framework so this converts cleanly to WordPress. Studio blue (#1264ff) from the app logo. Font: Instrument Sans. No em dashes or en dashes anywhere. Per-product pages override --color-main on for theming. ══════════════════════════════════════════════════════════════════ */ /* Gilroy — brand title font (from circlesco.com theme) */ @font-face { font-family: 'Gilroy'; src: url('fonts/gilroy-light.woff2') format('woff2'), url('fonts/gilroy-light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('fonts/gilroy-semibold.woff2') format('woff2'), url('fonts/gilroy-semibold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('fonts/gilroy-bold.woff2') format('woff2'), url('fonts/gilroy-bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } :root { --color-main: #1264ff; --color-main-deep: #0a46cc; --color-main-tint: #eef3ff; --color-ink: #0a0f1c; --color-body: #515a6b; --color-headings: #0a0f1c; --color-white: #ffffff; --color-line: #e9ecf2; --color-line-soft: #f1f3f8; --color-surface: #f8f9fc; --c-craft: #1264ff; --c-faith: #5b54e6; --c-cause: #1f9d57; --c-missions: #d97706; --c-events: #d6336c; --c-give: #0e93a3; --c-modules: #7c3aed; --c-industry: #475569; --c-compare: #e11d48; --font-body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; --font-titles: 'Gilroy', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; --section-width: 1200px; --section-padding: 120px; --radius: 14px; --shadow-sm: 0 1px 2px rgba(10,15,28,.04); --shadow-md: 0 18px 40px -22px rgba(10,15,28,.22); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); color: var(--color-body); background: var(--color-white); font-size: 17px; font-weight: 500; line-height: 1.62; } h1,h2,h3,h4 { font-family: var(--font-titles); color: var(--color-headings); font-weight: 700; line-height: 1.07; letter-spacing: -0.025em; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } ::selection { background: var(--color-main); color: #fff; } .section { padding: var(--section-padding) 24px; } .wrap { max-width: var(--section-width); margin: 0 auto; } .eyebrow { display: inline-block; font-family: var(--font-titles); font-size: 14px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--color-main); margin-bottom: 20px; } .intro { max-width: 600px; } .intro h2 { font-size: clamp(36px, 4.4vw, 60px); margin-bottom: 18px; } .intro p { font-size: 18px; } /* Buttons */ .button { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15.5px; padding: 13px 24px; border-radius: 11px; border: 1px solid transparent; cursor: pointer; transition: background .18s, transform .15s, border-color .18s; } .button--primary { background: var(--color-main); color: #fff; } .button--primary:hover { background: var(--color-main-deep); } .button--ghost { background: #fff; color: var(--color-headings); border-color: var(--color-line); } .button--ghost:hover { border-color: #cfd6e4; } .button svg { width: 17px; height: 17px; } /* ── Header ─────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--color-line-soft); box-shadow: 0 6px 40px rgba(10,15,28,.08); } .nav { max-width: none; margin: 0; display: flex; align-items: center; gap: 36px; padding: 17px 40px; position: relative; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 20px; color: var(--color-ink); letter-spacing: -0.03em; } .brand .mark { width: 23px; height: 23px; color: var(--color-main); } .brand .brand-logo { height: 28px; width: auto; display: block; } .footer-brand .brand .brand-logo { height: 26px; } .nav-links { display: flex; gap: 30px; position: absolute; left: 50%; transform: translateX(-50%); } .nav-links > a, .nav-links .has-menu > a { font-size: 15px; font-weight: 500; color: #424c5e; display: inline-flex; align-items: center; gap: 5px; } .nav-links a:hover { color: var(--color-ink); } .nav-links > a.is-active, .nav-links .has-menu > a.is-active { color: var(--color-main); font-weight: 600; } .has-menu { position: relative; } .has-menu > a { cursor: pointer; } .menu { position: absolute; top: 100%; left: -16px; padding-top: 14px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s; } .has-menu:hover .menu { opacity: 1; visibility: visible; transform: translateY(0); } .menu-inner { background: #fff; border: 1px solid var(--color-line); border-radius: 14px; box-shadow: var(--shadow-md); padding: 10px; width: 300px; } .menu-inner .sub { font-size: 11px; color: #9aa3b2; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px 4px; } .menu-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; } .menu-item:hover { background: var(--color-surface); } .menu-item .ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; color: #fff; } .menu-item .ic svg { width: 16px; height: 16px; } .menu-item .nm { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--color-ink); } .menu-item .ds { display: block; font-size: 12px; line-height: 1.25; color: #9aa3b2; margin-top: 2px; } .nav-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; } .nav-actions .signin { font-size: 15px; font-weight: 600; color: #424c5e; } .nav-actions .button { padding: 7px 18px; margin-left: 10px; } /* Mobile hamburger + dropdown menu (revealed <=1024px; see media queries) */ .nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: var(--color-ink); cursor: pointer; border-radius: 10px; } .nav-toggle svg { width: 24px; height: 24px; } .nav-toggle .ico-x { display: none; } .nav-toggle[aria-expanded="true"] .ico-bars { display: none; } .nav-toggle[aria-expanded="true"] .ico-x { display: block; } .mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #f4f5f8; border-bottom: 1px solid var(--color-line); box-shadow: 0 14px 32px rgba(10,15,28,.12); padding: 10px; } .mobile-menu.open { display: block; } /* Shared 30px icon column so every icon + label lines up across rows */ .mm-item { display: flex; align-items: center; gap: 12px; padding: 14px; font-size: 16px; font-weight: 600; color: #424c5e; } .mm-item:not(:first-child) { border-top: 1px solid var(--color-line); } .mm-item .mm-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--color-main); } .mm-item .mm-ic svg { width: 22px; height: 22px; } .mm-item.is-active { color: var(--color-main); } /* Products sub-panel: light-blue tray of product-page links with accent icons */ .mm-sub { background: #eaf1ff; border-radius: 12px; margin: 4px 0 8px; padding: 2px 0; } .mm-sub-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 15px; font-weight: 600; color: #36415a; } .mm-sub-item:not(:first-child) { border-top: 1px solid rgba(18,100,255,.14); } .mm-sub-item .mm-sub-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; } .mm-sub-item .mm-sub-ic svg { width: 16px; height: 16px; } /* Subtle right-pointing chevron at the end of every menu link */ .mm-item::after, .mm-sub-item::after { content: ""; margin-left: auto; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .3; } /* ── Hero ───────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; padding: 104px 24px 0; text-align: center; background: linear-gradient(180deg, #f6f8ff 0%, #ffffff 64%); } .hero h1 { font-size: clamp(42px, 6.4vw, 78px); max-width: 14ch; margin: 0 auto 24px; letter-spacing: -0.035em; } .hero .sub { font-size: 20px; max-width: 820px; margin: 0 auto 34px; color: #515a6b; } .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero-note { margin-top: 20px; font-size: 14px; color: #9aa3b2; } .hero-visual { margin: 72px auto 0; width: calc(100% - 80px); max-width: 1180px; } /* Fixed desktop-width frame; JS scales it down via `zoom` to fit .hero-visual, so the whole dashboard shrinks like an image (no reflow) on tablet/mobile. */ .hero-frame { box-sizing: border-box; width: 1180px; transform-origin: top left; border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-line); border-bottom: none; background: #fff; } .hero-visual .bar { display: flex; align-items: center; gap: 6px; padding: 12px 15px; border-bottom: 1px solid var(--color-line-soft); } .hero-visual .bar i { width: 10px; height: 10px; border-radius: 50%; background: #e6e9f0; } .hero-visual .bar .url { margin-left: 12px; font-size: 12.5px; color: #9aa3b2; } @property --m-bg { syntax: ''; inherits: true; initial-value: #fafbfe; } @property --m-surface { syntax: ''; inherits: true; initial-value: #ffffff; } @property --m-text { syntax: ''; inherits: true; initial-value: #0a0f1c; } @property --m-line { syntax: ''; inherits: true; initial-value: #e9ecf2; } @property --m-line-soft { syntax: ''; inherits: true; initial-value: #f1f3f8; } @keyframes mockTheme { 0%, 42% { --m-bg:#fafbfe; --m-surface:#ffffff; --m-text:#0a0f1c; --m-line:#e9ecf2; --m-line-soft:#f1f3f8; } 50%, 92% { --m-bg:#0b1120; --m-surface:#151d2e; --m-text:#eaf0ff; --m-line:#28324a; --m-line-soft:#1d2638; } 100% { --m-bg:#fafbfe; --m-surface:#ffffff; --m-text:#0a0f1c; --m-line:#e9ecf2; --m-line-soft:#f1f3f8; } } .mock { display: grid; grid-template-columns: 210px 1fr; min-height: 380px; --m-bg:#fafbfe; --m-surface:#ffffff; --m-text:#0a0f1c; --m-line:#e9ecf2; --m-line-soft:#f1f3f8; animation: mockTheme 8s ease-in-out infinite; } .mock-side { background: #0a0f1c; } /* sidebar stays dark in both modes */ @media (prefers-reduced-motion: reduce) { .mock { animation: none; } } .mock-side { background: #0a0f1c; padding: 22px 14px; } .mock-side .logo { color:#fff; font-weight:700; font-size:15px; margin-bottom:24px; display:flex; gap:8px; align-items:center; letter-spacing:-0.02em; } .mock-side .logo .mark { width:17px; height:17px; color:#6f93ff; } .mock-side ul { list-style: none; display: flex; flex-direction: column; gap: 2px; } .mock-side li { color: #9aa6c0; font-size: 13px; font-weight: 500; padding: 9px 12px; border-radius: 8px; display:flex; align-items:center; gap:9px; } .mock-side li svg { width:15px; height:15px; opacity:.8; } .mock-side li.on { background: var(--color-main); color: #fff; } .mock-side li.on svg { opacity: 1; } .mock-side li .lbl { white-space: nowrap; } .mock-side li .chev { width: 13px; height: 13px; margin-left: auto; opacity: .4; } .mock-side li .nav-badge { margin-left: auto; background: var(--color-main); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; border-radius: 10px; padding: 3px 7px; } /* hero dashboard top bar */ .mock-topbar { display: flex; align-items: center; gap: 14px; margin: -24px -24px 18px; padding: 12px 18px; border-bottom: 1px solid var(--m-line-soft); background: var(--m-surface); } .mock-topbar .ws { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--m-text); white-space: nowrap; } .mock-topbar .ws svg { width: 12px; height: 12px; opacity: .5; } .mock-topbar .search { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--m-bg); border: 1px solid var(--m-line); border-radius: 9px; padding: 8px 12px; color: #aab2c0; font-size: 12px; max-width: 360px; margin: 0 auto; } .mock-topbar .search svg { width: 14px; height: 14px; flex: none; } .mock-topbar .tools { display: flex; align-items: center; gap: 13px; color: #9aa3b2; margin-left: auto; } .mock-topbar .tools svg { width: 16px; height: 16px; } .mock-topbar .avatar { width: 26px; height: 26px; border-radius: 50%; background: url('img/skye.jpg') center/cover, #e6e9f0; margin-left: 3px; flex: none; } .mock-card .ico.green { background: color-mix(in srgb, #1f9d57 16%, var(--m-surface)); color: #1f9d57; } .mock-card .v.green { color: #1f9d57; } .mock-main { padding: 24px; background: var(--m-bg); text-align: left; } .mock-main .row { display: flex; gap: 13px; margin-bottom: 14px; } .mock-card { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 12px; padding: 16px; flex: 1; } .mock-card .k { font-size: 11.5px; color: #9aa3b2; font-weight: 600; } .mock-card .v { font-size: 25px; font-weight: 700; color: var(--m-text); margin-top: 5px; letter-spacing:-0.02em; } .mock-card .v small { font-size: 12.5px; color: #1f9d57; font-weight: 600; } .mock-list { background:#fff; border:1px solid var(--color-line); border-radius:12px; } .mock-list .item { display:flex; align-items:center; gap:11px; padding: 11px 16px; border-bottom: 1px solid var(--color-line-soft); } .mock-list .item:last-child { border-bottom: none; } .mock-list .av { width: 28px; height: 28px; border-radius: 50%; background: var(--color-main); flex: none; } .mock-list .av.g { background: #1f9d57; } .mock-list .av.o { background: #d97706; } .mock-list .nm { font-size: 13px; font-weight: 600; color: var(--color-ink); } .mock-list .sb { font-size: 12px; color: #9aa3b2; } .mock-list .pill { margin-left: auto; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--color-main-tint); color: var(--color-main); } /* hero dashboard mock — projects dashboard */ .mock-head { margin-bottom: 16px; } .mock-head .hi { font-size: 19px; font-weight: 700; color: var(--m-text); letter-spacing: -0.02em; } .mock-head .dt { font-size: 12px; color: #9aa3b2; font-weight: 500; margin-top: 2px; } .mock-main .row.stats { gap: 12px; } .mock-card .v.red { color: #e5484d; } .mock-card .ico { float: right; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--color-main) 16%, var(--m-surface)); color: var(--color-main); } .mock-card .ico svg { width: 15px; height: 15px; } .mock-card .ico.red { background: color-mix(in srgb, #e5484d 16%, var(--m-surface)); color: #e5484d; } .mock-panel { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 12px; overflow: hidden; margin-top: 14px; } .mock-panel .ph { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--m-line-soft); } .mock-panel .ph .t { font-size: 14px; font-weight: 700; color: var(--m-text); } .mock-panel .ph .lk { font-size: 11.5px; font-weight: 600; color: var(--color-main); } .mock-tabs { display: flex; gap: 6px; padding: 11px 16px 0; } .mock-tabs span { font-size: 11px; font-weight: 600; color: #9aa3b2; padding: 5px 11px; border-radius: 7px; } .mock-tabs span.on { color: #4d8bff; background: color-mix(in srgb, var(--color-main) 16%, var(--m-surface)); } .mock-tr { display: grid; grid-template-columns: 1fr 96px 96px 56px; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--m-line-soft); } .mock-tr:last-child { border-bottom: 0; } .mock-tr.mo { display: none; } /* extra project rows shown only on phones */ @media (max-width: 500px) { .mock-tr.mo { display: grid; } } .mock-tr.head > span { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa3b2; } .mock-tr .pj { display: flex; align-items: center; gap: 10px; min-width: 0; } .mock-tr .pj .dot { width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--color-main) 18%, var(--m-surface)); flex: none; } .mock-tr .pj .nm { font-size: 12.5px; font-weight: 600; color: var(--m-text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock-tr .pj .cl { font-size: 11px; color: #9aa3b2; display: block; } .mock-tr .prog { display: flex; align-items: center; gap: 7px; } .mock-tr .prog .bar { flex: 1; height: 6px; border-radius: 4px; background: var(--m-line); overflow: hidden; } .mock-tr .prog .bar b { display: block; height: 100%; border-radius: 4px; background: var(--color-main); } .mock-tr .prog .pct { font-size: 10.5px; font-weight: 600; color: #9aa3b2; } .mock-tr .st { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; justify-self: start; } .mock-tr .st.blue { color: #4d8bff; background: color-mix(in srgb, #1264ff 16%, var(--m-surface)); } .mock-tr .st.purple { color: #8d87f5; background: color-mix(in srgb, #5b54e6 16%, var(--m-surface)); } .mock-tr .st.amber { color: #e0922f; background: color-mix(in srgb, #d97706 18%, var(--m-surface)); } .mock-tr .st.green { color: #34b06b; background: color-mix(in srgb, #1f9d57 16%, var(--m-surface)); } .mock-tr .due { font-size: 11.5px; font-weight: 600; color: #9aa3b2; } .mock-tr .due.late { color: #e5484d; } /* ── Logos ──────────────────────────────────────────────────────── */ .logos { padding: 44px 24px; border-bottom: 1px solid var(--color-line-soft); } .logos .wrap { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: center; } .logos p:not(.eyebrow) { font-size: 13px; color: #9aa3b2; font-weight: 500; } .logos .names { display: flex; flex-wrap: wrap; justify-content: center; gap: 38px; } .logos .names span { font-size: 17px; font-weight: 700; color: #c4cbd8; letter-spacing: -0.02em; } /* ── What we do ─────────────────────────────────────────────────── */ .what .top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; } .what .top p.big { font-size: 19px; color: var(--color-ink); font-weight: 500; } .feature-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 64px; border-top: 1px solid var(--color-line); } .feature { padding: 32px 28px 0 0; border-right: 1px solid var(--color-line); } .feature:last-child { border-right: none; padding-right: 0; padding-left: 28px; } .feature:nth-child(2) { padding-left: 28px; } .feature .ic { color: var(--color-main); margin-bottom: 16px; } .feature .ic svg { width: 24px; height: 24px; } .feature h3 { font-size: 18px; margin-bottom: 9px; } .feature p { font-size: 15.5px; } /* ── Products ───────────────────────────────────────────────────── */ .products { background: var(--color-surface); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } .row-label { display: flex; align-items: baseline; gap: 14px; margin: 44px 0 22px; } .row-label b { font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--color-ink); } .row-label span { font-size: 14px; color: #9aa3b2; } .row-label .line { height: 1px; background: var(--color-line); flex: 1; } .pgrid { display: grid; gap: 16px; } .pgrid.four { grid-template-columns: repeat(4,1fr); } .pgrid.two { grid-template-columns: repeat(2,1fr); } /* Products: pricing-card style — soft accent gradient, checkmark list, solid bottom CTA */ .pcard { position: relative; background: var(--accent, var(--color-main)); border: none; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(10,15,28,.05), 0 12px 30px -16px rgba(10,15,28,.12); transition: transform .16s ease, box-shadow .22s ease; } a.pcard { color: inherit; text-decoration: none; } .pcard-main::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(72% 58% at 92% 0%, color-mix(in srgb, var(--accent) 10%, #fff), transparent 58%); } .pcard-main > * { position: relative; z-index: 1; } .pcard:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 35%, var(--color-line)); box-shadow: 0 30px 56px -32px color-mix(in srgb, var(--accent) 70%, #0a0f1c); } .pcard:hover .pcard-cta { background: rgba(10,15,28,.08); } .pcard:hover .pcard-cta svg { transform: translateX(3px); } .pcard-main { position: relative; z-index: 1; background: #fff; border-radius: 18px 18px 22px 22px; display: flex; flex-direction: column; flex: 1; padding: 26px 26px 24px; } .pcard-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; } .pcard .ic { width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 15%, #fff); color: var(--accent); display: grid; place-items: center; } .pcard .ic svg { width: 23px; height: 23px; } .pcard .pcard-n { font-family: var(--font-titles); font-weight: 700; font-size: 16px; letter-spacing: .05em; color: var(--accent); } .pcard .badge { position: static; background: color-mix(in srgb, var(--accent) 11%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 28%, #fff); color: var(--accent); } .pcard .pname { display: block; font-family: var(--font-titles); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--color-headings); } .pcard .kind { display: block; font-size: 13px; font-weight: 600; color: #9aa3b2; margin-top: 4px; } .pcard-incl { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9aa3b2; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-line-soft); margin-bottom: 13px; } .pcard-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 0; } .pcard-list li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 500; color: var(--color-ink); } .pcard-list .ck { width: 21px; height: 21px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 15%, #fff); color: var(--accent); } .pcard-list .ck svg { width: 12px; height: 12px; } .pcard-cta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: #fff; font-family: var(--font-titles); font-weight: 600; font-size: 15px; padding: 18px 16px 20px; transition: background .18s ease; } .pcard-cta svg { width: 18px; height: 18px; transition: transform .18s ease; } .prod-intro { margin-bottom: 8px; } .prod-intro > .eyebrow { display: inline-block; margin-bottom: 16px; } .prod-intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 64px; align-items: start; } .prod-intro-grid h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -0.035em; margin: 0; } .prod-intro-grid p { font-size: 18px; color: var(--color-body); margin: 0; line-height: 1.6; } @media (max-width: 860px) { .prod-intro-grid { grid-template-columns: 1fr; gap: 14px; } } .prod-spine { position: relative; display: flex; justify-content: center; margin: 30px 0 4px; } .prod-spine::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--color-line); } .prod-spine-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 999px; padding: 9px 20px; font-size: 13.5px; font-weight: 600; color: #515a6b; } .prod-spine-pill svg { width: 17px; height: 17px; color: var(--color-main); } .badge { position: absolute; top: 24px; right: 24px; font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 4px 10px; border-radius: 6px; background: var(--color-surface); border: 1px solid var(--color-line); color: #6b7488; } .pcard ul.mods { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .pcard ul.mods li { font-size: 12px; font-weight: 500; color: #515a6b; background: var(--color-surface); border: 1px solid var(--color-line); padding: 4px 9px; border-radius: 6px; } .upgrade-note { font-size: 13px; color: #9aa3b2; margin-top: 4px; } .upgrade-note b { color: var(--accent); font-weight: 600; } /* ── Modules ────────────────────────────────────────────────────── */ .modules .top { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; } .modules .top .note { font-size: 14px; color: #9aa3b2; max-width: 220px; text-align: right; } .mgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 56px; } .module { padding: 18px 20px; display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--color-line); border-radius: 12px; transition: border-color .15s, transform .15s; } .module:hover { border-color: #cfd6e4; transform: translateY(-2px); } .module .ic { color: var(--mod-accent, var(--color-main)); flex: none; transition: color .2s; } .module .ic svg { width: 21px; height: 21px; } .module .nm { font-size: 14.5px; font-weight: 600; color: var(--color-ink); letter-spacing: -0.01em; } .module.is-hidden { display: none; } .mfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; } .mpill { font-size: 14px; font-weight: 600; color: #515a6b; background: #fff; border: 1px solid var(--color-line); border-radius: 30px; padding: 8px 16px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; display: inline-flex; align-items: center; gap: 7px; } .mpill:hover { border-color: #cfd6e4; color: var(--color-ink); } .mpill .count { font-size: 12px; font-weight: 600; color: #9aa3b2; font-variant-numeric: tabular-nums; } .mpill.active { background: var(--accent, var(--color-main)); border-color: var(--accent, var(--color-main)); color: #fff; } .mpill.active .count { color: rgba(255,255,255,.72); } .modules .mgrid { margin-top: 26px; } /* Homepage: symmetric 54px gap above and below the product pill row. */ .studio-home .seg-wrap { margin-top: 54px; } .studio-home .modules .mgrid { margin-top: 54px; } /* module cards with tagline */ .module { align-items: flex-start; } .module .ic { margin-top: 1px; } .module .mtext .nm { font-size: 14.5px; font-weight: 600; color: var(--color-ink); letter-spacing: -0.01em; line-height: 1.25; } .module .mtag { font-size: 12.5px; color: #8a93a6; margin-top: 3px; line-height: 1.35; } /* Apple-style segmented control */ .seg-wrap { display: flex; justify-content: center; margin-top: 44px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px; } .seg-wrap::-webkit-scrollbar { display: none; } .seg { position: relative; display: inline-flex; align-items: center; background: #e7ecf5; border: 1px solid var(--color-line); border-radius: 40px; padding: 5px; } .seg-thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: 64px; border-radius: 30px; background: #fff; box-shadow: 0 1px 4px rgba(10,15,28,.18); transition: left .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1); z-index: 0; } .mseg-btn { position: relative; z-index: 1; border: none; background: transparent; font-family: inherit; font-size: 14.5px; font-weight: 600; color: #5b6473; padding: 9px 18px; border-radius: 30px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: color .2s; } .mseg-btn:hover { color: var(--color-ink); } .mseg-btn .count { font-size: 12px; color: #9aa3b2; font-variant-numeric: tabular-nums; } .mseg-btn.active { color: var(--color-ink); } .mseg-btn.active .count { color: var(--accent, var(--color-main)); } /* ── Why ────────────────────────────────────────────────────────── */ .why .grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; } .why .left { position: sticky; top: 100px; align-self: start; } .why .left h2 { font-size: clamp(33px, 3.6vw, 46px); margin-bottom: 18px; } .why .left p { font-size: 17px; } .why .left .button { margin-top: 26px; } .why-list { display: flex; flex-direction: column; } .why-item { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--color-line); } .why-item:first-child { border-top: none; padding-top: 0; } .why-item .num { font-size: 15px; font-weight: 700; color: var(--color-main); font-variant-numeric: tabular-nums; } .why-item h3 { font-size: 20px; margin-bottom: 8px; letter-spacing: -0.02em; } .why-item p { font-size: 16px; } /* ── Pricing ────────────────────────────────────────────────────── */ .pricing { background: var(--color-surface); border-top: 1px solid var(--color-line); } .plan-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 48px; } .plan { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius); padding: 30px 26px; display: flex; flex-direction: column; } .plan.featured { border-color: var(--color-main); position: relative; } .plan.featured::before { content: "Most popular"; position: absolute; top: -11px; left: 24px; background: var(--color-main); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 6px; } .plan .name { font-size: 14px; font-weight: 700; color: var(--color-ink); } .plan .price { font-size: 40px; font-weight: 700; color: var(--color-ink); margin: 16px 0 6px; letter-spacing: -0.03em; } .plan .price small { font-size: 15px; font-weight: 500; color: #9aa3b2; } .plan .desc { font-size: 14px; color: var(--color-body); min-height: 44px; margin-bottom: 22px; line-height: 1.5; } .plan ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; flex: 1; } .plan li { font-size: 14px; display: flex; gap: 9px; align-items: flex-start; } .plan li svg { color: var(--color-main); flex: none; margin-top: 3px; width: 15px; height: 15px; } .plan .button { justify-content: center; width: 100%; } .standalone { margin-top: 56px; } .sp-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; } .sp-card { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius); padding: 28px; } .sp-card .head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .sp-card .head .ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); } .sp-card .head .ic svg { width: 20px; height: 20px; } .sp-card .head h3 { font-size: 18px; } .sp-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .sp-tier .t { font-size: 12.5px; font-weight: 700; color: #9aa3b2; } .sp-tier .p { font-size: 27px; font-weight: 700; color: var(--color-ink); margin: 5px 0; letter-spacing: -0.02em; } .sp-tier .p small { font-size: 13px; font-weight: 500; color: #9aa3b2; } .sp-tier .n { font-size: 13px; color: var(--color-body); } .upgrade-banner { text-align: center; font-size: 14.5px; color: #515a6b; margin-top: 28px; } .upgrade-banner b { color: var(--color-main); font-weight: 600; } .addon { display: flex; align-items: center; gap: 22px; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius); padding: 24px 28px; margin-top: 14px; } .addon .ic { width: 46px; height: 46px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--color-main-tint); color: var(--color-main); } .addon .ic svg { width: 24px; height: 24px; } .addon .body { flex: 1; } .addon h3 { font-size: 18px; margin-bottom: 5px; letter-spacing: -0.02em; } .addon p { font-size: 14.5px; } .addon .tag { flex: none; text-align: right; } .addon .tag .p { font-size: 22px; font-weight: 700; color: var(--color-ink); letter-spacing: -0.02em; } .addon .tag .p small { font-size: 13px; font-weight: 500; color: #9aa3b2; } .addon .tag .l { font-size: 12px; font-weight: 600; color: var(--color-main); } /* ── Testimonials ───────────────────────────────────────────────── */ .testimonials { border-top: 1px solid var(--color-line); } .lead-quote { max-width: 860px; margin: 0 auto; text-align: center; } .lead-quote blockquote { font-size: clamp(24px, 3vw, 34px); font-weight: 600; color: var(--color-ink); letter-spacing: -0.02em; line-height: 1.28; margin-bottom: 28px; } .lead-quote .who { display: inline-flex; align-items: center; gap: 12px; } .lead-quote .who .av { width: 44px; height: 44px; border-radius: 50%; background: var(--color-main); } .lead-quote .who .nm { font-size: 15px; font-weight: 700; color: var(--color-ink); text-align: left; } .lead-quote .who .rl { font-size: 14px; color: #9aa3b2; text-align: left; } .quote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; } .quote { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 28px; } .quote p { font-size: 16.5px; color: var(--color-ink); margin-bottom: 20px; line-height: 1.5; } .quote .who { display: flex; align-items: center; gap: 11px; } .quote .who .av { width: 38px; height: 38px; border-radius: 50%; background: #1f9d57; flex: none; } .quote .who .av.b { background: #5b54e6; } .quote .who .nm { font-size: 14px; font-weight: 700; color: var(--color-ink); } .quote .who .rl { font-size: 13px; color: #9aa3b2; } /* ── Final CTA ──────────────────────────────────────────────────── */ /* Legal pages (Privacy / Terms / Security) — long-form prose in Studio chrome. */ .legal-doc { padding: 72px 24px 96px; } .legal-doc .wrap { max-width: 760px; } .legal-doc-head { margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--color-line); } .legal-doc-head h1 { font-size: clamp(34px, 4.5vw, 48px); letter-spacing: -0.03em; margin: 10px 0 0; } .legal-doc .legal-eff { color: var(--color-body); font-size: 15px; margin: 14px 0 0; } .legal-body { color: var(--color-body); font-size: 17px; line-height: 1.75; } .legal-body h2 { color: var(--color-ink); font-size: 22px; letter-spacing: -0.02em; margin: 40px 0 12px; } .legal-body p { margin: 0 0 16px; } .legal-body ul { margin: 0 0 16px; padding-left: 22px; } .legal-body li { margin: 0 0 8px; } .legal-body a { color: var(--color-main); font-weight: 600; } .legal-body strong { color: var(--color-ink); } /* About + Contact pages -------------------------------------------------- */ .ab-hero { padding-top: 84px; } .ab-hero h1 { line-height: 1.06; max-width: 22ch; } .ab-strip { padding: 0 24px; margin: 48px 0 8px; } .ab-strip .wrap { max-width: 1000px; } .ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 30px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } .ab-stat { text-align: center; } .ab-stat .n { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; color: var(--color-main); line-height: 1; } .ab-stat .l { margin-top: 8px; color: var(--color-body); font-size: 14px; } .ab-video-sec .wrap { max-width: 1000px; } .ab-video { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; border: 1px solid var(--color-line); box-shadow: 0 40px 80px -38px rgba(10,15,28,.45); background: #0a0f1c; } .ab-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ab-video-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background-size: cover; background-position: center; display: grid; place-items: center; } .ab-video-play::after { content: ''; position: absolute; inset: 0; background: rgba(10,15,28,.14); transition: background .25s; } .ab-video-play:hover::after { background: rgba(10,15,28,.04); } .ab-play { position: relative; z-index: 1; width: 80px; height: 80px; border-radius: 50%; border: 3px solid rgba(255,255,255,.95); background: rgba(255,255,255,.14); display: grid; place-items: center; transition: transform .2s ease, background .2s ease; } .ab-video-play:hover .ab-play { transform: scale(1.07); background: rgba(255,255,255,.26); } .ab-play svg { width: 30px; height: 30px; margin-left: 4px; color: #fff; fill: #fff; } .ab-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 12px; } .ab-step { background: #fff; border: 1px solid var(--color-line); border-radius: 18px; padding: 30px 26px; } .ab-step-n { display: inline-flex; font-size: 15px; font-weight: 700; color: var(--color-main); background: var(--color-main-tint); width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 11px; letter-spacing: -0.02em; } .ab-step h3 { font-size: 20px; letter-spacing: -0.02em; margin: 18px 0 8px; } .ab-step p { color: var(--color-body); font-size: 15.5px; line-height: 1.65; margin: 0; } .ab-process { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .ab-process-text h2 { font-size: clamp(36px, 4.4vw, 60px); letter-spacing: -0.02em; margin: 12px 0 18px; } .ab-process-text p { color: var(--color-body); font-size: 17px; line-height: 1.75; margin: 0 0 16px; } .ab-process-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; border: 1px solid var(--color-line); box-shadow: 0 30px 60px -34px rgba(10,15,28,.4); } /* Big centered statement — blue rules top and bottom. */ .ab-statement { background: #0a0f1c; color: #fff; padding: 92px 24px; } .ab-statement .wrap { max-width: 1280px; text-align: center; } .ab-statement .ab-rule { width: 120px; height: 3px; border-radius: 2px; background: var(--color-main); margin: 0 auto; } .ab-statement p { font-size: clamp(34px, 5.4vw, 62px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.16; margin: 40px auto; max-width: 24ch; } .ab-hl { color: var(--color-main); } /* Circles Conference / Forbes credential. */ .ab-conf-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: center; } .ab-conf-text h2 { font-size: clamp(36px, 4.4vw, 60px); letter-spacing: -0.02em; margin: 12px 0 16px; } .ab-conf-text p { color: var(--color-body); font-size: 17px; line-height: 1.72; margin: 0; } .ab-conf-text strong { color: var(--color-ink); } .ab-conf-card { background: #0a0f1c; color: #fff; border-radius: 22px; padding: 44px 38px; text-align: center; box-shadow: 0 40px 80px -38px rgba(10,15,28,.5); } .ab-conf-kicker { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-main); } .ab-conf-quote { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin: 16px 0 10px; } .ab-conf-src { color: #97a1b6; font-size: 15px; font-weight: 600; } .ab-founder { max-width: 720px; margin: 8px auto 0; } .ab-founder-card { background: #fff; border: 1px solid var(--color-line); border-radius: 20px; padding: 34px; box-shadow: 0 22px 50px -32px rgba(10,15,28,.25); } .ab-founder-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; } .ab-av { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--color-main); color: #fff; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; overflow: hidden; flex: none; } .ab-av img { width: 100%; height: 100%; object-fit: cover; } .ab-name { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-ink); } .ab-role { color: var(--color-main); font-size: 14px; font-weight: 600; } .ab-founder-card p { color: var(--color-body); font-size: 16px; line-height: 1.72; margin: 0 0 14px; } .ab-founder-card p:last-child { margin-bottom: 0; } .ct-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 360px)); gap: 22px; justify-content: center; } .ct-card { background: #fff; border: 1px solid var(--color-line); border-radius: 18px; padding: 28px 24px; } .ct-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--color-main-tint); color: var(--color-main); margin-bottom: 16px; } .ct-ic svg { width: 22px; height: 22px; } .ct-card h3 { font-size: 19px; letter-spacing: -0.02em; margin: 0 0 8px; } .ct-card p { color: var(--color-body); font-size: 15px; line-height: 1.6; margin: 0 0 16px; } .ct-link { font-weight: 600; color: var(--color-main); display: inline-flex; align-items: center; gap: 6px; } .ct-form-sec { background: var(--color-surface); border-top: 1px solid var(--color-line); } .ct-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; max-width: 1040px; margin: 0 auto; } .ct-form-card { background: #fff; border: 1px solid var(--color-line); border-radius: 20px; padding: 34px; } .ct-form-card h2 { font-size: 26px; letter-spacing: -0.02em; margin: 0 0 6px; } .ct-form-sub { color: var(--color-body); margin: 0 0 22px; } /* Gravity Forms — restyle to match the Studio site. */ .ct-form-card .gform_required_legend { color: var(--color-body); font-size: 13px; margin: 0 0 18px; } .ct-form-card .gform_wrapper .gform_fields { gap: 20px 18px; } .ct-form-card .gfield_label, .ct-form-card .gform_wrapper legend.gfield_label { font-weight: 600; font-size: 15px; color: var(--color-ink); margin: 0 0 8px; letter-spacing: -0.01em; } .ct-form-card .gfield_required { color: var(--color-main); margin-left: 2px; } .ct-form-card .gform_wrapper input[type="text"], .ct-form-card .gform_wrapper input[type="email"], .ct-form-card .gform_wrapper input[type="tel"], .ct-form-card .gform_wrapper input[type="url"], .ct-form-card .gform_wrapper input[type="number"], .ct-form-card .gform_wrapper select, .ct-form-card .gform_wrapper textarea { width: 100%; background: #fff; color: var(--color-ink); border: 1px solid var(--color-line); border-radius: 11px; padding: 12px 14px; font-size: 15px; font-family: inherit; line-height: 1.4; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; } .ct-form-card .gform_wrapper textarea { min-height: 150px; resize: vertical; } .ct-form-card .gform_wrapper input:focus, .ct-form-card .gform_wrapper select:focus, .ct-form-card .gform_wrapper textarea:focus { outline: none; border-color: var(--color-main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-main) 16%, #fff); } .ct-form-card .gform_wrapper .ginput_complex label, .ct-form-card .gform_wrapper .gfield_description, .ct-form-card .gform_wrapper .ginput_container_name label { color: var(--color-body); font-size: 13px; font-weight: 500; margin-top: 6px; } .ct-form-card .gform_footer { margin-top: 24px; padding: 0; } .ct-form-card .gform_wrapper .gform_footer input[type="submit"], .ct-form-card .gform_wrapper .gform_button { display: inline-flex; align-items: center; justify-content: center; background: var(--color-main); color: #fff; font-weight: 600; font-size: 15.5px; font-family: inherit; padding: 13px 28px; border-radius: 11px; border: 1px solid transparent; cursor: pointer; width: auto; transition: background .18s, transform .15s; } .ct-form-card .gform_wrapper .gform_footer input[type="submit"]:hover, .ct-form-card .gform_wrapper .gform_button:hover { background: var(--color-main-deep); } .ct-form-card .gform_wrapper .gform_footer input[type="submit"]:active { transform: translateY(1px); } .ct-form-card .gform_wrapper .gfield_validation_message, .ct-form-card .gform_wrapper .validation_message { color: #c0392b; font-size: 13px; margin-top: 6px; } .ct-form-card .gform_wrapper .gform_validation_errors { border-radius: 12px; } /* Contact: centered title above a centered form, with the 'other ways' row below. */ .ct-form-intro { margin-bottom: 36px; } .ct-form-sec .ct-form-card { max-width: 680px; margin: 0 auto; } .ct-reach { max-width: 680px; margin: 56px auto 0; text-align: center; } .ct-reach-title { font-size: 24px; letter-spacing: -0.02em; margin: 0 0 28px; } .ct-reach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; text-align: left; } .ct-reach-item { display: flex; gap: 14px; align-items: flex-start; } .ct-reach-ic { flex: none; color: var(--color-main); } .ct-reach-ic svg { width: 28px; height: 28px; } .ct-reach-l { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink); margin-bottom: 4px; } .ct-reach-c a { color: var(--color-main); font-weight: 600; } .ct-reach-addr { color: var(--color-body); line-height: 1.6; } .ct-details h3 { font-size: 17px; letter-spacing: -0.01em; margin: 0 0 18px; } .ct-detail { margin: 0 0 18px; color: var(--color-body); line-height: 1.6; } .ct-detail-l { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink); margin-bottom: 4px; } .ct-detail a { color: var(--color-main); font-weight: 600; } @media (max-width: 880px) { .ab-stats, .ab-steps, .ct-cards { grid-template-columns: 1fr; } .ct-grid, .ab-process, .ab-conf-grid { grid-template-columns: 1fr; gap: 28px; } .ct-reach-grid { grid-template-columns: 1fr; gap: 22px; } .ab-process-media { order: -1; } } .final-wrap { padding: 0 24px; margin: 0 0 96px; } /* When the light-blue accounts section sits directly above the dark closer, add a white gap so the two color blocks don't butt against each other. */ .accounts-sec + .final-wrap { margin-top: 80px; } .final { max-width: var(--section-width); margin: 0 auto; background: var(--color-ink); color: #fff; border-radius: 22px; padding: 80px 40px; text-align: center; position: relative; overflow: hidden; } .final::after { content:""; position:absolute; inset:0; background: radial-gradient(600px 300px at 50% 0%, color-mix(in srgb, var(--color-main) 40%, transparent), transparent 70%); pointer-events:none; } .final h2 { color: #fff; font-size: clamp(32px,4.2vw,50px); margin-bottom: 16px; position: relative; } .final p { font-size: 18px; color: rgba(255,255,255,.72); max-width: 480px; margin: 0 auto 30px; position: relative; } .final .hero-cta { position: relative; } .final .button--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); } .final .button--ghost:hover { border-color: rgba(255,255,255,.5); } .final .button--primary { background: #fff; color: var(--color-ink); } .final .button--primary:hover { background: #eef3ff; } /* ── Footer ─────────────────────────────────────────────────────── */ .footer { background: #0a0f1c; color: #97a1b6; padding: 76px 24px 36px; } .footer-top { display: flex; gap: 40px; align-items: flex-start; } .footer-brand { flex: 2 1 0; min-width: 0; padding-right: 56px; } .footer-col { flex: 1 1 0; min-width: 0; } .footer-brand .brand { color: #fff; margin-bottom: 16px; } .footer-brand .brand .mark { color: #6f93ff; } .footer-brand p { font-size: 14px; color: #6b7488; max-width: 250px; margin-bottom: 22px; line-height: 1.55; } .footer-news { display: flex; gap: 8px; max-width: 290px; } .footer-news input { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 11px 13px; color: #fff; font-size: 14px; } .footer-news input::placeholder { color: #5b6477; } .footer-news button { background: var(--color-main); border: none; color: #fff; border-radius: 9px; padding: 0 16px; font-weight: 600; cursor: pointer; } .footer-col h4 { color: #fff; font-size: 13px; margin-bottom: 16px; letter-spacing: -0.01em; } .footer-col .sub { font-size: 11px; color: #4f5972; text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 9px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .footer-col a { font-size: 14px; color: #97a1b6; } .footer-col a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.07); font-size: 13px; color: #5b6477; } .footer-bottom .legal { display: flex; gap: 22px; } .footer-bottom .legal a { color: #6b7488; } .footer-social { display: flex; gap: 12px; } .footer-social a { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.05); display: grid; place-items: center; color: #97a1b6; } .footer-social a:hover { background: var(--color-main); color: #fff; } /* ══════════════════════════════════════════════════════════════════ PRODUCT PAGES (per org type) ══════════════════════════════════════════════════════════════════ */ .phero { position: relative; overflow: hidden; padding: 96px 24px 80px; background: linear-gradient(180deg, color-mix(in srgb, var(--color-main) 5%, #fff) 0%, #fff 72%); } .phero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .phero .pill-kind { display: inline-flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 700; color: var(--accent, var(--color-main)); background: transparent; border: 0; padding: 0; margin-bottom: 22px; } .phero .pill-kind svg { width: 18px; height: 18px; flex: none; box-sizing: content-box; padding: 9px; background: var(--accent, var(--color-main)); color: #fff; border-radius: 11px; } .phero h1 { font-size: clamp(38px, 4.8vw, 60px); letter-spacing: -0.035em; margin-bottom: 20px; } .phero .sub { font-size: 19px; max-width: 30ch; margin-bottom: 30px; } .phero .hero-cta { justify-content: flex-start; } .phero-visual { min-width: 0; } /* The mockup scales up to fill the hero column (see the .mock-fit scaler), so the shadow box tracks the mockup edges instead of stranding space on the right. */ .phero-visual .bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--color-line-soft); } .phero-visual .bar i { width: 9px; height: 9px; border-radius: 50%; background: #e6e9f0; } /* replaces strip */ .replaces { padding: 40px 24px; background: var(--color-main); } .replaces .wrap { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; justify-content: center; } .replaces .lbl { font-family: var(--font-titles); font-size: 30px; font-weight: 700; color: var(--color-ink); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; } .replaces .names { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; } .replaces .names span { font-family: var(--font-titles); font-size: 30px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.55); text-decoration-thickness: 2px; } /* includes grid */ .includes { background: var(--color-surface); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } .inc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 48px; } .inc { background: #fff; border: 1px solid var(--color-line); border-radius: 12px; padding: 18px 20px; display: flex; align-items: center; gap: 12px; transition: border-color .15s, transform .15s; } .inc:hover { border-color: color-mix(in srgb, var(--color-main) 35%, var(--color-line)); transform: translateY(-2px); } .inc .ic { color: var(--color-main); flex: none; } .inc .ic svg { width: 21px; height: 21px; } .inc .nm { font-size: 14px; font-weight: 600; color: var(--color-ink); letter-spacing: -0.01em; } /* feature rows (Eventrise style) */ .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 64px 0 0; } .frow.flip .ftext { order: 2; } /* Feature-row mockups fill their column (the .mock-fit scaler scales the 480px design up/down to fit), so no width cap or alignment is needed here. */ .frow .ftext .tag { font-size: 13px; font-weight: 700; color: var(--color-main); letter-spacing: .03em; margin-bottom: 14px; } .frow .ftext h3 { font-size: clamp(27px, 2.9vw, 36px); letter-spacing: -0.025em; margin-bottom: 14px; } .frow .ftext p { font-size: 16.5px; margin-bottom: 18px; } .frow .ftext ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .frow .ftext li { font-size: 15px; display: flex; gap: 9px; align-items: flex-start; color: var(--color-ink); } .frow .ftext li svg { width: 16px; height: 16px; color: var(--color-main); flex: none; margin-top: 3px; } /* "One login, every role" — the accounts section (light blue, sits before the closer) */ .accounts-sec { background: linear-gradient(180deg, #f6f9ff 0%, #eef4ff 100%); border-top: 1px solid var(--color-line); } .accounts-sec .intro { max-width: 660px; margin: 0 auto 8px; } .accounts-sec .intro .sub { font-size: 17px; color: var(--color-ink-soft, #5a6478); } /* Every mockup is a fixed 480px design; .mock-fit + JS zoom-scale it to fit any column (hero, feature rows, product hero, module pages) — proportional shrink. */ .mock-fit { width: 100%; min-width: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 20px 44px -24px rgba(10,15,28,.18), 0 3px 9px -5px rgba(10,15,28,.05); } /* hidden (not clip) — iOS Safari support; stops the 480px mockup widening the page before JS scales it. Shadow lives here (not .fmock) so overflow:hidden doesn't clip it; clipped harmlessly inside .shot (homepage rows keep their card look) and never touches the .hero-frame dashboard. */ .fmock { width: 480px; box-sizing: border-box; transform-origin: top left; background: #fff; border: 1px solid var(--color-line); border-radius: 16px; box-shadow: var(--shadow-md); overflow: hidden; } /* Inside the homepage .shot card: drop the mock-fit shadow (it bleeds into the card padding, clipped unevenly by .shot's overflow) and the radius. Keep width:100% so the mockup fills the card — the scaler shrinks the 480px design to fit, leaving the card's own even padding as the only spacing. */ .shot .mock-fit { box-shadow: none; border-radius: 0; } .fmock .bar { display: flex; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--color-line-soft); } .fmock .bar i { width: 9px; height: 9px; border-radius: 50%; background: #e6e9f0; } .fmock .body { padding: 26px 22px; background: #fafbfe; min-height: 380px; display: flex; flex-direction: column; justify-content: center; } .fmock .mm-tt { font-size: 12.5px; font-weight: 700; color: var(--color-ink); line-height: 1.25; display: block; } .fmock .mm-st { font-size: 11px; font-weight: 500; color: #8a93a5; line-height: 1.25; margin-top: 3px; display: block; } .fmock .mm-hd { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a93a5; margin-bottom: 1px; } .fmock .mm-li .mm-tt { flex: 1; } .fmock .fbar { height: 12px; border-radius: 6px; background: var(--color-line); margin-bottom: 10px; } .fmock .fbar.a { width: 70%; background: color-mix(in srgb, var(--color-main) 70%, #fff); } .fmock .fbar.b { width: 90%; } .fmock .fbar.c { width: 55%; } .fmock .frowline { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--color-line); border-radius: 10px; padding: 12px 14px; margin-bottom: 9px; } .fmock .frowline .dot { width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--color-main) 25%, #fff); flex: none; } .fmock .frowline .t1 { height: 9px; width: 120px; border-radius: 5px; background: var(--color-line); } .fmock .frowline .t2 { height: 8px; width: 70px; border-radius: 5px; background: var(--color-line-soft); margin-top: 6px; } .fmock .frowline .tag2 { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--color-main); background: color-mix(in srgb, var(--color-main) 12%, #fff); padding: 3px 9px; border-radius: 6px; } /* ── Module mock kit ── per-module graphics, all themed off --color-main ── */ .fmock .mm { display: flex; flex-direction: column; gap: 9px; } .fmock .mm-row { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--color-line); border-radius: 10px; padding: 11px 13px; } .fmock .mm-ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--color-main) 12%, #fff); color: var(--color-main); } .fmock .mm-ic svg { width: 16px; height: 16px; } .fmock .mm-ic.ok { background: #e9f7ef; color: #1f9d57; } .fmock .mm-av { width: 30px; height: 30px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--color-main) 22%, #fff); } .fmock .mm-av.on { background: var(--color-main); } .fmock .mm-grow { flex: 1; min-width: 0; } .fmock .mm-line { height: 9px; border-radius: 5px; background: var(--color-line); display: block; } .fmock .mm-line.sm { height: 8px; background: var(--color-line-soft); margin-top: 6px; } .fmock .mm-amt { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--color-ink); } .fmock .mm-badge { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--color-main); background: color-mix(in srgb, var(--color-main) 12%, #fff); padding: 3px 9px; border-radius: 6px; white-space: nowrap; } .fmock .mm-badge.ok { color: #1f9d57; background: #e9f7ef; } /* pill selector + button (giving, pages, mobile) */ .fmock .mm-pills { display: flex; gap: 8px; } .fmock .mm-pill { flex: 1; text-align: center; font-size: 13px; font-weight: 700; padding: 11px 0; border-radius: 10px; border: 1px solid var(--color-line); color: #8a93a5; background: #fff; } .fmock .mm-pill.on { border-color: var(--color-main); color: var(--color-main); background: color-mix(in srgb, var(--color-main) 8%, #fff); } .fmock .mm-btn { text-align: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--color-main); border-radius: 10px; padding: 12px 0; } .fmock .mm-banner { height: 52px; border-radius: 10px; background: linear-gradient(120deg, var(--color-main), color-mix(in srgb, var(--color-main) 55%, #fff)); display: flex; align-items: center; padding: 0 14px; } .fmock .mm-banner .mm-line { background: rgba(255,255,255,.7); width: 50%; } /* progress meter (campaigns) */ .fmock .mm-statrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; color: var(--color-ink); } .fmock .mm-statrow b { color: var(--color-main); font-size: 15px; } .fmock .mm-statrow span.s { font-size: 11px; font-weight: 600; color: #8a93a5; } .fmock .mm-meter { height: 10px; border-radius: 6px; background: var(--color-line); overflow: hidden; } .fmock .mm-meter > i { display: block; height: 100%; border-radius: 6px; background: var(--color-main); } /* chart (reporting) */ .fmock .mm-chart { display: flex; align-items: flex-end; gap: 9px; height: 96px; } .fmock .mm-chart i { flex: 1; border-radius: 5px 5px 0 0; background: color-mix(in srgb, var(--color-main) 28%, #fff); } .fmock .mm-chart i.hi { background: var(--color-main); } /* calendar / booking grid (facilities) */ .fmock .mm-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .fmock .mm-cal i { aspect-ratio: 1; border-radius: 6px; background: #fff; border: 1px solid var(--color-line); } .fmock .mm-cal i.dim { background: var(--color-line-soft); border-color: transparent; } .fmock .mm-cal i.on { background: var(--color-main); border-color: var(--color-main); } .fmock .mm-cal i.on2 { background: color-mix(in srgb, var(--color-main) 35%, #fff); border-color: transparent; } /* form fields (forms, registration, mobile) */ .fmock .mm-field .lbl { height: 8px; border-radius: 4px; background: #c2c8d4; margin-bottom: 8px; } .fmock .mm-field .box { height: 34px; border-radius: 9px; border: 1px solid var(--color-line); background: #fff; display: flex; align-items: center; gap: 8px; padding: 0 11px; } .fmock .mm-field .box .txt { height: 8px; border-radius: 4px; background: #ccd2dd; } .fmock .mm-field .box .txt.sm { height: 7px; } .fmock .mm-field .box.sel .chev { margin-left: auto; flex: none; width: 7px; height: 7px; border-right: 2px solid #9aa3b2; border-bottom: 2px solid #9aa3b2; transform: translateY(-2px) rotate(45deg); } .fmock .mm-field .box.area { height: auto; flex-direction: column; align-items: flex-start; gap: 8px; padding: 11px; } .fmock .mm-field .box.fill { background: color-mix(in srgb, var(--color-main) 7%, #fff); border-color: var(--color-main); } .fmock .mm-field .box.fill .txt { background: color-mix(in srgb, var(--color-main) 42%, #fff); } /* avatar cluster (groups) */ .fmock .mm-avs { display: flex; flex-wrap: wrap; gap: 8px; } .fmock .mm-avs i { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--color-main) 18%, #fff); } .fmock .mm-avs i:nth-child(3n) { background: var(--color-main); } .fmock .mm-avs i:nth-child(4n) { background: color-mix(in srgb, var(--color-main) 40%, #fff); } /* overlapping avatar stack with initials (groups roster) */ .fmock .mm-stack { display: flex; align-items: center; padding: 2px 0; } .fmock .mm-stack .av, .fmock .mm-stack .more { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 2px solid #fafbfe; margin-left: -9px; flex: none; } .fmock .mm-stack .av:first-child { margin-left: 0; } .fmock .mm-stack .av { color: #fff; background: var(--color-main); } .fmock .mm-stack .av.t1 { background: color-mix(in srgb, var(--color-main) 70%, #fff); } .fmock .mm-stack .av.t2 { background: color-mix(in srgb, var(--color-main) 32%, #fff); color: var(--color-main); } .fmock .mm-stack .more { color: var(--color-main); background: color-mix(in srgb, var(--color-main) 12%, #fff); } /* grid of sponsorable people (sponsorships) */ .fmock .mm-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .fmock .mm-pcard { background: #fff; border: 1px solid var(--color-line); border-radius: 11px; padding: 13px 8px 11px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; } .fmock .mm-pcard .av { width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--color-main) 22%, #fff); } .fmock .mm-pcard:nth-child(3n+1) .av { background: var(--color-main); } .fmock .mm-pcard:nth-child(3n) .av { background: color-mix(in srgb, var(--color-main) 42%, #fff); } .fmock .mm-pcard .nm { font-size: 11.5px; font-weight: 700; color: var(--color-ink); line-height: 1.2; } .fmock .mm-pcard .mt { font-size: 10.5px; font-weight: 600; color: var(--color-main); } /* small metric cards (sites & plugins) */ .fmock .mm-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .fmock .mm-metric { background: #fff; border: 1px solid var(--color-line); border-radius: 11px; padding: 13px 12px; } .fmock .mm-metric .n { font-size: 22px; font-weight: 800; color: var(--color-ink); letter-spacing: -0.02em; line-height: 1; } .fmock .mm-metric .l { font-size: 10.5px; font-weight: 600; color: #8a93a5; margin-top: 6px; } .fmock .mm-metric.accent { background: color-mix(in srgb, var(--color-main) 8%, #fff); border-color: color-mix(in srgb, var(--color-main) 24%, #fff); } .fmock .mm-metric.accent .n { color: var(--color-main); } /* launchpad app-switcher grid (account roles) */ .fmock .mm-lp-hd { text-align: center; margin-bottom: 2px; } .fmock .mm-lp-hd b { display: block; font-size: 14px; font-weight: 800; color: var(--color-ink); letter-spacing: -0.02em; } .fmock .mm-lp-hd span { font-size: 11px; font-weight: 500; color: #8a93a5; } .fmock .mm-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .fmock .mm-app { background: #fff; border: 1px solid var(--color-line); border-radius: 11px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .fmock .mm-app .top { display: flex; align-items: center; gap: 8px; } .fmock .mm-app .ic { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--color-main) 12%, #fff); color: var(--color-main); } .fmock .mm-app .ic svg { width: 15px; height: 15px; } .fmock .mm-app .ic.g { background: #e9f7ef; color: #1f9d57; } .fmock .mm-app .chip { font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-main); background: color-mix(in srgb, var(--color-main) 12%, #fff); padding: 3px 7px; border-radius: 5px; } .fmock .mm-app .chip.g { color: #1f9d57; background: #e9f7ef; } .fmock .mm-app .nm { font-size: 12px; font-weight: 700; color: var(--color-ink); line-height: 1.2; } .fmock .mm-app .sub { font-size: 10.5px; font-weight: 500; color: #8a93a5; line-height: 1.2; } /* worship rehearsal: numbered set list + playback bar */ .fmock .mm-set { display: flex; flex-direction: column; gap: 7px; } .fmock .mm-set-row { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--color-line); border-radius: 10px; padding: 9px 12px; } .fmock .mm-set-row.on { border-color: var(--color-main); background: color-mix(in srgb, var(--color-main) 6%, #fff); } .fmock .mm-set-row .num { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #8a93a5; background: var(--color-line-soft); } .fmock .mm-set-row.on .num { color: #fff; background: var(--color-main); } .fmock .mm-set-row .key { margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--color-main); background: color-mix(in srgb, var(--color-main) 12%, #fff); } .fmock .mm-player { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--color-line); border-radius: 12px; padding: 10px 12px; } .fmock .mm-player .play { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--color-main); color: #fff; } .fmock .mm-player .play svg { width: 13px; height: 13px; } .fmock .mm-player .track { flex: 1; height: 5px; border-radius: 3px; background: var(--color-line); position: relative; } .fmock .mm-player .track > i { position: absolute; left: 0; top: 0; bottom: 0; width: 22%; border-radius: 3px; background: var(--color-main); } .fmock .mm-player .tempo { font-size: 11px; font-weight: 700; color: #8a93a5; flex: none; } /* client portal: project rows with progress + status */ .fmock .mm-proj { background: #fff; border: 1px solid var(--color-line); border-radius: 10px; padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; } .fmock .mm-proj-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* link / sponsorship */ .fmock .mm-link { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 6px 0; } .fmock .mm-link .mm-av { width: 46px; height: 46px; } .fmock .mm-link .heart { color: var(--color-main); } .fmock .mm-link .heart svg { width: 22px; height: 22px; display: block; } /* big check + nametag (check-ins) */ .fmock .mm-check { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 6px 0 2px; } .fmock .mm-check .ring { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--color-main) 12%, #fff); color: var(--color-main); } .fmock .mm-check .ring svg { width: 28px; height: 28px; } /* document sheet (invoicing, statements, letters) */ .fmock .mm-doc { background: #fff; border: 1px solid var(--color-line); border-radius: 11px; padding: 15px; } .fmock .mm-li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--color-line); } .fmock .mm-li:last-child { border-bottom: 0; } .fmock .mm-li .mm-line { flex: 1; max-width: 60%; } .fmock .mm-li.total { padding-top: 11px; } .fmock .mm-li.total .mm-amt { font-size: 15px; color: var(--color-main); } .fmock .mm-doc .mm-line.para { margin-bottom: 9px; } /* kanban (projects) */ .fmock .mm-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .fmock .mm-col { background: #fff; border: 1px solid var(--color-line); border-radius: 10px; padding: 9px; display: flex; flex-direction: column; gap: 7px; } .fmock .mm-col .hd { height: 7px; width: 60%; border-radius: 4px; background: var(--color-line-soft); margin-bottom: 2px; } .fmock .mm-cardlet { height: 26px; border-radius: 7px; background: var(--color-line-soft); } .fmock .mm-cardlet.on { background: color-mix(in srgb, var(--color-main) 18%, #fff); } .fmock .mm-col .ch { font-size: 10px; font-weight: 700; color: #8a93a5; margin-bottom: 3px; } /* task checkbox (tasks) */ .fmock .mm-cb { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--color-line); flex: none; } .fmock .mm-cb.done { background: var(--color-main); border-color: var(--color-main); color: #fff; display: grid; place-items: center; } .fmock .mm-cb svg { width: 11px; height: 11px; } /* todos: personal checklist (round checks, completed = green highlight) */ .fmock .mm-todo { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--color-line-soft); } .fmock .mm-todo:last-child { border-bottom: 0; } .fmock .mm-todo.addrow { background: color-mix(in srgb, var(--color-main) 6%, #fff); border: 1px solid color-mix(in srgb, var(--color-main) 18%, #fff); border-radius: 9px; padding: 11px 12px; margin-bottom: 5px; } .fmock .mm-todo .cir { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-line); flex: none; } .fmock .mm-todo .cir.dash { border-style: dashed; border-color: color-mix(in srgb, var(--color-main) 35%, #fff); } .fmock .mm-todo .cir.done { background: var(--color-ink); border-color: var(--color-ink); color: #fff; display: grid; place-items: center; } .fmock .mm-todo .cir.done svg { width: 12px; height: 12px; } .fmock .mm-todo .lbl { font-size: 12.5px; font-weight: 600; color: var(--color-ink); } .fmock .mm-todo .lbl.hl { background: #b9ef9d; border-radius: 4px; padding: 2px 6px; } .fmock .mm-todo .add-ph { font-size: 12.5px; font-weight: 600; color: var(--color-main); } .fmock .mm-todo .add-btn { margin-left: auto; font-size: 11px; font-weight: 700; color: #fff; background: var(--color-main); border-radius: 7px; padding: 6px 14px; } /* gradient card (stripe, donor portal) */ .fmock .mm-card { border-radius: 12px; padding: 16px; background: linear-gradient(135deg, var(--color-main), var(--color-main-deep)); color: #fff; } .fmock .mm-card .chip { width: 32px; height: 22px; border-radius: 5px; background: rgba(255,255,255,.5); margin-bottom: 18px; } .fmock .mm-card .num { display: flex; gap: 10px; } .fmock .mm-card .num span { width: 26px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.55); } /* chat bubbles (messages) */ .fmock .mm-chat { display: flex; flex-direction: column; gap: 9px; } .fmock .mm-bub { max-width: 80%; padding: 11px 13px; border-radius: 14px; display: flex; flex-direction: column; gap: 6px; } .fmock .mm-bub .ln { height: 8px; border-radius: 4px; background: currentColor; opacity: .4; } .fmock .mm-bub.them { background: #fff; border: 1px solid var(--color-line); color: #aab2c0; border-bottom-left-radius: 4px; } .fmock .mm-bub.me { align-self: flex-end; background: var(--color-main); color: #fff; border-bottom-right-radius: 4px; } .fmock .mm-bub.me .ln { opacity: .6; } /* chat line: avatar beside each bubble */ .fmock .mm-cl { display: flex; align-items: flex-end; gap: 8px; } .fmock .mm-cl.me { flex-direction: row-reverse; } .fmock .mm-cl .av { width: 28px; height: 28px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--color-main) 22%, #fff); } .fmock .mm-cl.me .av { background: var(--color-main); } .fmock .mm-cl .mm-bub { margin: 0; } /* phone frame (mobile) */ .fmock .mm-phone { width: 132px; margin: 0 auto; border: 2px solid var(--color-line); border-radius: 22px; padding: 12px 11px; background: #fff; display: flex; flex-direction: column; gap: 9px; } .fmock .mm-phone .notch { width: 40px; height: 5px; border-radius: 3px; background: var(--color-line); margin: 0 auto 4px; } /* newsletter card (updates) */ .fmock .mm-news { background: #fff; border: 1px solid var(--color-line); border-radius: 11px; overflow: hidden; } .fmock .mm-news .pic { height: 56px; background: linear-gradient(120deg, var(--color-main), color-mix(in srgb, var(--color-main) 50%, #fff)); } .fmock .mm-news .txt { padding: 12px 13px; } /* nametag (check-ins) */ .fmock .mm-name { width: 150px; border: 1px solid var(--color-line); border-radius: 9px; overflow: hidden; background: #fff; } .fmock .mm-name .hd { background: var(--color-main); height: 18px; } .fmock .mm-name .bd { padding: 9px 11px; } /* check-in: faded roster in back, name-tag sticker floating on top */ .fmock .mm-checkin { position: relative; } .fmock .mm-checkin .mm-faded { opacity: .5; } .fmock .mm-checkin .mm-sticker { position: absolute; inset: 0; display: grid; place-items: center; } .fmock .mm-checkin .mm-sticker .mm-name { width: 100%; max-width: 300px; box-shadow: 0 22px 45px -16px rgba(10,15,28,.30); } /* responsive */ @media (max-width: 1024px) { .pgrid.four, .mgrid, .plan-grid, .inc-grid { grid-template-columns: repeat(2,1fr); } .why .grid { grid-template-columns: 1fr; gap: 36px; } .why .left { position: static; } .nav-links { display: none; } .nav-toggle { display: inline-flex; } .brand .brand-logo { height: 24px; } .phero .wrap { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 700px) { .nav { padding: 13px 18px; } /* logo closer to the left edge */ .nav-actions { gap: 10px; } .nav-actions .signin { display: none; } /* moved into the dropdown */ .nav-actions .button { padding: 8px 14px; font-size: 14px; } /* smaller button */ } @media (max-width: 680px) { /* Mobile section rhythm: 40px top/bottom. Generic .section uses this var, so any section with an intentional 0 (explicit padding, not the var — .hero/.logos bottom, .final-wrap) is left alone. The explicit-padding hero-type sections below are normalized to 40px but keep their 0 sides. */ :root { --section-padding: 40px; } .hero { padding-top: 40px; } /* bottom stays 0 */ .phero { padding-top: 40px; padding-bottom: 40px; } .replaces { padding-top: 40px; padding-bottom: 40px; } .replaces .lbl, .replaces .names span { font-size: 22px; } .replaces .wrap, .replaces .names { gap: 10px 16px; } /* NOTE: .band / .logos / .pp-hero / .pp-section are defined LATER in this file, so their 40px override must live after those rules (see end of file) to win. */ .what .top, .feature-row, .pgrid.four, .pgrid.two, .plan-grid, .sp-grid, .sp-tiers, .quote-row, .modules .top, .footer-top, .inc-grid, .frow { grid-template-columns: 1fr; } .row-label { flex-direction: column; align-items: flex-start; gap: 4px; } /* title on top, sentence below, left-aligned */ .row-label b { font-size: 16px; } /* title must not read smaller than the paragraph below it */ .row-label .line { display: none; } .feature { border-right: none; border-bottom: 1px solid var(--color-line); padding: 28px 0 !important; } .feature:last-child { border-bottom: none; } /* .mock no longer reflows on mobile — .hero-frame zoom-scales the whole desktop dashboard down to fit (see .hero-frame). */ .modules .top .note { text-align: left; } /* Footer: stack each column full width; links become divided full-width rows */ .footer-top { display: block; } .footer-brand { margin-bottom: 40px; } /* space below the email section */ .footer-brand p, .footer-news { max-width: none; } .footer-col + .footer-col { border-top: 1px solid rgba(255,255,255,.08); margin-top: 8px; padding-top: 18px; } /* divider between sections, not above Products */ .footer-col h4 { font-size: 18px; } /* section title larger than its links */ .footer-col ul { gap: 0; } .footer-col li { border-bottom: 1px solid rgba(255,255,255,.07); } .footer-col li:last-child { border-bottom: none; } .footer-col a { display: block; padding: 13px 0; } .frow.flip .ftext { order: 0; } .accounts-sec + .final-wrap { margin-top: 40px; } .addon { flex-direction: column; align-items: flex-start; text-align: left; } .addon .tag { text-align: left; } } /* ══════════════════════════════════════════════════════════════════ HOMEPAGE IMAGERY: bands, stats, alternating rows, FAQ accordion ══════════════════════════════════════════════════════════════════ */ /* Section intro centered helper */ .intro.center { margin-left: auto; margin-right: auto; text-align: center; } .intro.center .eyebrow { justify-content: center; } /* Big alternating feature rows on home (richer than product .frow) */ .hrows { margin-top: 24px; } .hrow { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 56px 0; } .hrow.flip .htext { order: 2; } .hrow .htag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--accent, var(--color-main)); margin-bottom: 14px; } .hrow .htag .dot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent, var(--color-main)) 12%, #fff); } .hrow .htag .dot svg { width: 15px; height: 15px; } .hrow h3 { font-size: clamp(29px, 3.2vw, 40px); letter-spacing: -0.03em; margin-bottom: 14px; } .hrow .htext p { font-size: 17px; margin-bottom: 18px; } .hrow .htext ul { list-style: none; display: flex; flex-direction: column; gap: 11px; } .hrow .htext li { font-size: 15.5px; display: flex; gap: 10px; align-items: flex-start; color: var(--color-ink); } .hrow .htext li svg { width: 17px; height: 17px; color: var(--accent, var(--color-main)); flex: none; margin-top: 3px; } .hrow .htext .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 15px; font-weight: 600; color: var(--accent, var(--color-main)); } .hrow .htext .more:hover { gap: 9px; } /* Visual frame for a row (gradient art behind a UI mock) */ .shot { position: relative; border-radius: 18px; padding: 26px; overflow: hidden; } .shot::before { content: ""; position: absolute; inset: 0; opacity: .9; background: radial-gradient(420px 280px at 25% 20%, color-mix(in srgb, var(--accent, var(--color-main)) 40%, transparent), transparent 65%), radial-gradient(360px 300px at 85% 80%, color-mix(in srgb, var(--accent, var(--color-main)) 28%, transparent), transparent 60%), linear-gradient(135deg, #eef1f7, #f6f8fc); } .shot > * { position: relative; } .shot .fmock { box-shadow: 0 30px 60px -28px rgba(10,15,28,.4); } .shot.photo { padding: 0; } .shot.photo::before { display: none; } .shot.photo img { display: block; width: 100%; height: 100%; min-height: 380px; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(10,15,28,.45); } /* Layered mockup: floating stat card overlapping the corner of the main mockup */ .shot-float { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--color-line); border-radius: 14px; padding: 11px 15px; box-shadow: 0 20px 44px -18px rgba(10,15,28,.42); } .shot-float .sf-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--accent, var(--color-main)) 14%, #fff); color: var(--accent, var(--color-main)); } .shot-float .sf-ic svg { width: 18px; height: 18px; } .shot-float .sf-n { font-size: 18px; font-weight: 800; color: var(--color-ink); letter-spacing: -0.02em; line-height: 1; } .shot-float .sf-l { font-size: 11.5px; font-weight: 600; color: #8a93a5; margin-top: 3px; } @media (max-width: 700px) { .shot-float { right: 8px; bottom: 8px; padding: 9px 12px; } .shot-float .sf-n { font-size: 16px; } } /* Bigger feature-row mockups (homepage "What is Studio" sections) */ .shot-stack { padding: 32px; } .shot-stack .fmock .body { min-height: 470px; padding: 32px 30px; } .shot-stack .fmock .mm { gap: 12px; flex: 1; justify-content: space-between; } .shot-stack .fmock .mm-row { padding: 15px 17px; border-radius: 12px; } .shot-stack .fmock .mm-tt { font-size: 14.5px; } .shot-stack .fmock .mm-st { font-size: 12.5px; } .shot-stack .fmock .mm-amt { font-size: 16px; } .shot-stack .fmock .mm-badge { font-size: 12.5px; padding: 5px 12px; } .shot-stack .fmock .mm-av, .shot-stack .fmock .mm-ic { width: 36px; height: 36px; } .shot-stack .fmock .mm-ic svg { width: 19px; height: 19px; } .shot-stack .fmock .mm-hd { font-size: 12.5px; } .shot-stack .fmock .mm-pill { font-size: 14.5px; padding: 14px 0; } .shot-stack .fmock .mm-btn { font-size: 14.5px; padding: 15px 0; } .shot-stack .shot-float { padding: 14px 18px; } .shot-stack .shot-float .sf-n { font-size: 21px; } .shot-stack .shot-float .sf-ic { width: 38px; height: 38px; } /* On mobile the mockup keeps its desktop proportions and is zoom-scaled instead of reflowing, so only trim the frame padding to give it more room. */ @media (max-width: 700px) { .shot-stack { padding: 16px; } } .hrow .htag { text-transform: uppercase; letter-spacing: .07em; font-size: 12.5px; } /* Phrase over gradient image band */ .band { position: relative; padding: 128px 24px; text-align: center; color: #fff; overflow: hidden; background: #0a0f1c url('img/people.jpg') center/cover no-repeat; } .band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,15,28,.80), rgba(10,15,28,.86)), radial-gradient(680px 460px at 18% 28%, rgba(18,100,255,.42), transparent 62%), radial-gradient(560px 440px at 82% 18%, rgba(91,84,230,.4), transparent 60%); } .band .wrap { position: relative; z-index: 1; } .band .eyebrow { color: var(--color-main); } .band h2 { color: #fff; font-size: clamp(32px, 4.4vw, 56px); max-width: 18ch; margin: 0 auto 18px; letter-spacing: -0.035em; } .band p { color: rgba(255,255,255,.78); font-size: 19px; max-width: 560px; margin: 0 auto 30px; } /* Stats band */ .stats .grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .stat { position: relative; padding: 46px 28px 40px; text-align: center; border: 1px solid var(--color-line); border-radius: 18px; background: linear-gradient(180deg, #fff, var(--color-surface)); box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .22s ease; } .stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .stat .n { font-family: var(--font-titles); font-size: clamp(42px, 4.2vw, 60px); font-weight: 700; color: var(--color-ink); letter-spacing: -0.045em; line-height: 1; } .stat .n small { color: var(--color-main); font-size: .58em; font-weight: 700; } .stat .l { font-size: 14.5px; color: var(--color-body); margin-top: 16px; } .stat .l::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--color-main); opacity: .9; margin: 0 auto 16px; } /* FAQ accordion (show / hide) */ .faq { max-width: 820px; margin: 44px auto 0; } .faq-item { border-bottom: 1px solid var(--color-line); } .faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 18px; font-weight: 600; color: var(--color-ink); font-family: inherit; letter-spacing: -0.01em; } .faq-q .pm { flex: none; width: 22px; height: 22px; position: relative; } .faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; background: var(--color-main); border-radius: 2px; transition: transform .2s; } .faq-q .pm::before { top: 10px; left: 1px; right: 1px; height: 2px; } .faq-q .pm::after { left: 10px; top: 1px; bottom: 1px; width: 2px; } .faq-item.open .pm::after { transform: scaleY(0); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; } .faq-a p { padding-bottom: 24px; font-size: 16px; color: var(--color-body); max-width: 70ch; } .faq-item.open .faq-a { max-height: 320px; } /* /faqs/ page: left category nav + filtered questions on the right */ .faqs-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; max-width: 1000px; margin: 0 auto; align-items: start; } .faqs-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 96px; } .faqs-cat { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 10px 14px; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--color-body); letter-spacing: -0.01em; transition: background .15s, color .15s; } .faqs-cat:hover { background: var(--color-surface); color: var(--color-ink); } .faqs-cat.active { background: var(--color-main-tint); color: var(--color-main); } .faqs-cat-n { flex: none; font-size: 12px; font-weight: 600; color: var(--color-body); background: var(--color-surface); border-radius: 20px; padding: 1px 8px; } .faqs-cat.active .faqs-cat-n { background: #fff; color: var(--color-main); } .faqs-list { min-width: 0; } .faqs-list .faq-item.is-hidden { display: none; } @media (max-width: 860px) { .faqs-layout { grid-template-columns: 1fr; gap: 18px; } .faqs-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; position: static; top: auto; } .faqs-cat { width: auto; padding: 8px 14px; border: 1px solid var(--color-line); border-radius: 30px; } } @media (max-width: 1024px) { .stats .grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 680px) { .hrow { grid-template-columns: 1fr; } .stats .grid { grid-template-columns: repeat(2,1fr); gap: 12px; } /* keep stats 2 per row on mobile */ .stat { padding: 30px 14px 26px; } .hrow.flip .htext { order: 0; } .stat:last-child { border-bottom: none; } } /* Mobile body/paragraph copy → 16px everywhere we have sentences or paragraphs (titles and small labels/captions are left alone). */ @media (max-width: 680px) { body, .intro p, .hero .sub, .band p, .final p, .phero .sub, .pp-hero p, .prod-intro-grid p, .why .left p, .quote p, .frow .ftext p, .hrow .htext p, .hrow .htext li { font-size: 16px; } /* Tighten letter-spacing on small uppercase titles so they read closer when they wrap on narrow screens. */ .eyebrow, .logos-label { letter-spacing: .06em; } .hrow .htag { letter-spacing: .04em; } } /* ── Processing fee cards (pricing page) ──────────────────────────── */ .fee-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; } .fee-card { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius); padding: 28px; } .fee-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .fee-head .ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--color-main-tint); color: var(--color-main); } .fee-head .ic svg { width: 20px; height: 20px; } .fee-head h3 { font-size: 18px; letter-spacing: -0.02em; } .fee-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--color-line-soft); font-size: 15px; color: var(--color-body); } .fee-row b { color: var(--color-ink); font-variant-numeric: tabular-nums; } .fee-row.total { border-top: 1px solid var(--color-line); margin-top: 4px; } .fee-row.total span { font-weight: 600; color: var(--color-ink); } .fee-row.total b { color: var(--color-main); font-size: 18px; } .fee-note { max-width: 760px; margin: 26px auto 0; text-align: center; font-size: 14px; color: #8a93a6; line-height: 1.55; } @media (max-width: 680px) { .fee-cards { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════ PRICING PAGE (/pricing/) ══════════════════════════════════════════════════════════════════ */ .pp-hero { text-align: center; padding: 92px 24px 36px; background: linear-gradient(180deg, #f6f8ff, #fff 72%); } .pp-hero h1 { font-size: clamp(42px, 6.4vw, 78px); max-width: 16ch; margin: 0 auto 18px; letter-spacing: -0.035em; } .pp-hero p { font-size: 19px; color: var(--color-body); max-width: 640px; margin: 0 auto; } /* sticky tab + toggle bar */ .pp-bar { background: transparent; padding: 24px 24px 20px; } .pp-bar-inner { max-width: var(--section-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; } /* product selector — the focal point */ .pp-tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: center; background: #eef1f8; border: 1px solid var(--color-line-soft); padding: 5px; border-radius: 40px; } .pp-tab { display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; color: #5a6273; font-family: inherit; font-weight: 600; font-size: 15px; padding: 10px 20px; border-radius: 30px; cursor: pointer; transition: .18s; } .pp-tab:hover { color: var(--color-ink); } /* flavor dot: the same color as the tab's product card below, so the row reads as a color legend */ .pp-tab-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent, var(--color-main)); flex: none; transition: .18s; } .pp-tab.active { background: var(--accent, var(--color-main)); color: #fff; box-shadow: none; } .pp-tab.active .pp-tab-dot { background: #fff; } .pp-togglewrap { display: flex; flex-direction: column; align-items: center; gap: 10px; } /* The tabs + their "who it's for" line are one card, built exactly like the product cards below (.pcard): the wrap is the flavor color, the tabs sit in a white pill on top whose rounded bottom lets the color flow up into it, and the sentence is white text on the flavor color beneath. --flavor (set by JS) is the same color as the product card the active tab maps to. */ /* Outer radius = inner pill radius + the 8px frame, so the flavor wrap reads as an even border concentric with the rounded pill inside it. */ .pp-tabwrap { display: inline-flex; flex-direction: column; align-items: stretch; background: var(--flavor, var(--color-main)); border: none; border-radius: 32px; overflow: hidden; padding: 6px 6px 0; transition: background .18s; } .pp-tabwrap .pp-tabs { background: #fff; border: none; border-radius: 999px; box-shadow: none; padding: 7px 9px; } .pp-tabdesc { margin: 0; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; background: transparent; padding: 11px 18px 13px; border-radius: 0; letter-spacing: .2px; } /* billing period — matching segmented control */ .pp-toggle { display: inline-flex; align-items: center; gap: 12px; } .pp-billing { display: inline-flex; background: #eef1f8; border: 1px solid var(--color-line-soft); padding: 4px; border-radius: 30px; } .pp-bill { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent; color: #5a6273; font-family: inherit; font-weight: 600; font-size: 13.5px; padding: 7px 18px; border-radius: 24px; cursor: pointer; transition: .18s; } .pp-bill:hover { color: var(--color-ink); } .pp-bill.active { background: #fff; color: var(--color-ink); box-shadow: 0 1px 4px rgba(20,30,55,.14); } .pp-bill-badge { font-size: 11px; font-weight: 800; line-height: 1; color: var(--c-cause); background: color-mix(in srgb, var(--c-cause) 15%, #fff); padding: 4px 8px; border-radius: 20px; } .pp-section { padding: 52px 24px 92px; } .pp-panel { display: none; } .pp-panel.active { display: block; } .pp-grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: stretch; max-width: var(--section-width); margin: 0 auto; } .pp-card { position: relative; background: #fff; border: 1px solid var(--color-line); border-radius: 16px; padding: 28px 24px; flex: 1 1 260px; min-width: 260px; max-width: 300px; display: flex; flex-direction: column; } .pp-grid.two { gap: 20px; } .pp-grid.two .pp-card { flex: 1 1 260px; min-width: 260px; max-width: 300px; padding: 28px 24px; } .pp-card.pop { border: 1.5px solid var(--color-main); box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--color-main) 50%, transparent); } .pp-ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--color-main); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 30px; white-space: nowrap; } .pp-name { font-size: 15px; font-weight: 700; color: var(--color-ink); } .pp-for { font-size: 13px; color: #9aa3b2; margin-top: 3px; } .pp-price { margin: 16px 0 2px; display: flex; align-items: baseline; gap: 4px; } .pp-price .amt { font-size: 40px; font-weight: 700; color: var(--color-ink); letter-spacing: -0.03em; } .pp-price .per { font-size: 14px; color: #9aa3b2; font-weight: 500; } .pp-card > .button { justify-content: center; width: 100%; margin: 0; margin-top: auto; } .pp-rows { list-style: none; display: flex; flex-direction: column; margin-bottom: 20px; } .pp-rows li { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 9px 0; border-top: 1px solid var(--color-line-soft); color: var(--color-body); } .pp-rows li b { color: var(--color-ink); font-weight: 600; text-align: right; } .pp-inc { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 18px 0 0; flex: 1 0 auto; } .pp-inc li { display: flex; gap: 9px; font-size: 14px; color: var(--color-ink); } .pp-inc li svg { width: 22px; height: 22px; padding: 5px; background: color-mix(in srgb, var(--color-main) 15%, #fff); border-radius: 50%; color: var(--color-main); flex: none; margin-top: 1px; box-sizing: border-box; } .pp-fee { margin: 24px 0 20px; padding-top: 20px; border-top: 1px solid var(--color-line-soft); font-size: 11px; font-weight: 600; color: var(--color-main); } .pp-note { font-size: 12.5px; color: #8a93a6; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--color-line); line-height: 1.45; } /* transparent fee breakdown (peach) */ .bd { background: linear-gradient(180deg, #eef4ff, #f7faff); border-top: 1px solid #e1ebfc; border-bottom: 1px solid #e1ebfc; } .bd-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; margin: 40px auto 0; } .bd-card { background: #fff; border: 1px solid #e1ebfc; border-radius: 16px; padding: 30px; box-shadow: 0 18px 44px -28px rgba(18,100,255,.20); } .bd-card h3 { font-size: 18px; margin-bottom: 16px; letter-spacing: -0.02em; } .bd-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; font-size: 15px; color: var(--color-body); } .bd-row + .bd-row { border-top: 1px dotted #d6e0f5; } .bd-row b { color: var(--color-ink); font-variant-numeric: tabular-nums; } .bd-row.muted span, .bd-row.muted b { color: #8a93a6; } .bd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 920px; margin: 40px auto 0; } .bd-col { background: #fff; border: 1px solid #e1ebfc; border-radius: 16px; padding: 28px; } .bd-col h3 { font-size: 17px; margin-bottom: 10px; letter-spacing: -0.02em; } .bd-col p { font-size: 14.5px; color: var(--color-body); line-height: 1.55; } .bd-line { text-align: center; font-size: 16px; font-weight: 600; color: var(--color-ink); margin: 32px auto 0; } .bd-disc { text-align: center; font-size: 13px; color: #8a93a6; max-width: 700px; margin: 18px auto 0; line-height: 1.5; } .be { background: linear-gradient(180deg, #eef4ff, #f7faff); border-top: 1px solid #e1ebfc; border-bottom: 1px solid #e1ebfc; } .be-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 840px; margin: 40px auto 0; } .be-card { background: #fff; border: 1px solid var(--color-line); border-radius: 16px; padding: 30px; box-shadow: 0 18px 44px -28px rgba(18,100,255,.26); } .be-card h3 { font-size: 17px; margin-bottom: 12px; letter-spacing: -0.02em; } .be-card .bd-row.total b { color: var(--color-main); } .be-foot { text-align: center; max-width: 680px; margin: 28px auto 0; font-size: 15px; color: var(--color-body); line-height: 1.55; } .be-calc { max-width: 680px; margin: 34px auto 0; background: #fff; border: 1px solid var(--color-line); border-radius: 16px; padding: 26px 28px; } .be-calc label { display: block; font-size: 12px; font-weight: 700; color: #9aa3b2; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; } .be-calc input[type=range] { width: 100%; accent-color: var(--color-main); height: 6px; } .be-out { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--color-body); } .be-out b { color: var(--color-ink); font-variant-numeric: tabular-nums; } .be-winner { margin-top: 8px; font-size: 17px; font-weight: 700; color: var(--color-main); } .cmp3 .cmp-row { display: grid; grid-template-columns: 1.4fr 0.9fr 1.4fr; gap: 12px; align-items: center; } .cmp-row.head { background: var(--color-surface); font-size: 12px; font-weight: 700; color: #9aa3b2; text-transform: uppercase; letter-spacing: .05em; } .cmp-row .pfee { font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; } .cmp-row.studio .pfee { color: var(--color-main); } .cmp-row .stripe { font-size: 13.5px; color: #9aa3b2; text-align: right; } .cmp-row.studio .stripe { color: var(--c-cause); } @media (max-width: 900px) { .bd-two, .be-cards { grid-template-columns: 1fr; } } .bd-row.total { border-top: 2px solid var(--c-cause); margin-top: 6px; padding-top: 14px; } .bd-row.total span { font-weight: 700; color: var(--color-ink); } .bd-row.total b { color: var(--c-cause); font-size: 20px; } /* why stripe */ .ws { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; } .ws-art { background: linear-gradient(135deg, #0a0f1c, #18223c); border-radius: 18px; min-height: 280px; display: grid; place-items: center; color: #6f93ff; } .ws-art svg { width: 78px; height: 78px; } .ws h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 22px; } .ws-list { list-style: none; display: flex; flex-direction: column; gap: 15px; } .ws-list li { display: flex; gap: 12px; font-size: 16px; color: var(--color-ink); } .ws-list li svg { width: 20px; height: 20px; color: var(--c-cause); flex: none; margin-top: 3px; } .ws-close { margin-top: 22px; font-size: 15px; color: var(--color-body); line-height: 1.55; } /* comparison */ .cmp { max-width: 720px; margin: 48px auto 0; border: 1px solid var(--color-line); border-radius: 14px; overflow: hidden; background: #fff; } .cmp-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; font-size: 15px; border-top: 1px solid var(--color-line-soft); } .cmp-row:first-child { border-top: none; } .cmp-row.studio { background: var(--color-main-tint); } .cmp-row .plat { font-weight: 600; color: var(--color-ink); } .cmp-row.studio .plat { color: var(--color-main); } .cmp-row .cost { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-ink); } .cmp-row.muted .plat, .cmp-row.muted .cost { color: #9aa3b2; } .cmp-note { text-align: center; font-size: 13px; color: #9aa3b2; margin-top: 16px; } /* matrix */ .matrix-toggle { text-align: center; margin-top: 8px; } .matrix-wrap { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .matrix-wrap.open { max-height: 1600px; } .matrix { width: 100%; border-collapse: collapse; margin-top: 30px; font-size: 14px; } .matrix th, .matrix td { padding: 13px 14px; border-bottom: 1px solid var(--color-line-soft); text-align: center; } .matrix th:first-child, .matrix td:first-child { text-align: left; color: var(--color-ink); font-weight: 600; } .matrix thead th { font-size: 13.5px; color: var(--color-ink); border-bottom: 2px solid var(--color-line); } .matrix tbody td svg { width: 16px; height: 16px; display: inline; vertical-align: middle; } /* closing cta gradient */ .final.pp-final { background: linear-gradient(135deg, #1264ff, #5b54e6); } .final.pp-final::after { display: none; } @media (max-width: 900px) { .bd-cards { grid-template-columns: 1fr; } .ws { grid-template-columns: 1fr; gap: 28px; } .matrix { font-size: 12.5px; } .matrix th, .matrix td { padding: 10px 8px; } } @media (max-width: 680px) { .pp-bar-inner { justify-content: center; } .pp-card { max-width: 100%; } } .sp-fee { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent, var(--color-main)); } /* Pricing v2: fee line, pitch, effective-rate table, home teaser */ .pp-pitch { max-width: 720px; margin: 30px auto 0; text-align: center; font-size: 16px; color: var(--color-body); line-height: 1.55; } .eg { max-width: 640px; margin: 40px auto 0; border: 1px solid #e1ebfc; border-radius: 14px; overflow: hidden; background: #fff; } .eg-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; padding: 14px 22px; font-size: 15px; border-top: 1px solid #eef2fb; align-items: center; } .eg-row:first-child { border-top: none; } .eg-row span:first-child { color: var(--color-ink); } .eg-row span:nth-child(2), .eg-row span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-body); } .eg-row.head { background: #eef3ff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .eg-row.head span { color: #8a93a6; } .eg-row.highlight { background: var(--color-main-tint); } .eg-row.highlight span { color: var(--color-main); font-weight: 600; } .pt-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 44px; } .pt-card { display: block; background: #fff; border: 1px solid var(--color-line); border-radius: 14px; padding: 22px 24px; transition: border-color .15s, transform .15s; } .pt-card:hover { border-color: #cfd6e4; transform: translateY(-2px); } .pt-name { font-size: 16px; font-weight: 700; color: var(--color-ink); letter-spacing: -0.01em; } .pt-free { font-size: 13.5px; color: #9aa3b2; margin-top: 4px; } .pt-from { font-size: 14px; font-weight: 600; color: var(--color-main); margin-top: 8px; min-height: 18px; } @media (max-width: 900px) { .pt-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 680px) { .pt-grid { grid-template-columns: 1fr; } } /* Pricing hero trust strip */ .pp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; margin-top: 28px; } .pp-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--color-ink); } .pp-trust svg { width: 18px; height: 18px; color: var(--color-main); flex: none; } /* Storage add-ons */ .stor-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 48px; } .stor-card { background: #fff; border: 1px solid var(--color-line); border-radius: 16px; padding: 26px 22px; transition: transform .15s, box-shadow .2s; display: flex; flex-direction: column; } .stor-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stor-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--color-main-tint); color: var(--color-main); display: grid; place-items: center; margin-bottom: 16px; } .stor-ic svg { width: 24px; height: 24px; } .stor-gb { font-size: 24px; font-weight: 700; color: var(--color-ink); letter-spacing: -0.02em; } .stor-price { font-size: 20px; font-weight: 700; color: var(--color-main); margin: 4px 0 10px; } .stor-price small { font-size: 13px; font-weight: 500; color: #9aa3b2; } .stor-card p { font-size: 13.5px; color: var(--color-body); flex: 1; margin-bottom: 16px; line-height: 1.5; } .stor-link { font-size: 14px; font-weight: 600; color: var(--color-main); display: inline-flex; align-items: center; gap: 6px; } .stor-link:hover { gap: 9px; } .stor-link svg { width: 15px; height: 15px; } .stor-ref { max-width: 760px; margin: 40px auto 0; border: 1px solid var(--color-line); border-radius: 14px; overflow: hidden; background: #fff; } .stor-ref-head { padding: 14px 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9aa3b2; border-bottom: 1px solid var(--color-line); background: var(--color-surface); } .stor-ref-grid { display: grid; grid-template-columns: 1fr 1fr; } .stor-ref-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; font-size: 14px; border-top: 1px solid var(--color-line-soft); } .stor-ref-row:nth-child(1), .stor-ref-row:nth-child(2) { border-top: none; } .stor-ref-row span { color: var(--color-body); } .stor-ref-row b { color: var(--color-ink); font-variant-numeric: tabular-nums; } .stor-note { text-align: center; font-size: 14px; color: #8a93a6; margin: 24px auto 0; } @media (max-width: 1024px) { .stor-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 680px) { .stor-grid, .stor-ref-grid { grid-template-columns: 1fr; } .stor-ref-row:nth-child(2) { border-top: 1px solid var(--color-line-soft); } } /* Marquee band (pricing) */ .mq { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); overflow: hidden; padding: 16px 0; background: #fff; } .mq-track { display: inline-flex; align-items: center; white-space: nowrap; animation: mq-scroll 34s linear infinite; will-change: transform; } .mq-item { font-family: var(--font-titles); font-weight: 700; font-size: clamp(24px, 3.4vw, 42px); letter-spacing: -0.03em; text-transform: capitalize; color: var(--color-ink); padding: 0 26px; } .mq-item:nth-child(4n+1) { color: var(--color-main); } .mq-sep { display: inline-flex; align-items: center; color: var(--color-main); } .mq-sep svg { width: clamp(16px, 2vw, 26px); height: clamp(16px, 2vw, 26px); } /* explicit height: the