/* ===================================================================== Infin8Scale — shared stylesheet One source of truth for every page: base, the eyebrow taxonomy system, shared chrome (nav / footer / contact modal), and the subpage primitives (dark topic-hero, section rhythm, buttons, CTA band, timeline). Page-unique CSS stays inline in each page's . ===================================================================== */ :root { --accent: #2E8A60; /* accent taken down to a forest green, for hover outlines that need to read as deliberate against the bone background rather than as a link colour */ --accent-deep: #1C5B3E; /* Layered card elevation. Three stacked shadows: a hairline contact shadow, a mid ambient, and a wide diffuse. Reads as lift rather than a drop shadow. */ --i8-shadow: 0 1px 2px rgba(23,23,23,0.04), 0 8px 24px -6px rgba(23,23,23,0.07), 0 24px 48px -16px rgba(23,23,23,0.05); --i8-shadow-hover: 0 1px 2px rgba(23,23,23,0.05), 0 12px 32px -8px rgba(23,23,23,0.10), 0 32px 64px -20px rgba(23,23,23,0.07); } /* ---- base ---- */ html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; background: #FFFFFF; color: #171717; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: #171717; text-decoration: none; } a:hover { color: #000000; } ::selection { background: rgba(46,138,96,0.22); color: #101010; } img { max-width: 100%; } @keyframes i8pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes i8bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } @keyframes i8drift { 0%, 100% { transform: scale(1.06) translate(0, 0); } 50% { transform: scale(1.09) translate(-1.1%, -0.7%); } } @keyframes i8sig { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } /* ---- layout helpers ---- */ .i8-wrap { max-width: 1280px; margin: 0 auto; } .i8-wrap-narrow { max-width: 1080px; margin: 0 auto; } /* Vertical rhythm is deliberately tight: at the old 96/104px a single section ran ~1100px against roughly 780px of usable laptop viewport, so you could never see one whole section at a time. */ .i8-section { padding: 76px 32px; } .i8-section-lg { padding: 84px 32px; } /* Two-tone alternation. Subpages already alternate cream / paper section by section — the classes were there but every value had been flattened to #FFFFFF, so the rhythm was invisible. Restoring the values is all that is needed; no markup changes on the subpages. #F6F5F1 is a warm stone, chosen to sit with the warm neutrals already in use (#55534D body, #A29F94 muted) and to stay light enough that white cards still read as raised against it. */ .i8-bg-cream { background: #F6F5F1; } .i8-bg-paper { background: #FFFFFF; } .i8-bg-white { background: #FFFFFF; } .i8-bg-sand { background: #F6F5F1; } .i8-bg-dark { background: #0C0D10; color: #FFFFFF; } /* legacy name, kept so existing markup works; renders the same solid seam defined below */ .i8-line-top { position: relative; } .tnum { font-variant-numeric: tabular-nums; } /* ---- section divider: solid hairline running edge to edge, so consecutive sections read as stacked blocks ---- */ .i8-divider { height:1px; border:0; margin:0; background:rgba(23,23,23,0.13); } .i8-divider.i8-on-dark { background:rgba(255,255,255,0.14); } /* Seam drawn as a pseudo-element so a section keeps its own background and padding while carrying the rule above it. Solid and edge-to-edge (the section is full width, so left:0/right:0 reaches the viewport): the rules are what make each section read as a discrete block rather than one continuous scroll. */ .i8-seam { position:relative; } .i8-seam::before, .i8-line-top::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none; background:rgba(23,23,23,0.13); } .i8-seam.i8-bg-dark::before, .i8-line-top.i8-bg-dark::before { background:rgba(255,255,255,0.14); } /* ---- card system ---- */ /* fixed 3-up so six cards read as two rows of three, not auto-fit's 4+2 */ .i8-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media (max-width:1040px) { .i8-card-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:660px) { .i8-card-grid { grid-template-columns:1fr; } } .i8-card { position:relative; display:flex; flex-direction:column; gap:18px; background:#FFFFFF; border:1px solid rgba(23,23,23,0.10); border-radius:18px; padding:20px 20px 22px; box-shadow:var(--i8-shadow); transition:box-shadow .32s ease, transform .32s ease, border-color .32s ease; } .i8-card:hover { transform:translateY(-3px); border-color:rgba(23,23,23,0.16); box-shadow:var(--i8-shadow-hover); } .i8-card__top { display:flex; align-items:center; justify-content:space-between; gap:12px; } .i8-card__icon { flex:none; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; background:color-mix(in oklab, var(--accent,#2E8A60) 9%, #FFFFFF); border:1px solid color-mix(in oklab, var(--accent,#2E8A60) 22%, transparent); color:var(--accent,#2E8A60); } .i8-card__num { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; color:#A29F94; } .i8-card__title { margin:0; font-family:Archivo,sans-serif; font-weight:500; font-size:19px; line-height:1.26; letter-spacing:-0.012em; color:#171717; text-wrap:balance; } .i8-card__body { margin:0; font-size:14.5px; line-height:1.6; color:#55534D; text-wrap:pretty; } .i8-card__foot { margin-top:auto; padding-top:4px; } /* ---- auto-cycling accent: the lit state walks card to card on a timer, driven by app.js (initCycleAccent). No hover involved. ---- */ .i8-cycle { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } @media (max-width:1040px) { .i8-cycle { grid-template-columns:repeat(3,1fr); } } @media (max-width:720px) { .i8-cycle { grid-template-columns:repeat(2,1fr); } } @media (max-width:440px) { .i8-cycle { grid-template-columns:1fr; } } .i8-cycle__item { position:relative; border:1px solid rgba(23,23,23,0.14); border-radius:14px; background:#FFFFFF; padding:20px 20px 18px; display:flex; flex-direction:column; gap:24px; box-shadow:var(--i8-shadow); } /* The lit state rides on a pseudo-element and fades via opacity alone. initReveals() writes an inline `transition` listing only opacity+transform, which would override any transition declared on the item itself — a pseudo-element is immune to that, so the crossfade always runs. */ .i8-cycle__item::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; border:1px solid color-mix(in oklab, var(--accent,#2E8A60) 60%, transparent); background:color-mix(in oklab, var(--accent,#2E8A60) 7%, transparent); opacity:0; transition:opacity 1.15s cubic-bezier(0.4,0,0.2,1); } .i8-cycle__item.is-lit::after { opacity:1; } .i8-cycle__num { position:relative; z-index:1; font-family:Archivo,sans-serif; font-weight:600; font-variant-numeric:tabular-nums; font-size:10.5px; letter-spacing:0.1em; color:#A29F94; transition:color 1.15s cubic-bezier(0.4,0,0.2,1); } .i8-cycle__label { position:relative; z-index:1; font-family:Archivo,sans-serif; font-weight:600; font-size:15.5px; color:#171717; } .i8-cycle__item.is-lit .i8-cycle__num { color:var(--accent,#2E8A60); } @media (prefers-reduced-motion: reduce) { .i8-cycle__item::after, .i8-cycle__num { transition:none; } } /* the one card carrying the section's emphasis */ .i8-card--accent { border-color:color-mix(in oklab, var(--accent,#2E8A60) 40%, transparent); background:color-mix(in oklab, var(--accent,#2E8A60) 4%, #FFFFFF); } .i8-card--accent .i8-card__icon { background:var(--accent,#2E8A60); border-color:var(--accent,#2E8A60); color:#FFFFFF; } .i8-card--accent:hover { border-color:color-mix(in oklab, var(--accent,#2E8A60) 55%, transparent); } @media (prefers-reduced-motion: reduce) { .i8-card, .i8-card:hover { transition:none; transform:none; } } /* ---- eyebrow taxonomy: Archivo caps (no marker; strictly black/white) ---- */ .i8-eyebrow { display:inline-flex; align-items:center; margin:0 0 18px; font-family:Archivo,sans-serif; font-weight:600; font-size:11.5px; line-height:1.1; letter-spacing:0.15em; text-transform:uppercase; color:#6E6E6E; } .i8-eyebrow.i8-on-dark { color:rgba(255,255,255,0.62); } .i8-eyebrow.i8-on-accent { color:rgba(255,255,255,0.82); } .i8-eyebrow.i8-tight { margin-bottom:0; } .i8-cost { display:inline-flex; align-items:center; font-family:Archivo,sans-serif; font-weight:600; font-size:11px; line-height:1.2; letter-spacing:0.07em; text-transform:uppercase; color:#6E6E6E; white-space:nowrap; } .i8-caps { display:flex; flex-wrap:wrap; gap:12px 24px; } .i8-caps span { position:relative; font-family:Archivo,sans-serif; font-weight:600; font-size:15px; color:#171717; padding-left:16px; } .i8-caps span::before { content:""; position:absolute; left:0; top:0.55em; width:6px; height:6px; border-radius:2px; background:#2E8A60; } .i8-note { font-family:Archivo,sans-serif; font-weight:500; font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase; color:#A29F94; } /* #problem header: headline left, operator quote right. Collapses before the columns get too narrow to hold a 44px headline and a pull-quote. */ .i8-prob-head { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:56px; align-items:center; margin-bottom:56px; } @media (max-width:900px) { .i8-prob-head { grid-template-columns:1fr; gap:34px; margin-bottom:40px; } } /* ---- shared type ---- */ .i8-h2 { margin:0; font-family:Archivo,sans-serif; font-weight:500; font-size:clamp(28px,3.6vw,46px); line-height:1.04; letter-spacing:-0.015em; text-transform:uppercase; color:#171717; text-wrap:balance; } .i8-serif { font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; text-transform:none; font-size:1.06em; color:var(--accent,#2E8A60); } .i8-lede { margin:0; font-size:16px; line-height:1.65; color:#55534D; text-wrap:pretty; } /* No rule here on purpose: only the full-bleed section seams break the page up. A second, column-width line under every header read as clutter. */ .i8-head { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:44px; align-items:end; margin-bottom:58px; } .i8-head .i8-lede { max-width:460px; } /* Centred variant. Used where a block has to announce itself as a named chapter of the page (the process flow) rather than sit under the usual two-column head, so the consoles below read as our process and not as decoration. */ .i8-head--center { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; max-width:880px; margin-left:auto; margin-right:auto; } .i8-head--center > .i8-eyebrow { margin:0 0 22px; } .i8-head--center > h2 { margin:0; } .i8-head--center > p { margin:28px 0 0; } /* ---- legal / policy documents ---- */ .i8-legal { max-width:760px; } .i8-legal-sec { margin-top:44px; padding-top:30px; border-top:1px solid rgba(23,23,23,0.1); } .i8-legal-sec:first-child { margin-top:0; padding-top:0; border-top:none; } .i8-legal-sec h2 { margin:0 0 14px; font-family:Archivo,sans-serif; font-weight:500; font-size:20px; line-height:1.25; letter-spacing:-0.01em; color:#171717; } .i8-legal-sec p { margin:0 0 15px; font-family:Archivo,sans-serif; font-size:16px; line-height:1.72; color:#4A4844; text-wrap:pretty; } .i8-legal-sec p:last-child { margin-bottom:0; } .i8-legal-sec strong { color:#171717; font-weight:600; } .i8-legal-sec a { color:#171717; font-weight:600; border-bottom:1px solid rgba(23,23,23,0.3); text-decoration:none; transition:border-color .2s,color .2s; } .i8-legal-sec a:hover { color:#000000; border-bottom-color:var(--accent,#2E8A60); } /* ---- buttons ---- */ .i8-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:#171717; color:#FFFFFF; font-family:Archivo,sans-serif; font-weight:600; font-size:15px; padding:15px 30px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; transition:background .2s,color .2s; } .i8-btn:hover { background:#000; color:#fff; } .i8-btn .i8-arw { font-family:'IBM Plex Mono',monospace; font-size:13px; } .i8-btn-light { background:#FFFFFF; color:#171717; } .i8-btn-light:hover { background:#fff; color:#171717; } .i8-btn-ghost { background:transparent; color:#171717; border:1px solid rgba(23,23,23,0.28); } .i8-btn-ghost:hover { background:rgba(23,23,23,0.04); border-color:#171717; color:#171717; } .i8-btn-ghost-dark { background:transparent; color:#FFFFFF; border:1px solid rgba(255,255,255,0.3); } .i8-btn-ghost-dark:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.6); color:#fff; } /* ---- "explore" link (section -> dedicated page, and cross-page) ---- */ .i8-explore { display:inline-flex; align-items:center; gap:9px; font-family:Archivo,sans-serif; font-weight:600; font-size:14px; letter-spacing:-0.005em; color:#171717; } .i8-explore::after { content:"→"; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--accent,#2E8A60); transition:transform .2s ease; } .i8-explore:hover { color:#000; } .i8-explore:hover::after { transform:translateX(4px); } .i8-explore.i8-on-dark { color:#FFFFFF; } .i8-explore.i8-on-dark:hover { color:#fff; } /* ---- generic card ---- */ .i8-card { border:1px solid rgba(23,23,23,0.14); border-radius:18px; background:#FFFFFF; padding:30px 32px 32px; } /* ===================================================================== Dark topic-hero (subpage header — keeps the transparent nav honest) ===================================================================== */ .i8-topic-hero { position:relative; isolation:isolate; background:#0C0D10; color:#FFFFFF; overflow:hidden; padding:118px 32px 60px; } .i8-topic-hero::before { content:""; position:absolute; inset:0; z-index:-2; background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(115% 92% at 84% -8%,#000 0%,transparent 66%); mask-image:radial-gradient(115% 92% at 84% -8%,#000 0%,transparent 66%); opacity:0.55; } .i8-topic-hero::after { content:""; position:absolute; z-index:-1; top:-45%; right:-8%; width:64%; height:150%; background:radial-gradient(closest-side, color-mix(in oklab, var(--accent,#2E8A60) 24%, transparent), transparent 72%); pointer-events:none; } .i8-topic-hero .i8-wrap { position:relative; z-index:1; } .i8-hero-title { margin:0; font-family:Archivo,sans-serif; font-weight:500; font-size:clamp(40px,6vw,78px); line-height:1.02; letter-spacing:-0.02em; color:#FFFFFF; text-wrap:balance; } .i8-hero-title em { font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--accent,#2E8A60); } .i8-hero-sub { margin:24px 0 0; max-width:600px; font-family:Archivo,sans-serif; font-size:17px; line-height:1.62; color:rgba(255,255,255,0.82); text-wrap:pretty; } /* breadcrumb / kicker above hero title */ .i8-crumb { display:inline-flex; align-items:center; gap:10px; margin-bottom:26px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); } .i8-crumb a { color:rgba(255,255,255,0.5); } .i8-crumb a:hover { color:#fff; } .i8-crumb span { color:rgba(255,255,255,0.3); } .i8-crumb b { color:rgba(255,255,255,0.86); font-weight:500; } /* stat row that some heroes carry */ .i8-hero-stats { display:flex; flex-wrap:wrap; gap:12px 40px; margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.14); } .i8-hero-stat b { display:block; font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:clamp(24px,3vw,32px); color:#FFFFFF; letter-spacing:-0.01em; } .i8-hero-stat span { display:block; margin-top:6px; font-family:Archivo,sans-serif; font-weight:500; font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:rgba(255,255,255,0.5); } /* ===================================================================== Proof band — sits directly under the home hero. Dark, so it reads as the hero's foot rather than a new section; the dramatic dark -> white seam is preserved for "Who we serve" below. ===================================================================== */ .i8-proof { background:#0C0D10; padding:32px 0 32px; } .i8-proof .i8-wrap { padding:0 32px; box-sizing:border-box; } /* This label is set in mono rather than the Archivo used by every other eyebrow: it is a machine-ish caption over a logo rail, and the wider tracking at a smaller size keeps it quiet under the marks. */ .i8-proof .i8-eyebrow { font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:9.5px; letter-spacing:0.24em; color:rgba(255,255,255,0.48); margin-bottom:30px; } /* ---- infinite marquee ---- One track holding two byte-identical groups. Translating the track exactly -50% lands group 2 where group 1 began, so the loop has no visible seam. That -50% is only correct while the groups stay identical (same items, same trailing gap) — edit both or neither. */ @keyframes i8marquee { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } } .i8-marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); } .i8-marquee__track { display:flex; width:max-content; will-change:transform; animation:i8marquee 84s linear infinite; } /* :focus-within matters as much as :hover — a keyboard user tabbing through cannot read a row that is still moving */ .i8-marquee:hover .i8-marquee__track, .i8-marquee:focus-within .i8-marquee__track { animation-play-state:paused; } .i8-marquee__group { display:flex; align-items:center; flex:none; gap:clamp(34px,4vw,60px); padding-right:clamp(34px,4vw,60px); } .i8-marquee__item { flex:none; display:inline-flex; align-items:center; opacity:0.62; transition:opacity .3s ease; } /* Make.com publishes no wordmark SVG, so that one item is the mark plus a typeset name. It needs the gap the wordmark items do not. */ .i8-marquee__item--text { gap:13px; } .i8-marquee__item:hover { opacity:1; } /* The audience for this row is non-technical: a bare mark means nothing to a facilities director, so every item carries its product name and the mark is decorative (alt="", aria-hidden) to keep screen readers from saying it twice. */ .i8-marquee__name { font-family:Archivo,sans-serif; font-weight:600; font-size:clamp(17px,1.2vw,22px); line-height:1; letter-spacing:-0.012em; color:#FFFFFF; white-space:nowrap; } /* Source marks (assets/logos/*.svg) are single-path black glyphs. brightness(0) flattens each to solid black whatever its brand colour, invert(1) then makes it white — so the row reads as one system instead of twelve palettes. */ .i8-marquee__item img { display:block; height:26px; width:auto; filter:brightness(0) invert(1); } /* Each brand ships its wordmark on its own canvas — different x-heights, and some (Airtable) carry heavy padding inside the viewBox. Sizing them all to one height makes them look wrong at different amounts, so height is tuned per brand until the letterforms read at the same optical size. */ .i8-marquee__item[data-brand="anthropic"] img { height:22px; } .i8-marquee__item[data-brand="n8n"] img { height:27px; } .i8-marquee__item[data-brand="openai"] img { height:26px; } .i8-marquee__item[data-brand="supabase"] img { height:25px; } .i8-marquee__item[data-brand="retool"] img { height:24px; } .i8-marquee__item[data-brand="slack"] img { height:27px; } .i8-marquee__item[data-brand="whatsapp"] img { height:28px; } .i8-marquee__item[data-brand="twilio"] img { height:30px; } .i8-marquee__item[data-brand="googlegemini"] img { height:29px; } .i8-marquee__item[data-brand="postgresql"] img { height:45px; } .i8-marquee__item[data-brand="airtable"] img { height:55px; } .i8-marquee__item[data-brand="make"] img { height:24px; } .i8-marquee__item[data-brand="elevenlabs"] img { height:20px; } .i8-marquee__item[data-brand="canva"] img { height:46px; } @media (max-width:660px) { .i8-proof { padding:24px 0 24px; } .i8-proof .i8-wrap { padding:0 20px; } /* Same per-brand ratios, scaled down as a block. */ .i8-marquee__item img { height:21px; } .i8-marquee__item[data-brand="anthropic"] img { height:15px; } .i8-marquee__item[data-brand="n8n"] img { height:16px; } .i8-marquee__item[data-brand="openai"] img { height:19px; } .i8-marquee__item[data-brand="supabase"] img { height:19px; } .i8-marquee__item[data-brand="retool"] img { height:18px; } .i8-marquee__item[data-brand="slack"] img { height:21px; } .i8-marquee__item[data-brand="whatsapp"] img { height:22px; } .i8-marquee__item[data-brand="twilio"] img { height:24px; } .i8-marquee__item[data-brand="googlegemini"] img { height:25px; } .i8-marquee__item[data-brand="postgresql"] img { height:29px; } .i8-marquee__item[data-brand="airtable"] img { height:35px; } .i8-marquee__item[data-brand="make"] img { height:19px; } .i8-marquee__item[data-brand="elevenlabs"] img { height:18px; } .i8-marquee__item[data-brand="canva"] img { height:36px; } .i8-marquee__item--text { gap:10px; } .i8-marquee__name { font-size:16px; } .i8-marquee__group { gap:28px; padding-right:28px; } } /* The global reduced-motion rule (bottom of this file) forces every animation to 0.001ms with one iteration. On a marquee that alone would freeze the track at frame 0 and leave overflow:hidden clipping every item past the first few — so the row is explicitly rebuilt as a static wrapped list. */ @media (prefers-reduced-motion: reduce) { /* Static/wrapped mode has no off-screen bleed to sell, so the row goes back inside a gutter rather than running into the section edges. */ .i8-marquee { -webkit-mask-image:none; mask-image:none; padding:0 32px; box-sizing:border-box; } .i8-marquee__track { animation:none; width:auto; flex-wrap:wrap; justify-content:center; } .i8-marquee__group { flex-wrap:wrap; justify-content:center; padding-right:0; row-gap:18px; } .i8-marquee__group[aria-hidden="true"] { display:none; } .i8-marquee__item { transition:none; } } /* ===================================================================== Photographic hero (industry pages) — full-bleed stock photo + dark grade ===================================================================== */ .i8-photo-hero { position:relative; isolation:isolate; min-height:62vh; display:flex; align-items:flex-end; overflow:hidden; background:#0C0D10; color:#FFFFFF; padding:118px 32px 52px; } .i8-photo-hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } .i8-photo-hero__ov { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,11,14,0.66) 0%, rgba(10,11,14,0.30) 40%, rgba(10,11,14,0.58) 72%, rgba(10,11,14,0.93) 100%); } .i8-photo-hero__glow { position:absolute; inset:0; background:radial-gradient(52% 44% at 84% 16%, color-mix(in oklab, var(--accent,#2E8A60) 22%, transparent), transparent 70%); pointer-events:none; } .i8-photo-hero > .i8-wrap { position:relative; z-index:1; width:100%; box-sizing:border-box; } .i8-photo-hero .i8-hero-sub { max-width:640px; } .i8-hero-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:32px; } /* image + text inset band (industry "how it fits" / proof) */ .i8-inset { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } .i8-inset__media { border-radius:20px; overflow:hidden; border:1px solid rgba(23,23,23,0.14); background:#0C0D10; box-shadow:0 24px 54px -34px rgba(12,13,16,0.5); } .i8-inset__media img { display:block; width:100%; height:100%; object-fit:cover; min-height:300px; } @media (max-width:820px){ .i8-inset { grid-template-columns:1fr; } } /* ===================================================================== Closing CTA band (contained dark card, reused at the foot of each page) ===================================================================== */ .i8-cta-band { position:relative; overflow:hidden; isolation:isolate; background:#0C0D10; color:#FFFFFF; border-radius:24px; padding:clamp(40px,5vw,64px); } .i8-cta-band::after { content:""; position:absolute; z-index:-1; inset:auto -10% -60% auto; left:-10%; width:60%; height:150%; background:radial-gradient(closest-side, color-mix(in oklab, var(--accent,#2E8A60) 20%, transparent), transparent 72%); pointer-events:none; } .i8-cta-band h2 { margin:0 0 18px; max-width:20ch; font-family:Archivo,sans-serif; font-weight:500; font-size:clamp(28px,3.6vw,46px); line-height:1.03; letter-spacing:-0.02em; text-transform:uppercase; color:#FFFFFF; text-wrap:balance; } .i8-cta-band h2 em { font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; text-transform:none; color:var(--accent,#2E8A60); } .i8-cta-band p { margin:0 0 30px; max-width:52ch; font-size:16px; line-height:1.65; color:rgba(255,255,255,0.78); } .i8-cta-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; } /* ===================================================================== Vertical typed timeline (process page) ===================================================================== */ .i8-timeline { position:relative; } .i8-timeline::before { content:""; position:absolute; left:19px; top:8px; bottom:8px; width:1px; background:linear-gradient(180deg, rgba(23,23,23,0.18), rgba(23,23,23,0.18) 88%, transparent); } /* scroll-progress fill: the green trail the travelling node leaves behind */ .i8-tl-fill { position:absolute; left:19px; top:8px; width:1px; height:0; background:var(--accent,#2E8A60); z-index:0; transition:height .25s cubic-bezier(.4,0,.2,1); } .i8-step { position:relative; display:grid; grid-template-columns:40px 1fr; gap:0 26px; padding:0 0 32px 0; } .i8-step:last-child { padding-bottom:0; } .i8-step-num { position:relative; z-index:1; width:40px; height:40px; border-radius:999px; background:#FFFFFF; border:1px solid rgba(23,23,23,0.2); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:13px; color:#55534D; transition:background .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease; } /* the single travelling green node (JS sets .is-active; .is-key is the no-JS fallback) */ .i8-step.is-key .i8-step-num, .i8-step-num.is-active { background:#2E8A60; border-color:#2E8A60; color:#fff; box-shadow:0 0 0 5px color-mix(in oklab,#2E8A60 16%, transparent); transform:scale(1.08); } .i8-step-body { padding-top:5px; } .i8-step-title { font-family:Archivo,sans-serif; font-weight:500; font-size:clamp(21px,2.4vw,27px); text-transform:uppercase; letter-spacing:-0.01em; color:#171717; margin:0 0 15px; } .i8-step-body p { margin:0 0 18px; font-size:15.5px; line-height:1.62; color:#55534D; max-width:640px; } .i8-deliver { display:flex; flex-wrap:wrap; gap:8px; } .i8-deliver span { font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.02em; color:#55534D; border:1px solid rgba(23,23,23,0.16); border-radius:999px; padding:6px 12px; } /* ===================================================================== Shared chrome — NAV (injected by app.js on every page) Starts transparent over the dark hero; app.js flips vars on scroll. ===================================================================== */ #i8-nav { will-change: background, backdrop-filter; } .i8-nav-inner { max-width:1280px; margin:0 auto; padding:0 32px; height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .i8-nav-logo { position:relative; display:inline-flex; align-items:center; height:20px; flex:none; } .i8-nav-links { display:flex; align-items:center; gap:30px; flex-wrap:wrap; } .i8-nav-link { position:relative; font-family:Archivo,sans-serif; font-size:14px; font-weight:500; letter-spacing:-0.005em; color:var(--nav-fg); transition:color 0.35s ease; } .i8-nav-link:hover { color:var(--nav-fg-strong); } .i8-nav-link.is-active { color:var(--nav-fg-strong); } .i8-nav-link.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px; background:var(--accent,#2E8A60); } .i8-nav-cta { flex:none; display:inline-flex; align-items:center; gap:8px; background:var(--nav-cta-bg); color:var(--nav-cta-fg); border:1px solid var(--nav-cta-border); font-family:Archivo,sans-serif; font-weight:600; font-size:13.5px; padding:9px 19px; border-radius:999px; cursor:pointer; transition:background 0.35s ease, color 0.35s ease, border-color 0.35s ease; } .i8-nav-cta:hover { background:var(--nav-cta-bg-hover); color:var(--nav-cta-fg); } .i8-menu-btn { display:none; align-items:center; justify-content:center; width:40px; height:40px; flex:none; background:transparent; border:1px solid var(--nav-cta-border); border-radius:10px; cursor:pointer; color:var(--nav-fg-strong); } .i8-menu-btn svg { display:block; } .i8-mobile { display:none; overflow:hidden; max-height:0; transition:max-height 0.35s ease; background:rgba(12,13,16,0.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,0.1); } .i8-mobile.is-open { max-height:80vh; } .i8-mobile-inner { padding:14px 24px 24px; display:flex; flex-direction:column; } .i8-mobile a { padding:15px 4px; font-family:Archivo,sans-serif; font-weight:600; font-size:17px; color:#FFFFFF; border-bottom:1px solid rgba(255,255,255,0.1); display:flex; justify-content:space-between; align-items:center; } .i8-mobile a:hover { color:#fff; } .i8-mobile a.is-active { color:var(--accent,#2E8A60); } .i8-mobile a .i8-arw { font-family:'IBM Plex Mono',monospace; font-size:13px; color:rgba(255,255,255,0.4); } .i8-mobile .i8-btn { margin-top:20px; } @media (max-width: 960px) { .i8-nav-links, .i8-nav-cta { display: none; } .i8-menu-btn { display: inline-flex; } .i8-mobile { display: block; } } @media (max-width: 540px) { .i8-nav-inner { padding: 0 18px; } } /* ---- shared chrome — FOOTER (emitted as one HTML string by app.js) ---- */ .i8-foot-col { display:flex; flex-direction:column; gap:14px; min-width:150px; } .i8-foot-h { font-family:Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.13em; text-transform:uppercase; color:#FFFFFF; margin-bottom:6px; } .i8-foot-col a { font-family:Archivo,sans-serif; font-size:14.5px; color:rgba(255,255,255,0.6); } .i8-foot-col a:hover { color:#fff; } .i8-foot-social { width:38px; height:38px; border-radius:999px; border:1px solid rgba(255,255,255,0.16); display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.6); } .i8-foot-social:hover { border-color:rgba(255,255,255,0.5); color:#fff; } .i8-foot-bottom { margin-top:76px; padding:24px 0 30px; border-top:1px solid rgba(255,255,255,0.12); display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; align-items:center; } .i8-foot-bottom span { font-family:Archivo,sans-serif; font-size:12.5px; color:rgba(255,255,255,0.42); } .i8-foot-bottom a { font-family:Archivo,sans-serif; font-size:12.5px; color:rgba(255,255,255,0.42); } .i8-foot-bottom a:hover { color:#fff; } /* ---- menu icon swap ---- */ .i8-ic-close { display:none; } #i8-nav.is-menu-open .i8-ic-close { display:block; } #i8-nav.is-menu-open .i8-ic-menu { display:none; } .hero-email::placeholder { color: rgba(255,255,255,0.62); } /* ===================================================================== Engagement stacks — copy block paired with a dark "console" preview. Shares the fleet demo's vocabulary below (same dark panel, mono labels, status dots) so the two read as one system rather than two widgets. The consoles show ILLUSTRATIVE data. Every .i8-sysc carries role="img" and an aria-label saying so, and the section states it in visible text — these are previews of what the system reports, not client results. ===================================================================== */ .i8-blocks { display:flex; flex-direction:column; gap:16px; } .i8-blk { border:1px solid rgba(23,23,23,0.14); border-radius:22px; background:#FFFFFF; padding:26px; box-shadow:var(--i8-shadow); } /* Photographic engagement card: image bleeds to the left edge of the card and inherits its curve (padding:0 + overflow:hidden clips the media to the 22px radius), copy sits in the padded right column. The step label and the deliverable pills sit on the image, in mono, as the panel's chrome. */ .i8-blk[data-size="media"] { display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); gap:0; padding:0; overflow:hidden; align-items:stretch; } /* The radius is set on the panel itself rather than left to the card's overflow clip: the blend-mode layer below establishes its own painting context, which browsers do not reliably clip to an ancestor's rounding. 21px = the card's 22px radius less its 1px border. */ .i8-blk__media { position:relative; isolation:isolate; overflow:hidden; min-height:330px; background:#080B0A; border-radius:21px 0 0 21px; display:flex; flex-direction:column; justify-content:space-between; gap:18px; padding:22px; } /* Duotone, built in two passes so the photograph stays readable instead of being flooded out: the image is taken fully monochrome, then ::before multiplies a green-to-near-black ramp over it, which maps the photo's highlights to the accent and its shadows to near black. */ /* Layered with positive z-indices, not negative ones: a negative-z child of this isolated context stops painting once the panel is reordered with the order property for the flipped card. The pills below carry z-index:3. */ .i8-blk__media img { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:grayscale(1) contrast(1.14) brightness(1.02); } .i8-blk__media::before { content:""; position:absolute; z-index:1; inset:0; mix-blend-mode:multiply; background:linear-gradient(152deg, #3E9E72 0%, #1B6446 34%, #0C2A1E 70%, #071411 100%); } /* Normal-blend pass on top: an accent glow in the corner for depth, plus top and bottom shades that keep the mono pills legible over any frame. */ .i8-blk__media::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:radial-gradient(60% 50% at 80% 10%, color-mix(in oklab, var(--accent,#2E8A60) 30%, transparent), transparent 70%), linear-gradient(180deg, rgba(3,8,6,0.50) 0%, rgba(3,8,6,0.05) 26%, rgba(3,8,6,0.10) 62%, rgba(3,8,6,0.62) 100%); } .i8-blk__tag { position:relative; z-index:3; align-self:flex-start; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:#FFFFFF; background:rgba(4,8,7,0.62); border:1px solid rgba(255,255,255,0.24); border-radius:6px; padding:7px 11px; backdrop-filter:blur(2px); } .i8-blk__meta { position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:7px; } .i8-blk__meta span { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.92); background:rgba(4,8,7,0.58); border:1px solid rgba(255,255,255,0.20); border-radius:6px; padding:6px 10px; backdrop-filter:blur(2px); } .i8-blk[data-size="media"] .i8-blk__copy { align-self:center; padding:34px 34px 32px; } .i8-blk[data-size="media"] .i8-blk__title { font-size:clamp(24px,2.9vw,34px); letter-spacing:-0.02em; } /* data-flip mirrors the card: photo on the right, copy on the left. The DOM order stays media-then-copy so the stacked layout below needs no change and the image still leads on mobile; only the desktop grid order is swapped. */ .i8-blk[data-size="media"][data-flip] { grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr); } .i8-blk[data-size="media"][data-flip] .i8-blk__media { order:2; border-radius:0 21px 21px 0; } .i8-blk[data-size="media"][data-flip] .i8-blk__copy { order:1; } @media (max-width:900px) { /* stacked: the photo becomes a banner across the top, still edge to edge */ .i8-blk[data-size="media"], .i8-blk[data-size="media"][data-flip] { grid-template-columns:1fr; } .i8-blk__media { min-height:240px; border-radius:21px 21px 0 0; } /* stacked, both cards lead with the photo again */ .i8-blk[data-size="media"][data-flip] .i8-blk__media { order:0; border-radius:21px 21px 0 0; } .i8-blk[data-size="media"][data-flip] .i8-blk__copy { order:0; } .i8-blk[data-size="media"] .i8-blk__copy { padding:26px 24px 24px; } } @media (prefers-reduced-motion: reduce) { .i8-blk__tag, .i8-blk__meta span { backdrop-filter:none; } } /* The gate between the two steps. This section is one progression, not a menu, so the two cards are joined by a rule that states the condition for moving from diagnosis to build rather than sitting as parallel options. */ .i8-blocks__then { position:relative; margin:2px 0; padding:16px 0 16px 26px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#8B887F; } .i8-blocks__then::before { content:""; position:absolute; left:11px; top:0; bottom:0; width:1px; background:linear-gradient(180deg, rgba(23,23,23,0.06), var(--accent,#2E8A60), rgba(23,23,23,0.06)); } .i8-blocks__then::after { content:""; position:absolute; left:8px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--accent,#2E8A60); box-shadow:0 0 0 4px #FFFFFF; } .i8-blk__step { display:inline-flex; align-items:center; font-family:Archivo,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:#55534D; border:1px solid rgba(23,23,23,0.22); border-radius:999px; padding:6px 12px; margin-bottom:14px; } .i8-blk__title { margin:0 0 12px; font-family:Archivo,sans-serif; font-weight:500; font-size:clamp(22px,2.5vw,29px); line-height:1.15; letter-spacing:-0.015em; color:#171717; text-wrap:balance; } .i8-blk__body { margin:0 0 22px; font-size:15px; line-height:1.65; color:#55534D; text-wrap:pretty; } .i8-blk__cta { display:inline-flex; align-items:center; gap:8px; font-family:Archivo,sans-serif; font-weight:600; font-size:14px; color:#171717; border:1px solid rgba(23,23,23,0.22); border-radius:999px; padding:10px 18px; transition:border-color .2s, background .2s; } .i8-blk__cta:hover { background:rgba(23,23,23,0.04); border-color:#171717; } .i8-blk__cta span { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent,#2E8A60); } /* ---- the console panel ---- */ /* Accent bloom sits ON the card, never behind it: two radial gradients painted into the card's own background, plus inset shadows that hug the inner edges. Deliberately no outer green shadow — that throws light onto the page around the card instead of lighting the card itself. Background-image rather than a ::before, because an absolutely positioned pseudo-element paints above the static text children and washes them out. */ .i8-sysc { position:relative; border:1px solid rgba(46,138,96,0.30); border-radius:18px; color:#D2D6DD; padding:16px 18px 18px; overflow:hidden; background-color:#0C0D10; background-image:radial-gradient(130% 85% at 12% -14%, color-mix(in oklab, var(--accent,#2E8A60) 52%, transparent) 0%, color-mix(in oklab, var(--accent,#2E8A60) 22%, transparent) 40%, transparent 74%), radial-gradient(95% 65% at 92% 108%, color-mix(in oklab, var(--accent,#2E8A60) 30%, transparent) 0%, transparent 66%); box-shadow:0 28px 56px -32px rgba(0,0,0,0.6), inset 0 0 78px -14px rgba(46,138,96,0.60), inset 0 0 26px -8px rgba(46,138,96,0.34), inset 0 1px 0 rgba(255,255,255,0.09); } .i8-sysc__chrome { display:flex; align-items:center; gap:9px; padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,0.07); } .i8-sysc__live { width:7px; height:7px; border-radius:50%; flex:none; background:var(--accent,#2E8A60); box-shadow:0 0 8px color-mix(in oklab, var(--accent,#2E8A60) 70%, transparent); animation:i8pulse 2.4s ease-in-out infinite; } .i8-sysc__name { font-family:Archivo,sans-serif; font-weight:600; font-size:13px; color:#FFFFFF; } .i8-sysc__chip { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.62); border:1px solid rgba(255,255,255,0.18); border-radius:999px; padding:4px 10px; white-space:nowrap; } .i8-sysc__channels { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:14px 0 0; padding:0; } .i8-sysc__channels li { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.12); border-radius:5px; padding:4px 8px; } .i8-sysc__readout { margin-top:16px; } .i8-sysc__readout-label { display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.11em; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:4px; } .i8-sysc__readout-value { display:block; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-size:clamp(28px,3.4vw,38px); line-height:1.05; color:#FFFFFF; letter-spacing:-0.015em; } .i8-sysc__stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0 0; padding-top:14px; border-top:1px solid rgba(255,255,255,0.07); } .i8-sysc__stats dt { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.45); } .i8-sysc__stats dd { margin:5px 0 0; font-family:Archivo,sans-serif; font-weight:600; font-size:15px; color:#FFFFFF; } /* bar field: heights come from --h on each bar */ /* flex:none so the bar field keeps its 52px when the console is itself a flex column (half cards) and space gets tight */ .i8-sysc__bars { display:flex; flex:none; align-items:flex-end; gap:5px; height:52px; margin-top:16px; } .i8-sysc__bars i { flex:1; height:var(--h,40%); border-radius:3px; background:color-mix(in oklab, var(--accent,#2E8A60) 78%, #FFFFFF); transform-origin:bottom; transform:scaleY(0); transition:transform .6s cubic-bezier(0.22,0.61,0.36,1); transition-delay:calc(var(--i,0) * 60ms); } .i8-sysc.is-live .i8-sysc__bars i { transform:scaleY(1); } .i8-sysc__meter { margin-top:16px; } .i8-sysc__meter-label { display:block; font-family:Archivo,sans-serif; font-size:11.5px; color:rgba(255,255,255,0.6); margin-bottom:7px; } .i8-sysc__meter-track { display:block; height:5px; border-radius:999px; background:rgba(255,255,255,0.1); overflow:hidden; } .i8-sysc__meter-fill { display:block; height:100%; width:0; border-radius:inherit; background:var(--accent,#2E8A60); transition:width 1.1s cubic-bezier(0.22,0.61,0.36,1); } .i8-sysc.is-live .i8-sysc__meter-fill { width:var(--h,100%); } .i8-sysc__rows { list-style:none; margin:16px 0 0; padding:0; } .i8-sysc__rows li { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid rgba(255,255,255,0.07); opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease; transition-delay:calc(var(--i,0) * 90ms); } .i8-sysc.is-live .i8-sysc__rows li { opacity:1; transform:none; } .i8-sysc__dot { width:6px; height:6px; border-radius:50%; flex:none; background:var(--accent,#2E8A60); } .i8-sysc__rows li[data-state="hold"] .i8-sysc__dot { background:#C0982F; } .i8-sysc__rows li[data-state="alert"] .i8-sysc__dot { background:#B4453E; } .i8-sysc__tag { flex:none; width:74px; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); } .i8-sysc__rows li[data-state="alert"] .i8-sysc__tag { color:#D8756E; } .i8-sysc__text { font-family:Archivo,sans-serif; font-size:12.5px; line-height:1.45; color:rgba(255,255,255,0.86); } .i8-sysc__foot { margin:14px 0 0; padding-top:12px; border-top:1px solid rgba(255,255,255,0.07); font-family:Archivo,sans-serif; font-size:11.5px; line-height:1.5; color:rgba(255,255,255,0.45); } /* ===================================================================== Process steps (home #process) Six cards, each carrying a compact .i8-sysc console showing what that stage produces. Same illustrative-data caveat as the engagement blocks. ===================================================================== */ /* ---- process flow (home) ---- Two-column grid where the opening and closing steps span the full row and lay their copy beside the console, and the two build steps sit as a pair with the console under the copy. The rhythm (wide / pair / wide) is what stops four cards from reading as another uniform grid, and it lets the audit card carry the longest copy without squeezing its console. */ .i8-flow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } .i8-flow__step { display:flex; flex-direction:column; gap:24px; border:1px solid rgba(23,23,23,0.14); border-radius:18px; background:#FFFFFF; padding:28px 26px 26px; box-shadow:var(--i8-shadow); transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .i8-flow__step:hover { border-color:var(--accent-deep,#1C5B3E); box-shadow:var(--i8-shadow-hover); transform:translateY(-3px); } /* console border warms with the card so the two move as one object */ .i8-flow__step:hover .i8-sysc { border-color:color-mix(in oklab, var(--accent,#2E8A60) 55%, transparent); } /* Wide steps. min-width:0 on the console matters: without it the grid track refuses to shrink below the console's content width and the copy column collapses instead. */ .i8-flow__step--wide { grid-column:1 / -1; flex-direction:row; align-items:center; gap:44px; padding:34px 32px; } .i8-flow__step--wide .i8-flow__copy { flex:0 1 40%; } .i8-flow__step--wide .i8-sysc { flex:1 1 60%; min-width:0; } /* In the pair, one console carries a meter and the other a bar chart, so their natural heights differ. Letting the console grow and pinning its footnote to the bottom makes both panels start and end on the same line. */ .i8-flow__step > .i8-sysc { flex:1 1 auto; display:flex; flex-direction:column; } .i8-flow__step > .i8-sysc .i8-sysc__rows { margin-bottom:4px; } .i8-flow__step > .i8-sysc .i8-sysc__foot { margin-top:auto; } .i8-flow__copy { display:flex; flex-direction:column; align-items:flex-start; } .i8-flow__tag { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent-deep,#1C5B3E); border:1px solid color-mix(in oklab, var(--accent,#2E8A60) 40%, transparent); border-radius:999px; padding:5px 12px; } .i8-flow__title { margin:21px 0 0; font-family:Archivo,sans-serif; font-weight:500; font-size:clamp(21px,2vw,27px); line-height:1.14; letter-spacing:-0.015em; color:#171717; text-wrap:balance; } .i8-flow__body { margin:18px 0 0; font-size:15px; line-height:1.62; color:#55534D; text-wrap:pretty; } .i8-flow__cta { display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-family:Archivo,sans-serif; font-weight:600; font-size:14px; color:#171717; border:1px solid rgba(23,23,23,0.22); border-radius:999px; padding:10px 18px; transition:border-color .2s, background .2s; } .i8-flow__cta:hover { background:rgba(23,23,23,0.04); border-color:#171717; } .i8-flow__cta span { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent,#2E8A60); } /* Below the breakpoint every step becomes a single stacked column: a wide step laid out side by side leaves neither half enough width to read. */ @media (max-width:900px) { .i8-flow { grid-template-columns:1fr; } .i8-flow__step--wide { flex-direction:column; align-items:stretch; gap:24px; padding:28px 26px 26px; } .i8-flow__step--wide .i8-flow__copy, .i8-flow__step--wide .i8-sysc { flex:0 0 auto; } } @media (max-width:680px) { .i8-flow__step, .i8-flow__step--wide { padding:24px 20px 22px; } } /* no lift on touch, where :hover sticks after a tap */ @media (hover:none) { .i8-flow__step:hover { transform:none; } } .i8-proc-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .i8-proc { display:flex; flex-direction:column; border:1px solid rgba(23,23,23,0.14); border-radius:18px; background:#FFFFFF; padding:26px 24px 24px; box-shadow:var(--i8-shadow); transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease; } /* Dark-green outline on hover. --accent-deep is the accent taken down to a forest green so the outline reads as deliberate against the bone background rather than as the same mid-green used for links and numbers. */ .i8-proc:hover { border-color:var(--accent-deep,#1C5B3E); box-shadow:var(--i8-shadow-hover); transform:translateY(-3px); } /* the console border warms up with the card so the two move as one object */ .i8-proc:hover .i8-sysc { border-color:color-mix(in oklab, var(--accent,#2E8A60) 55%, transparent); } .i8-proc__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; } .i8-proc__n { font-family:Archivo,sans-serif; font-weight:700; font-size:14px; letter-spacing:0.04em; color:#B4AE9F; transition:color .3s ease; } .i8-proc:hover .i8-proc__n { color:var(--accent-deep,#1C5B3E); } .i8-proc__title { margin:0 0 13px; font-family:Archivo,sans-serif; font-weight:500; font-size:21px; text-transform:uppercase; letter-spacing:-0.01em; color:#171717; } /* min-height is three lines of body copy. Without it the console starts at a different height in each card and the row of panels reads as ragged. */ .i8-proc__body { margin:0 0 20px; min-height:70px; font-size:14.5px; line-height:1.6; color:#55534D; } /* The console fills whatever height is left, so panels in a row match top and bottom even though some carry a meter or bars and others do not. */ .i8-proc .i8-sysc { flex:1 1 auto; display:flex; flex-direction:column; } .i8-proc .i8-sysc__rows { margin-bottom:4px; } .i8-proc .i8-sysc__foot { margin-top:auto; } /* Compact console. Same panel, tuned for a third-width card: two stat columns instead of three, smaller readout, and a narrower row tag. */ .i8-sysc--compact { padding:14px 15px 15px; } .i8-sysc--compact .i8-sysc__name { font-size:12px; } .i8-sysc--compact .i8-sysc__chip { font-size:9px; padding:3px 8px; } .i8-sysc--compact .i8-sysc__channels { gap:5px; margin-top:12px; } .i8-sysc--compact .i8-sysc__channels li { font-size:9px; padding:3px 7px; } .i8-sysc--compact .i8-sysc__readout { margin-top:13px; } .i8-sysc--compact .i8-sysc__readout-value { font-size:30px; } .i8-sysc--compact .i8-sysc__stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:13px; padding-top:12px; } .i8-sysc--compact .i8-sysc__stats dd { font-size:14px; } .i8-sysc--compact .i8-sysc__bars { height:40px; margin-top:13px; } .i8-sysc--compact .i8-sysc__meter { margin-top:13px; } .i8-sysc--compact .i8-sysc__rows { margin-top:12px; } .i8-sysc--compact .i8-sysc__rows li { gap:8px; padding:7px 0; } .i8-sysc--compact .i8-sysc__tag { width:60px; font-size:8.5px; } .i8-sysc--compact .i8-sysc__text { font-size:11.5px; } .i8-sysc--compact .i8-sysc__foot { margin-top:12px; padding-top:10px; font-size:11px; } @media (max-width:1100px) { .i8-proc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:680px) { .i8-proc-grid { grid-template-columns:1fr; } .i8-proc { padding:24px 20px 22px; } .i8-proc__body { min-height:0; } } /* Below ~400px the two stat columns and the 60px row tag stop fitting inside a compact console, so both collapse. The compact rules sit outside a media query and would otherwise beat the base .i8-sysc 660px fallbacks. */ @media (max-width:400px) { .i8-sysc--compact .i8-sysc__stats { grid-template-columns:1fr; gap:9px; } .i8-sysc--compact .i8-sysc__rows li { flex-wrap:wrap; gap:4px 8px; } .i8-sysc--compact .i8-sysc__tag { width:auto; } .i8-sysc--compact .i8-sysc__text { flex:1 1 100%; } } /* no lift on touch, where :hover sticks after a tap */ @media (hover:none) { .i8-proc:hover { transform:none; } } @media (max-width:1040px) { } @media (max-width:660px) { .i8-blk { padding:24px 20px; } .i8-sysc__stats { grid-template-columns:1fr; gap:10px; } .i8-sysc__tag { width:64px; } } @media (prefers-reduced-motion: reduce) { /* the global rule flattens animation; make sure bars/meters/rows render in their finished state rather than frozen at zero */ .i8-sysc__bars i { transform:scaleY(1); transition:none; transition-delay:0s; } .i8-sysc__meter-fill { width:var(--h,100%); transition:none; } .i8-sysc__rows li { opacity:1; transform:none; transition:none; transition-delay:0s; } .i8-sysc__live { animation:none; } } /* ===================================================================== Interactive fleet demo (home + system page) ===================================================================== */ .i8-demo { border:1px solid rgba(255,255,255,0.09); border-radius:20px; overflow:hidden; background:#0C0D10; color:#D2D6DD; box-shadow:0 34px 64px -34px rgba(0,0,0,0.55); } .i8-demo-top { display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap; padding:15px 20px; border-bottom:1px solid rgba(255,255,255,0.07); } .i8-demo-ctx { font-family:'IBM Plex Mono',monospace; font-size:12px; color:rgba(255,255,255,0.72); } .i8-demo-ctx b { color:#fff; font-weight:500; } .i8-demo-ctx span { color:rgba(255,255,255,0.28); padding:0 2px; } .i8-demo-right { display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .i8-demo-status { display:inline-flex; align-items:center; gap:7px; font-family:Archivo,sans-serif; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.4); transition:color .4s; } .i8-demo-status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; } .i8-demo.is-on .i8-demo-status { color:#4FB488; } .i8-seg { display:inline-flex; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); border-radius:999px; padding:3px; } .i8-seg-btn { font-family:Archivo,sans-serif; font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.62); background:transparent; border:none; border-radius:999px; padding:7px 15px; cursor:pointer; transition:background .25s,color .25s; white-space:nowrap; } .i8-seg-btn.is-active { background:#FFFFFF; color:#171717; } .i8-seg-btn.is-active[data-demo="on"] { background:#2E8A60; color:#fff; } .i8-demo-body { display:grid; grid-template-columns:210px 1fr; } .i8-demo-rail { display:flex; flex-direction:column; gap:18px; padding:22px 20px; border-right:1px solid rgba(255,255,255,0.07); } .i8-metric-l { display:block; font-family:Archivo,sans-serif; font-size:10.5px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:6px; } .i8-metric-v { font-family:'IBM Plex Mono',monospace; font-size:23px; color:rgba(255,255,255,0.52); transition:color .4s; } .i8-demo.is-on .i8-metric-v.i8-good { color:#4FB488; } .i8-demo.is-on .i8-metric-v.i8-flag { color:#D8A63E; } .i8-demo-grid { display:grid; grid-template-columns:repeat(42,1fr); gap:3px; padding:22px 20px; align-content:start; } .i8-cell { aspect-ratio:1; border-radius:2px; background:#1b1c22; transition:background-color .6s ease; } .i8-demo.is-on .i8-cell.op { background:#2E8A60; } .i8-demo.is-on .i8-cell.warn { background:#C0982F; } .i8-demo.is-on .i8-cell.down { background:#B4453E; } .i8-demo-legend { display:flex; flex-wrap:wrap; gap:18px; padding:13px 20px; border-top:1px solid rgba(255,255,255,0.07); } .i8-demo-legend span { display:inline-flex; align-items:center; gap:7px; font-family:Archivo,sans-serif; font-size:11px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,0.42); } .i8-demo-legend i { width:9px; height:9px; border-radius:2px; } .i8-demo-legend .g { background:#2E8A60; } .i8-demo-legend .a { background:#C0982F; } .i8-demo-legend .r { background:#B4453E; } .i8-demo-legend .u { background:#2f3038; } @media(max-width:640px){ .i8-demo-body{ grid-template-columns:1fr; } .i8-demo-rail{ flex-direction:row; flex-wrap:wrap; gap:16px 26px; border-right:0; border-bottom:1px solid rgba(255,255,255,0.07); } .i8-demo-grid{ grid-template-columns:repeat(30,1fr); } } /* ===================================================================== Outcomes — animated ribbon-field card stack (home + services page) ===================================================================== */ .i8-oc-stage { position:relative; height:430px; width:100%; max-width:660px; margin:0 auto; overflow:hidden; } .i8-oc-card { position:absolute; left:50%; bottom:0; width:min(520px,88vw); height:296px; border:1px solid rgba(23,23,23,0.14); border-radius:16px; overflow:hidden; background:#0A0B0E; box-shadow:0 26px 50px -26px rgba(12,13,16,0.55); transform:translateX(-50%) translateY(70px) scale(0.87); opacity:0; z-index:1; transition:transform .62s cubic-bezier(.22,.61,.36,1), opacity .5s ease; will-change:transform,opacity; } .i8-oc-card.pos-0 { transform:translateX(-50%) translateY(0) scale(1); z-index:4; opacity:1; } .i8-oc-card.pos-1 { transform:translateX(-50%) translateY(-22px) scale(0.95); z-index:3; opacity:1; } .i8-oc-card.pos-2 { transform:translateX(-50%) translateY(-50px) scale(0.9); z-index:2; opacity:1; } .i8-oc-card.exiting { transform:translateX(-50%) translateY(380px) scale(1); z-index:5; opacity:0; } .i8-oc-card canvas { position:absolute; inset:0; width:100%; height:100%; display:block; } .i8-oc-card::after { content:""; position:absolute; inset:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:130px 130px; opacity:0.13; mix-blend-mode:overlay; } .i8-oc-scrim { position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(130% 100% at 50% 50%, rgba(0,0,0,0) 42%, rgba(6,8,10,0.34) 100%); } .i8-oc-word { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; font-size:clamp(42px,7vw,66px); line-height:1; letter-spacing:0; text-transform:none; color:#FFFFFF; text-shadow:0 2px 26px rgba(0,0,0,0.45); text-align:center; padding:0 24px; } .i8-oc-bar { max-width:660px; margin:20px auto 0; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; } .i8-oc-btn { display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:#171717; color:#FFFFFF; border:none; border-radius:999px; font-family:Archivo,sans-serif; font-weight:500; font-size:15px; letter-spacing:-0.01em; padding:12px 24px; transition:background .2s, transform .1s; } .i8-oc-btn:hover { background:#000; } .i8-oc-btn:active { transform:scale(0.98); } .i8-oc-btn:focus-visible { outline:2px solid #2E8A60; outline-offset:2px; } /* ===================================================================== Reactive dithered sphere (about page signature) ===================================================================== */ .i8-sphere { position:relative; width:min(420px,72vw); aspect-ratio:1; margin:0 auto; } .i8-sphere canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; } /* ===================================================================== Operational layers — 2x2 hairline grid (home) ===================================================================== */ /* Dividers sit on the inner cross rather than the outer frame, so the four layers read as quadrants of one diagram. Kept as hairlines throughout. */ .i8-lyr-grid { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid rgba(23,23,23,0.14); border-radius:20px; overflow:hidden; background:#FFFFFF; box-shadow:var(--i8-shadow); } .i8-lyr { padding:34px 36px 32px; border-right:1px solid rgba(23,23,23,0.12); border-bottom:1px solid rgba(23,23,23,0.12); transition:background-color .25s ease; } .i8-lyr:nth-child(2n) { border-right:0; } .i8-lyr:nth-last-child(-n+2) { border-bottom:0; } /* same stone as the off-white bands, so the hover tint belongs to the palette */ .i8-lyr:hover { background:#F6F5F1; } .i8-lyr-top { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:20px; } .i8-lyr-n { font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:clamp(26px,3vw,34px); line-height:1; letter-spacing:-0.01em; color:var(--accent,#2E8A60); } .i8-lyr-tag { font-family:Archivo,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:#A29F94; text-align:right; } .i8-lyr-stack { display:flex; gap:4px; margin-bottom:22px; } .i8-lyr-stack i { width:26px; height:4px; border-radius:2px; background:rgba(23,23,23,0.1); } .i8-lyr-stack i.on { background:var(--accent,#2E8A60); } .i8-lyr h3 { margin:0 0 18px; font-family:Archivo,sans-serif; font-weight:500; font-size:clamp(21px,2.2vw,26px); line-height:1.18; letter-spacing:-0.015em; color:#171717; text-wrap:balance; } .i8-lyr p { margin:0 0 16px; font-size:15px; line-height:1.62; color:#55534D; text-wrap:pretty; } .i8-lyr p:last-of-type { margin-bottom:26px; } .i8-lyr-inc-h { display:block; font-family:Archivo,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:#A29F94; margin-bottom:12px; } .i8-lyr-inc { display:flex; flex-wrap:wrap; gap:8px; } .i8-lyr-inc span { font-family:Archivo,sans-serif; font-weight:500; font-size:12.5px; line-height:1.2; color:#444239; border:1px solid rgba(23,23,23,0.2); border-radius:999px; padding:7px 14px; } @media (max-width:900px) { .i8-lyr-grid { grid-template-columns:1fr; } .i8-lyr { border-right:0; padding:30px 26px 28px; } .i8-lyr:nth-last-child(-n+2) { border-bottom:1px solid rgba(23,23,23,0.12); } .i8-lyr:last-child { border-bottom:0; } } /* ---- accessibility ---- */ :focus-visible { outline:2px solid #2E8A60; outline-offset:3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } }