/* ========================================================================== INFORMPULSE V4 — public-site design system Dark "research programme" visual system, per design handoff design_handoff_informpulse_site (July 2026). Applies only to pages that opt in with via partials/head_v4.php — the V2/V3 stylesheets continue to serve all other pages. Fonts are self-hosted: /assets/fonts/fonts.css (Spectral, IBM Plex Sans, IBM Plex Mono). No third-party requests. ========================================================================== */ body.v4 { --accent: #5fd3e6; --bg: #0a1530; --bg-footer: #081127; --row: #0d1a3a; --row2: #0e1c3d; --amber: #d8a24a; --amber-bright: #e9b86a; --green: #7fd1a8; --ink-h1: #f5f7ff; --ink-h2: #eef1fb; --ink-h3: #f2f5ff; --ink-strong: #e7ebfb; --ink-lede: #b3bcd8; --ink-body: #9aa4c2; --ink-disc: #a7b0cd; --ink-mut1: #8b95b5; --ink-mut2: #7a85a6; --ink-mut3: #6b7596; --ink-mut4: #5e6a8e; --hairline: rgba(255,255,255,.09); --hairline-banner: rgba(255,255,255,.08); --hairline-row: rgba(255,255,255,.06); --card-grad: linear-gradient(162deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --serif: 'Spectral', Georgia, serif; --mono: 'IBM Plex Mono', monospace; margin: 0; background: var(--bg); color: #eaeefb; font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.v4 ::selection { background: rgba(95,211,230,.25); } body.v4 a:focus-visible, body.v4 button:focus-visible, body.v4 input:focus-visible, body.v4 select:focus-visible, body.v4 textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Skip link */ .v4-skip { position: absolute; left: -9999px; top: 0; padding: .75rem 1rem; background: var(--accent); color: #06121f; font-weight: 700; z-index: 1000; } .v4-skip:focus { left: 0; } /* -------------------------------------------------------------------------- Backdrop layers (fixed, non-interactive, behind content) -------------------------------------------------------------------------- */ .v4-bg-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 66px 66px; -webkit-mask: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%); mask: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%); } .v4-bg-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(720px 420px at 50% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%); } .v4-page { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .v4-main { max-width: 1180px; margin: 0 auto; padding: 0 32px; } .v4-hero { padding: 72px 0 50px; } .v4-hero--rule { border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 58px; } .v4-sec { padding: 0 0 58px; } .v4-sec--last { padding: 0 0 72px; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .v4-header { position: sticky; top: 0; z-index: 50; background: rgba(10,21,48,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline-banner); font-family: var(--sans); } .v4-header__inner { max-width: 1180px; margin: 0 auto; padding: 13px 32px; display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; } .v4-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; } .v4-brand__mark { width: 30px; height: 30px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); display: grid; place-items: center; } .v4-brand__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 11px var(--accent); } .v4-brand__word { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #cdd4ea; } .v4-brand__word span { color: var(--ink-mut3); } .v4-nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; justify-content: flex-end; } .v4-nav a { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 7px; text-decoration: none; color: var(--ink-mut1); transition: color .18s ease, background .18s ease; } .v4-nav a:hover { color: #f2f5ff; background: rgba(255,255,255,.05); } .v4-nav a.active { color: #f2f5ff; background: color-mix(in srgb, var(--accent) 16%, transparent); } .v4-header__cta { flex-shrink: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; border-radius: 8px; text-decoration: none; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); transition: background .18s ease; } .v4-header__cta:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .v4-footer { background: var(--bg-footer); border-top: 1px solid var(--hairline-banner); color: var(--ink-body); } .v4-footer__inner { max-width: 1180px; margin: 0 auto; padding: 54px 32px 44px; } .v4-footer__top { display: flex; flex-wrap: wrap; gap: 40px 56px; justify-content: space-between; } .v4-footer__id { max-width: 340px; } .v4-footer__acronyms { font-family: var(--mono); font-size: 11px; line-height: 1.85; letter-spacing: .03em; color: var(--ink-mut2); } .v4-footer__acronyms strong { color: #aeb8d8; font-weight: 400; } .v4-footer__stage { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mut1); } .v4-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 36px 48px; flex: 1; min-width: 280px; } .v4-footer__colhead { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mut4); margin-bottom: 14px; } .v4-footer__links { display: flex; flex-direction: column; gap: 9px; } .v4-footer__links a { font-size: 13px; color: var(--ink-body); text-decoration: none; transition: color .18s ease; } .v4-footer__links a:hover { color: #fff; } .v4-footer__bottom { margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.07); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; line-height: 1.7; letter-spacing: .04em; color: var(--ink-mut4); } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ .v4-kicker { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; flex-wrap: wrap; } .v4-kicker span { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } .v4-kicker .k-accent { color: var(--accent); } .v4-kicker .k-sep { color: #3c466a; letter-spacing: 0; } .v4-kicker .k-muted { color: var(--ink-mut2); letter-spacing: .18em; } .v4-kicker .k-green { color: var(--green); letter-spacing: .18em; } .v4-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -.015em; margin: 0; color: var(--ink-h1); } .v4-h1--54 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; } .v4-h1--56 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; } .v4-h1--60 { font-size: clamp(34px, 4.8vw, 60px); line-height: 1.05; } .v4-h1 em { font-style: italic; font-weight: 300; color: #aeb8d8; } .v4-lede { max-width: 740px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.62; color: var(--ink-lede); margin: 28px 0 0; text-wrap: pretty; } .v4-lede strong { color: var(--ink-strong); font-weight: 600; } .v4-lede a, .v4-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .v4-h2 { font-family: var(--serif); font-weight: 500; font-size: 27px; margin: 0; color: var(--ink-h2); line-height: 1.15; } .v4-h2row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; } .v4-h2side { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mut3); } .v4-sublede { margin: 12px 0 0; max-width: 780px; font-size: 14.5px; line-height: 1.6; color: var(--ink-body); text-wrap: pretty; } .v4-sublede strong { color: #e0e5f6; font-weight: 600; } .v4-h3 { font-family: var(--serif); font-weight: 500; margin: 0; color: var(--ink-h3); } /* -------------------------------------------------------------------------- Chips, dots, pills, tags -------------------------------------------------------------------------- */ .v4-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .v4-dot--amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); } .v4-dot--green { background: var(--green); box-shadow: 0 0 8px var(--green); } .v4-dot--accent { background: var(--accent); box-shadow: 0 0 8px var(--accent); } .v4-dot--grey { background: #9aa6c2; box-shadow: none; } .v4-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .v4-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #c2cae3; border: 1px solid rgba(255,255,255,.12); border-radius: 30px; padding: 7px 14px; } .v4-tag { --c: var(--ink-mut1); display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 20px; padding: 4px 11px; line-height: 1.5; white-space: nowrap; } .v4-tag--accent { --c: var(--accent); } .v4-tag--green { --c: var(--green); } .v4-tag--amber { --c: #c9a86a; } .v4-tag--grey { --c: var(--ink-mut1); } .v4-tag--wrap { white-space: normal; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .v4-btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .v4-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-decoration: none; color: #06121f; background: var(--accent); padding: 12px 20px; border-radius: 9px; font-weight: 500; border: none; cursor: pointer; transition: filter .18s ease; } .v4-btn:hover { filter: brightness(1.08); } .v4-btn--ghost { color: var(--accent); background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); transition: background .18s ease; } .v4-btn--ghost:hover { filter: none; background: color-mix(in srgb, var(--accent) 10%, transparent); } .v4-btn--plain { color: var(--ink-body); background: transparent; transition: color .18s ease; } .v4-btn--plain:hover { filter: none; color: #fff; } /* -------------------------------------------------------------------------- Banners & notes -------------------------------------------------------------------------- */ .v4-banner { display: flex; gap: 18px; padding: 24px 28px; align-items: flex-start; flex-wrap: wrap; border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: 13px; background: rgba(216,162,74,.06); } .v4-banner__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); margin-top: 5px; flex-shrink: 0; } .v4-banner__body { flex: 1; min-width: 260px; } .v4-banner__head { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-bright); } .v4-banner__text { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: #b8b09a; text-wrap: pretty; } .v4-banner__text--lone { margin: 0; color: #c9c1a8; } .v4-banner__text strong { color: var(--amber-bright); font-weight: 600; } .v4-note { display: flex; gap: 20px; padding: 26px 28px; flex-wrap: wrap; border: 1px solid var(--hairline-banner); border-left: 3px solid var(--amber); border-radius: 12px; background: rgba(216,162,74,.045); } .v4-note__label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); white-space: nowrap; padding-top: 3px; } .v4-note__body { flex: 1; min-width: 280px; } .v4-note p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--ink-disc); text-wrap: pretty; } .v4-note p + p { margin-top: 14px; color: var(--ink-mut1); } .v4-note strong { color: #cbd2e8; font-weight: 600; } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .v4-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; } .v4-cards--sm { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; } .v4-cards--md { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .v4-cards--lg { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; } .v4-cards--wide { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); } .v4-card { display: flex; flex-direction: column; padding: 26px 28px 24px; border: 1px solid var(--hairline); border-radius: 15px; background: var(--card-grad); } .v4-card__idx { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--accent); } .v4-card__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .v4-card .v4-h3 { font-size: 21px; line-height: 1.15; margin: 16px 0 0; } .v4-card__body { font-size: 14px; line-height: 1.6; color: var(--ink-body); margin: 12px 0 0; flex: 1; text-wrap: pretty; } .v4-card--hover { transition: border-color .22s ease, transform .22s ease; } .v4-card--hover:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-3px); } /* Aside stack (form pages right rail) */ .v4-aside { display: flex; flex-direction: column; gap: 14px; } .v4-aside__card { padding: 24px 26px; border: 1px solid var(--hairline); border-radius: 14px; background: rgba(255,255,255,.02); } .v4-aside__card--amber { border-color: color-mix(in srgb, var(--amber) 30%, transparent); background: rgba(216,162,74,.05); } .v4-aside__head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .v4-aside__head--amber { color: var(--amber-bright); display: flex; align-items: center; gap: 9px; margin-bottom: 0; letter-spacing: .14em; } .v4-aside__card p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-body); text-wrap: pretty; } .v4-aside__card--amber p { font-size: 13px; color: #b8b09a; } .v4-aside__links { display: flex; flex-direction: column; gap: 10px; } .v4-aside__links a { font-size: 13.5px; color: var(--ink-body); text-decoration: none; transition: color .18s ease; } .v4-aside__links a:hover { color: #fff; } /* -------------------------------------------------------------------------- Data tables (CSS grid). Set columns per table:
-------------------------------------------------------------------------- */ .v4-scroll-x { overflow-x: auto; } .v4-table { border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.015); } .v4-table__head { display: grid; grid-template-columns: var(--cols); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mut3); background: rgba(255,255,255,.03); border-bottom: 1px solid var(--hairline-banner); } .v4-table__head > div { padding: 14px 16px; } .v4-table__row { display: grid; grid-template-columns: var(--cols); border-bottom: 1px solid var(--hairline-row); } .v4-table__row:last-child { border-bottom: none; } .v4-table__row > div { padding: 16px; font-size: 13px; line-height: 1.55; color: var(--ink-body); } .v4-table__row .c-id { font-family: var(--mono); font-size: 13px; color: var(--ink-mut3); } .v4-table__row .c-id--accent { color: var(--accent); } .v4-table__row .c-name { color: var(--ink-strong); font-weight: 500; font-size: 13.5px; } .v4-table__row .c-dim { color: var(--ink-mut1); } .v4-table__row .c-mono { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--ink-mut1); } .v4-table__row .c-mid { align-self: center; } .v4-table__row--gating { background: color-mix(in srgb, var(--accent) 5%, transparent); } .v4-table--dense .v4-table__head > div { padding: 13px 14px; font-size: 9.5px; letter-spacing: .12em; } .v4-table--dense .v4-table__row > div { padding: 15px 14px; font-size: 12.5px; } /* Uncertainty / letter-ID register rows */ .v4-register { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--hairline); border-radius: 13px; overflow: hidden; background: rgba(255,255,255,.07); } .v4-register__row { display: flex; gap: 18px; padding: 18px 24px; background: var(--row); align-items: baseline; } .v4-register__id { font-family: var(--mono); font-size: 12px; color: var(--amber); flex-shrink: 0; } .v4-register__row p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-lede); text-wrap: pretty; } /* -------------------------------------------------------------------------- Roadmap vertical timeline -------------------------------------------------------------------------- */ .v4-tl { position: relative; } .v4-tl__track { position: absolute; left: 23px; top: 8px; bottom: 8px; width: 2px; background: var(--hairline); } .v4-tl__progress { position: absolute; left: 23px; top: 8px; height: 30%; width: 2px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent)); } .v4-tl__items { display: flex; flex-direction: column; gap: 16px; } .v4-tl__item { position: relative; display: flex; gap: 24px; align-items: flex-start; } .v4-tl__num { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--row2); border: 2px solid rgba(255,255,255,.14); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink-mut3); z-index: 1; } .v4-tl__item--done .v4-tl__num { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: #cdd4ea; } .v4-tl__item--current .v4-tl__num { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); } .v4-tl__card { flex: 1; padding: 20px 24px; border: 1px solid var(--hairline); border-radius: 13px; background: rgba(255,255,255,.02); } .v4-tl__item--current .v4-tl__card { background: color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,.012)); } .v4-tl__cardhead { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; } .v4-tl__cardhead .v4-h3 { font-size: 19px; } .v4-tl__item--done .v4-tag { --c: var(--green); } .v4-tl__item--current .v4-tag { --c: var(--accent); } .v4-tl__desc { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-body); text-wrap: pretty; } .v4-tl__class { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-mut3); } /* -------------------------------------------------------------------------- Numbered-step rows (investor diligence) -------------------------------------------------------------------------- */ .v4-step { display: flex; gap: 18px; padding: 20px 22px; border: 1px solid var(--hairline-banner); border-radius: 13px; background: rgba(255,255,255,.02); align-items: flex-start; } .v4-step__num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); display: grid; place-items: center; font-family: var(--mono); font-size: 12.5px; color: var(--accent); } .v4-step p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-lede); text-wrap: pretty; } /* -------------------------------------------------------------------------- Highlight side-border cards (overview: see / won't see) -------------------------------------------------------------------------- */ .v4-scope { padding: 28px 30px; border: 1px solid var(--hairline); border-radius: 13px; } .v4-scope--in { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); } .v4-scope--out { border-left: 3px solid var(--ink-mut3); background: rgba(255,255,255,.02); } .v4-scope__head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; } .v4-scope--in .v4-scope__head { color: var(--accent); } .v4-scope--out .v4-scope__head { color: var(--ink-body); } .v4-scope p { font-size: 14.5px; line-height: 1.62; margin: 0; text-wrap: pretty; } .v4-scope--in p { color: #bcc4dd; } .v4-scope--out p { color: var(--ink-body); } /* -------------------------------------------------------------------------- CTA panel (pilot "Discuss a pilot") -------------------------------------------------------------------------- */ .v4-cta-panel { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; padding: 34px 36px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); } .v4-cta-panel__text { max-width: 600px; } .v4-cta-panel .v4-h3 { font-size: 25px; } .v4-cta-panel p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-body); text-wrap: pretty; } .v4-cta-panel .v4-btn { flex-shrink: 0; padding: 13px 22px; } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .v4-formgrid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,1fr); gap: 40px; align-items: start; } .v4-form-card { padding: 34px 36px 36px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--card-grad); } .v4-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .v4-field { display: flex; flex-direction: column; gap: 8px; } .v4-field + .v4-field, .v4-form-2col + .v4-field, .v4-field + .v4-form-2col, .v4-form-2col + .v4-form-2col { margin-top: 20px; } .v4-field > span, .v4-field > label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mut1); } .v4-field input, .v4-field textarea, .v4-field select { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 12px 14px; font-size: 14px; color: #eaeefb; font-family: var(--sans); } .v4-field textarea { line-height: 1.6; resize: vertical; } .v4-field select { background: var(--row2); appearance: auto; } .v4-field input:focus, .v4-field textarea:focus, .v4-field select:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, transparent); } .v4-smallprint { margin: 18px 0 0; font-size: 12px; line-height: 1.65; color: var(--ink-mut2); text-wrap: pretty; } .v4-smallprint a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .v4-form-actions { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; } .v4-form-actions .v4-btn { padding: 13px 24px; } .v4-form-actions a { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; color: var(--ink-body); text-decoration: none; } .v4-form-actions a:hover { color: #fff; } .v4-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Form status blocks */ .v4-alert { padding: 26px 30px; border: 1px solid var(--hairline); border-radius: 14px; background: rgba(255,255,255,.02); } .v4-alert h2 { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px; } .v4-alert--ok h2 { color: var(--green); } .v4-alert--err { border-color: color-mix(in srgb, #d96a6a 45%, transparent); } .v4-alert--err h2 { color: #d96a6a; } .v4-alert p, .v4-alert li { font-size: 14px; line-height: 1.65; color: var(--ink-lede); } .v4-alert p { margin: 0 0 12px; } .v4-alert p:last-child { margin-bottom: 0; } .v4-alert .dim { color: var(--ink-mut1); } .v4-alert a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } /* -------------------------------------------------------------------------- Landing-page specifics -------------------------------------------------------------------------- */ .v4-topband { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.07); } .v4-topband__brand { display: flex; align-items: center; gap: 13px; } .v4-topband__brand .v4-brand__mark { width: 32px; height: 32px; } .v4-topband__brand .v4-brand__dot { width: 9px; height: 9px; box-shadow: 0 0 12px var(--accent); } .v4-topband__brand .v4-brand__word { letter-spacing: .2em; } .v4-topband__status { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mut1); } .v4-topband__status .stage { display: flex; align-items: center; gap: 8px; } .v4-topband__status .trl { color: var(--ink-mut3); } .v4-topband__status a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding-bottom: 1px; } .v4-landing-hero { position: relative; padding: 96px 0 78px; } .v4-landing-hero__canvas { position: absolute; top: 34px; left: -32px; width: calc(100% + 64px); height: 280px; opacity: .6; pointer-events: none; z-index: 0; } .v4-landing-hero__inner { position: relative; z-index: 1; } .v4-landing-hero__kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; } .v4-landing-hero__rule { width: 30px; height: 1px; background: var(--accent); flex-shrink: 0; } .v4-landing-hero__kicker span:last-child { font-family: var(--mono); font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-body); } .v4-landing-hero .v4-h1 { font-size: clamp(44px, 6.4vw, 82px); line-height: 1.0; } .v4-landing-hero .v4-h1 strong { font-weight: 500; } .v4-landing-hero__lede { max-width: 690px; font-size: clamp(16px, 1.55vw, 19px); line-height: 1.62; color: var(--ink-lede); margin: 30px 0 0; text-wrap: pretty; } .v4-landing-hero__lede strong { color: var(--ink-strong); font-weight: 600; } .v4-landing-hero__sub { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--ink-body); margin: 22px 0 0; } .v4-landing-hero__sub span { color: var(--accent); } .v4-h2sm { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0; color: var(--ink-h2); } .v4-h2row--tight { margin-bottom: 26px; } .v4-h2side--wide { letter-spacing: .18em; } .v4-entry { position: relative; display: flex; flex-direction: column; min-height: 208px; padding: 26px 28px 24px; border: 1px solid var(--hairline); border-radius: 15px; background: var(--card-grad); text-decoration: none; color: inherit; overflow: hidden; transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease; } .v4-entry:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 22px 54px -22px color-mix(in srgb, var(--accent) 65%, transparent); } .v4-entry__top { display: flex; justify-content: space-between; align-items: flex-start; } .v4-entry__access { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mut1); } .v4-entry__access .v4-dot { width: 6px; height: 6px; } .v4-entry .v4-h3 { font-size: 25px; line-height: 1.12; margin: 22px 0 0; } .v4-entry__blurb { font-size: 14px; line-height: 1.55; color: var(--ink-body); margin: 12px 0 0; flex: 1; text-wrap: pretty; } .v4-entry__cta { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-family: var(--mono); font-size: 12px; letter-spacing: .05em; color: var(--accent); } /* Horizontal validation pathway strip */ .v4-path { position: relative; margin-top: 36px; } .v4-path__track { position: absolute; left: 7px; right: 7px; top: 7px; height: 2px; background: var(--hairline-banner); } .v4-path__progress { position: absolute; left: 7px; top: 7px; height: 2px; width: 22%; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), var(--accent)); } .v4-path__stages { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .v4-path__stage { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .v4-path__dot { width: 15px; height: 15px; border-radius: 50%; background: #28324f; border: 3px solid var(--bg); } .v4-path__stage--done .v4-path__dot, .v4-path__stage--current .v4-path__dot { background: var(--accent); } .v4-path__stage--current .v4-path__dot { box-shadow: 0 0 16px var(--accent); } .v4-path__trl { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; color: var(--ink-mut4); } .v4-path__stage--done .v4-path__trl { color: var(--ink-body); } .v4-path__stage--current .v4-path__trl { color: var(--accent); } .v4-path__name { font-size: 13.5px; margin-top: 5px; color: var(--ink-mut3); } .v4-path__stage--done .v4-path__name { color: #c2cae3; } .v4-path__stage--current .v4-path__name { color: #f2f5ff; } .v4-path__current { display: inline-block; margin-top: 9px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 20px; padding: 3px 9px; } /* Explore tile grid */ .v4-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 1px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; overflow: hidden; } .v4-tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; background: var(--row2); text-decoration: none; color: #c2cae3; transition: background .2s ease, color .2s ease; } .v4-tile:hover { background: #0e1735; color: #f2f5ff; } .v4-tile__left { display: flex; align-items: center; gap: 12px; } .v4-tile__num { font-family: var(--mono); font-size: 11px; color: var(--ink-mut4); } .v4-tile__label { font-size: 14.5px; } .v4-tile__arrow { color: var(--accent); font-family: var(--mono); } /* Landing inline footer */ .v4-landing-footer { margin-top: 80px; padding: 34px 0 56px; border-top: 1px solid rgba(255,255,255,.07); } .v4-landing-footer__top { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; } .v4-landing-footer__acronyms { font-family: var(--mono); font-size: 11.5px; line-height: 1.9; letter-spacing: .04em; color: var(--ink-mut2); } .v4-landing-footer__acronyms strong { color: #aeb8d8; font-weight: 400; } .v4-landing-footer__links { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; } .v4-landing-footer__links a { color: var(--ink-body); text-decoration: none; } .v4-landing-footer__links a:hover { color: #fff; } .v4-landing-footer__links .sep { color: #3c466a; } .v4-landing-footer__legal { margin-top: 26px; font-family: var(--mono); font-size: 10.5px; line-height: 1.8; letter-spacing: .04em; color: var(--ink-mut4); } /* -------------------------------------------------------------------------- Prose / long-form section cards (technology page) -------------------------------------------------------------------------- */ .v4-prose-card { padding: 28px 30px; border: 1px solid var(--hairline); border-radius: 15px; background: linear-gradient(162deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); } .v4-prose-card__kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .v4-prose-card .v4-h2 { font-size: 23px; } .v4-prose-card p { margin: 14px 0 0; font-size: 14px; line-height: 1.68; color: var(--ink-disc); text-wrap: pretty; } .v4-stack { display: flex; flex-direction: column; gap: 14px; } .v4-footnote { margin: 20px 0 0; max-width: 860px; font-size: 13.5px; line-height: 1.65; color: var(--ink-mut1); text-wrap: pretty; } /* Two-column "who is this for" split */ .v4-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px 56px; align-items: start; } .v4-split__body p { font-size: 15px; line-height: 1.66; color: #aab3d0; margin: 0; text-wrap: pretty; } .v4-split__body p + p { margin-top: 18px; color: var(--ink-mut1); } .v4-split__body strong { color: #e0e5f6; font-weight: 600; } .v4-split__body { max-width: 640px; } /* -------------------------------------------------------------------------- Responsive & motion -------------------------------------------------------------------------- */ @media (max-width: 820px) { .v4-form-2col { grid-template-columns: 1fr; } .v4-formgrid { grid-template-columns: 1fr; } .v4-path__stages { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } .v4-path__track, .v4-path__progress { display: none; } .v4-main { padding: 0 20px; } .v4-header__inner { padding: 13px 20px; } .v4-footer__inner { padding: 48px 20px 40px; } } @media (prefers-reduced-motion: reduce) { body.v4 *, body.v4 *::before, body.v4 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }