/* industry-platforms.css — Platforms & ISVs page ================================================================ Scope prefix: .isv- Canonical hero pattern (page-hero-illustration). Loads after global.css which provides design tokens and nav. Hero styles are sourced from hero.css (loaded in ) — not redeclared here. Never modify hero CSS in this file. */ /* ═══════════════════════════════════════════════════════ BUTTONS — btn-white for the closing CTA is handled by the shared closing-section.css component. No inline buttons on this page. ═══════════════════════════════════════════════════════ */ /* Section-tag (overline) — base rule. Every .section-tag inherits these typography rules; scoped variants further down the file override color only. */ .section-tag { display: inline-block; font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); } /* Section header (redefined — not in global.css) Canonical pattern: left-aligned, matches the .isv-deploy-text / .isv-commercial-text pattern used on this page. Adjacency to the overline is set by .section-tag margin-bottom below, not by h2 margin-top. */ .section-header { margin-bottom: 44px; } /* Overline inside .section-header — adds the 16px gap to the h2 */ .section-header .section-tag { margin-bottom: 16px; } .section-header h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink-900); margin: 0 0 20px; } .section-header p { font-family: var(--f-sans); font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ink-600); margin: 0; } /* ═══════════════════════════════════════════════════════ STATEMENT — Reframe the relationship Light background for rhythm (navy rail precedes it). ═══════════════════════════════════════════════════════ */ .isv-statement { padding: 120px 0; background: var(--white); border-bottom: 1px solid var(--warm-100); } .isv-statement-inner { max-width: 880px; } .isv-overline { display: inline-block; font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 24px; } .isv-statement h2 { font-family: var(--f-serif); font-weight: 400; margin: 0 0 28px; line-height: 1.1; letter-spacing: -.02em; } .isv-statement .sh-light { display: block; font-family: var(--f-serif); font-weight: 400; font-size: clamp(22px, 2.8vw, 38px); line-height: 1.2; color: var(--ink-500); margin-bottom: 6px; } .isv-statement .sh-bold { display: block; font-family: var(--f-serif); font-weight: 400; font-size: clamp(30px, 4vw, 54px); line-height: 1.05; color: var(--ink-900); letter-spacing: -.02em; } .isv-spine { font-family: var(--f-sans); font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--ink-600); max-width: 720px; } /* ═══════════════════════════════════════════════════════ SIGNAL BAND / RAIL — four attributable stats Sits immediately after the hero. Design system pattern shared across industry pages. Moved to shared component: signal-band.css ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ BUILD VS BUY — 3 depth-cards ═══════════════════════════════════════════════════════ */ .isv-buildbuy { padding: 104px 0; background: var(--warm-100); border-bottom: 1px solid var(--warm-100); } .isv-bb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1180px; margin: 0 auto; } /* depth-card styles — redefined because not in global.css */ .depth-card { background: var(--white); border: 1px solid var(--warm-200); border-radius: var(--r-lg); padding: 32px 28px; transition: border-color .2s, box-shadow .2s; } .depth-card:hover { border-color: var(--warm-300); box-shadow: var(--shadow-sm); } .depth-tag { display: inline-block; font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; } .depth-card h3 { font-family: var(--f-serif); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; color: var(--ink-900); margin: 0 0 12px; } .depth-card-lead { font-family: var(--f-sans); font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--ink-800); margin: 0 0 12px; } .depth-card p { font-family: var(--f-sans); font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--ink-600); margin: 0; } /* ═══════════════════════════════════════════════════════ ASSESSMENT — iframe embed of standalone tool. Warm-50 background to break rhythm between buildbuy (off-white) and modes (white). Iframe wrapped in a framed container. ═══════════════════════════════════════════════════════ */ .isv-assessment { padding: 104px 0; background: var(--white); border-bottom: 1px solid var(--warm-100); } .isv-assessment-frame { max-width: 1180px; margin: 0 auto; background: var(--white); border: 1px solid var(--warm-200); border-radius: var(--r-xl); box-shadow: var(--shadow-md); overflow: hidden; position: relative; } .isv-assessment-frame iframe { width: 100%; height: 1600px; border: none; display: block; background: var(--off-white); } /* ═══════════════════════════════════════════════════════ THREE MODES — stacked horizontal cards ═══════════════════════════════════════════════════════ */ .isv-modes { padding: 104px 0; background: var(--warm-100); border-bottom: 1px solid var(--warm-100); } .isv-mode-stack { display: flex; flex-direction: column; gap: 20px; max-width: 1080px; margin: 0 auto; } .isv-mode { display: grid; grid-template-columns: 72px 1fr; gap: 32px; padding: 36px 40px; background: var(--off-white); border: 1px solid var(--warm-200); border-radius: var(--r-lg); align-items: start; transition: border-color .2s, box-shadow .2s; } .isv-mode:hover { border-color: var(--warm-300); box-shadow: var(--shadow-sm); } .isv-mode-n { font-family: var(--f-serif); font-weight: 400; font-size: 48px; line-height: 1; color: var(--warm-300); letter-spacing: -.03em; } .isv-mode-tag { display: inline-block; font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; } .isv-mode h3 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink-900); margin: 0 0 14px; } .isv-mode p { font-family: var(--f-sans); font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--ink-600); margin: 0 0 18px; max-width: 720px; } .isv-mode-meta { display: flex; gap: 8px; flex-wrap: wrap; } .isv-mode-chip { display: inline-flex; align-items: center; font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-700); padding: 6px 12px; background: var(--white); border: 1px solid var(--warm-200); border-radius: 999px; } /* ═══════════════════════════════════════════════════════ §7 OUTCOMES — 3x2 grid on navy Navy section. Cards carry a subtle translucent fill on the navy surround; content inverts to white-on-dark. ═══════════════════════════════════════════════════════ */ .isv-outcomes { padding: 104px 0; background: var(--navy); border-bottom: 1px solid var(--navy);--amber:#f59e0b;} /* Section header inside outcomes — light variant */ .isv-outcomes .section-header .section-tag { color: var(--amber); } .isv-outcomes .section-header h2 { color: var(--white); } .isv-outcomes .section-header p { color: rgba(255, 255, 255, .7); } .isv-outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-width: 1180px; margin: 0 auto; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-lg); overflow: hidden; } .isv-outcome { background: var(--navy); padding: 32px 28px;--amber:#f59e0b;} .isv-outcome-label { font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; } .isv-outcome h4 { font-family: var(--f-serif); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; color: var(--white); margin: 0 0 12px; } .isv-outcome p { font-family: var(--f-sans); font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .7); margin: 0; } /* ═══════════════════════════════════════════════════════ COMMERCIAL FLEXIBILITY — split layout, warm-50 background Sits between use-cases and credential band. Rhythmically separates the feature/outcome sections (white/off-white) from the closing trust/CTA block (navy). ═══════════════════════════════════════════════════════ */ .isv-commercial { padding: 104px 0; background: var(--warm-100); border-bottom: 1px solid var(--warm-100); } .isv-commercial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; max-width: 1180px; margin: 0 auto; } .isv-commercial-text .section-tag { display: inline-block; font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; } .isv-commercial-text h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink-900); margin: 0 0 20px; } .isv-commercial-lead { font-family: var(--f-sans); font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--ink-800); margin: 0 0 18px; } .isv-commercial-text p { font-family: var(--f-sans); font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ink-600); margin: 0 0 28px; } .isv-commercial-models { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--warm-200); } .isv-commercial-item { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--warm-200); align-items: baseline; } .isv-commercial-k { font-family: var(--f-serif); font-weight: 400; font-size: 19px; line-height: 1.25; color: var(--ink-900); letter-spacing: -.015em; } .isv-commercial-v { font-family: var(--f-sans); font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--ink-600); } /* ═══════════════════════════════════════════════════════ DEPLOYMENT FLEXIBILITY — split layout ═══════════════════════════════════════════════════════ */ .isv-deploy { padding: 104px 0; background: var(--warm-100); border-bottom: 1px solid var(--warm-100); } .isv-deploy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; max-width: 1180px; margin: 0 auto; } .isv-deploy-text .section-tag { display: inline-block; font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; } .isv-deploy-text h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink-900); margin: 0 0 20px; } .isv-deploy-text p { font-family: var(--f-sans); font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ink-600); margin: 0; } .isv-deploy-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--warm-200); } .isv-deploy-item { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--warm-200); align-items: baseline; } .isv-deploy-k { font-family: var(--f-serif); font-weight: 400; font-size: 19px; color: var(--ink-900); letter-spacing: -.015em; } .isv-deploy-v { font-family: var(--f-sans); font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--ink-600); } /* ═══════════════════════════════════════════════════════ USE CASES — 3x2 grid of short cards ═══════════════════════════════════════════════════════ */ .isv-usecases { padding: 104px 0; background: var(--white); border-bottom: 1px solid var(--warm-100); } .isv-usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px; margin: 0 auto; } .isv-usecase { background: var(--white); border: 1px solid var(--warm-200); border-radius: var(--r-lg); padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; transition: border-color .2s, box-shadow .2s, transform .2s; } .isv-usecase:hover { border-color: var(--warm-300); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .isv-usecase-eyebrow { display: inline-block; font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 4px; } .isv-usecase h4 { font-family: var(--f-serif); font-weight: 400; font-size: 22px; line-height: 1.18; letter-spacing: -.02em; color: var(--ink-900); margin: 0; } .isv-usecase p { font-family: var(--f-sans); font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--ink-600); margin: 0; flex: 1; } .isv-usecase-chip { display: inline-flex; align-self: flex-start; align-items: center; margin-top: 8px; padding: 6px 12px; font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-900); background: var(--amber-soft, rgba(180, 83, 9, .1)); border: 1px solid rgba(180, 83, 9, .25); border-radius: 999px; } /* ═══════════════════════════════════════════════════════ CREDENTIAL BAND — light section (warm-50) so it doesn't collide with the navy CTA-section that follows it. ═══════════════════════════════════════════════════════ */ .isv-cred { padding: 104px 0; background: var(--white); border-bottom: 1px solid var(--warm-100); } .isv-cred-header { margin-bottom: 56px; } .isv-cred-header .section-tag { color: var(--amber); margin-bottom: 16px; } .isv-cred-header h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink-900); max-width: 720px; margin: 0 0 20px; } /* Cred stats grid was stripped from this page per stats policy. Header + body paragraph only. */ .isv-cred-body { max-width: 720px; } .isv-cred-body p { font-family: var(--f-sans); font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ink-600); margin: 0; } /* ═══════════════════════════════════════════════════════ CTA — navy closing section Moved to shared component: closing-section.css (btn-white styles scoped to .closing-section .btn-white in the shared stylesheet) ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ REVEAL ANIMATIONS ═══════════════════════════════════════════════════════ */ .rv { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; } .rv.v { opacity: 1; transform: none; } .rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; } .rv.d4 { transition-delay: .32s; } .rv.d5 { transition-delay: .4s; } /* ═══════════════════════════════════════════════════════ HIGH CONTRAST MODE — dark section overrides Shared components handle their own HC: - .isv-rail* → see signal-band.css - .isv-cta-* → see closing-section.css Retained overrides: §7 isv-outcomes (now navy — third signal beat on the page). ═══════════════════════════════════════════════════════ */ body.hc .isv-outcomes { background: #00102a;--amber:#f59e0b;} body.hc .isv-outcomes .section-header .section-tag { color: rgba(255, 255, 255, .92); } body.hc .isv-outcomes .section-header h2 { color: #ffffff; } body.hc .isv-outcomes .section-header p { color: rgba(255, 255, 255, .85); } body.hc .isv-outcome { background: #00102a;--amber:#f59e0b;} body.hc .isv-outcome h4 { color: #ffffff; } body.hc .isv-outcome p { color: rgba(255, 255, 255, .85); } body.hc .isv-outcome-label { color: #ffd27a; } body.hc .isv-outcome-grid { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .2); } /* ═══════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .isv-bb-grid, .isv-outcome-grid, .isv-usecase-grid { grid-template-columns: 1fr 1fr; } /* Hero illustration narrows at this breakpoint (spec verbatim) */ .page-hero-illustration { width: 440px; } } @media (max-width: 1024px) { .isv-deploy-grid, .isv-commercial-grid { grid-template-columns: 1fr; gap: 48px; } .isv-statement { padding: 96px 0; } } /* Hero illustration hides below 900px (spec verbatim) */ @media (max-width: 900px) { .page-hero-illustration { display: none; } } @media (max-width: 768px) { .page-hero { padding: calc(88px + env(safe-area-inset-top, 0px)) 0 60px; } .isv-buildbuy, .isv-modes, .isv-outcomes, .isv-deploy, .isv-commercial, .isv-usecases, .isv-assessment, .isv-cred { padding: 72px 0; } /* Taller iframe on mobile since the assessment tool stacks vertically */ .isv-assessment-frame iframe { height: 2400px; } .isv-statement { padding: 72px 0; } .isv-bb-grid, .isv-usecase-grid, .isv-outcome-grid { grid-template-columns: 1fr; gap: 16px; } .isv-outcome-grid { background: transparent; border: none; } .isv-outcome { border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-lg); } .isv-mode { grid-template-columns: 1fr; gap: 16px; padding: 28px 24px; } .isv-mode-n { font-size: 36px; } .isv-deploy-item, .isv-commercial-item { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; } .section-header { margin-bottom: 40px; } } @media (max-width: 480px) { /* Hero h1 resize at 480px is handled by hero.css */ .isv-buildbuy, .isv-modes, .isv-outcomes, .isv-deploy, .isv-commercial, .isv-usecases, .isv-cred, .isv-statement { padding: 56px 0; } }