/* ========================================================================== Persiv Technology — site redesign Dark enterprise design system. Tokens mirror the design handoff. ========================================================================== */ :root { /* Surfaces */ --bg: #0D1017; --surface: #1a1f2e; --band: #161B27; --band-card: #1F2534; --panel: linear-gradient(160deg, #1F2A3D 0%, #161B27 70%); --input-bg: #12161F; /* Accent */ --accent: #2D8FA8; --accent-hover: #3AB2CE; --accent-text: #3FA9C4; --accent-light: #5FBBD1; --accent-link-hover: #8FD3E3; --accent-soft: #7FC8D8; /* Text */ --text: #E9EDF4; --text-white: #FFFFFF; --text-secondary: #C7D2E1; --text-muted: #94A3B8; --text-dim: #7E8CA0; --text-dimmer: #6B7787; --text-lede: #A8B4C6; --nav-rest: #8A97A8; /* Lines */ --hair: rgba(255, 255, 255, 0.07); --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.16); --accent-border: rgba(45, 143, 168, 0.28); /* Error */ --error-bg: rgba(214, 92, 92, 0.12); --error-border: rgba(214, 92, 92, 0.4); --error-text: #F0B6B6; /* Reaches roughly 60% down the viewport: -8% origin + 0.72 x 95% radius. The extra mid stop keeps the core as bright as before while stretching the falloff, so widening it does not wash the upper page out. */ --glow: radial-gradient(125% 95% at 50% -8%, rgba(45, 143, 168, 0.28) 0%, rgba(45, 143, 168, 0.14) 26%, rgba(45, 143, 168, 0.05) 48%, rgba(13, 16, 23, 0) 72%); --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; } /* -------------------------------------------------------------------------- Base NOTE: overflow-x lives on only. Putting it on .page (which has min-height:100vh) makes that div the scroll container and breaks sticky positioning, window.scrollY and hash anchors. -------------------------------------------------------------------------- */ html { overflow-x: hidden; scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--bg); } body { font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-wrap: pretty; color: var(--text); } * { box-sizing: border-box; } /* A class-level `display` beats the UA sheet's [hidden] rule, which would leave every switcher panel on screen at once. This has to outrank it. */ [hidden] { display: none !important; } a { color: var(--accent-light); text-decoration: none; transition: color .18s ease, border-color .18s ease, background-color .18s ease; } a:hover { color: var(--accent-link-hover); } img { max-width: 100%; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 20px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Page wrapper — carries the single hero glow. The glow is a fixed pseudo-element rather than a background on the wrapper, so it stays anchored to the top of the viewport while the page scrolls. `background-attachment: fixed` would be the shorter route but it is ignored on iOS Safari and repaints badly elsewhere. z-index:-1 puts it above the wrapper's own background but below every in-flow child, so it tints the page without washing over the content. */ .page { position: relative; /* isolate: without a stacking context here the z-index:-1 glow below drops behind this element's own background and disappears entirely. */ isolation: isolate; background: var(--bg); color: var(--text); min-height: 100vh; } .page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--glow); background-repeat: no-repeat; } /* Full-bleed bands paint an opaque surface over the page glow, which made it blink out as you scrolled through one. Giving the band its own fixed copy of the same layer keeps the glow continuous across the boundary — both are positioned against the viewport, so they line up exactly. */ .band { position: relative; isolation: isolate; } .band::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--glow); background-repeat: no-repeat; } /* -------------------------------------------------------------------------- Layout primitives -------------------------------------------------------------------------- */ .wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; } .section { max-width: 1240px; margin: 0 auto; padding: 120px 40px 0; } .section--hero { padding: 130px 40px 40px; } .section--tight { padding: 70px 40px 0; } .section--mid { padding: 60px 40px 0; } .section--wide { padding: 140px 40px 0; } /* Full-bleed alternating band */ .band { margin-top: 140px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--band); } .band > .wrap { padding: 110px 40px; } /* Grids */ .grid { display: grid; gap: 20px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--5 { grid-template-columns: repeat(5, 1fr); } .grid--tight { gap: 14px; } .grid--tight-16 { gap: 16px; } /* Two-column feature split */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .split--top { align-items: start; } .split--60 { gap: 60px; } .split--70 { gap: 70px; } /* Column ratios as modifiers, never inline: an inline grid-template-columns outranks the single-column collapse below and leaves the page in two cramped columns on a phone. */ .split--form { grid-template-columns: 0.92fr 1.08fr; } .split--copy-led { grid-template-columns: 1fr 0.85fr; } .split--media-led { grid-template-columns: 1.1fr 1fr; } .grid .span-3 { grid-column: span 3; } .grid .span-2 { grid-column: span 2; } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ .page h1 { font-size: 66px; line-height: 1.06; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 34px; } .page h1.h1--sm { font-size: 60px; line-height: 1.08; letter-spacing: -0.035em; } .page h1.h1--form { font-size: 52px; line-height: 1.1; } .page h2 { font-size: 44px; line-height: 1.16; letter-spacing: -0.025em; font-weight: 600; margin: 0 0 50px; } .page h2.h2--sm { font-size: 40px; line-height: 1.18; } .page h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .page h3.h3--lg { font-size: 34px; line-height: 1.2; letter-spacing: -0.02em; } .page h4 { font-size: 18px; font-weight: 600; margin: 0; } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 22px; } .eyebrow--dim { color: var(--text-dim); } .sublabel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); } .sublabel--dim { color: var(--text-dim); } .lede { font-size: 21px; line-height: 1.6; color: var(--text-lede); font-weight: 300; margin: 0 0 44px; max-width: 760px; } .lede--19 { font-size: 19px; line-height: 1.7; } .body { font-size: 17px; line-height: 1.7; color: var(--text-muted); font-weight: 300; margin: 0; } .body--15 { font-size: 15px; line-height: 1.65; } .dim { color: var(--text-dim); } .muted { color: var(--text-muted); } .white { color: var(--text-white); } .accent { color: var(--accent-text); } .accent-light { color: var(--accent-light); } .strong-white { color: #fff; font-weight: 600; } .statement { font-size: 30px; line-height: 1.35; color: var(--text-white); font-weight: 400; letter-spacing: -0.02em; margin: 60px 0 0; } .fineprint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-dim); margin: 0; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; border-radius: 10px; font-family: var(--sans); font-size: 15px; font-weight: 600; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .btn--primary { background: var(--accent); color: var(--text-white); } .btn--primary:hover { background: var(--accent-hover); color: var(--text-white); } .btn--ghost { border-color: var(--line-strong); color: var(--text); font-weight: 500; background: transparent; } .btn--ghost:hover { border-color: rgba(255, 255, 255, 0.34); color: #fff; } .btn--inline { height: 48px; } .btn--lg { height: 52px; padding: 0 32px; font-size: 16px; } .btn--block { width: 100%; } .btn-row { display: flex; gap: 14px; flex-wrap: wrap; } /* Chips */ .chip { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; background: var(--input-bg); border: 1px solid rgba(255, 255, 255, 0.12); color: #A8B4C6; font-family: var(--sans); font-size: 14px; cursor: pointer; transition: all .18s ease; } .chip:hover { border-color: var(--accent-border); color: var(--text); } .chip.is-selected, .chip[aria-selected="true"], .chip[aria-pressed="true"] { background: var(--accent); color: var(--text-white); border-color: var(--accent); font-weight: 600; } /* Static capability chip — not interactive */ .tag { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: var(--text-secondary); font-size: 13.5px; } .chip-row { display: flex; flex-wrap: wrap; gap: 10px; } /* Status pill */ .status-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--accent-border); background: rgba(45, 143, 168, 0.08); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); margin: 0 0 28px; } .status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-soft); flex: none; } .badge { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { padding: 34px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hair); } .card--sm { padding: 28px; border-radius: 12px; border-color: rgba(255, 255, 255, 0.08); } .card--flow { display: flex; flex-direction: column; gap: 16px; } .card--flow p { flex: 1; } .band .card, .card--band { background: var(--band-card); } .card--gradient { background: var(--panel); border-color: var(--line); } .card--featured { background: var(--panel); border: 1px solid rgba(45, 143, 168, 0.32); } .callout { padding: 24px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hair); margin-bottom: 30px; } .callout .sublabel { display: block; margin-bottom: 12px; } .callout p { font-size: 15px; line-height: 1.65; color: var(--text-secondary); margin: 0; } /* Solve cards — the "what are you here to solve" row */ .solve-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 16px; } .solve-card:hover { border-color: rgba(45, 143, 168, 0.5); background: #141D2E; color: var(--text); } .solve-card .arrow { color: var(--accent-text); } /* The label must be one inline element — the flex gap would otherwise insert space around the emphasised word. */ .solve-card strong { color: var(--accent-light); font-weight: 600; } /* -------------------------------------------------------------------------- Stat strip -------------------------------------------------------------------------- */ .stat-strip { display: grid; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat-strip--3 { grid-template-columns: repeat(3, 1fr); } .stat-strip--4 { grid-template-columns: repeat(4, 1fr); } .stat-strip > * { padding: 40px; border-left: 1px solid var(--line); } .stat-strip > *:first-child { padding-left: 0; border-left: none; } .stat-strip > *:last-child { padding-right: 0; } .stat-num { font-size: 46px; font-weight: 600; letter-spacing: -0.02em; color: #fff; margin-bottom: 10px; line-height: 1.1; } .stat-num--sm { font-size: 42px; } .stat-cap { font-size: 15px; color: var(--text-muted); line-height: 1.5; } /* Rule strip — labelled cells, no big numerals */ .rule-strip { display: grid; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .rule-strip--3 { grid-template-columns: repeat(3, 1fr); } .rule-strip--4 { grid-template-columns: repeat(4, 1fr); } .rule-strip--5 { grid-template-columns: repeat(5, 1fr); } .rule-strip > * { padding: 28px 32px; border-left: 1px solid var(--line); } .rule-strip > *:first-child { padding-left: 0; border-left: none; } .rule-strip > *:last-child { padding-right: 0; } /* Title + sub-label pair used in the privacy marker strip */ .marker-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 7px; } .marker-sub { font-size: 14px; color: var(--text-muted); margin: 0; } /* Statement bar — copy left, action right */ .statement-bar { margin-top: 50px; padding: 40px 44px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .statement-bar h3 { font-size: 22px; margin: 0 0 8px; } .statement-bar p { font-size: 15.5px; line-height: 1.65; color: var(--text-muted); margin: 0; max-width: 640px; } /* The oversized single stat panel */ .stat-panel { padding: 70px 50px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, #1F2A3D 0%, #161B27 100%); } .stat-panel .big { font-size: 76px; font-weight: 600; letter-spacing: -0.03em; color: #fff; line-height: 1; margin-bottom: 22px; } .stat-panel p { font-size: 18px; line-height: 1.6; color: var(--text-muted); margin: 0; font-weight: 300; } /* -------------------------------------------------------------------------- Lists -------------------------------------------------------------------------- */ .dash-list { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 14px; } .dash-list li { display: flex; gap: 14px; font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); } .dash-list li::before { content: "\2014"; color: var(--accent-text); flex: none; } .bullet-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .bullet-list li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); } .bullet-list li::before { content: "\2022"; color: var(--accent-text); flex: none; } .check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .check-list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); } .check-list li::before { content: "\2713"; color: var(--accent-soft); flex: none; } /* -------------------------------------------------------------------------- Media -------------------------------------------------------------------------- */ .img-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--band); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8); } .img-frame img, .img-frame video { width: 100%; /* height:auto is required: the img tags carry intrinsic width/height attributes (to reserve layout space and stop anchor drift), and without this the fixed height would distort them once width is constrained. */ height: auto; display: block; } .logo-chip { height: 34px; width: auto; background: #fff; padding: 5px 8px; border-radius: 6px; } .avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; } .avatar--lg { width: 84px; height: 84px; } /* -------------------------------------------------------------------------- Quote / founder cards -------------------------------------------------------------------------- */ .quote-card { margin: 0; padding: 40px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hair); display: flex; flex-direction: column; gap: 28px; } .quote-card blockquote { margin: 0; font-size: 21px; line-height: 1.6; color: var(--text); font-weight: 300; } .quote-card blockquote.sm { font-size: 18px; } .quote-card figcaption { display: flex; align-items: center; gap: 18px; margin-top: auto; } .quote-name { font-size: 15px; font-weight: 600; } .quote-title { font-size: 14px; color: var(--text-muted); } .founder-card { padding: 36px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hair); } .founder-card--lg { padding: 40px; } .founder-head { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; } .founder-name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } .founder-card p { font-size: 15.5px; line-height: 1.7; color: var(--text-muted); margin: 0; } .founder-card--lg p { font-size: 16px; } /* -------------------------------------------------------------------------- CTA panel -------------------------------------------------------------------------- */ .cta { max-width: 1240px; margin: 130px auto 0; padding: 0 40px; } .cta-panel { padding: 90px 70px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); text-align: center; } .cta-panel h2 { margin: 0 0 20px; } .cta-panel .lede { margin: 0 auto 38px; font-size: 19px; } .cta-markers { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; margin-top: 34px; } .cta-markers span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); } /* -------------------------------------------------------------------------- Header / navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(13, 16, 23, 0.85); border-bottom: 1px solid var(--hair); } .site-nav { max-width: 1240px; margin: 0 auto; padding: 0 40px; height: 56px; display: flex; align-items: center; gap: 36px; flex-wrap: nowrap; } .nav-logo { display: flex; align-items: center; flex: none; } .nav-logo img { /* 17px of actual mark — matches the PersivAI Assist logo, which renders smaller than the others at the same box height because of its padding. */ height: 17px; width: auto; display: block; } /* Bumped past the pure cap-height match (20px): this mark has lighter strokes than the others, so at equal cap height it optically reads smaller. */ .nav-logo-img--padded { height: 22px; } .nav-links { display: flex; align-items: center; gap: 26px; flex-wrap: nowrap; } .nav-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; padding: 6px 0; color: var(--nav-rest); border-bottom: 2px solid transparent; } .nav-link:hover { color: var(--text-white); } .nav-link.is-active { color: var(--text-white); border-bottom-color: var(--accent); } .nav-spacer { flex: 1; } .nav-cta { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 8px; background: var(--accent); color: var(--text-white); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; font-weight: 500; text-transform: uppercase; white-space: nowrap; flex: none; } .nav-cta:hover { background: var(--accent-hover); color: var(--text-white); } /* Hamburger — hidden above the 900px breakpoint */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 36px; margin-left: auto; border-radius: 8px; background: transparent; border: 1px solid var(--line-strong); cursor: pointer; padding: 0; flex: none; } .nav-toggle-icon { display: block; width: 16px; height: 10px; position: relative; } .nav-toggle-icon span { position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--text); display: block; transition: transform .22s ease; } .nav-toggle-icon span:first-child { top: 0; } .nav-toggle-icon span:last-child { top: 8.5px; } .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:first-child { transform: translateY(4.2px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:last-child { transform: translateY(-4.3px) rotate(-45deg); } .nav-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 20px 16px; flex-direction: column; } .nav-panel.is-open { display: flex; } .nav-panel a { display: flex; align-items: center; min-height: 48px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #A8B4C6; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .nav-panel a:last-child { border-bottom: none; } .nav-panel a.is-active { color: var(--text-white); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { margin-top: 120px; border-top: 1px solid var(--hair); } .site-footer .wrap { padding: 50px 40px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .footer-right { display: flex; align-items: center; gap: 32px; } .footer-right a { font-size: 14px; color: var(--text-muted); } .footer-right a:hover { color: var(--accent-link-hover); } .footer-copy { font-size: 14px; color: var(--text-dimmer); } /* -------------------------------------------------------------------------- Forms — Request a Demo -------------------------------------------------------------------------- */ .form-panel { padding: 44px; border-radius: 18px; background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8); } .field { margin-bottom: 20px; } .field-label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 9px; } .field-input, .field-select, .field-textarea { width: 100%; height: 46px; padding: 0 14px; border-radius: 9px; background: var(--input-bg); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text); font-family: var(--sans); font-size: 15px; transition: border-color .18s ease; } .field-textarea { height: auto; padding: 13px 14px; line-height: 1.6; resize: vertical; } .field-input::placeholder, .field-textarea::placeholder { color: #5E6B7C; } .field-input:focus, .field-select:focus, .field-textarea:focus { outline: none; border-color: var(--accent); } .field-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237E8CA0' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; } .field-select option { background: var(--input-bg); color: var(--text); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-error { padding: 13px 16px; border-radius: 9px; background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); font-size: 14px; line-height: 1.5; margin-bottom: 18px; } .form-fine { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--text-dim); margin: 16px 0 0; text-align: center; line-height: 1.6; } .form-success { text-align: center; padding: 20px 0; } .form-success .tick { width: 54px; height: 54px; border-radius: 50%; background: rgba(45, 143, 168, 0.16); border: 1px solid var(--accent-border); color: var(--accent-soft); font-size: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .form-success h3 { font-size: 24px; margin: 0 0 12px; } .form-success p { font-size: 15.5px; line-height: 1.65; color: var(--text-muted); margin: 0 0 30px; } /* Left rail of the demo page */ .value-rows { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 40px 0 32px; } .value-row { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--hair); } .value-row:last-child { border-bottom: none; } .value-row .num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--accent-soft); flex: none; padding-top: 3px; } .value-row .t { font-size: 16px; font-weight: 600; margin: 0 0 6px; } .value-row .d { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0; } .trust-markers { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; } .trust-markers span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); } /* -------------------------------------------------------------------------- PersivX industry switcher -------------------------------------------------------------------------- */ .industry-switcher { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; } .industry-shot { position: sticky; top: 96px; } .industry-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .industry-block { padding: 26px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hair); } .industry-block h4 { font-size: 15px; font-weight: 600; color: var(--accent-text); margin: 0 0 14px; letter-spacing: 0.01em; } .industry-block .note { font-size: 13.5px; line-height: 1.55; font-style: italic; color: var(--text-dim); margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--hair); } /* -------------------------------------------------------------------------- Scroll reveal -------------------------------------------------------------------------- */ .reveal-init { opacity: 0; transform: translateY(16px); } .reveal-init, .reveal-on { transition: opacity .65s cubic-bezier(.22, .61, .36, 1), transform .65s cubic-bezier(.22, .61, .36, 1); } .reveal-on { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal-init, .reveal-on { opacity: 1 !important; transform: none !important; transition: none !important; } } /* -------------------------------------------------------------------------- Responsive — narrow desktop Product pages carry two extra nav items (DOCS, BROCHURE), which overflow the row just above the mobile breakpoint. Tighten the gaps rather than drop the links, which are not reachable any other way until the hamburger appears. -------------------------------------------------------------------------- */ @media (min-width: 901px) and (max-width: 1140px) { .site-nav { gap: 16px; } .nav-links { gap: 14px; } .nav-cta { padding: 0 13px; } } @media (min-width: 901px) and (max-width: 980px) { .site-nav { gap: 12px; } .nav-links { gap: 11px; } .nav-link { letter-spacing: 0.1em; } } /* -------------------------------------------------------------------------- Responsive — 900px -------------------------------------------------------------------------- */ @media (max-width: 900px) { .site-nav { padding: 0 20px; height: 52px; gap: 12px; position: relative; } .nav-links, .nav-spacer, .site-nav > .nav-link { display: none; } .nav-toggle { display: flex; } .nav-cta { margin-left: 0; } .wrap { padding: 0 20px; } .section, .section--hero, .section--tight, .section--mid, .section--wide { padding: 64px 20px 0; } .band { margin-top: 64px; } .band > .wrap { padding: 64px 20px; } .grid--2, .grid--3, .grid--4, .grid--5, .split, .split--form, .split--copy-led, .split--media-led, .stat-strip--3, .stat-strip--4, .rule-strip--3, .rule-strip--4, .rule-strip--5, .industry-switcher, .industry-blocks, .field-row { grid-template-columns: 1fr; gap: 16px; } /* A single-column grid still honours an explicit span, which would force extra implicit columns and overflow the viewport. Reset it. */ .grid .span-3, .grid .span-2 { grid-column: span 1; } /* Pages set per-cell horizontal padding inline to hold the desktop rhythm; on one column every cell must sit flush, so this has to win over it. */ .stat-strip > *, .rule-strip > * { padding: 28px 0 !important; border-left: none; border-top: 1px solid var(--line); } .stat-strip > *:first-child, .rule-strip > *:first-child { border-top: none; } .industry-shot { position: static; } /* Split blocks: image always after the copy on mobile */ .split > .img-frame { order: 2; } .page h1 { font-size: 34px; line-height: 1.14; } .page h1.h1--sm, .page h1.h1--form { font-size: 34px; line-height: 1.14; } .page h2, .page h2.h2--sm { font-size: 27px; line-height: 1.2; } .page h3, .page h3.h3--lg { font-size: 20px; } .page p, .page li { font-size: 15.5px; } .lede, .lede--19, .body { font-size: 17px; } .statement { font-size: 22px; } .stat-num, .stat-num--sm { font-size: 34px; } .stat-panel { padding: 40px 24px; } .stat-panel .big { font-size: 44px; } .quote-card blockquote { font-size: 18px; } .cta { margin-top: 64px; padding: 0 20px; } .cta-panel { padding: 48px 24px; } .form-panel { padding: 26px; } .site-footer { margin-top: 64px; } .site-footer .wrap { padding: 32px 20px; flex-direction: column; align-items: flex-start; gap: 16px; } .footer-right { flex-direction: column; align-items: flex-start; gap: 10px; } } /* -------------------------------------------------------------------------- Responsive — 560px -------------------------------------------------------------------------- */ @media (max-width: 560px) { .nav-logo img { height: 15px; } .nav-logo-img--padded { height: 19px; } .page h1, .page h1.h1--sm, .page h1.h1--form { font-size: 29px; } .card, .founder-card, .founder-card--lg, .quote-card, .join-grid > * { padding: 24px; } .card--sm, .industry-block { padding: 22px; } .btn { width: 100%; } .btn-row { flex-direction: column; } } /* -------------------------------------------------------------------------- Product-page extras -------------------------------------------------------------------------- */ /* Mono capability chip used in product hero rows */ .tag--mono { padding: 7px 13px; border-radius: 8px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-muted); } /* Large department chip on the band */ .tag--lg { padding: 14px 22px; border-radius: 10px; background: var(--band-card); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 16px; color: var(--text-secondary); } /* Feature list inside "what's inside" cards — a quieter bullet than .bullet-list */ .dot-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; } .dot-list li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); } .dot-list li::before { content: "\00B7"; color: #3E5675; flex: none; } /* Inline "trusted by" rule */ .trusted-strip { padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 34px; flex-wrap: wrap; } .pull-quote { margin: 0; max-width: 900px; } .pull-quote blockquote { margin: 0 0 22px; font-size: 28px; line-height: 1.5; letter-spacing: -0.015em; color: #fff; font-weight: 300; } .pull-quote figcaption { font-size: 15px; color: var(--text-muted); } /* Step card — numbered, on a band */ .step-card { padding: 36px; border-radius: 14px; background: var(--band-card); border: 1px solid rgba(255, 255, 255, 0.08); } .step-card h3 { font-size: 24px; margin: 16px 0 14px; letter-spacing: -0.015em; } .step-card p { font-size: 15.5px; line-height: 1.7; color: var(--text-muted); margin: 0; } /* Pricing */ .plan { position: relative; padding: 40px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hair); } .plan--recommended { background: var(--panel); border: 1px solid rgba(45, 143, 168, 0.32); } .plan .badge { position: absolute; top: -11px; left: 44px; } .plan-name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; } .plan-price { font-size: 38px; font-weight: 600; letter-spacing: -0.02em; color: #fff; margin: 0 0 6px; } .plan-note { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 28px; padding-bottom: 28px; border-bottom: 1px solid var(--hair); } @media (max-width: 900px) { .pull-quote blockquote { font-size: 21px; } .plan { padding: 28px; } } /* Neutral status pill variant — sentence-case label, no accent tint */ .status-pill--plain { padding: 8px 16px; border-color: rgba(255, 255, 255, 0.12); background: var(--surface); font-family: var(--sans); font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--text-lede); margin-bottom: 34px; } /* Module card with a mono statute label */ .module-card .statute { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 16px; } .module-card--featured .statute { color: var(--accent-text); } /* -------------------------------------------------------------------------- Customer story cards (About Us) Company + industry label above the quote, attribution below — no logo chip, which is what the older page used and what the longer quotes need. -------------------------------------------------------------------------- */ .story-card { margin: 0; padding: 34px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hair); display: flex; flex-direction: column; gap: 18px; } /* Company names run to two lines in some cards; reserving the taller height keeps the quote start line level across the row. */ .story-head { min-height: 62px; } .story-company { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 7px; } .story-industry { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); } .story-card blockquote { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text-secondary); font-weight: 300; flex: 1; } .story-author { font-size: 14px; color: var(--text-muted); margin: 0; padding-top: 18px; border-top: 1px solid var(--hair); } /* -------------------------------------------------------------------------- Numbered index Replaces the boxed numbered card. Structure comes from a hairline rule and an oversized ghost numeral rather than a bordered box — closer to the old site's open grid, which read better than cards for this content. -------------------------------------------------------------------------- */ .index-grid { display: grid; gap: 0 56px; } .index-grid--2 { grid-template-columns: repeat(2, 1fr); } .index-grid--3 { grid-template-columns: repeat(3, 1fr); } .index-item { position: relative; padding: 32px 76px 38px 0; border-top: 1px solid var(--line); /* Column layout so a trailing link sits on the row's baseline even when the paragraphs above it run to different lengths. */ display: flex; flex-direction: column; } .index-item .n { position: absolute; top: 26px; right: 0; font-family: var(--mono); font-size: 54px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.06); user-select: none; pointer-events: none; transition: color .3s ease; } .index-item:hover .n { color: rgba(45, 143, 168, 0.3); } /* Unnumbered variant — no ghost numeral, so no gutter to reserve for one. */ .index-grid--plain .index-item { padding-right: 24px; } .index-grid .span-3 { grid-column: span 3; } /* Close the list with a rule that breaks at the column gap, the same way the row rules do — a border on the container would run straight across it. */ .index-grid--2 > .index-item:nth-last-child(-n+2), .index-grid--3 > .index-item:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } /* A ragged last row (item count not a multiple of the columns) would put the closing rule under a mid-row item, so those lists simply end. */ .index-grid--ragged.index-grid--2 > .index-item, .index-grid--ragged.index-grid--3 > .index-item { border-bottom: none; } /* When the final cell spans the full row it is the only one closing the list; without this the row above it would draw a second, doubled rule. */ .index-grid--last-full > .index-item:nth-last-child(-n+3):not(:last-child) { border-bottom: none; } .index-grid--last-full > .index-item:last-child { border-bottom: 1px solid var(--line); } .index-item h3, .index-item h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 12px; } .index-item p { font-size: 15px; line-height: 1.65; color: var(--text-muted); margin: 0; } .index-item p, .index-item ul { flex: 1; } .index-item .bullet-list { margin-top: 2px; } .index-item a { align-self: flex-start; margin-top: 18px; font-size: 14px; font-weight: 500; } /* On a band the hairlines need the slightly stronger value to stay visible */ .band .index-grid, .band .index-item { border-color: rgba(255, 255, 255, 0.1); } @media (max-width: 900px) { .index-grid--2, .index-grid--3 { grid-template-columns: 1fr; gap: 0; } /* Single column: every item closes itself. */ .index-grid--2 > .index-item, .index-grid--3 > .index-item { border-bottom: none; } .index-grid--2 > .index-item:last-child, .index-grid--3 > .index-item:last-child { border-bottom: 1px solid var(--line); } .index-grid .span-3 { grid-column: span 1; } .index-grid--plain .index-item { padding-right: 0; } .index-item { padding: 26px 60px 30px 0; } .index-item .n { font-size: 40px; top: 22px; } } /* -------------------------------------------------------------------------- Customer logo marquee (home) Continuous scroll with faded edges. The track holds the list exactly twice so translating it -50% lands back on an identical frame — any other count makes the loop visibly jump. -------------------------------------------------------------------------- */ .logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%); } .logo-marquee-track { display: flex; align-items: center; width: max-content; animation: logo-scroll 34s linear infinite; } /* The trailing padding carries the inter-set gap. Putting it on the track instead would make one period (set + gap) differ from the -50% translate, and the loop would visibly jump on every cycle. There are four sets, not two: -50% shifts the track by two of them, so two sets must be wider than the content column — otherwise the track runs out part-way through a cycle and leaves empty space on the right. */ .logo-marquee-set { display: flex; align-items: center; gap: 52px; padding-right: 52px; } @keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .logo-marquee:hover .logo-marquee-track, .logo-marquee:focus-within .logo-marquee-track { animation-play-state: paused; } .logo-marquee img { height: 34px; width: auto; display: block; background: #fff; padding: 6px 10px; border-radius: 8px; flex: none; } @media (prefers-reduced-motion: reduce) { .logo-marquee-track { animation: none; width: auto; } .logo-marquee-set { flex-wrap: wrap; justify-content: center; gap: 28px 40px; padding-right: 0; } /* The duplicate set exists only to make the scroll seamless. */ .logo-marquee-set[aria-hidden="true"] { display: none; } } @media (max-width: 900px) { .logo-marquee-set { gap: 34px; padding-right: 34px; } .logo-marquee img { height: 28px; } }