/* * IGHub theme styles. Mobile first. Flat colours only (no gradients anywhere). * Palette sampled from the IGHub logo: navy #27286E, green #89BE2B, orange #FC561B, connector red #EE300F. */ @font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Logo colours */ --ig-navy: #27286E; --ig-green: #89BE2B; --ig-orange: #FC561B; --ig-red: #EE300F; /* Derived tones */ --ig-ink: #15163F; --ig-navy-2: #3B3C8C; --ig-navy-3: #4B4C9A; --ig-lilac: #8C8DCC; --ig-mist: #E9E9F4; --ig-green-deep: #4F7A0C; --ig-green-soft: #E7F2D3; --ig-orange-soft: #FFE3D6; --ig-red-soft: #FDE0DA; --ig-paper: #F5F6F8; --ig-white: #FFFFFF; --ig-line: #E2E0EA; --ig-text: #1B1C45; --ig-muted: #575978; --ig-display: "Outfit", "Inter", system-ui, sans-serif; --ig-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --ig-max: 1240px; --ig-gutter: clamp(20px, 4vw, 40px); --ig-r-sm: 12px; --ig-r: 20px; --ig-r-lg: 28px; --ig-r-xl: 36px; --ig-ease: cubic-bezier(.2, .7, .2, 1); --ig-shadow: 0 1px 2px rgba(21, 22, 63, .06), 0 8px 24px rgba(21, 22, 63, .06); --ig-shadow-lg: 0 2px 4px rgba(21, 22, 63, .06), 0 24px 48px rgba(21, 22, 63, .12); --ig-header-h: 64px; --ig-section: clamp(72px, 9vw, 128px); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ig-header-h) + 32px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--ig-body); font-size: 16px; line-height: 1.6; color: var(--ig-text); background: var(--ig-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; font-family: var(--ig-display); color: var(--ig-navy); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } figure, blockquote { margin: 0; } address { font-style: normal; } :focus-visible { outline: 3px solid var(--ig-orange); outline-offset: 3px; border-radius: 6px; } .ig-main:focus { outline: none; } .ig-icon { flex: none; } .ig-skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; background: var(--ig-navy); color: #fff; border-radius: 999px; font-weight: 600; text-decoration: none; } .ig-skip:focus { top: 16px; } .ig-container { width: 100%; max-width: calc(var(--ig-max) + var(--ig-gutter) * 2); margin-inline: auto; padding-inline: var(--ig-gutter); } .ig-section { padding-block: var(--ig-section); } /* Type */ .ig-display { font-size: clamp(44px, 6.4vw, 84px); font-weight: 800; line-height: .98; letter-spacing: -.035em; } .ig-h2 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 750; letter-spacing: -.03em; line-height: 1.04; text-wrap: balance; } .ig-h3 { font-size: clamp(21px, 1.9vw, 24px); font-weight: 700; line-height: 1.15; } .ig-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--ig-muted); } .ig-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ig-navy); } .ig-eyebrow__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ig-orange); box-shadow: 14px 0 0 var(--ig-green); margin-right: 14px; } .ig-eyebrow--light { color: #fff; } .ig-mark { text-decoration: underline; text-decoration-color: var(--ig-green); text-decoration-thickness: .14em; text-underline-offset: .12em; text-decoration-skip-ink: none; } .ig-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); } .ig-head .ig-lead { margin-top: 18px; } .ig-head--split { max-width: none; display: grid; gap: 20px; align-items: end; } .ig-head--split .ig-lead { margin-top: 0; max-width: 520px; } @media (min-width: 900px) { .ig-head--split { grid-template-columns: 1.6fr 1fr; gap: 48px; } .ig-head--split > :last-child { justify-self: end; } } /* Buttons */ .ig-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent; font: 600 16px/1.2 var(--ig-body); text-decoration: none; white-space: nowrap; transition: transform .2s var(--ig-ease), background-color .2s, color .2s, border-color .2s; } .ig-btn:hover { transform: translateY(-2px); } .ig-btn .ig-icon { transition: transform .2s var(--ig-ease); } .ig-btn:hover .ig-icon { transform: translateX(3px); } .ig-btn--navy { background: var(--ig-navy); color: #fff; } .ig-btn--navy:hover { background: var(--ig-ink); } .ig-btn--orange { background: var(--ig-orange); color: var(--ig-ink); } .ig-btn--orange:hover { background: #FF6A35; } .ig-btn--green { background: var(--ig-green); color: var(--ig-ink); } .ig-btn--green:hover { background: #97CB3A; } .ig-btn--light { background: #fff; color: var(--ig-navy); } .ig-btn--light:hover { background: var(--ig-mist); } .ig-btn--outline { border-color: var(--ig-navy); color: var(--ig-navy); background: transparent; } .ig-btn--outline:hover { background: var(--ig-navy); color: #fff; } .ig-btn--ghost { color: var(--ig-navy); background: var(--ig-mist); } .ig-btn--ghost:hover { background: #DCDCEE; } /* Tones for icon tiles */ .ig-tone--green { background: var(--ig-green); color: var(--ig-ink); } .ig-tone--orange { background: var(--ig-orange); color: #fff; } .ig-tone--navy { background: var(--ig-navy); color: #fff; } .ig-tone--red { background: var(--ig-red); color: #fff; } .ig-tone--ink { background: var(--ig-ink); color: var(--ig-green); } /* Horizontal scrollers (mobile) */ .ig-scroll-x { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--ig-gutter) * -1); padding-inline: var(--ig-gutter); scroll-padding-inline: var(--ig-gutter); overscroll-behavior-x: contain; } .ig-scroll-x::-webkit-scrollbar { display: none; } .ig-scroll-x > * { scroll-snap-align: start; flex: none; } /* Header */ .ig-header { position: fixed; inset: 12px 0 auto; z-index: 50; padding-inline: 12px; pointer-events: none; } .ig-nav { pointer-events: auto; position: relative; max-width: calc(var(--ig-max) + 40px); margin-inline: auto; height: var(--ig-header-h); display: flex; align-items: center; gap: 16px; padding: 0 10px 0 22px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border: 1px solid rgba(39, 40, 110, .10); border-radius: 999px; box-shadow: var(--ig-shadow); transition: box-shadow .3s, background-color .3s; } .is-scrolled .ig-nav { background: rgba(255, 255, 255, .95); box-shadow: var(--ig-shadow-lg); } .ig-brand { display: block; flex: none; } .ig-brand img { height: 42px; width: auto; } .ig-nav__menu { display: none; } .ig-nav__end { margin-left: auto; display: flex; align-items: center; gap: 8px; } .ig-nav__end .ig-btn { display: none; min-height: 44px; padding: 10px 18px; font-size: 15px; } .ig-nav__toggle { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ig-navy); color: #fff; cursor: pointer; } .ig-nav__toggle-close { display: none; } .ig-nav__toggle[aria-expanded="true"] .ig-nav__toggle-open { display: none; } .ig-nav__toggle[aria-expanded="true"] .ig-nav__toggle-close { display: block; } .ig-nav__list a { text-decoration: none; font-weight: 550; color: var(--ig-navy); } /* Mobile menu panel */ .is-menu-open .ig-nav__menu { display: block; position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: #fff; border-radius: var(--ig-r-lg); box-shadow: var(--ig-shadow-lg); padding: 14px; border: 1px solid var(--ig-line); } .is-menu-open .ig-nav__list a { display: block; padding: 14px 16px; border-radius: 14px; font-size: 18px; } .is-menu-open .ig-nav__list a:hover { background: var(--ig-mist); } .ig-nav__menu-cta { padding: 10px 6px 4px; } .ig-nav__menu-cta .ig-btn { width: 100%; } @media (min-width: 560px) { .ig-nav__end .ig-btn { display: inline-flex; } } @media (min-width: 1080px) { .ig-nav { padding-left: 26px; } .ig-nav__toggle, .ig-nav__menu-cta { display: none; } .ig-nav__menu, .is-menu-open .ig-nav__menu { display: block; position: static; background: none; box-shadow: none; padding: 0; border: 0; margin-inline: auto; } .ig-nav__list { display: flex; gap: 2px; } .ig-nav__list a, .is-menu-open .ig-nav__list a { display: block; padding: 10px 14px; border-radius: 999px; font-size: 15px; transition: background-color .2s; } .ig-nav__list a:hover { background: var(--ig-mist); } .ig-nav__end { margin-left: 0; } } /* Hero */ .ig-hero { padding: calc(var(--ig-header-h) + 56px) 0 clamp(40px, 5vw, 64px); } .ig-hero__grid { display: grid; gap: 56px; align-items: center; } .ig-hero__sig { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; margin-bottom: 26px; border-radius: 999px; background: #fff; border: 1px solid var(--ig-line); font-weight: 650; font-size: 15px; color: var(--ig-navy); } .ig-hero__sig .ig-icon { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--ig-green); color: var(--ig-ink); } .ig-hero__lead { margin-top: 26px; max-width: 560px; } .ig-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .ig-hero__art { position: relative; margin: 10px 8px 26px 18px; } .ig-hero__photo { border-radius: var(--ig-r-xl); overflow: hidden; aspect-ratio: 4 / 3.6; background: var(--ig-mist); } .ig-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; } .ig-hero__network { position: absolute; width: clamp(110px, 28%, 190px); top: -22px; left: -26px; } .ig-hero__network svg { width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(21, 22, 63, .18)); } .ig-hero__badge { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; background: #fff; border-radius: 18px; box-shadow: var(--ig-shadow-lg); font-size: 14px; color: var(--ig-muted); line-height: 1.3; } .ig-hero__badge strong { display: block; font: 750 20px/1.1 var(--ig-display); color: var(--ig-navy); letter-spacing: -.01em; } .ig-hero__badge-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; } .ig-hero__badge--talent { left: -14px; bottom: -22px; } .ig-hero__badge--hubs { right: -10px; top: 46%; display: none; } .ig-chips { display: flex; gap: 10px; margin-top: clamp(36px, 5vw, 64px); } .ig-hero__chips { overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--ig-gutter) * -1); padding-inline: var(--ig-gutter); scroll-snap-type: x mandatory; } .ig-hero__chips::-webkit-scrollbar { display: none; } .ig-hero__chips li { flex: none; scroll-snap-align: start; } .ig-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--ig-line); text-decoration: none; font-weight: 600; color: var(--ig-navy); white-space: nowrap; transition: border-color .2s, transform .2s var(--ig-ease); } .ig-chip:hover { border-color: var(--ig-navy); transform: translateY(-2px); } .ig-chip__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; } @media (min-width: 560px) { .ig-hero__badge--hubs { display: flex; } } @media (min-width: 980px) { .ig-hero { padding-top: calc(var(--ig-header-h) + 80px); } .ig-hero__grid { grid-template-columns: 1.2fr .8fr; gap: 56px; } .ig-hero__art { margin: 0; } .ig-hero__photo { aspect-ratio: 4 / 4.4; } .ig-hero__badge--talent { left: -40px; bottom: 48px; } .ig-hero__badge--hubs { right: -28px; top: auto; bottom: -26px; } .ig-hero__chips { justify-content: flex-start; overflow: visible; margin-inline: 0; padding-inline: 0; flex-wrap: wrap; } } /* Partners */ .ig-partners { padding: clamp(36px, 5vw, 56px) 0; background: #fff; border-block: 1px solid var(--ig-line); } .ig-partners__title { font: 600 14px/1.4 var(--ig-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ig-muted); margin-bottom: 22px; } .ig-partner { width: 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px 14px; border-radius: var(--ig-r); background: var(--ig-paper); } .ig-partner img { height: 44px; width: auto; max-width: 130px; object-fit: contain; } .ig-partner__name { font-size: 12px; line-height: 1.3; color: var(--ig-muted); text-align: center; } @media (min-width: 900px) { .ig-partners .ig-container { display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: center; } .ig-partners__title { margin: 0; } .ig-partners__wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; overflow: visible; margin: 0; padding: 0; } .ig-partner { width: auto; } } @media (min-width: 1200px) { .ig-partners__wall { grid-template-columns: repeat(8, 1fr); } .ig-partner { padding-inline: 8px; } .ig-partner img { max-width: 100%; height: 40px; } } /* Pillars */ .ig-pillars__grid { display: grid; gap: 16px; } .ig-pillar { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 22px; background: #fff; border-radius: var(--ig-r-lg); border: 1px solid var(--ig-line); transition: transform .3s var(--ig-ease), box-shadow .3s, border-color .3s; } .ig-pillar::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 5px; border-radius: 0 0 6px 6px; background: var(--tone); } .ig-pillar:hover { transform: translateY(-4px); box-shadow: var(--ig-shadow-lg); border-color: transparent; } .ig-pillar--green { --tone: var(--ig-green); } .ig-pillar--orange { --tone: var(--ig-orange); } .ig-pillar--navy { --tone: var(--ig-navy); } .ig-pillar--red { --tone: var(--ig-red); } .ig-pillar--ink { --tone: var(--ig-ink); } .ig-pillar__top { display: flex; align-items: center; gap: 14px; } .ig-pillar__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; } .ig-pillar__label { font: 700 13px/1 var(--ig-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ig-navy); } .ig-pillar__desc { color: var(--ig-muted); font-size: 15px; line-height: 1.55; } .ig-pillar__list { display: grid; gap: 2px; padding-top: 14px; border-top: 1px dashed var(--ig-line); } .ig-pillar__list li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 14.5px; line-height: 1.4; font-weight: 500; color: var(--ig-text); } .ig-pillar__list .ig-icon { margin-top: 1px; color: var(--ig-navy-2); } .ig-pillar__cta { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ig-navy); text-decoration: none; } .ig-pillar__cta span { text-decoration: underline; text-decoration-color: var(--tone); text-decoration-thickness: 2px; text-underline-offset: 5px; } .ig-pillar__cta .ig-icon { transition: transform .2s var(--ig-ease); } .ig-pillar__cta:hover .ig-icon { transform: translateX(4px); } .ig-pillar__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } @media (min-width: 720px) { .ig-pillars__grid { grid-template-columns: repeat(6, 1fr); } .ig-pillar { grid-column: span 2; } .ig-pillar:nth-child(4), .ig-pillar:nth-child(5) { grid-column: span 3; } } @media (min-width: 1200px) { .ig-pillars__grid { grid-template-columns: repeat(5, 1fr); gap: 14px; } .ig-pillar, .ig-pillar:nth-child(4), .ig-pillar:nth-child(5) { grid-column: auto; padding: 24px 20px 20px; } .ig-pillar::before { left: 20px; right: 20px; } .ig-pillar .ig-h3 { font-size: 22px; } } /* Stats */ .ig-stats { background: var(--ig-navy); color: #fff; padding-block: clamp(64px, 8vw, 104px); } .ig-stats .ig-h2 { color: #fff; } .ig-stats__head { display: grid; gap: 14px; margin-bottom: 44px; } .ig-stats__head p { color: #C9C9EA; font-size: 18px; max-width: 460px; } .ig-stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ig-stat { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border-radius: var(--ig-r); background: var(--ig-navy-2); } .ig-stat__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ig-green); color: var(--ig-ink); margin-bottom: 10px; } .ig-stat:nth-child(2) .ig-stat__icon { background: var(--ig-orange); color: #fff; } .ig-stat:nth-child(3) .ig-stat__icon { background: #fff; color: var(--ig-navy); } .ig-stat:nth-child(4) .ig-stat__icon { background: var(--ig-red); color: #fff; } .ig-stat__value { font: 800 clamp(40px, 5.4vw, 68px)/1 var(--ig-display); letter-spacing: -.03em; } .ig-stat__label { color: #D6D6F0; font-size: 15px; line-height: 1.35; } .ig-stat--since .ig-stat__label { order: -1; margin-bottom: 4px; } .ig-stat--since .ig-stat__icon { order: -2; } @media (min-width: 900px) { .ig-stats__head { grid-template-columns: 1fr 1fr; align-items: end; } .ig-stats__head p { justify-self: end; } .ig-stats__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } .ig-stat { padding: 28px 26px; } } /* Business */ .ig-biz { background: #fff; } .ig-biz__grid { display: grid; gap: 48px; align-items: center; } .ig-biz__illo svg { width: 100%; height: auto; } .ig-biz__copy .ig-lead { margin-top: 20px; } .ig-ticks { display: grid; gap: 14px; margin-top: 30px; } .ig-ticks li { display: flex; gap: 14px; align-items: flex-start; color: var(--ig-muted); } .ig-ticks strong { display: block; color: var(--ig-navy); font-weight: 650; } .ig-ticks .ig-icon { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--ig-mist); color: var(--ig-navy); } .ig-biz__proof { display: grid; gap: 12px; margin-top: 30px; } .ig-proof { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--ig-r); background: var(--ig-paper); border: 1px solid var(--ig-line); font-size: 15px; color: var(--ig-muted); line-height: 1.4; } .ig-proof strong { display: block; font: 750 18px/1.2 var(--ig-display); color: var(--ig-navy); } .ig-proof__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--ig-orange); color: #fff; } .ig-proof + .ig-proof .ig-proof__icon { background: var(--ig-green); color: var(--ig-ink); } .ig-biz__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } @media (min-width: 640px) { .ig-biz__proof { grid-template-columns: 1fr 1fr; } } @media (min-width: 980px) { .ig-biz__grid { grid-template-columns: 1fr 1fr; gap: 72px; } } /* Studio */ .ig-products { display: grid; gap: 16px; } .ig-product { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--ig-r-lg); background: #fff; border: 1px solid var(--ig-line); transition: transform .3s var(--ig-ease), box-shadow .3s; } .ig-product:hover { transform: translateY(-4px); box-shadow: var(--ig-shadow-lg); } .ig-product__logo { display: flex; align-items: center; height: 96px; padding: 0 20px; margin-bottom: 8px; border-radius: var(--ig-r); background: var(--ig-paper); } .ig-product__logo img { max-height: 44px; width: auto; max-width: 100%; object-fit: contain; } .ig-product__kind { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ig-muted); } .ig-product__kind .ig-icon { color: var(--ig-orange); } .ig-product__name { font-size: 24px; } .ig-product__desc { color: var(--ig-muted); font-size: 15.5px; } .ig-product__link { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ig-navy); text-decoration: none; } .ig-product__link:hover span { text-decoration: underline; text-underline-offset: 4px; } .ig-product__link--soon { color: var(--ig-muted); } .ig-build { display: grid; gap: 24px; align-items: center; margin-top: 16px; padding: 28px; border-radius: var(--ig-r-lg); background: var(--ig-ink); color: #D6D6F0; } .ig-build .ig-h3 { color: #fff; margin-bottom: 8px; font-size: clamp(22px, 2.2vw, 28px); } .ig-build__illo { max-width: 240px; } .ig-build .ig-btn { justify-self: start; } @media (min-width: 640px) { .ig-products { grid-template-columns: 1fr 1fr; } } @media (min-width: 1080px) { .ig-products { grid-template-columns: repeat(4, 1fr); } .ig-build { grid-template-columns: 220px 1fr auto; gap: 40px; padding: 28px 40px 28px 28px; } .ig-build .ig-btn { justify-self: end; } } /* Timeline */ .ig-timeline { background: #fff; } .ig-tl { counter-reset: tl; } .ig-tl__item { position: relative; width: 260px; padding: 24px 22px; border-radius: var(--ig-r); background: var(--ig-paper); border: 1px solid var(--ig-line); } .ig-tl__year { display: block; font: 800 40px/1 var(--ig-display); color: var(--ig-navy); letter-spacing: -.03em; margin-bottom: 16px; } .ig-tl__icon { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ig-green); color: var(--ig-ink); } .ig-tl__item:nth-child(4n+2) .ig-tl__icon { background: var(--ig-orange); color: #fff; } .ig-tl__item:nth-child(4n+3) .ig-tl__icon { background: var(--ig-navy); color: #fff; } .ig-tl__item:nth-child(4n+4) .ig-tl__icon { background: var(--ig-red); color: #fff; } .ig-tl__title { font-size: 18px; line-height: 1.25; margin-bottom: 8px; } .ig-tl__desc { font-size: 14.5px; color: var(--ig-muted); line-height: 1.5; } .ig-tl__item:last-child { background: var(--ig-navy); border-color: var(--ig-navy); } .ig-tl__item:last-child .ig-tl__year, .ig-tl__item:last-child .ig-tl__title { color: #fff; } .ig-tl__item:last-child .ig-tl__desc { color: #D6D6F0; } .ig-tl__item:last-child .ig-tl__icon { background: var(--ig-green); color: var(--ig-ink); } @media (min-width: 1080px) { .ig-tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; overflow: visible; margin: 0; padding: 0; } .ig-tl__item { width: auto; } } /* Events */ .ig-events__grid { display: grid; gap: 48px; } .ig-events__feature { position: relative; } .ig-events__photo { border-radius: var(--ig-r-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--ig-mist); } .ig-events__photo img { width: 100%; height: 100%; object-fit: cover; } .ig-events__card { position: relative; margin: -72px 14px 0; padding: 26px 24px; background: #fff; border-radius: var(--ig-r-lg); box-shadow: var(--ig-shadow-lg); display: grid; gap: 12px; } .ig-events__card p { color: var(--ig-muted); font-size: 15.5px; } .ig-events__card .ig-btn { justify-self: start; margin-top: 6px; white-space: normal; text-align: left; } .ig-events__tag { display: inline-flex !important; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--ig-orange-soft); color: var(--ig-navy) !important; font-size: 13px !important; font-weight: 650; } .ig-events__tag .ig-icon { color: var(--ig-red); } .ig-events__list { display: grid; gap: 4px; margin-top: 28px; } .ig-event { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--ig-line); } .ig-event:last-child { border-bottom: 0; } .ig-event__icon { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: #fff; border: 1px solid var(--ig-line); color: var(--ig-navy); } .ig-event__title { font-size: 19px; } .ig-event p { color: var(--ig-muted); font-size: 15px; margin-top: 4px; } .ig-event__when { grid-column: 2; justify-self: start; font-size: 12.5px; font-weight: 650; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; background: var(--ig-green-soft); color: var(--ig-green-deep); } @media (min-width: 640px) { .ig-event { grid-template-columns: auto 1fr auto; } .ig-event__icon { grid-row: auto; } .ig-event__when { grid-column: auto; align-self: center; } } @media (min-width: 1000px) { .ig-events__grid { grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: center; } .ig-events__card { position: absolute; left: 24px; right: 24px; bottom: 24px; margin: 0; max-width: 470px; } .ig-events__photo { aspect-ratio: 4 / 4.2; } } /* Testimonials */ .ig-voices { background: #fff; } .ig-voices__grid { display: grid; gap: 16px; } .ig-quote { display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: var(--ig-r-lg); background: var(--ig-paper); border: 1px solid var(--ig-line); } .ig-quote__mark { color: var(--ig-orange); } .ig-quote blockquote p { font-size: 17px; line-height: 1.6; color: var(--ig-text); } .ig-quote--lead { background: var(--ig-green-soft); border-color: transparent; } .ig-quote--lead blockquote p { font: 600 clamp(21px, 2.3vw, 30px)/1.35 var(--ig-display); letter-spacing: -.015em; color: var(--ig-navy); } .ig-quote--lead .ig-quote__mark { color: var(--ig-green-deep); } .ig-quote__by { margin-top: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ig-muted); line-height: 1.35; } .ig-quote__by strong { display: block; color: var(--ig-navy); font-size: 16px; } .ig-avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; font: 700 16px/1 var(--ig-display); } @media (min-width: 900px) { .ig-voices__grid { grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; } .ig-quote--lead { grid-row: span 2; padding: 40px; } } /* Locations */ .ig-locations__grid { display: grid; gap: 20px; } .ig-loc { overflow: hidden; border-radius: var(--ig-r-xl); background: #fff; border: 1px solid var(--ig-line); } .ig-loc__illo svg { width: 100%; height: auto; } .ig-loc__body { display: grid; gap: 16px; padding: 26px 24px 28px; } .ig-loc__desc { color: var(--ig-muted); } .ig-loc__tags { gap: 8px; } .ig-loc__tags li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--ig-mist); font-size: 14px; font-weight: 600; color: var(--ig-navy); white-space: nowrap; } .ig-loc--umuahia .ig-loc__tags li { background: var(--ig-orange-soft); } .ig-loc__addr { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--ig-r); background: var(--ig-paper); color: var(--ig-muted); font-size: 15px; line-height: 1.45; } .ig-loc__addr strong { display: block; color: var(--ig-navy); } .ig-loc__addr .ig-icon { color: var(--ig-orange); margin-top: 1px; } .ig-loc__ctas { display: flex; flex-wrap: wrap; gap: 10px; } @media (min-width: 900px) { .ig-locations__grid { grid-template-columns: 1fr 1fr; gap: 24px; } .ig-loc__body { padding: 30px 32px 34px; } .ig-loc__tags { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } } /* FAQ */ .ig-faq { background: #fff; } .ig-faq__grid { display: grid; gap: 8px; } .ig-faq__list { display: grid; gap: 12px; } .ig-faq__item { border-radius: var(--ig-r); background: var(--ig-paper); border: 1px solid var(--ig-line); } .ig-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; } .ig-faq__item summary::-webkit-details-marker { display: none; } .ig-faq__item h3 { font-size: 19px; } .ig-faq__item p { padding: 0 22px 22px; color: var(--ig-muted); max-width: 720px; } .ig-faq__plus, .ig-faq__minus { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--ig-navy); } .ig-faq__minus { display: none; background: var(--ig-navy); color: #fff; } .ig-faq__item[open] .ig-faq__plus { display: none; } .ig-faq__item[open] .ig-faq__minus { display: grid; } @media (min-width: 980px) { .ig-faq__grid { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } .ig-faq .ig-head { position: sticky; top: calc(var(--ig-header-h) + 48px); } } /* CTA */ .ig-cta { padding-block: var(--ig-section); } .ig-cta__panel { position: relative; overflow: hidden; display: grid; gap: 24px; padding: clamp(32px, 6vw, 72px); border-radius: var(--ig-r-xl); background: var(--ig-navy); color: #D6D6F0; } .ig-cta__title { color: #fff; font-size: clamp(38px, 5vw, 64px); max-width: 760px; text-wrap: balance; } .ig-cta .ig-lead { color: #D6D6F0; margin-top: 22px; max-width: 600px; } .ig-cta__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .ig-cta__illo { width: min(70%, 300px); justify-self: end; order: -1; margin: -10px -10px 0 0; } @media (min-width: 980px) { .ig-cta__panel { grid-template-columns: 1fr 360px; align-items: center; } .ig-cta__illo { order: 1; width: 100%; margin: 0; } } /* Footer */ .ig-footer { position: relative; overflow: hidden; background: var(--ig-ink); color: #B9BADB; padding-top: clamp(64px, 8vw, 96px); font-size: 15px; } .ig-footer a { color: #E4E4F5; text-decoration: none; } .ig-footer a:hover { color: var(--ig-green); } .ig-footer__top { display: grid; gap: 44px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .12); } .ig-brand--footer img { height: 52px; } .ig-footer__tag { margin-top: 18px; max-width: 340px; line-height: 1.6; } .ig-social { display: flex; gap: 8px; margin-top: 22px; } .ig-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .08); transition: background-color .2s, color .2s; } .ig-social a:hover { background: var(--ig-green); color: var(--ig-ink); } .ig-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; } .ig-footer__h { font: 650 13px/1.2 var(--ig-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ig-green); margin-bottom: 16px; } .ig-footer__col ul { display: grid; gap: 10px; } .ig-footer__visit li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; } .ig-footer__visit .ig-icon { color: var(--ig-orange); margin-top: 2px; } .ig-footer__visit strong { color: #fff; font-weight: 600; } .ig-footer__col--wide { grid-column: 1 / -1; } .ig-footer__bottom { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 0; text-align: center; font-size: 14px; } .ig-footer__legal { display: flex; gap: 20px; } .ig-footer__sig { font-weight: 600; color: var(--ig-green); } .ig-footer__giant { margin: 0; padding: 0 var(--ig-gutter); font: 800 clamp(96px, 23vw, 340px)/.78 var(--ig-display); letter-spacing: -.05em; color: #1E1F52; text-align: center; user-select: none; transform: translateY(14%); } @media (max-width: 559px) { .ig-footer__visit { grid-column: 1 / -1; } .ig-footer__cols > :last-child { grid-column: 1 / -1; } } @media (min-width: 900px) { .ig-footer__top { grid-template-columns: 1fr 2.2fr; gap: 56px; } .ig-footer__cols { grid-template-columns: repeat(3, 1fr) 1.5fr; } .ig-footer__bottom { flex-direction: row; justify-content: flex-start; text-align: left; gap: 28px; } .ig-footer__sig { margin-left: auto; } } /* Generic pages */ .ig-page { padding-top: calc(var(--ig-header-h) + 96px); } .ig-prose { max-width: 780px; } .ig-prose .ig-lead { margin: 18px 0 28px; } .ig-entry + .ig-entry { margin-top: 32px; } .ig-entry__content { margin-top: 24px; font-size: 17px; } .ig-entry__content p + p { margin-top: 1em; } /* Reveal (only when JS has marked the page; content is visible otherwise) */ .ig-js .ig-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ig-ease), transform .7s var(--ig-ease); } .ig-js .ig-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ig-js .ig-reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* Credit line */ .ig-footer__credit { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; opacity: .8; } .ig-footer__credit a { color: inherit; font-weight: 600; } .ig-footer__heart { display: inline-flex; color: var(--ig-red); } /* ========================================================================== v1.2 below-hero system (Framer lock): open index, image-led evidence, paired hubs, compact list, closing. White / #F5F6F8 only. No shadows. ========================================================================== */ :root { --ih-max: 1200px; --ih-body: #343746; --ih-sub: #626775; --ih-line: #E3E6EC; --ih-grey: #F5F6F8; } .ih-sec { padding-block: 64px; background: #fff; } .ih-sec--grey { background: var(--ih-grey); } @media (min-width: 768px) { .ih-sec { padding-block: 80px; } } @media (min-width: 1100px) { .ih-sec { padding-block: 112px; } } .ih-sec .ig-container, .ih-trust .ig-container { max-width: calc(var(--ih-max) + var(--ig-gutter) * 2); } .ih-label { margin: 0 0 14px; font: 600 13px/1.2 var(--ig-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ih-sub); display: flex; align-items: center; gap: 10px; } .ih-label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--ig-green); flex: none; } .ih-h2 { margin: 0; font: 600 clamp(30px, 3.6vw, 48px)/1.1 var(--ig-display); letter-spacing: -.02em; color: var(--ig-navy); max-width: 20ch; text-wrap: balance; } .ih-h3 { margin: 0; font: 600 24px/1.16 var(--ig-display); letter-spacing: -.02em; color: var(--ig-navy); } .ih-lead { margin: 22px 0 0; font-size: 18px; line-height: 1.6; color: var(--ih-body); max-width: 52ch; } .ih-meta { margin: 0; font: 500 13px/1.3 var(--ig-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ih-sub); } .ih-head { margin-bottom: 48px; } .ih-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--ig-navy); text-decoration: none; border-bottom: 2px solid var(--ig-green); padding-bottom: 2px; transition: gap .25s var(--ig-ease); } .ih-link:hover { gap: 12px; } .ih-link svg, .ih-route__cta svg, .ih-now__cta svg { flex: none; } /* Trust strip */ .ih-trust { background: #fff; padding-block: 36px; border-block: 1px solid var(--ih-line); } .ih-trust__in { display: grid; gap: 20px; } .ih-trust .ih-label { margin: 0; } .ih-trust__marks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; } .ih-trust__marks img { height: 28px; width: auto; max-width: 120px; object-fit: contain; opacity: .7; filter: grayscale(1); transition: opacity .2s; } .ih-trust__marks img:hover { opacity: 1; } @media (min-width: 1100px) { .ih-trust__in { grid-template-columns: 200px 1fr; align-items: center; } .ih-trust__marks { justify-content: space-between; } } /* Ecosystem index */ .ih-eco__grid { display: grid; gap: 40px; } @media (min-width: 1100px) { .ih-eco__grid { grid-template-columns: 5fr 7fr; gap: 64px; } .ih-eco__intro { position: sticky; top: calc(var(--ig-header-h) + 40px); align-self: start; } } .ih-routes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ih-line); } .ih-route { border-bottom: 1px solid var(--ih-line); } .ih-route__link { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; padding: 28px 0; color: inherit; text-decoration: none; } .ih-route__n { font: 500 14px/1 var(--ig-body); color: var(--ih-sub); padding-top: 6px; } .ih-route__icon { display: none; color: var(--ig-navy); } .ih-route__body { display: grid; gap: 8px; } .ih-route__title { font: 600 26px/1.15 var(--ig-display); letter-spacing: -.02em; color: var(--ig-navy); } .ih-route__desc { font-size: 16px; line-height: 1.6; color: var(--ih-body); max-width: 56ch; } .ih-route__cta { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ig-navy); margin-top: 4px; transition: gap .25s var(--ig-ease); } .ih-route__link:hover .ih-route__cta, .ih-route__link:focus-visible .ih-route__cta { gap: 12px; } .ih-route__link:hover .ih-route__title { text-decoration: underline; text-decoration-color: var(--ig-green); text-decoration-thickness: 2px; text-underline-offset: 6px; } @media (min-width: 768px) { .ih-route__link { grid-template-columns: 40px 32px 1fr auto; align-items: start; gap: 0 20px; padding: 32px 0; } .ih-route__icon { display: block; padding-top: 2px; } .ih-route__cta { grid-column: 4; margin-top: 4px; white-space: nowrap; } } /* Impact */ .ih-lead-media { margin: 0 0 64px; display: grid; gap: 32px; } .ih-lead-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; } .ih-lead-media figcaption p:not(.ih-label) { margin: 20px 0 24px; font-size: 18px; line-height: 1.6; color: var(--ih-body); max-width: 50ch; } @media (min-width: 1100px) { .ih-lead-media { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; } } .ih-stories { display: grid; gap: 48px; padding-top: 48px; border-top: 1px solid var(--ih-line); } @media (min-width: 768px) { .ih-stories { grid-template-columns: repeat(3, 1fr); gap: 32px; } } .ih-story { display: grid; gap: 12px; align-content: start; } .ih-story__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; margin-bottom: 8px; } .ih-story__result { margin: 4px 0 0; font: 500 18px/1.4 var(--ig-display); color: var(--ih-body); } .ih-story__result::before { content: ""; display: block; width: 24px; height: 2px; background: var(--ig-orange); margin-bottom: 12px; } .ih-story__src { margin: 0; font-size: 14px; color: var(--ih-sub); } /* Hubs */ .ih-hubs__grid { display: grid; gap: 56px; } @media (min-width: 768px) { .ih-hubs__grid { grid-template-columns: 1fr 1fr; gap: 40px; } } .ih-hub { display: grid; gap: 10px; align-content: start; } .ih-hub__media { margin-bottom: 14px; } .ih-hub__media img, .ih-ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; } .ih-ph { display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: var(--ih-grey); border: 1px dashed #C9CDD6; color: var(--ih-sub); font-size: 14px; } .ih-hub .ih-h3 { font-size: 32px; } .ih-hub__addr { margin: 0; font-weight: 500; color: var(--ig-navy); } .ih-hub__desc { margin: 0 0 8px; color: var(--ih-body); max-width: 48ch; } .ih-hub .ih-link { justify-self: start; } /* What's happening */ .ih-now__grid { display: grid; gap: 40px; } @media (min-width: 1100px) { .ih-now__grid { grid-template-columns: 5fr 7fr; gap: 64px; } } .ih-now__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ih-line); } .ih-now__list li { border-bottom: 1px solid var(--ih-line); } .ih-now__list a { display: grid; gap: 6px; padding: 24px 0; color: inherit; text-decoration: none; } .ih-now__title { font: 600 22px/1.2 var(--ig-display); color: var(--ig-navy); letter-spacing: -.01em; } .ih-now__desc { color: var(--ih-body); } .ih-now__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ig-navy); transition: gap .25s var(--ig-ease); } .ih-now__list a:hover .ih-now__cta { gap: 12px; } @media (min-width: 768px) { .ih-now__list a { grid-template-columns: 180px 1fr auto; grid-template-rows: auto auto; column-gap: 24px; align-items: baseline; } .ih-now__list .ih-meta { grid-row: 1 / 3; } .ih-now__cta { grid-column: 3; grid-row: 1 / 3; align-self: center; } } /* Closing */ .ih-close { border-top: 1px solid var(--ih-line); } .ih-close__in { display: grid; gap: 32px; } .ih-close__actions { display: grid; gap: 16px; justify-items: start; } .ih-close__actions p { margin: 0; color: var(--ih-sub); } .ih-close__actions a:not(.ig-btn) { color: var(--ig-navy); font-weight: 600; } .ih-close .ig-btn { border-radius: 8px; min-height: 52px; } @media (min-width: 1100px) { .ih-close__in { grid-template-columns: 7fr 5fr; align-items: end; gap: 64px; } .ih-close__actions { justify-items: end; } } :where(.ih-sec, .ih-trust) a:focus-visible { outline: 2px solid var(--ig-navy); outline-offset: 4px; border-radius: 4px; } /* v1.2 footer: light grey, no dark section */ .ig-footer { background: var(--ih-grey); color: var(--ih-body); border-top: 1px solid var(--ih-line); } .ig-footer a { color: var(--ig-navy); } .ig-footer a:hover { color: var(--ig-navy); text-decoration: underline; text-decoration-color: var(--ig-green); text-underline-offset: 4px; } .ig-footer__top { border-bottom-color: var(--ih-line); } .ig-footer__h { color: var(--ih-sub); font-weight: 600; letter-spacing: .07em; } .ig-social a { background: #fff; border: 1px solid var(--ih-line); } .ig-social a:hover { background: var(--ig-navy); color: #fff; text-decoration: none; } .ig-footer__visit strong { color: var(--ig-navy); } .ig-footer__visit .ig-icon { color: var(--ig-navy); } .ig-footer__sig { color: var(--ig-navy); } .ig-footer__credit { opacity: 1; color: var(--ih-sub); } /* ========================================================================== v1.3 "Route" language: connector lines from the logo, arch frames, editorial index rows, one navy band. Flat fills, white / #F5F6F8. ========================================================================== */ body { background: #fff; } .ix-sec { padding-block: 72px; background: #fff; position: relative; } .ix-sec--grey { background: var(--ih-grey); } @media (min-width: 768px) { .ix-sec { padding-block: 96px; } } @media (min-width: 1100px) { .ix-sec { padding-block: 120px; } } .ix-sec .ig-container, .ix-hero .ig-container, .ix-band .ig-container { max-width: calc(1240px + var(--ig-gutter) * 2); } .ix-kicker { margin: 0 0 18px; display: inline-flex; align-items: center; gap: 12px; font: 600 13px/1 var(--ig-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ig-navy); } .ix-kicker__dot { position: relative; width: 22px; height: 8px; flex: none; } .ix-kicker__dot::before, .ix-kicker__dot::after { content: ""; position: absolute; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ig-orange); left: 0; } .ix-kicker__dot::after { left: 14px; background: var(--ig-green); } .ix-kicker--light { color: #fff; } .ix-display { margin: 0; font: 700 clamp(46px, 7.4vw, 112px)/.95 var(--ig-display); letter-spacing: -.045em; color: var(--ig-navy); text-wrap: balance; } .ix-display em, .ix-h2 em { font-style: normal; color: var(--ig-green-deep, #4F7A0C); } .ix-display em { color: var(--ig-green); position: relative; } .ix-display em.ix-o, .ix-h2 em.ix-o { color: var(--ig-orange); } .ix-h2 { margin: 0; font: 700 clamp(34px, 4.8vw, 64px)/1.02 var(--ig-display); letter-spacing: -.035em; color: var(--ig-navy); max-width: 16ch; text-wrap: balance; } .ix-h2 em { display: inline; color: #5E8F17; } .ix-h2--light { color: #fff; } .ix-h2--light em { color: var(--ig-green); } .ix-lead { margin: 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--ih-body); max-width: 46ch; } .ix-meta { font: 600 12px/1.2 var(--ig-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ih-sub); } .ix-head { margin-bottom: clamp(40px, 5vw, 72px); } .ix-head--split { display: grid; gap: 24px; } @media (min-width: 1000px) { .ix-head--split { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 64px; } .ix-head--split > :last-child { justify-self: end; } } .ix-head--center { text-align: center; } .ix-head--center .ix-h2 { margin-inline: auto; } .ix-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .ix-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--ig-navy); text-decoration: none; border-bottom: 2px solid var(--ig-green); transition: gap .3s var(--ig-ease); } .ix-link:hover { gap: 14px; } .ix-link--light { color: #fff; } /* Reveal: staggered by JS, content visible without JS */ .ig-js .ig-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ig-ease), transform .9s var(--ig-ease); } .ig-js .ig-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ig-js .ig-reveal { opacity: 1; transform: none; transition: none; } } /* Hero */ .ix-hero { padding: calc(var(--ig-header-h) + 72px) 0 56px; background: #fff; overflow: hidden; } .ix-hero__grid { display: grid; gap: 48px; align-items: center; } @media (min-width: 1100px) { .ix-hero__grid { grid-template-columns: 1.15fr .85fr; gap: 56px; } } .ix-hero__copy { display: grid; gap: 28px; justify-items: start; } .ix-hero__copy .ix-kicker { margin: 0; } .ix-hero__copy .ix-lead { font-size: clamp(18px, 1.5vw, 21px); } .ix-display em:not(.ix-o)::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .09em; background: var(--ig-green); border-radius: 99px; transform-origin: left; animation: ix-draw 1.2s .6s var(--ig-ease) both; } @keyframes ix-draw { from { transform: scaleX(0); } } .ix-hero__facts { list-style: none; margin: 8px 0 0; padding: 20px 0 0; display: flex; flex-wrap: wrap; gap: 14px 32px; border-top: 1px solid var(--ih-line); width: 100%; } .ix-hero__facts li { display: flex; align-items: center; gap: 10px; color: var(--ih-sub); font-size: 15px; } .ix-hero__facts .ig-icon { color: var(--ig-orange); } .ix-hero__facts strong { color: var(--ig-navy); font: 700 17px var(--ig-display); } .ix-hero__art { position: relative; min-height: 520px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 16px; } .ix-hero__photo { margin: 0; grid-column: 1 / -1; grid-row: 1; border-radius: 280px 280px 28px 28px; overflow: hidden; background: var(--ih-grey); min-height: 400px; } .ix-hero__photo img { width: 100%; height: 100%; object-fit: cover; } .ix-hero__tile { border-radius: 24px; padding: 22px; display: grid; align-content: center; } .ix-hero__tile--green { background: var(--ig-green-soft); grid-column: 1; } .ix-hero__net { width: 100%; max-width: 160px; height: auto; margin: auto; animation: ix-float 7s ease-in-out infinite; } .ix-hero__tile--green svg { width: 100%; max-width: 150px; height: auto; margin: auto; animation: ix-float 7s ease-in-out infinite; } @keyframes ix-float { 50% { transform: translateY(-8px) rotate(-3deg); } } .ix-hero__tile--navy { background: var(--ig-navy); color: #C9CAEA; gap: 6px; font-size: 14px; } .ix-hero__tile--navy strong { font: 700 clamp(24px, 2.4vw, 32px)/1.05 var(--ig-display); color: #fff; letter-spacing: -.02em; } .ix-hero__tile--navy em { font-style: normal; color: var(--ig-green); } .ix-hero__tile-k { font: 600 12px/1 var(--ig-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ig-orange); } .ix-hero__chip { position: absolute; top: 36%; left: -18px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--ih-line); font-weight: 600; font-size: 14px; color: var(--ig-navy); box-shadow: 0 12px 32px rgba(27, 28, 69, .10); } .ix-live { width: 10px; height: 10px; border-radius: 50%; background: var(--ig-red); box-shadow: 0 0 0 4px var(--ig-red-soft); animation: ix-pulse 2s infinite; } @keyframes ix-pulse { 50% { box-shadow: 0 0 0 8px rgba(238, 48, 15, .08); } } @media (prefers-reduced-motion: reduce) { .ix-hero__tile--green svg, .ix-live, .ix-display em::after { animation: none; } } @media (max-width: 599px) { .ix-hero__art { min-height: 0; } .ix-hero__photo { min-height: 320px; border-radius: 200px 200px 24px 24px; } .ix-hero__chip { left: 12px; top: 16px; } } .ix-rail { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ih-line); } .ix-rail a { display: grid; grid-template-columns: 32px 24px 1fr 18px; align-items: center; gap: 12px; padding: 20px 4px; color: var(--ig-navy); text-decoration: none; border-bottom: 1px solid var(--ih-line); transition: background-color .25s, padding .25s var(--ig-ease); } .ix-rail a:hover { background: var(--ih-grey); padding-inline: 14px; } .ix-rail strong { font: 600 18px/1.2 var(--ig-display); } .ix-rail__n { font: 500 13px var(--ig-body); color: var(--ih-sub); } @media (min-width: 900px) { .ix-rail { grid-template-columns: repeat(5, 1fr); } .ix-rail a { border-bottom: 0; } .ix-rail li + li a { border-left: 1px solid var(--ih-line); } .ix-rail a { padding-inline: 20px; } } /* Route index */ .ix-routes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ih-line); } .ix-route { border-bottom: 1px solid var(--ih-line); } .ix-route a { display: grid; gap: 16px; padding: 32px 0; color: inherit; text-decoration: none; position: relative; } .ix-route__n { font: 600 14px var(--ig-body); color: var(--ih-sub); } .ix-route__title { display: flex; align-items: center; gap: 16px; font: 700 clamp(32px, 4.2vw, 56px)/1 var(--ig-display); letter-spacing: -.035em; color: var(--ig-navy); transition: transform .45s var(--ig-ease); } .ix-route__title .ig-icon { flex: none; width: 36px; height: 36px; padding: 6px; border-radius: 10px; background: var(--ih-grey); color: var(--ig-navy); transition: background-color .3s, color .3s; } .ix-route__desc { display: grid; gap: 14px; font-size: 16px; line-height: 1.6; color: var(--ih-body); max-width: 46ch; } .ix-route__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ig-navy); transition: gap .3s var(--ig-ease); } .ix-route__art { display: block; width: 100%; max-width: 360px; border-radius: 20px; overflow: hidden; } .ix-route__art svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .ix-route a:hover .ix-route__title { transform: translateX(10px); } .ix-route a:hover .ix-route__title .ig-icon { background: var(--ig-navy); color: #fff; } .ix-route a:hover .ix-route__cta { gap: 14px; } @media (min-width: 1000px) { .ix-route a { grid-template-columns: 60px 1.1fr 1fr 220px; align-items: center; gap: 32px; padding: 28px 0; } .ix-route__art { max-width: 220px; transform: rotate(-2deg) scale(.96); transition: transform .5s var(--ig-ease); } .ix-route:nth-child(even) .ix-route__art { transform: rotate(2deg) scale(.96); } .ix-route a:hover .ix-route__art { transform: rotate(0) scale(1); } } /* Duo chapter */ .ix-duo { display: grid; gap: 56px; align-items: center; } @media (min-width: 1000px) { .ix-duo { grid-template-columns: 1fr 1fr; gap: 88px; } } .ix-duo__media { position: relative; padding: 0 0 64px 0; } .ix-arch { margin: 0; border-radius: 320px 320px 28px 28px; overflow: hidden; aspect-ratio: 4 / 5; max-width: 480px; } .ix-arch img, .ix-duo__inset img { width: 100%; height: 100%; object-fit: cover; } .ix-duo__inset { position: absolute; right: 0; bottom: 0; width: 48%; aspect-ratio: 1; margin: 0; border-radius: 24px; overflow: hidden; border: 8px solid var(--ih-grey); } .ix-sticker { position: absolute; left: 8%; bottom: 24px; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--ig-orange); color: #fff; font-weight: 600; transform: rotate(-4deg); } .ix-duo__copy { display: grid; gap: 28px; justify-items: start; } .ix-duo__copy .ix-kicker { margin: 0; } .ix-list { list-style: none; margin: 0; padding: 0; width: 100%; border-top: 1px solid var(--ih-line); } .ix-list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--ih-line); color: var(--ih-sub); font-size: 15px; } .ix-list strong { display: block; font: 600 18px/1.3 var(--ig-display); color: var(--ig-navy); } .ix-list__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--ig-navy); border: 1px solid var(--ih-line); } .ix-list li:nth-child(1) .ix-list__icon { color: var(--ig-orange); } .ix-list li:nth-child(2) .ix-list__icon { color: #5E8F17; } .ix-list li:nth-child(4) .ix-list__icon { color: var(--ig-red); } /* Studio shelf */ .ix-shelf { display: grid; gap: 16px; } @media (min-width: 900px) { .ix-shelf { grid-template-columns: repeat(3, 1fr); } } .ix-product { display: grid; grid-template-rows: auto 1fr auto auto; gap: 14px; min-height: 380px; padding: 28px; border-radius: 28px; background: var(--ih-grey); color: var(--ig-navy); text-decoration: none; border: 1px solid transparent; transition: border-color .3s, transform .5s var(--ig-ease), background-color .3s; } .ix-product:hover { background: #fff; border-color: var(--ih-line); transform: translateY(-6px); } .ix-product__top { display: flex; justify-content: space-between; align-items: center; } .ix-product__logo { display: grid; place-items: center; } .ix-product__logo img { max-height: 72px; width: auto; max-width: 80%; transition: transform .5s var(--ig-ease); } .ix-product:hover .ix-product__logo img { transform: scale(1.06); } .ix-product__line { font: 600 22px/1.25 var(--ig-display); letter-spacing: -.015em; } .ix-product__url { font-size: 14px; color: var(--ih-sub); } /* Navy band */ .ix-band { position: relative; background: var(--ig-navy); color: #C9CAEA; padding-block: clamp(80px, 10vw, 128px); overflow: hidden; } .ix-band__route { position: absolute; inset: 36px 0 auto; width: 100%; height: 200px; pointer-events: none; } .ix-band .ix-head { position: relative; } .ix-cases { display: grid; gap: 16px; position: relative; } @media (min-width: 900px) { .ix-cases { grid-template-columns: 1.25fr 1fr 1fr; } } .ix-case { background: #fff; border-radius: 24px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; color: var(--ih-body); transition: transform .5s var(--ig-ease); } .ix-case:hover { transform: translateY(-6px); } .ix-case__cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .ix-case:first-child .ix-case__cover { aspect-ratio: 16 / 11; } .ix-case__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ig-ease); } .ix-case:hover .ix-case__cover img { transform: scale(1.05); } .ix-case__tag { position: absolute; left: 16px; top: 16px; padding: 8px 12px; border-radius: 8px; background: #fff; color: var(--ig-navy); font: 600 12px/1 var(--ig-body); letter-spacing: .06em; text-transform: uppercase; } .ix-case__body { padding: 24px 24px 28px; display: grid; gap: 10px; align-content: start; } .ix-case__fig { margin: 0; font: 700 clamp(40px, 4vw, 56px)/1 var(--ig-display); letter-spacing: -.04em; color: var(--ig-navy); } .ix-case:nth-child(2) .ix-case__fig { color: var(--ig-orange); } .ix-case:nth-child(3) .ix-case__fig { color: #5E8F17; } .ix-case h3 { font: 600 20px/1.25 var(--ig-display); color: var(--ig-navy); margin: 0; } .ix-case__res { margin: 0; } .ix-case__src { margin: 6px 0 0; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ih-sub); padding-top: 12px; border-top: 1px solid var(--ih-line); } .ix-case__src .ig-icon { color: #5E8F17; flex: none; } /* Hubs */ .ix-hubs__grid { display: grid; gap: 56px; } @media (min-width: 900px) { .ix-hubs__grid { grid-template-columns: 1fr 1fr; gap: 40px; } .ix-hub--umuahia { margin-top: 96px; } } .ix-hub { display: grid; gap: 12px; align-content: start; justify-items: start; } .ix-hub__frame { position: relative; width: 100%; aspect-ratio: 4 / 3.4; border-radius: 360px 360px 28px 28px; overflow: hidden; background: #E9E9F4; margin-bottom: 16px; } .ix-hub__frame > img, .ix-hub__frame > svg { width: 100%; height: 100%; object-fit: cover; display: block; } .ix-hub__pin { position: absolute; left: 20px; bottom: 20px; display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 999px; background: #fff; color: var(--ig-navy); font-weight: 600; font-size: 14px; } .ix-hub__pin .ig-icon { color: var(--ig-orange); } .ix-hub__city { margin: 0; font: 700 clamp(48px, 6vw, 88px)/.95 var(--ig-display); letter-spacing: -.045em; color: var(--ig-navy); } .ix-hub__addr { margin: 0; font-weight: 600; color: var(--ig-navy); } .ix-hub__desc { margin: 0; color: var(--ih-body); max-width: 46ch; } .ix-tags { list-style: none; margin: 4px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ix-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; background: var(--ih-grey); font-size: 14px; font-weight: 600; color: var(--ig-navy); } /* Tickets */ .ix-now__grid { display: grid; gap: 40px; } @media (min-width: 1000px) { .ix-now__grid { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; } } .ix-tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .ix-tickets a { display: grid; grid-template-columns: 1fr; border-radius: 20px; background: #fff; color: inherit; text-decoration: none; overflow: hidden; border: 1px solid var(--ih-line); transition: transform .4s var(--ig-ease), border-color .3s; } .ix-tickets a:hover { transform: translateX(6px); border-color: var(--ig-navy); } .ix-ticket__stub { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: var(--ig-navy); color: #fff; font: 600 14px var(--ig-body); } .ix-ticket__stub .ig-icon { color: var(--ig-green); } .ix-ticket__main { display: grid; gap: 4px; padding: 18px 20px; color: var(--ih-body); } .ix-ticket__main strong { font: 600 20px/1.25 var(--ig-display); color: var(--ig-navy); } .ix-ticket__go { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px 18px; font-weight: 600; color: var(--ig-navy); } @media (min-width: 700px) { .ix-tickets a { grid-template-columns: 170px 1fr auto; align-items: stretch; } .ix-ticket__stub { flex-direction: column; align-items: flex-start; justify-content: center; border-right: 2px dashed rgba(255,255,255,.25); } .ix-ticket__go { padding: 0 24px; align-self: center; } } /* Closing */ .ix-close__card { position: relative; display: grid; gap: 40px; padding: clamp(28px, 5vw, 64px); border-radius: 32px; background: var(--ih-grey); overflow: hidden; } @media (min-width: 1000px) { .ix-close__card { grid-template-columns: 300px 1fr 1.4fr; align-items: center; gap: 0; } } .ix-close__lines { display: none; } @media (min-width: 1000px) { .ix-close__lines { display: block; grid-column: 2; grid-row: 1; width: 100%; height: 340px; } .ix-close__lines path { fill: none; stroke: var(--ig-navy); stroke-width: 2; opacity: .25; stroke-dasharray: 6 8; animation: ix-flow 2.4s linear infinite; } } @keyframes ix-flow { to { stroke-dashoffset: -28; } } @media (prefers-reduced-motion: reduce) { .ix-close__lines path { animation: none; } } .ix-close__verbs { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ix-close__verbs a { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: #fff; color: var(--ig-navy); text-decoration: none; border: 1px solid var(--ih-line); transition: transform .35s var(--ig-ease), border-color .3s; } .ix-close__verbs a:hover { transform: translateX(8px); border-color: var(--ig-navy); } .ix-close__verbs span { font: 700 20px var(--ig-display); } .ix-close__verbs small { color: var(--ih-sub); font-size: 13px; } .ix-close__copy { grid-column: auto; display: grid; gap: 22px; justify-items: start; } @media (min-width: 1000px) { .ix-close__copy { grid-column: 3; grid-row: 1; padding-left: 24px; } } .ix-close__copy .ix-kicker { margin: 0; } /* ========================================================================== v1.4 additions: how it works, voices, insights, newsletter ========================================================================== */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* How it works: nodes on one connector line */ .ix-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; position: relative; counter-reset: s; } .ix-step { position: relative; display: grid; gap: 12px; align-content: start; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--ih-line); transition: transform .45s var(--ig-ease), border-color .3s; } .ix-step:hover { transform: translateY(-6px); border-color: var(--ig-navy); } .ix-step__node { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ig-navy); color: #fff; border: 6px solid var(--ih-grey); box-sizing: content-box; margin: -8px 0 8px -8px; position: relative; z-index: 1; } .ix-step:nth-child(2) .ix-step__node { background: var(--ig-green); color: var(--ig-ink); } .ix-step:nth-child(3) .ix-step__node { background: var(--ig-orange); } .ix-step:nth-child(4) .ix-step__node { background: var(--ig-red); } .ix-step__n { font: 600 12px/1 var(--ig-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ih-sub); } .ix-step__title { margin: 0; font: 700 clamp(28px, 2.6vw, 36px)/1 var(--ig-display); letter-spacing: -.03em; color: var(--ig-navy); } .ix-step p { margin: 0; color: var(--ih-body); } .ix-step__tag { justify-self: start; margin-top: 6px; padding: 7px 12px; border-radius: 8px; background: var(--ih-grey); font: 600 13px var(--ig-body); color: var(--ig-navy); } @media (min-width: 1000px) { .ix-steps { grid-template-columns: repeat(4, 1fr); } .ix-steps::before { content: ""; position: absolute; left: 48px; right: 48px; top: 48px; border-top: 2px dashed #C9CDD6; } .ix-step { background: transparent; border-color: transparent; padding-inline: 8px 20px; } .ix-step:hover { background: #fff; border-color: var(--ih-line); } .ix-step:nth-child(even) { margin-top: 48px; } } /* Voices */ .ix-voices__grid { display: grid; gap: 40px; margin-bottom: 16px; } @media (min-width: 1000px) { .ix-voices__grid { grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: stretch; } } .ix-voices__head { display: grid; align-content: start; gap: 20px; } .ix-voices__head .ix-kicker { margin: 0; } .ix-voices__note { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ih-sub); max-width: 36ch; } .ix-voices__note .ig-icon { color: #5E8F17; flex: none; margin-top: 2px; } .ix-quote { margin: 0; display: grid; gap: 24px; align-content: space-between; padding: 28px; border-radius: 24px; background: var(--ih-grey); } .ix-quote blockquote { margin: 0; } .ix-quote blockquote p { margin: 0; font: 500 19px/1.45 var(--ig-display); color: var(--ig-navy); letter-spacing: -.01em; } .ix-quote--lead { position: relative; padding: clamp(32px, 4vw, 56px); border-radius: 240px 28px 28px 28px; background: var(--ig-navy); overflow: hidden; } .ix-quote--lead blockquote p { font: 600 clamp(24px, 2.6vw, 36px)/1.25 var(--ig-display); color: #fff; letter-spacing: -.02em; max-width: 26ch; } .ix-quote__mark { color: var(--ig-green); } .ix-quote--lead figcaption { color: #C9CAEA; } .ix-quote--lead figcaption strong { color: #fff; } .ix-quote figcaption { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ih-sub); } .ix-quote figcaption strong { display: block; font: 600 16px var(--ig-display); color: var(--ig-navy); } .ix-avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; font: 700 15px/1 var(--ig-display); color: #fff; } .ix-avatar--navy { background: var(--ig-green); color: var(--ig-ink); } .ix-avatar--orange { background: var(--ig-orange); } .ix-avatar--green { background: var(--ig-green); color: var(--ig-ink); } .ix-avatar--red { background: var(--ig-red); } .ix-quotes { display: grid; gap: 16px; } @media (min-width: 800px) { .ix-quotes { grid-template-columns: repeat(3, 1fr); } } .ix-quotes .ix-quote { transition: transform .45s var(--ig-ease), background-color .3s; } .ix-quotes .ix-quote:hover { transform: translateY(-4px); background: #fff; box-shadow: inset 0 0 0 1px var(--ih-line); } /* Insights */ .ix-posts { display: grid; gap: 16px; } @media (min-width: 900px) { .ix-posts { grid-template-columns: 1.4fr 1fr 1fr; } } .ix-post { display: grid; gap: 14px; align-content: start; padding: 16px 16px 28px; border-radius: 28px; background: var(--ih-grey); color: var(--ig-navy); text-decoration: none; transition: transform .45s var(--ig-ease), background-color .3s; } .ix-post:hover { transform: translateY(-6px); background: #fff; box-shadow: inset 0 0 0 1px var(--ih-line); } .ix-post > :not(.ix-post__art) { padding-inline: 12px; } .ix-post__art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 20px 20px 20px 20px; background: #fff; color: var(--ig-navy); overflow: hidden; margin-bottom: 8px; } .ix-post--lead .ix-post__art { background: var(--ig-navy); color: #fff; border-radius: 200px 20px 20px 20px; } .ix-post:nth-child(2) .ix-post__art { background: var(--ig-green-soft); } .ix-post:nth-child(3) .ix-post__art { background: var(--ig-orange-soft); } .ix-post__art svg { position: absolute; inset: 0; width: 100%; height: 100%; } .ix-post__icon { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--ig-navy); transition: transform .5s var(--ig-ease); } .ix-post:hover .ix-post__icon { transform: scale(1.1) rotate(-8deg); } .ix-post__title { font: 600 clamp(20px, 1.8vw, 24px)/1.25 var(--ig-display); letter-spacing: -.015em; } .ix-post--lead .ix-post__title { font-size: clamp(24px, 2.4vw, 32px); } .ix-post__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; transition: gap .3s var(--ig-ease); } .ix-post:hover .ix-post__go { gap: 14px; } /* Newsletter */ .ix-news { padding-block: 0 24px; background: #fff; } .ix-news__card { position: relative; display: grid; gap: 28px; padding: clamp(28px, 5vw, 64px); border-radius: 32px; border: 1px solid var(--ih-line); background: #fff; overflow: hidden; } @media (min-width: 1000px) { .ix-news__card { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 64px; } } .ix-news__net { position: absolute; right: -20px; top: -10px; width: 300px; height: auto; opacity: .9; pointer-events: none; } @media (max-width: 999px) { .ix-news__net { width: 200px; right: -40px; top: -30px; opacity: .5; } } .ix-news__copy { display: grid; gap: 18px; position: relative; } .ix-news__copy .ix-kicker { margin: 0; } .ix-news__form { position: relative; display: grid; gap: 12px; } @media (min-width: 600px) { .ix-news__form { grid-template-columns: 1fr auto; } .ix-news__fine { grid-column: 1 / -1; } } .ix-news__field { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px; border-radius: 12px; background: var(--ih-grey); border: 2px solid transparent; color: var(--ih-sub); transition: border-color .2s, background-color .2s; } .ix-news__field:focus-within { border-color: var(--ig-navy); background: #fff; } .ix-news__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 16px var(--ig-body); color: var(--ig-navy); } .ix-news__form .ig-btn { min-height: 56px; border-radius: 12px; } .ix-news__fine { margin: 0; font-size: 13px; color: var(--ih-sub); } /* ========================================================================== v1.5 motion layer: line draws, flow, progress, parallax, header, hovers. Everything is static and fully visible under prefers-reduced-motion. ========================================================================== */ /* How it works: three steps on an animated connector */ .ix-steps-wrap { position: relative; } .ix-steps__line { display: none; } @media (min-width: 1000px) { .ix-steps { grid-template-columns: repeat(3, 1fr); } .ix-steps::before { display: none; } .ix-steps__line { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 140px; overflow: visible; pointer-events: none; } .ix-step:nth-child(even) { margin-top: 48px; } } .ix-step:nth-child(2) .ix-step__node { background: var(--ig-orange); color: #fff; } .ix-step:nth-child(3) .ix-step__node { background: var(--ig-red); color: #fff; } .ix-draw__base, .ix-draw__flow { fill: none; vector-effect: non-scaling-stroke; } .ix-steps__line .ix-draw__base { stroke: #C9CDD6; stroke-width: 2; } .ix-steps__line .ix-draw__flow { stroke: var(--ig-navy); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .06 .94; stroke-dashoffset: 1; opacity: 0; } .ix-band__route .ix-draw__base { stroke: #4B4C9A; stroke-width: 2; } .ig-js [data-ix-draw] .ix-draw__base { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ig-ease); } .ig-js [data-ix-draw].is-drawn .ix-draw__base { stroke-dashoffset: 0; } .ig-js [data-ix-draw].is-drawn .ix-draw__flow { opacity: 1; animation: ix-run 3.2s 2s linear infinite; } @keyframes ix-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* nodes light up one after another as the line reaches them */ .ig-js [data-ix-draw] .ix-step__node { transform: scale(.6); opacity: .3; transition: transform .6s var(--ig-ease), opacity .6s; } .ig-js [data-ix-draw].is-drawn .ix-step__node { transform: none; opacity: 1; } .ig-js [data-ix-draw].is-drawn .ix-step:nth-child(2) .ix-step__node { transition-delay: .7s; } .ig-js [data-ix-draw].is-drawn .ix-step:nth-child(3) .ix-step__node { transition-delay: 1.4s; } .ig-js [data-ix-draw].is-drawn .ix-step__node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: ix-ring 3.2s 2.2s ease-out infinite; } .ig-js [data-ix-draw].is-drawn .ix-step:nth-child(1) .ix-step__node::after { color: var(--ig-navy); } .ig-js [data-ix-draw].is-drawn .ix-step:nth-child(2) .ix-step__node::after { color: var(--ig-orange); animation-delay: 3.2s; } .ig-js [data-ix-draw].is-drawn .ix-step:nth-child(3) .ix-step__node::after { color: var(--ig-red); animation-delay: 4.2s; } @keyframes ix-ring { 0% { transform: scale(.9); opacity: .6; } 40%, 100% { transform: scale(1.5); opacity: 0; } } .ix-band__route circle { transform-box: fill-box; transform-origin: center; animation: ix-beat 2.6s ease-in-out infinite; } .ix-band__route circle:nth-of-type(2) { animation-delay: .8s; } .ix-band__route circle:nth-of-type(3) { animation-delay: 1.6s; } @keyframes ix-beat { 50% { transform: scale(1.6); } } /* Scroll progress */ .ix-progress { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 3px; background: var(--ig-green); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; } /* Header hides on scroll down, returns on scroll up */ .ig-header { transition: transform .45s var(--ig-ease); } .ig-header.is-hidden { transform: translateY(-120%); } /* Kicker dots blink in sequence */ .ix-kicker__dot::before { animation: ix-dot 2.8s ease-in-out infinite; } .ix-kicker__dot::after { animation: ix-dot 2.8s 1.4s ease-in-out infinite; } @keyframes ix-dot { 0%, 60%, 100% { transform: none; } 30% { transform: scale(1.5); } } /* Hover life */ .ih-trust__marks img { transition: opacity .25s, filter .25s, transform .35s var(--ig-ease); } .ih-trust__marks img:hover { filter: none; transform: translateY(-3px); } .ix-hub__frame > img, .ix-hub__frame > svg { transition: transform 1s var(--ig-ease); } .ix-hub:hover .ix-hub__frame > img, .ix-hub:hover .ix-hub__frame > svg { transform: scale(1.05); } .ix-hub__pin { transition: transform .4s var(--ig-ease); } .ix-hub:hover .ix-hub__pin { transform: translateY(-4px); } .ix-route__art svg { transition: transform .8s var(--ig-ease); } .ix-route a:hover .ix-route__art svg { transform: scale(1.06) translateY(-4px); } .ix-sticker { animation: ix-wobble 5s ease-in-out infinite; } @keyframes ix-wobble { 50% { transform: rotate(-1deg) translateY(-4px); } } .ig-btn svg { transition: transform .3s var(--ig-ease); } .ig-btn:hover svg { transform: translateX(4px); } .ig-btn:active { transform: scale(.97); } .ix-quote__mark { display: inline-block; animation: ix-float 6s ease-in-out infinite; } .ix-news__net circle { transform-box: fill-box; transform-origin: center; animation: ix-beat 3s ease-in-out infinite; } .ix-news__net circle:nth-of-type(2) { animation-delay: 1s; } .ix-news__net circle:nth-of-type(3) { animation-delay: 2s; } [data-parallax] img { will-change: transform; transform: translate3d(0, var(--py, 0px), 0) scale(1.08); } /* Newsletter as the final section */ .ix-close { padding-bottom: 32px; } .ix-news { padding-block: 0 clamp(72px, 9vw, 120px); } .ix-news__card { align-items: center; } .ix-news .ix-h2 { max-width: 12ch; } @media (prefers-reduced-motion: reduce) { .ix-kicker__dot::before, .ix-kicker__dot::after, .ix-sticker, .ix-quote__mark, .ix-news__net circle, .ix-band__route circle, .ix-step__node::after { animation: none !important; } .ig-js [data-ix-draw] .ix-draw__base { stroke-dashoffset: 0; transition: none; } .ig-js [data-ix-draw] .ix-draw__flow { display: none; } .ig-js [data-ix-draw] .ix-step__node { transform: none; opacity: 1; transition: none; } [data-parallax] img { transform: none; } .ix-progress { display: none; } .ig-header { transition: none; } } .ix-news__net { width: 220px; right: -30px; top: -40px; opacity: .55; } .ix-news__form { z-index: 1; } /* v1.5.2 — ecosystem illustration motion */ .ix-route__art svg * { transform-box: fill-box; transform-origin: center; } .ix-route__art svg > circle { animation: ix-illo-pulse 3.6s ease-in-out infinite; } .ix-route__art svg > circle:nth-of-type(2n) { animation-delay: -1.2s; } .ix-route__art svg > circle:nth-of-type(3n) { animation-name: ix-illo-bob; animation-duration: 4.2s; animation-delay: -2s; } .ix-route__art svg > line, .ix-route__art svg > path[stroke] { stroke-dasharray: 6 8; animation: ix-flow 1.8s linear infinite; } .ix-route__art svg > rect:nth-of-type(n+3):nth-of-type(odd) { animation: ix-illo-bar 4.8s ease-in-out infinite; transform-origin: left center; } .ix-route__art svg > rect:nth-of-type(n+3):nth-of-type(4n) { animation-delay: -1.6s; } .ix-route__art svg > path:not([stroke]):nth-of-type(odd) { animation: ix-illo-bob 5s ease-in-out infinite; } /* per-illo accents */ .ix-route:nth-child(1) .ix-route__art svg > path:nth-of-type(1), .ix-route:nth-child(1) .ix-route__art svg > path:nth-of-type(2) { animation: ix-illo-cap 4s ease-in-out infinite; } .ix-route:nth-child(2) .ix-route__art svg > circle { animation-name: ix-illo-node; } .ix-route:nth-child(3) .ix-route__art svg > rect:nth-of-type(2) { animation: ix-illo-bob 6s ease-in-out infinite; } .ix-route:nth-child(4) .ix-route__art svg > rect:nth-of-type(n+3) { animation-duration: 6s; } .ix-route:nth-child(5) .ix-route__art svg > text { animation: ix-illo-pulse 2.8s ease-in-out infinite; } /* idle = slow, hover/focus = lively */ .ix-route__art svg * { animation-play-state: paused; } .ix-route.is-in .ix-route__art svg *, .ix-route__art.is-in svg *, .ig-reveal.is-in .ix-route__art svg *, .ix-route a:hover .ix-route__art svg *, .ix-route a:focus-visible .ix-route__art svg * { animation-play-state: running; } .ix-route a:hover .ix-route__art svg > *, .ix-route a:focus-visible .ix-route__art svg > * { animation-duration: 1.6s; } @keyframes ix-illo-pulse { 50% { transform: scale(1.12); opacity: .85; } } @keyframes ix-illo-bob { 50% { transform: translateY(-6px); } } @keyframes ix-illo-bar { 50% { transform: scaleX(.72); } } @keyframes ix-illo-cap { 50% { transform: translateY(-5px) rotate(-6deg); } } @keyframes ix-illo-node { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25); } 60% { transform: scale(.95); } } @media (prefers-reduced-motion: reduce) { .ix-route__art svg * { animation: none !important; } } /* ========================================================================== v1.6 Inner pages ("ip-"): hero + breadcrumbs, cards, splits, hubs, FAQ, steps, timeline, contact form, legal prose, closing band. White / #F5F6F8 only. ========================================================================== */ .ip-hero { padding: clamp(116px, 12vw, 150px) 0 clamp(48px, 6vw, 88px); background: #fff; position: relative; overflow: hidden; } .ip-hero .ig-container, .ip-prose-sec .ig-container { max-width: calc(1240px + var(--ig-gutter) * 2); } .ip-crumbs ol { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--ih-sub); } .ip-crumbs li { display: inline-flex; align-items: center; gap: 6px; } .ip-crumbs a { color: var(--ih-sub); text-decoration: none; } .ip-crumbs a:hover { color: var(--ig-navy); text-decoration: underline; text-decoration-color: var(--ig-green); } .ip-crumbs [aria-current] { color: var(--ig-navy); font-weight: 600; } .ip-hero__grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; } .ip-hero__copy { display: grid; gap: 22px; justify-items: start; } .ip-hero__copy .ix-kicker { margin: 0; } .ip-h1 { margin: 0; font: 700 clamp(40px, 5.6vw, 80px)/1 var(--ig-display); letter-spacing: -.04em; color: var(--ig-navy); max-width: 16ch; text-wrap: balance; } .ip-h1 em { font-style: normal; color: #5E8F17; } .ip-h1 em.ix-o { color: var(--ig-orange); } .ip-hero--plain .ip-h1 { max-width: 20ch; } .ip-hero__media { position: relative; border-radius: 220px 28px 28px 28px; overflow: hidden; background: var(--ih-grey); aspect-ratio: 5 / 4; } .ip-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.6s var(--ig-ease); } .ip-hero__media.is-in img { transform: none; } .ip-hero__media .ig-illo { width: 100%; height: 100%; display: grid; place-items: center; padding: 8%; } .ip-hero__media .ig-illo svg { width: 100%; height: auto; } .ip-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .ip-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--ih-grey); color: var(--ig-navy); font-size: 14px; font-weight: 600; } .ip-facts li .ig-icon { color: var(--ig-orange); flex: none; } .ip-facts--row { margin-top: 32px; } .ip-facts--row li { background: #fff; border: 1px solid var(--ih-line); } .ip-answer { width: 100%; max-width: 60ch; padding: 18px 20px; border-left: 4px solid var(--ig-green); border-radius: 0 16px 16px 0; background: var(--ih-grey); } .ip-answer__q { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font: 600 16px/1.3 var(--ig-display); color: var(--ig-navy); } .ip-answer__q .ig-icon { color: #5E8F17; } .ip-answer__a { margin: 0; color: var(--ih-body); font-size: 15.5px; line-height: 1.6; } .ip-head { display: grid; gap: 16px; } .ip-head .ix-kicker { margin: 0; } .ip-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .ip-card { display: grid; align-content: start; gap: 12px; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--ih-line); transition: transform .5s var(--ig-ease), border-color .3s; } .ix-sec:not(.ix-sec--grey) .ip-card { background: var(--ih-grey); border-color: transparent; } .ip-card:hover { transform: translateY(-4px); border-color: var(--ig-navy); } .ip-card__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--ig-mist); color: var(--ig-navy); } .ip-card--green .ip-card__icon { background: var(--ig-green-soft); color: #4F7A0C; } .ip-card--orange .ip-card__icon { background: var(--ig-orange-soft); color: #C23D0A; } .ip-card--red .ip-card__icon { background: var(--ig-red-soft); color: var(--ig-red); } .ip-card__meta { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ih-sub); } .ip-card__title { margin: 0; font: 600 22px/1.2 var(--ig-display); letter-spacing: -.015em; color: var(--ig-navy); } .ip-card__text { margin: 0; color: var(--ih-body); line-height: 1.6; } .ip-card .ix-link { justify-self: start; margin-top: 4px; } .ip-split__grid { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; } .ip-split__copy { display: grid; gap: 20px; justify-items: start; } .ip-split__copy .ix-kicker { margin: 0; } .ip-split__media { border-radius: 28px 28px 200px 28px; overflow: hidden; background: var(--ih-grey); } .ix-sec--grey .ip-split__media { background: #fff; } .ip-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; } .ip-split__media .ig-illo { padding: 8%; } .ip-split__media .ig-illo svg { width: 100%; height: auto; } .ip-statrow { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .ip-statrow li { padding: 28px; border-radius: 24px; background: var(--ig-navy); color: #C9CAEA; display: grid; gap: 8px; } .ip-statrow li:nth-child(2) { background: var(--ig-green); color: var(--ig-ink); } .ip-statrow li:nth-child(3) { background: var(--ig-orange); color: #fff; } .ip-statrow strong { font: 700 clamp(44px, 5vw, 72px)/1 var(--ig-display); letter-spacing: -.04em; color: #fff; } .ip-statrow li:nth-child(2) strong { color: var(--ig-navy); } .ip-stats { padding-block: 0 72px; } .ip-vm__grid { display: grid; gap: 18px; } .ip-vm__card { padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: var(--ih-grey); color: var(--ih-body); } .ip-vm__card h3 { margin: 14px 0 10px; font: 600 28px var(--ig-display); color: var(--ig-navy); } .ip-vm__card p { margin: 0; font-size: 18px; line-height: 1.6; } .ip-vm__card .ig-icon { color: var(--ig-orange); } .ip-vm__card--navy { background: var(--ig-navy); color: #DCDDF3; } .ip-vm__card--navy h3 { color: #fff; } .ip-vm__card--navy .ig-icon { color: var(--ig-green); } .ip-sig { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; } .ip-sig li { padding: 24px 0; border-top: 2px solid var(--ig-navy); } .ip-sig span { font: 600 14px var(--ig-body); color: var(--ig-orange); } .ip-sig strong { display: block; margin: 8px 0 6px; font: 700 clamp(30px, 3vw, 44px)/1 var(--ig-display); letter-spacing: -.03em; color: var(--ig-navy); } .ip-sig p { margin: 0; color: var(--ih-body); } .ip-tl { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; } .ip-tl::before { content: ""; position: absolute; left: 102px; top: 8px; bottom: 8px; width: 2px; background: var(--ih-line); } .ip-tl li { position: relative; display: grid; grid-template-columns: 64px 46px 1fr; gap: 16px; align-items: start; padding: 18px 0; } .ip-tl__year { font: 700 20px/44px var(--ig-display); color: var(--ig-navy); } .ip-tl__icon { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--ig-green); color: var(--ig-navy); } .ip-tl h3 { margin: 8px 0 4px; font: 600 19px/1.3 var(--ig-display); color: var(--ig-navy); } .ip-tl p { margin: 0; color: var(--ih-body); } .ip-hubs { display: grid; gap: 20px; } .ip-hub { display: grid; border-radius: 28px; overflow: hidden; background: var(--ih-grey); } .ix-sec--grey .ip-hub { background: #fff; } .ip-hub__frame { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ig-mist); } .ip-hub__frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .ip-hub__frame .ig-illo, .ip-hub__frame .ig-illo svg { width: 100%; height: 100%; } .ip-hub__body { display: grid; gap: 12px; padding: 28px; justify-items: start; } .ip-hub__name { margin: 0; font: 600 26px var(--ig-display); color: var(--ig-navy); } .ip-hub__addr { display: flex; gap: 8px; font-style: normal; color: var(--ih-body); line-height: 1.5; } .ip-hub__addr .ig-icon, .ip-hub__mail .ig-icon { flex: none; color: var(--ig-orange); margin-top: 2px; } .ip-hub__mail { margin: 0; display: flex; align-items: center; gap: 8px; } .ip-hub__mail a { color: var(--ig-navy); font-weight: 600; } .ip-hub__desc { margin: 0; color: var(--ih-body); } .ip-faq__grid { display: grid; gap: 32px; } .ip-faq__list { display: grid; gap: 12px; } .ip-faq__item { border-radius: 20px; background: #fff; border: 1px solid var(--ih-line); } .ip-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 24px; } .ip-faq__item summary::-webkit-details-marker { display: none; } .ip-faq__item h3 { margin: 0; font: 600 18px/1.35 var(--ig-display); color: var(--ig-navy); } .ip-faq__pm { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ih-grey); color: var(--ig-navy); transition: transform .3s var(--ig-ease), background-color .3s; } .ip-faq__item[open] .ip-faq__pm { transform: rotate(45deg); background: var(--ig-green); } .ip-faq__item p { margin: 0; padding: 0 24px 22px; color: var(--ih-body); line-height: 1.65; } .ip-steplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: s; } .ip-steplist li { padding: 28px; border-radius: 24px; background: var(--ih-grey); } .ip-steplist span { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ig-navy); color: #fff; font: 600 15px var(--ig-display); } .ip-steplist li:nth-child(2) span { background: var(--ig-green); color: var(--ig-navy); } .ip-steplist li:nth-child(3) span { background: var(--ig-orange); } .ip-steplist li:nth-child(4) span { background: var(--ig-red); } .ip-steplist h3 { margin: 16px 0 6px; font: 600 21px var(--ig-display); color: var(--ig-navy); } .ip-steplist p { margin: 0; color: var(--ih-body); } .ip-prog__grid { display: grid; gap: 48px; } .ip-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .ip-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--ih-line); font-weight: 600; color: var(--ig-navy); } .ip-chips .ig-icon { color: #5E8F17; } .ip-pillars .ig-container { display: grid; gap: clamp(48px, 7vw, 112px); } .ip-pillar { display: grid; gap: 32px; align-items: center; } .ip-pillar__copy { display: grid; gap: 18px; justify-items: start; } .ip-pillar__copy .ix-kicker { margin: 0; } .ip-pillar__art { border-radius: 28px; background: var(--ih-grey); padding: 8%; } .ip-pillar__art .ig-illo svg { width: 100%; height: auto; } .ip-pillar--green .ix-kicker__dot { background: var(--ig-green); } .ip-pillar--orange .ix-kicker__dot { background: var(--ig-orange); } .ip-pillar--red .ix-kicker__dot { background: var(--ig-red); } .ip-products { display: grid; gap: 18px; } .ip-product { display: grid; align-content: start; gap: 12px; padding: 28px; border-radius: 28px; background: #fff; border: 1px solid var(--ih-line); transition: transform .5s var(--ig-ease); } .ip-product:hover { transform: translateY(-6px); } .ip-product__logo { height: 72px; display: flex; align-items: center; } .ip-product__logo img { max-height: 64px; width: auto; } .ip-product .ix-link { justify-self: start; } .ip-quote { max-width: 980px; margin-inline: auto; } .ip-quotes { display: grid; gap: 18px; } .ix-sec--grey .ix-quote:not(.ix-quote--lead) { background: #fff; } .ip-contact__grid { display: grid; gap: 40px; align-items: start; } .ip-contact__side { display: grid; gap: 18px; } .ip-social { margin: 0; } .ip-form { display: grid; gap: 16px; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: #fff; border: 1px solid var(--ih-line); } .ip-form p { margin: 0; display: grid; gap: 8px; } .ip-form__row { display: grid; gap: 16px; } .ip-form label { font-weight: 600; font-size: 14px; color: var(--ig-navy); } .ip-form input, .ip-form select, .ip-form textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid #CDD1DB; background: #fff; font: inherit; color: var(--ig-text); } .ip-form input:focus, .ip-form select:focus, .ip-form textarea:focus { outline: 3px solid var(--ig-green); outline-offset: 1px; border-color: var(--ig-navy); } .ip-form button { justify-self: start; border: 0; cursor: pointer; } .ip-form__hp { position: absolute !important; left: -9999px; } .ip-form__fine { font-size: 13px; color: var(--ih-sub); } .ip-form__fine a { color: var(--ig-navy); } .ip-form__note { display: flex !important; grid-auto-flow: column; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 12px; font-weight: 600; } .ip-form__note--ok { background: var(--ig-green-soft); color: #3D5F08; } .ip-form__note--err { background: var(--ig-red-soft); color: #A1200A; } .ip-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .ip-post a { display: grid; gap: 12px; height: 100%; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--ih-line); text-decoration: none; transition: transform .5s var(--ig-ease); } .ip-post a:hover { transform: translateY(-4px); } .ip-post .ix-link { justify-self: start; } .ip-prose-sec { padding-top: 0; } .ip-prose { max-width: 760px; color: var(--ih-body); font-size: 17px; line-height: 1.7; } .ip-prose h2 { margin: 40px 0 12px; font: 600 26px/1.25 var(--ig-display); color: var(--ig-navy); letter-spacing: -.015em; } .ip-prose ul { padding-left: 1.2em; } .ip-prose li { margin-bottom: 8px; } .ip-prose a { color: var(--ig-navy); font-weight: 600; } .ip-updated { display: inline-block; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--ih-grey); font-size: 14px; color: var(--ih-sub); } .ip-cta__card { position: relative; overflow: hidden; border-radius: 28px 28px 28px 240px; background: var(--ig-navy); padding: clamp(40px, 6vw, 88px); } .ip-cta__lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35; pointer-events: none; } .ip-cta__lines path { fill: none; stroke: var(--ig-green); stroke-width: 2; stroke-dasharray: 8 10; animation: ip-flow 18s linear infinite; } .ip-cta__lines path:nth-child(2) { stroke: var(--ig-orange); animation-duration: 24s; } @keyframes ip-flow { to { stroke-dashoffset: -360; } } .ip-cta__copy { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: start; max-width: 640px; margin-left: auto; width: 100%; box-sizing: border-box; } .ip-cta__copy .ix-kicker { margin: 0; } .ip-cta__lead { margin: 0; color: #DCDDF3; font-size: 18px; line-height: 1.6; } .ip-cta__copy .ix-btns { width: 100%; max-width: 100%; } .ip-cta__copy .ix-link { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; white-space: normal; } @media (max-width: 720px) { .ip-cta__card { border-radius: 24px; padding: 36px 22px 40px; } .ip-cta__copy { margin-left: 0; max-width: none; } } @media (min-width: 721px) and (max-width: 900px) { /* Curve still large relative to card width — keep copy clear of the scoop. */ .ip-cta__card { border-radius: 28px 28px 28px 120px; padding-left: clamp(48px, 8vw, 88px); } } /* About — team (text cards; photo block only renders when member.photo is set) */ .ip-team__leads, .ip-team__grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; } .ip-team__leads { margin-top: 8px; } .ip-team__card { display: grid; gap: 12px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--ih-line); align-content: start; } .ip-team__card--lead { background: var(--ih-grey); border-color: transparent; } .ix-sec--grey .ip-team__card { background: #fff; } .ix-sec--grey .ip-team__card--lead { background: var(--ig-navy); color: #DCDDF3; border-color: transparent; } .ix-sec--grey .ip-team__card--lead h3 { color: #fff; } .ix-sec--grey .ip-team__card--lead p { color: #C9CAEA; } .ip-team__photo { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: linear-gradient(145deg, var(--ig-navy), #2a2f6b); display: grid; place-items: center; } .ip-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .ip-team__meta h3 { margin: 0 0 4px; font: 600 19px/1.25 var(--ig-display); color: var(--ig-navy); } .ip-team__meta p { margin: 0; color: var(--ih-body); font-size: 15px; line-height: 1.45; } /* Projects */ .ip-proj__filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 28px; } .ip-proj__chip { appearance: none; border: 1px solid var(--ih-line); background: #fff; color: var(--ig-navy); font: 600 14px/1 var(--ig-sans, inherit); padding: 10px 16px; border-radius: 999px; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s; } .ip-proj__chip:hover { border-color: var(--ig-navy); transform: translateY(-1px); } .ip-proj__chip.is-active { background: var(--ig-navy); border-color: var(--ig-navy); color: #fff; } .ip-proj__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; } .ip-proj__card { display: grid; gap: 0; border-radius: 28px; overflow: hidden; background: #fff; border: 1px solid var(--ih-line); transition: transform .45s var(--ig-ease), box-shadow .45s var(--ig-ease); } .ip-proj__card.is-hidden { display: none; } .ip-proj__card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(21, 22, 63, .12); } .ip-proj__media { display: block; aspect-ratio: 16 / 10; background: var(--ih-grey); overflow: hidden; } .ip-proj__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .6s var(--ig-ease); } .ip-proj__card:hover .ip-proj__media img { transform: scale(1.04); } .ip-proj__body { display: grid; gap: 10px; justify-items: start; padding: 22px 24px 26px; } .ip-proj__body .ix-link { margin-top: 4px; } .ip-proj__empty { margin: 12px 0 0; color: var(--ih-sub); } @media (min-width: 720px) { .ip-cards--2, .ip-cards--3, .ip-cards--4, .ip-posts, .ip-products, .ip-quotes, .ip-proj__grid { grid-template-columns: repeat(2, 1fr); } .ip-statrow, .ip-sig { grid-template-columns: repeat(3, 1fr); } .ip-team__leads { grid-template-columns: repeat(3, 1fr); } .ip-team__grid { grid-template-columns: repeat(2, 1fr); } .ip-vm__grid, .ip-hubs, .ip-form__row { grid-template-columns: 1fr 1fr; } .ip-steplist { grid-template-columns: repeat(3, 1fr); } .ip-steplist--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ip-hero__grid { grid-template-columns: 1.05fr .95fr; } .ip-hero--plain .ip-hero__grid { grid-template-columns: 1fr; } .ip-cards--3, .ip-posts { grid-template-columns: repeat(3, 1fr); } .ip-team__grid { grid-template-columns: repeat(3, 1fr); } .ip-cards--4, .ip-products, .ip-steplist--4 { grid-template-columns: repeat(4, 1fr); } .ip-split__grid, .ip-pillar { grid-template-columns: 1fr 1fr; } .ip-split--rev .ip-split__media, .ip-pillar--rev .ip-pillar__art { order: -1; } .ip-faq__grid { grid-template-columns: .8fr 1.2fr; align-items: start; } .ip-prog__grid { grid-template-columns: 1fr 1fr; } .ip-contact__grid { grid-template-columns: .8fr 1.2fr; } } @media (prefers-reduced-motion: reduce) { .ip-cta__lines path { animation: none; } .ip-hero__media img, .ip-card, .ip-product, .ip-post a { transition: none; transform: none; } } /* YAI campaign landing */ .yai-landing {overflow-wrap:anywhere}.yai-hero{background:linear-gradient(135deg,#eff7de,#fff 70%)}.yai-hero .ix-h2{font-size:clamp(38px,6vw,76px);max-width:1000px}.yai-hero .ix-lead{max-width:780px}.yai-grid{display:grid;gap:18px;margin:26px 0}.yai-grid h3{margin:0;color:var(--ig-navy)}.yai-grid p{margin:0}.yai-count{display:grid;gap:8px;background:var(--ig-navy);color:white;border-radius:20px;padding:22px;margin:28px 0;max-width:600px}.yai-count strong{font-size:clamp(22px,4vw,36px);color:var(--ig-green)}.yai-small{font-size:14px;line-height:1.6;margin-top:24px;max-width:850px}.yai-list{padding-left:24px;line-height:1.8}.yai-check{display:flex;gap:12px;align-items:flex-start;line-height:1.6}.yai-check input{margin-top:7px;flex:none;width:18px;height:18px;accent-color:var(--ig-navy)}.yai-steps{list-style:none;counter-reset:yai;max-width:850px;padding:0;position:relative}.yai-steps li{counter-increment:yai;position:relative;padding:10px 0 32px 70px;min-height:90px}.yai-steps li:before{content:counter(yai);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:var(--ig-navy);color:white;display:grid;place-items:center;z-index:1;font-weight:700}.yai-steps li:not(:last-child):after{content:"";position:absolute;left:21px;top:46px;bottom:4px;width:2px;background:repeating-linear-gradient(to bottom,var(--ig-green) 0 7px,transparent 7px 13px);background-size:2px 26px;animation:yai-flow 1.5s linear infinite}.yai-help-links{margin:26px 0}.yai-faq{padding:22px 0;border-bottom:1px solid var(--ih-line)}.yai-faq summary{font-weight:650;cursor:pointer;color:var(--ig-navy)}.yai-faq p{max-width:850px;line-height:1.7}.yai-final{background:var(--ig-navy);color:white;border-radius:24px;padding:clamp(28px,5vw,64px)}.yai-final .ix-h2{color:white}.yai-disclaimer{font-size:13px;line-height:1.7;padding-bottom:40px}@keyframes yai-flow{to{background-position:0 26px}}@media(min-width:760px){.yai-grid{grid-template-columns:repeat(2,1fr)}}@media(prefers-reduced-motion:reduce){.yai-steps li:after{animation:none}}@media print{body:has(.yai-landing) header,body:has(.yai-landing) footer,.yai-landing>section:not(#yai-checklist),[data-yai-print]{display:none!important}.yai-landing #yai-checklist{display:block;background:white;color:black;padding:0}.yai-grid{display:block}.yai-check{break-inside:avoid}.yai-landing .ip-card{padding:12px;margin:12px 0}} /* Standalone campaign shell */ .yai-brand{padding-top:22px;padding-bottom:18px}.yai-brand a{display:inline-block}.yai-brand-logo{width:120px;height:auto;max-height:60px;object-fit:contain}.yai-standalone{padding-bottom:110px}.yai-sticky{position:fixed;bottom:22px;right:24px;z-index:1000;display:flex;gap:10px;padding:10px;border-radius:999px;background:var(--ig-navy);box-shadow:0 8px 35px #15163f40}.yai-sticky .ig-btn{font-size:14px}.yai-standalone .yai-disclaimer{border-top:1px solid var(--ih-line);padding-top:24px}@media(max-width:600px){.yai-sticky{bottom:0;left:0;right:0;border-radius:18px 18px 0 0;padding:12px 12px calc(12px + env(safe-area-inset-bottom));gap:8px}.yai-sticky .ig-btn{flex:1;padding:12px 10px;min-width:0;justify-content:center;font-size:13px}.yai-brand{padding-top:16px;padding-bottom:12px}.yai-brand-logo{width:104px}.yai-hero{padding-top:30px}}@media print{.yai-sticky,.yai-brand{display:none!important}} /* Campaign layout polish: full-width rhythm and balanced desktop columns. */ .yai-landing .ix-h2{margin-bottom:26px}.yai-landing .ix-h2+p{margin-top:0;margin-bottom:26px;line-height:1.75}.yai-landing .yai-faq:first-of-type{margin-top:30px}.yai-final .ix-h2{margin-bottom:24px}.yai-final>p{margin:0 0 30px;max-width:70ch;line-height:1.75}.yai-landing .yai-grid{margin-top:30px;margin-bottom:30px}.yai-landing .yai-list{margin-top:24px;margin-bottom:28px}.yai-landing .yai-grid .ip-card{gap:16px}.yai-landing .yai-faq p{margin-top:18px}.yai-count{max-width:none}.yai-count span{line-height:1.6} @media(min-width:1024px){ .yai-landing .ix-sec{padding-top:80px;padding-bottom:80px} .yai-hero>.ig-container{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);column-gap:64px;align-items:start} .yai-hero .ix-kicker,.yai-hero h1,.yai-hero .ix-lead{grid-column:1}.yai-hero .ix-kicker{grid-row:1}.yai-hero h1{grid-row:2;font-size:clamp(48px,5vw,70px);max-width:none;margin-bottom:24px}.yai-hero .ix-lead{grid-row:3;max-width:none} .yai-hero>.ig-container>p:not([class]){grid-column:2;grid-row:1 / span 2;background:#fff;border:1px solid var(--ih-line);border-radius:24px;padding:32px;margin:0;line-height:1.8;font-size:20px;align-self:end} .yai-hero .yai-count{grid-column:2;grid-row:3;margin:0;padding:26px}.yai-count strong{white-space:nowrap;font-size:clamp(20px,2.05vw,29px)} .yai-hero .ix-btns{grid-column:1;grid-row:4;margin-top:24px}.yai-hero .yai-small{grid-column:2;grid-row:4;margin-top:24px} .yai-landing>section:nth-of-type(2) .yai-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.yai-landing>section:nth-of-type(2) .ip-card{padding:24px}.yai-landing>section:nth-of-type(2) h3{font-size:21px;line-height:1.35} .yai-landing>section:nth-of-type(3)>.ig-container{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px 64px}.yai-landing>section:nth-of-type(3) h2{grid-column:1;grid-row:1}.yai-landing>section:nth-of-type(3) .yai-list{grid-column:2;grid-row:1 / span 2;margin-top:0}.yai-landing>section:nth-of-type(3) p{grid-column:1;line-height:1.8} .yai-landing #yai-checklist .yai-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.yai-landing #yai-checklist>.ig-container>p{max-width:80ch}.yai-landing #yai-checklist>.ig-container>h3{margin-top:48px}.yai-landing #yai-checklist>.ig-container>.yai-list{columns:2;column-gap:64px}.yai-landing #yai-checklist>.ig-container>.yai-list li{break-inside:avoid;padding-bottom:12px} .yai-landing .yai-steps{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 52px;margin-top:36px;margin-bottom:36px}.yai-steps li{padding-right:20px;line-height:1.75}.yai-landing #yai-help .yai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.yai-final{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:16px 60px;align-items:center}.yai-final h2{grid-column:1;grid-row:1 / span 2;margin-bottom:0}.yai-final>p{grid-column:2;margin-bottom:12px}.yai-final>.ig-btn{grid-column:2;justify-self:start} } @media(min-width:760px) and (max-width:1023px){.yai-count strong{white-space:nowrap;font-size:28px}} @media print{.yai-hero>.ig-container,.yai-final,.yai-landing .yai-steps{display:block}}