/* ========================================================================= PROCESSO DESIGN SYSTEM — brand #1D66FF Shared stylesheet for the marketing site. Source of truth. ========================================================================= */ :root { /* Brand */ --brand: #1D66FF; --brand-600: #1656e6; --brand-700: #1147bd; --brand-300: #6f9dff; --brand-100: #d7e4ff; --brand-50: #eef4ff; /* Ink / neutrals */ --ink: #0a1024; /* near-black navy */ --ink-2: #1c2540; --slate: #4a5573; --slate-2: #6b7693; --line: #e7ecf5; --line-2: #eef2f9; --bg: #ffffff; --bg-soft: #f6f8fd; --bg-soft-2: #eef3fc; /* Accents (for variety inside cards) */ --violet: #7b5cff; --cyan: #11b3d8; --emerald: #14b88a; --amber: #ff9f1c; --rose: #ff5d8f; /* Effects */ --radius: 18px; --radius-lg: 26px; --radius-sm: 12px; --shadow-sm: 0 1px 2px rgba(10,16,36,.06), 0 1px 3px rgba(10,16,36,.04); --shadow: 0 12px 30px -12px rgba(13,38,96,.18); --shadow-lg: 0 40px 80px -32px rgba(13,38,96,.32); --shadow-brand: 0 24px 50px -18px rgba(29,102,255,.55); --ring: 0 0 0 1px rgba(29,102,255,.18); --maxw: 1200px; --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Deliberately no overflow-x here. body's `overflow-x: hidden` (below) already propagates to the viewport and clips; setting anything non-visible on stops that propagation, makes body itself the scroll container, and the sticky nav scrolls away with the page. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--brand-100); color: var(--ink); } /* ---------- Horizontal-overflow safety net ---------- Grid and flex items get an automatic min-content floor. The product mockups are hand-built at desktop density (fixed-width rails, three-up KPI rows, dense tables), so on a phone that floor was wider than the screen: the track stretched, the headline and body copy laid out to that width, and the viewport clipped everything past the right edge. Everything in a .container may therefore shrink — including .window itself, so a mockup can never widen its own column. Its *contents* are deliberately left out: they keep their natural width so site.js can measure it and scale the whole mockup to fit, which reads far better than squashing a dense UI. Written with :where()/:not(:where()) so the whole selector has zero specificity — any page that means a min-width simply declares one and wins. */ :where(.container, .container *):not(:where(.window *)) { min-width: 0; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { padding: 92px 0; position: relative; } section[id], [id].section { scroll-margin-top: 100px; } .section--tight { padding: 76px 0; } .section--soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section--soft + .section--soft { border-top: 0; } .section--ink + .section--soft { border-top: 0; } /* no hairline where a soft band meets a dark one — it would read as a stray light line */ .section--soft:has(+ .section--ink) { border-bottom: 0; } .section--ink { background: var(--ink); color: #fff; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); } /* long unbroken tokens — field names like Customer.first_name, URLs — must break rather than spill out of their column on a narrow screen */ h1, h2, h3, h4, h5, p, li { overflow-wrap: break-word; } .display { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; } .h2 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.03em; } .h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); } .lead { font-size: clamp(1.05rem, 1.4vw, 1.28rem); color: var(--slate); line-height: 1.6; } .muted { color: var(--slate); } .muted-2 { color: var(--slate-2); } .grad-text { background: linear-gradient(100deg, var(--brand) 0%, var(--violet) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .on-ink, .section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; } .section--ink .muted, .section--ink .lead { color: rgba(255,255,255,.66); } .section--ink .muted-2 { color: rgba(255,255,255,.5); } /* ---------- Eyebrow / badges ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); background: var(--brand-50); border: 1px solid var(--brand-100); padding: 7px 14px; border-radius: 100px; } .section--ink .eyebrow { background: rgba(29,102,255,.16); border-color: rgba(255,255,255,.14); color: #bcd2ff; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(29,102,255,.18); } .pill { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--line); padding: 6px 13px; border-radius: 100px; } .section-head { max-width: 760px; } .section-head.center { margin: 0 auto; text-align: center; } .section-head .lead { margin-top: 18px; } .section-head .eyebrow { margin-bottom: 20px; } /* ---------- Buttons ---------- */ .btn { --bg: var(--brand); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: .98rem; padding: 14px 26px; border-radius: 100px; border: 1px solid transparent; background: var(--bg); color: var(--fg); cursor: pointer; transition: transform .18s ease, box-shadow .25s ease, background .2s ease; white-space: nowrap; max-width: 100%; } /* Buttons don't wrap by design, but on a very narrow screen a long label would then poke out past the page edge — below 400px let it break instead. */ @media (max-width: 400px) { .btn { white-space: normal; } } .btn:hover { transform: translateY(-2px); } .btn--primary { box-shadow: var(--shadow-brand); } .btn--primary:hover { background: var(--brand-600); } .btn--ghost { --bg: #fff; --fg: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn--ghost:hover { border-color: var(--brand-300); } .btn--white { --bg: #fff; --fg: var(--brand); } .btn--outline-light { --bg: transparent; --fg: #fff; border-color: rgba(255,255,255,.28); } .btn--outline-light:hover { background: rgba(255,255,255,.08); } .btn--sm { padding: 10px 18px; font-size: .9rem; } .btn .arw { transition: transform .2s ease; } .btn:hover .arw { transform: translateX(3px); } /* ---------- Cards ---------- */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-100); } .card__icon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); margin-bottom: 18px; border: 1px solid var(--brand-100); } .card__icon svg { width: 24px; height: 24px; } .card h3 { font-size: 1.18rem; margin-bottom: 8px; } .card p { color: var(--slate); font-size: .98rem; } .grid { display: grid; gap: 22px; } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } /* ---------- Browser / device chrome (CSS-built product mockups) ---------- */ .window { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); max-width: 100%; } .window__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #fbfcfe; border-bottom: 1px solid var(--line); } .window__dots { display: flex; gap: 6px; } .window__dots i { width: 11px; height: 11px; border-radius: 50%; display: block; } .window__dots i:nth-child(1){ background: #ff5f57; } .window__dots i:nth-child(2){ background: #febc2e; } .window__dots i:nth-child(3){ background: #28c840; } .window__url { margin-left: 10px; font-size: .76rem; color: var(--slate-2); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; flex: 1; max-width: 320px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Misc helpers ---------- */ .tag-soft { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600; padding:4px 10px; border-radius:100px; } .stat__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem,3.4vw,3rem); letter-spacing:-.03em; color: var(--brand); } .divider { height:1px; background: var(--line); border:0; } .dotgrid { background-image: radial-gradient(rgba(29,102,255,.16) 1px, transparent 1px); background-size: 22px 22px; } /* Reveal-on-scroll */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } [data-reveal].in { opacity: 1; transform: none; } [data-reveal][data-delay="1"]{ transition-delay:.08s } [data-reveal][data-delay="2"]{ transition-delay:.16s } [data-reveal][data-delay="3"]{ transition-delay:.24s } [data-reveal][data-delay="4"]{ transition-delay:.32s } @media (prefers-reduced-motion: reduce){ [data-reveal]{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ========================================================================= NAV ========================================================================= */ .nav { position: sticky; top: 0; z-index: 60; background: rgba(10,16,36,.94); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255,255,255,.06); transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; } /* When a page opens on a dark hero, let the nav start fully transparent so the hero's own background reads through it with no seam; site.js adds .nav--solid back once the page is scrolled past the hero. */ .nav:has(+ section.section--ink):not(.nav--solid):not(.is-open) { background: transparent; backdrop-filter: none; border-bottom-color: transparent; } /* The open menu hangs off the bar, so bar and panel both go fully opaque — against near-black even a few percent of the hero headline reads through. */ .nav.is-open { background: var(--ink); backdrop-filter: none; } .nav + section.section--ink { margin-top: -72px; } /* Every page opens on a dark hero pulled up under the transparent nav. Each was drawn with ~136px of top padding, which left ~65px of dead space under the bar; trim it centrally so all 23 pages open at the same tighter rhythm. The selector outranks the pages' own `.x-hero { padding: … }` shorthand. */ .nav + section.section--ink { padding-top: 104px; } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; } .nav__logo .mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand), var(--violet)); box-shadow: var(--shadow-brand); } .nav__logo-img { height: 70px; width: auto; display: block; } .nav__links { display: flex; align-items: center; gap: 4px; } .nav__links a { padding: 9px 14px; border-radius: 100px; font-weight: 500; font-size: .95rem; color: rgba(255,255,255,.72); transition: color .2s, background .2s; } .nav__links a:hover { color: #fff; background: rgba(255,255,255,.08); } .nav__cta { display: flex; align-items: center; gap: 10px; } .nav__toggle { display: none; background: none; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 8px; cursor: pointer; color: #fff; transition: background .2s, border-color .2s; } .nav__toggle:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); } .nav__toggle-ic--x { display: none; } .nav.is-open .nav__toggle-ic--bars { display: none; } .nav.is-open .nav__toggle-ic--x { display: block; } /* ---------- Mobile menu ---------- A drop-down panel under the bar. Collapsed it has zero height and is visibility:hidden, which also keeps its links out of the tab order. */ .nav__menu { display: none; } .nav__menu .container { display: grid; padding-top: 6px; padding-bottom: 18px; } .nav__menu a { padding: 14px 2px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: rgba(255,255,255,.78); border-bottom: 1px solid rgba(255,255,255,.07); transition: color .2s ease; } .nav__menu a:last-child { border-bottom: 0; } .nav__menu a:hover, .nav__menu a:focus-visible { color: #fff; } .nav__menu-login { color: var(--brand-300) !important; } @media (max-width: 940px) { .nav__links { display: none; } .nav__toggle { display: inline-grid; place-items: center; } /* Log in moves into the menu — the bar keeps only the primary CTA */ .nav__cta .btn--ghost, .nav__cta .btn--outline-light { display: none; } .nav__menu { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.08); overflow: hidden; visibility: hidden; max-height: 0; transition: max-height .3s cubic-bezier(.2,.7,.2,1), visibility .3s; } .nav.is-open .nav__menu { visibility: visible; max-height: 340px; } } /* At phone widths the 192px-wide logo plus the CTAs no longer fit the bar and the "Start free" button was pushed off the right edge. */ @media (max-width: 620px) { .nav__inner { height: 64px; } .nav + section.section--ink { margin-top: -64px; padding-top: 88px; } .nav__logo-img { height: 46px; } .nav__cta { gap: 8px; } .nav__cta .btn--sm { padding: 9px 14px; font-size: .85rem; } } @media (max-width: 380px) { .nav__logo-img { height: 40px; } .nav__cta .btn--sm { padding: 8px 12px; font-size: .8rem; } } @media (prefers-reduced-motion: reduce) { .nav__menu { transition: none; } } /* ========================================================================= FOOTER ========================================================================= */ .footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 80px 0 36px; } .footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; } .footer__logo { display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:1.3rem; color:#fff; margin-bottom:18px; } .footer__logo .mark { width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--violet)); } .footer__logo-img { height: 34px; width: auto; display: block; } .footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; font-weight: 600; } .footer ul { list-style: none; display: grid; gap: 12px; } .footer a:hover { color: #fff; } .footer__bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); font-size: .88rem; } .footer__social { display:flex; gap:10px; } .footer__social a { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07); transition:.2s; } .footer__social a:hover { background: var(--brand); transform: translateY(-2px); } @media (max-width: 820px){ .footer__grid{ grid-template-columns: 1fr 1fr; gap:32px; } } @media (max-width: 520px){ .footer__grid{ grid-template-columns: 1fr; } } /* ========================================================================= RESPONSIVE GRID COLLAPSE ========================================================================= */ @media (max-width: 1000px){ .cols-4 { grid-template-columns: repeat(2,1fr);} } @media (max-width: 860px){ .cols-3 { grid-template-columns: repeat(2,1fr);} .section{padding:84px 0;} } @media (max-width: 620px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr;} .section{padding:68px 0;} .container{padding:0 18px;} }