/* ═══════════════════════════════════════════════════════════════════════════ IIVPA 2026 — design-system layer ═══════════════════════════════════════════════════════════════════════════ ADDITIVE. Loaded LAST, after the Webflow export. Nothing in iivpa-com-edd07f.webflow.css is edited — this layer overrides it. The whole look is gated behind `html.ii-2026`, set by the inline boot script in , so `?ui=classic` (or removing the class) restores the untouched Webflow export. Same discipline as Visual Suspect's vs-* layers. Design language borrowed from the sibling sites: · Visual Suspect — liquid glass (blur + saturate + inset hairline), crisp small radii, dark blurred panels over content · Generetial — deep-ink surfaces, a bright cool accent, oversized display type, looped kinetic text Accent resolution. The export shipped three competing accents: --accent--primary-1: #ff7b43 (webflow buttons) --accent-orange: #FF7F50 (custom.css accordion) #40E0D0 (hard-coded in the logo mark) The turquoise is the real brand mark, so it leads — deepened to pass contrast on white — with the warm orange kept as a secondary energy accent for numerals and hovers. Sections 01 fonts 02 tokens (light) 03 tokens (dark) 04 reset / base 05 fluid type scale 06 primitives — glass, buttons, pills, cards 07 motion — reveal, marquee, kinetic 08 webflow overrides 09 utilities 10 reduced motion / print ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 01 fonts ───────────────────────────────────────────────────────────── */ /* Display face — Archivo Black, self-hosted woff2, borrowed from Visual Suspect's vs-fonts bundle. latin + latin-ext only. */ @font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ArchivoBlack-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ArchivoBlack-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* The export declares Onest with no font-display, so a slow font blocks first paint. Re-declaring the same families with `swap` wins on cascade order. */ /* Onest is woff2-only, like Archivo Black above. These four faces shipped as hinted TTFs — ~370 KB for the family, on a font that renders every word of body copy on every page. The same outlines as woff2 are ~131 KB, a 65% saving on the critical path. No TTF fallback: woff2 has been supported by every shipping browser since 2016, and listing a fallback source is not free — a browser that fetches more than the first supported entry pulls the 280 KB this change removed. The .ttf files remain in fonts/ but nothing references them. Regenerate with: fontTools.ttLib.TTFont(src); font.flavor='woff2'; font.save(dst) */ @font-face { font-family: 'Onest'; src: url('../fonts/OnestRegular1602-hint.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest'; src: url('../fonts/OnestMedium1602-hint.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest'; src: url('../fonts/OnestBold1602-hint.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest'; src: url('../fonts/OnestLight1602-hint.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } /* ─── 02 tokens (light) ──────────────────────────────────────────────────── */ .ii-2026 { /* ·· brand ·············································································· */ --ii-accent: #0FB9A6; /* deepened turquoise — UI, borders, large text */ --ii-accent-bright: #40E0D0; /* the logo turquoise — glow, dark surfaces */ --ii-accent-ink: #06655C; /* accessible turquoise for body-size text */ --ii-accent-wash: #E6FBF8; /* tinted surface */ --ii-warm: #FF7B43; /* secondary energy accent — numerals, hovers */ --ii-warm-ink: #B4430F; /* ·· ink ················································································ */ --ii-ink: #0B0D0E; /* headlines */ --ii-ink-2: #2C3134; /* body */ --ii-ink-3: #5C6469; /* secondary */ --ii-ink-4: #8B9498; /* meta, captions */ /* ·· surfaces ··········································································· */ --ii-bg: #F7F8F8; /* page */ --ii-surface: #FFFFFF; /* cards */ --ii-surface-2: #F0F2F2; /* sunken */ --ii-deep: #0B0D0E; /* inverted panels */ --ii-deep-2: #14181A; --ii-hairline: rgba(11, 13, 14, 0.09); --ii-hairline-2: rgba(11, 13, 14, 0.16); /* ·· liquid glass — the Visual Suspect vs-menu family ····································· */ --ii-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52)); --ii-glass-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72)); --ii-glass-line: rgba(255, 255, 255, 0.7); --ii-glass-blur: blur(26px) saturate(180%); --ii-glass-shadow: 0 10px 34px rgba(8, 10, 18, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(255, 255, 255, 0.28); /* dark frosted panel — mega menu, command palette, inverted sections */ --ii-panel: rgba(20, 24, 26, 0.52); --ii-panel-blur: blur(46px) saturate(160%) brightness(1.1); --ii-panel-line: rgba(255, 255, 255, 0.11); --ii-panel-card-line: rgba(255, 255, 255, 0.14); /* Text on dark panels. These sit over a BLURRED light page, which lifts the effective background well above the panel's own alpha — so the dim/label steps are set from measured contrast on the lightest case, not from how they look over solid black. */ --ii-on-panel: rgba(255, 255, 255, 0.96); --ii-on-panel-dim: rgba(255, 255, 255, 0.72); --ii-on-panel-label: rgba(255, 255, 255, 0.62); /* ·· elevation ·········································································· */ --ii-e1: 0 1px 2px rgba(11, 13, 14, 0.05), 0 2px 8px rgba(11, 13, 14, 0.04); --ii-e2: 0 2px 6px rgba(11, 13, 14, 0.06), 0 12px 28px rgba(11, 13, 14, 0.07); --ii-e3: 0 8px 20px rgba(11, 13, 14, 0.08), 0 28px 60px rgba(11, 13, 14, 0.10); --ii-glow: 0 0 0 1px rgba(15, 185, 166, 0.28), 0 8px 30px rgba(15, 185, 166, 0.20); /* ·· radii — deliberately small; crisp glass, not bubbly ·································· */ --ii-r-xs: 6px; --ii-r-sm: 9px; --ii-r: 12px; --ii-r-lg: 16px; --ii-r-xl: 22px; --ii-r-pill: 999px; /* ·· motion ············································································· */ --ii-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ii-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ii-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); --ii-t-fast: 0.18s; --ii-t: 0.32s; --ii-t-slow: 0.6s; /* ·· type ··············································································· */ --ii-font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ii-font-display: 'Archivo Black', 'Onest', -apple-system, sans-serif; --ii-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; /* ·· layout ············································································· */ --ii-container: 1240px; /* The wide register: sections that anchor content to the viewport sides rather than the reading column. Fluid so the "edge" is the real edge on laptops and only softly inset on very wide desktops. */ --ii-container-wide: 1680px; --ii-gutter: clamp(20px, 5vw, 56px); --ii-section-y: clamp(64px, 9vw, 148px); color-scheme: light; } /* ─── 03 tokens (dark) ───────────────────────────────────────────────────── */ /* Two entry points, both required: an explicit choice stamps data-theme, and the default "system" setting stamps nothing, so prefers-color-scheme has to carry it — guarded so an explicit `light` still wins. */ .ii-2026[data-theme='dark'], .ii-2026.ii-dark { --ii-ink: #F4F6F6; --ii-ink-2: #C8CFD1; --ii-ink-3: #9AA3A7; --ii-ink-4: #7E888C; --ii-bg: #0B0D0E; --ii-surface: #14181A; --ii-surface-2: #1B2023; --ii-deep: #050708; --ii-deep-2: #0E1113; --ii-hairline: rgba(255, 255, 255, 0.10); --ii-hairline-2: rgba(255, 255, 255, 0.18); --ii-accent: #40E0D0; --ii-accent-ink: #6FEDE0; --ii-accent-wash: rgba(64, 224, 208, 0.10); --ii-warm: #FF8F5E; --ii-warm-ink: #FFB08A; --ii-glass: linear-gradient(135deg, rgba(38, 44, 47, 0.82), rgba(24, 29, 31, 0.62)); --ii-glass-hover: linear-gradient(135deg, rgba(52, 60, 64, 0.92), rgba(32, 38, 41, 0.76)); --ii-glass-line: rgba(255, 255, 255, 0.13); --ii-glass-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 1px rgba(255, 255, 255, 0.04); --ii-panel: rgba(10, 13, 14, 0.66); --ii-panel-line: rgba(255, 255, 255, 0.09); --ii-e1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); --ii-e2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4); --ii-e3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 28px 60px rgba(0, 0, 0, 0.55); --ii-glow: 0 0 0 1px rgba(64, 224, 208, 0.3), 0 8px 34px rgba(64, 224, 208, 0.22); color-scheme: dark; } @media (prefers-color-scheme: dark) { .ii-2026:not([data-theme='light']) { --ii-ink: #F4F6F6; --ii-ink-2: #C8CFD1; --ii-ink-3: #9AA3A7; --ii-ink-4: #7E888C; --ii-bg: #0B0D0E; --ii-surface: #14181A; --ii-surface-2: #1B2023; --ii-deep: #050708; --ii-deep-2: #0E1113; --ii-hairline: rgba(255, 255, 255, 0.10); --ii-hairline-2: rgba(255, 255, 255, 0.18); --ii-accent: #40E0D0; --ii-accent-ink: #6FEDE0; --ii-accent-wash: rgba(64, 224, 208, 0.10); --ii-warm: #FF8F5E; --ii-warm-ink: #FFB08A; --ii-glass: linear-gradient(135deg, rgba(38, 44, 47, 0.82), rgba(24, 29, 31, 0.62)); --ii-glass-hover: linear-gradient(135deg, rgba(52, 60, 64, 0.92), rgba(32, 38, 41, 0.76)); --ii-glass-line: rgba(255, 255, 255, 0.13); --ii-glass-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 1px rgba(255, 255, 255, 0.04); --ii-panel: rgba(10, 13, 14, 0.66); --ii-panel-line: rgba(255, 255, 255, 0.09); --ii-e1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); --ii-e2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4); --ii-e3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 28px 60px rgba(0, 0, 0, 0.55); --ii-glow: 0 0 0 1px rgba(64, 224, 208, 0.3), 0 8px 34px rgba(64, 224, 208, 0.22); color-scheme: dark; } } /* ─── 04 reset / base ───────────────────────────────────────────────────── */ /* index.html no longer loads webflow.css, and that is where the global `box-sizing: border-box` used to come from. Without it .ii-container's padding is ADDED to its max-width, which pushed the page 112px wider than the viewport and produced a horizontal scrollbar. normalize.css does not set it. Scoped to the layer so classic mode keeps the export's own reset. */ .ii-2026 *, .ii-2026 *::before, .ii-2026 *::after { box-sizing: border-box; } .ii-2026 body { background-color: var(--ii-bg) !important; color: var(--ii-ink-2); font-family: var(--ii-font) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color var(--ii-t) var(--ii-ease), color var(--ii-t) var(--ii-ease); overflow-x: hidden; } .ii-2026 ::selection { background: var(--ii-accent-bright); color: #05201D; } /* Focus: visible for keyboards, invisible for mouse. */ .ii-2026 :focus-visible { outline: 2px solid var(--ii-accent); outline-offset: 3px; border-radius: var(--ii-r-xs); } .ii-2026 :focus:not(:focus-visible) { outline: none; } /* Skip link — first tab stop on every page. */ .ii-skip { position: fixed; top: 10px; left: 50%; z-index: 10000; padding: 10px 20px; font: 600 14px/1 var(--ii-font); color: var(--ii-ink); background: var(--ii-surface); border: 1px solid var(--ii-hairline-2); border-radius: var(--ii-r-pill); box-shadow: var(--ii-e2); text-decoration: none; transform: translate(-50%, -150%); transition: transform var(--ii-t) var(--ii-ease-spring); } .ii-skip:focus { transform: translate(-50%, 0); } /* Scrollbar — subtle, themed. */ .ii-2026 * { scrollbar-color: var(--ii-hairline-2) transparent; scrollbar-width: thin; } .ii-2026 ::-webkit-scrollbar { width: 11px; height: 11px; } .ii-2026 ::-webkit-scrollbar-track { background: transparent; } .ii-2026 ::-webkit-scrollbar-thumb { background: var(--ii-hairline-2); border-radius: var(--ii-r-pill); border: 3px solid transparent; background-clip: content-box; } .ii-2026 ::-webkit-scrollbar-thumb:hover { background-color: var(--ii-ink-4); background-clip: content-box; } /* ─── 05 fluid type scale ───────────────────────────────────────────────── */ /* One scale, applied to both semantic tags and the export's display-* classes so the Webflow markup inherits it without being rewritten. The TAG lists are wrapped in :where() so this base layer contributes only the specificity of `.ii-2026` itself (0,1,0). Without that, `.ii-2026 p` (0,1,1) quietly out-specifies every single-class component rule — which is exactly what happened: `.ii-empty-title`, `.ii-mega-cta-title` and friends inherited body colour and size and rendered dark-on-dark or at the wrong scale. At (0,1,0) a component class ties and wins on source order, and the load order is fixed: iivpa-2026 → iivpa-chrome → iivpa-sections. NOT :where(.ii-2026) too — that would drop to (0,0,0) and lose to the bare `p {}` / `h2 {}` element rules in the Webflow CSS that contact.html and the blog pages still load. */ .ii-2026 :where(h1, .display-1, h2, .display-2, h3, .display-3, h4, .display-4, h5, h6) { color: var(--ii-ink); font-family: var(--ii-font-display); font-weight: 400; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; } .ii-2026 :where(h1, .display-1) { font-size: clamp(2.5rem, 6.4vw, 5.25rem); line-height: 0.98; letter-spacing: -0.04em; } .ii-2026 :where(h2, .display-2) { font-size: clamp(2rem, 4.6vw, 3.6rem); } .ii-2026 :where(h3, .display-3) { font-size: clamp(1.6rem, 3.2vw, 2.6rem); } .ii-2026 :where(h4, .display-4) { font-size: clamp(1.3rem, 2.2vw, 1.85rem); line-height: 1.12; } .ii-2026 :where(h5) { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.2; letter-spacing: -0.02em; } .ii-2026 :where(h6) { font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; } .ii-2026 :where(p, .paragraph-default) { color: var(--ii-ink-2); font-family: var(--ii-font); font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.65; letter-spacing: -0.005em; } .ii-2026 :where(.paragraph-large) { font-size: clamp(1.075rem, 1.5vw, 1.3rem); line-height: 1.55; } /* Eyebrow / kicker — the small mono label above section titles. */ .ii-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; font: 500 12px/1 var(--ii-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ii-ink-4); } .ii-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--ii-accent); } .ii-eyebrow.is-accent { color: var(--ii-accent-ink); } /* A turquoise slash, the wordmark's motif, reusable as a text accent. */ .ii-slash { color: var(--ii-accent); font-family: var(--ii-font-display); } /* ─── 06 primitives ─────────────────────────────────────────────────────── */ .ii-container { width: 100%; max-width: var(--ii-container); margin-inline: auto; padding-inline: var(--ii-gutter); } /* Wide register — content reaches toward the viewport sides. The default container stays the reading width; this is for compositions that use the whole canvas (hero poles, edge-anchored splits, stat strips). */ .ii-container.is-wide { max-width: var(--ii-container-wide); } .ii-section { padding-block: var(--ii-section-y); position: relative; } /* ·· glass surface ·· the single most reused primitive ······················ */ .ii-glass { background: var(--ii-glass); border: 1px solid var(--ii-glass-line); -webkit-backdrop-filter: var(--ii-glass-blur); backdrop-filter: var(--ii-glass-blur); box-shadow: var(--ii-glass-shadow); border-radius: var(--ii-r); } .ii-glass-hover:hover { background: var(--ii-glass-hover); } /* Dark frosted panel over content. */ .ii-panel { background: var(--ii-panel); border: 1px solid var(--ii-panel-line); -webkit-backdrop-filter: var(--ii-panel-blur); backdrop-filter: var(--ii-panel-blur); border-radius: var(--ii-r-lg); color: var(--ii-on-panel); } /* ·· buttons ·············································································· */ .ii-2026 .btn-primary, .ii-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px !important; border: 1px solid transparent !important; border-radius: var(--ii-r-pill) !important; background: var(--ii-ink) !important; color: var(--ii-bg) !important; font-family: var(--ii-font) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: -0.01em; text-decoration: none; box-shadow: var(--ii-e1) !important; transition: transform var(--ii-t-fast) var(--ii-ease), box-shadow var(--ii-t) var(--ii-ease), background-color var(--ii-t-fast) var(--ii-ease); will-change: transform; } .ii-2026 .btn-primary:hover, .ii-btn:hover { transform: translateY(-2px); box-shadow: var(--ii-e2) !important; background: var(--ii-ink) !important; } .ii-2026 .btn-primary:active, .ii-btn:active { transform: translateY(0); } /* Accent variant — the primary conversion button. */ .ii-btn-accent { background: var(--ii-accent) !important; color: #04231F !important; } .ii-btn-accent:hover { box-shadow: var(--ii-glow) !important; background: var(--ii-accent-bright) !important; } /* Secondary — glass outline. */ .ii-2026 .btn-secondary, .ii-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px !important; border-radius: var(--ii-r-pill) !important; background: var(--ii-glass) !important; border: 1px solid var(--ii-hairline-2) !important; -webkit-backdrop-filter: var(--ii-glass-blur); backdrop-filter: var(--ii-glass-blur); color: var(--ii-ink) !important; font-family: var(--ii-font) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: -0.01em; text-decoration: none; transition: transform var(--ii-t-fast) var(--ii-ease), border-color var(--ii-t) var(--ii-ease), background var(--ii-t) var(--ii-ease); } .ii-2026 .btn-secondary:hover, .ii-btn-ghost:hover { transform: translateY(-2px); border-color: var(--ii-accent) !important; background: var(--ii-glass-hover) !important; } /* Arrow that slides on hover — used inside both button variants. */ .ii-arrow { display: inline-block; transition: transform var(--ii-t) var(--ii-ease-spring); } .ii-btn:hover .ii-arrow, .ii-btn-ghost:hover .ii-arrow, .ii-2026 .btn-primary:hover .ii-arrow { transform: translateX(4px); } /* ·· pill / chip ·········································································· */ .ii-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: var(--ii-r-pill); background: var(--ii-glass); border: 1px solid var(--ii-glass-line); -webkit-backdrop-filter: var(--ii-glass-blur); backdrop-filter: var(--ii-glass-blur); box-shadow: var(--ii-glass-shadow); font: 500 13px/1 var(--ii-font); color: var(--ii-ink-2); white-space: nowrap; text-decoration: none; } .ii-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ii-accent); box-shadow: 0 0 0 3px var(--ii-accent-wash); flex: none; } /* Live dot — the "available" signal in the hero. */ .ii-pill-dot.is-live { animation: ii-pulse 2.4s var(--ii-ease) infinite; } @keyframes ii-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(15, 185, 166, 0.45); } 50% { box-shadow: 0 0 0 6px rgba(15, 185, 166, 0); } } /* ·· card ················································································· */ .ii-card { position: relative; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--ii-r-lg); background: var(--ii-surface); border: 1px solid var(--ii-hairline); box-shadow: var(--ii-e1); transition: transform var(--ii-t) var(--ii-ease), box-shadow var(--ii-t) var(--ii-ease), border-color var(--ii-t) var(--ii-ease); } .ii-card:hover { transform: translateY(-4px); box-shadow: var(--ii-e3); border-color: var(--ii-hairline-2); } /* A hairline that lights up in accent on hover — the shared card motif. */ .ii-card-rule { position: absolute; inset: auto 0 0 0; height: 2px; border-radius: 0 0 var(--ii-r-lg) var(--ii-r-lg); background: linear-gradient(90deg, var(--ii-accent), var(--ii-warm)); transform: scaleX(0); transform-origin: left; transition: transform var(--ii-t-slow) var(--ii-ease-out); } .ii-card:hover .ii-card-rule { transform: scaleX(1); } /* ·· numeral — the 01/ 02/ motif already in the export ····················· */ .ii-num { font-family: var(--ii-font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1; color: var(--ii-ink-4); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .ii-num span { color: var(--ii-warm); } /* ·· aurora backdrop — the hero's ambient light ····························· */ .ii-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .ii-aurora::before, .ii-aurora::after { content: ''; position: absolute; width: 62vw; height: 62vw; min-width: 420px; min-height: 420px; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; } .ii-aurora::before { top: -26vw; left: -12vw; background: radial-gradient(circle at 50% 50%, var(--ii-accent-bright) 0%, transparent 68%); animation: ii-drift-a 22s var(--ii-ease) infinite alternate; } .ii-aurora::after { top: -14vw; right: -18vw; background: radial-gradient(circle at 50% 50%, var(--ii-warm) 0%, transparent 66%); opacity: 0.32; animation: ii-drift-b 27s var(--ii-ease) infinite alternate; } @keyframes ii-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vw, 5vw, 0) scale(1.14); } } @keyframes ii-drift-b { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(-6vw, 7vw, 0) scale(1); } } /* Fine grid overlay — reads as "engineered", cheap to render. */ .ii-grid-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(to right, var(--ii-hairline) 1px, transparent 1px), linear-gradient(to bottom, var(--ii-hairline) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%); opacity: 0.7; } /* ─── 07 motion ─────────────────────────────────────────────────────────── */ /* Scroll reveal. Elements start shifted; js/iivpa-reveal.js adds .is-in. `.ii-reveal` alone is safe with JS off — see the no-js fallback below. */ .ii-reveal { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity var(--ii-t-slow) var(--ii-ease-out), transform var(--ii-t-slow) var(--ii-ease-out); transition-delay: var(--ii-reveal-delay, 0ms); } .ii-reveal.is-in { opacity: 1; transform: none; } /* Never trap content: if the observer never runs, everything is visible. */ html:not(.ii-js) .ii-reveal { opacity: 1; transform: none; } /* Kinetic headline — words rise out of a clipping mask, staggered. No display of its own: the class lands on the heading itself, and forcing `display:inline` there collapsed the heading onto the preceding eyebrow's line. The word spans below are already inline-block. */ .ii-kinetic .ii-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; } .ii-kinetic .ii-word > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 0.85s var(--ii-ease-out); transition-delay: var(--ii-word-delay, 0ms); } .ii-kinetic.is-in .ii-word > span { transform: none; } html:not(.ii-js) .ii-kinetic .ii-word > span { transform: none; } /* Looped marquee — the Generetial huge-moving-text idea, CSS-only. Two identical tracks translate -50% in lockstep, so the seam never shows. */ .ii-marquee { position: relative; display: flex; overflow: hidden; user-select: none; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ii-marquee-track { display: flex; flex: none; align-items: center; gap: clamp(28px, 4vw, 64px); padding-right: clamp(28px, 4vw, 64px); animation: ii-marquee var(--ii-marquee-dur, 32s) linear infinite; will-change: transform; } .ii-marquee:hover .ii-marquee-track { animation-play-state: paused; } @keyframes ii-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } } .ii-marquee-item { display: inline-flex; align-items: center; gap: 14px; font-family: var(--ii-font-display); /* A supporting band, not a headline — the first pass ran to ~50px at desktop and competed with the section titles underneath it. */ font-size: clamp(1.2rem, 2.6vw, 2.05rem); line-height: 1; letter-spacing: -0.035em; color: var(--ii-ink); white-space: nowrap; } /* Outline variant: strong enough to read as a deliberate alternation. A stroke in --ii-hairline-2 was effectively invisible against the band. */ .ii-marquee-item.is-outline { color: transparent; -webkit-text-stroke: 1.1px var(--ii-ink-4); } .ii-marquee-sep { color: var(--ii-accent); flex: none; } .ii-marquee-sep svg { display: block; width: clamp(9px, 1vw, 13px); height: clamp(9px, 1vw, 13px); } /* ─── 08 webflow overrides ──────────────────────────────────────────────── */ /* ·· legacy variable bridge ································································ custom.css declares its own palette on :root and uses it for the services accordion. Re-pointing those five names at the new tokens makes every rule already written against them theme-aware for free — no edits to custom.css, and the accordion follows dark mode without knowing dark mode exists. */ .ii-2026 { --accent-orange: var(--ii-warm); --text-black: var(--ii-ink); --text-grey: var(--ii-ink-3); --bg-off-white: var(--ii-bg); --border-color: var(--ii-hairline-2); } /* The export's entrance animations rotate the hero image 110° on X and scale headlines from 0 — driven by webflow.js ix2. When that data is missing for a page the elements stay invisible forever. This layer takes over reveals, so neutralise the inline initial states. `!important` is required: they are inline styles on the elements themselves. */ .ii-2026 [data-w-id] { opacity: 1 !important; transform: none !important; } /* …but keep our own animated primitives free to move. */ .ii-2026 .ii-reveal:not(.is-in) { opacity: 0 !important; transform: translate3d(0, 22px, 0) !important; } .ii-2026 .ii-kinetic .ii-word > span { transform: translate3d(0, 105%, 0) !important; } .ii-2026 .ii-kinetic.is-in .ii-word > span { transform: none !important; } .ii-2026 .ii-aurora::before, .ii-2026 .ii-aurora::after { opacity: revert; } /* Section backgrounds: the export hard-codes near-white and accent fills. */ .ii-2026 .bg-secondary-3, .ii-2026 .bg-neutral-200, .ii-2026 .bg-neutral-300 { background-color: var(--ii-bg) !important; } .ii-2026 .bg-neutral-100 { background-color: var(--ii-surface) !important; } /* The big accent block becomes an inverted deep panel — far fresher than a flat orange field, and it sets up the dark/light rhythm down the page. */ .ii-2026 .bg-accent-1 { background-color: var(--ii-deep) !important; color: var(--ii-on-panel); } .ii-2026 .bg-accent-1 h1, .ii-2026 .bg-accent-1 h2, .ii-2026 .bg-accent-1 h3, .ii-2026 .bg-accent-1 h4, .ii-2026 .bg-accent-1 .display-1, .ii-2026 .bg-accent-1 .display-2, .ii-2026 .bg-accent-1 .display-3, .ii-2026 .bg-accent-1 .display-4 { color: #FFFFFF; } .ii-2026 .bg-accent-1 p { color: var(--ii-on-panel-dim); } .ii-2026 .color-accent-1 { color: var(--ii-warm) !important; } /* Links */ .ii-2026 a { transition: color var(--ii-t-fast) var(--ii-ease); } .ii-2026 .text-decoration-none { text-decoration: none; } /* Kill the Webflow badge for good (the export only display:none'd it). */ .ii-2026 .w-webflow-badge { display: none !important; } /* Images: never overflow, never distort. */ .ii-2026 img { max-width: 100%; height: auto; } .ii-2026 .image.cover { object-fit: cover; } /* ─── 09 utilities ──────────────────────────────────────────────────────── */ .ii-stack { display: flex; flex-direction: column; } .ii-row { display: flex; align-items: center; flex-wrap: wrap; } .ii-gap-8 { gap: 8px; } .ii-gap-12 { gap: 12px; } .ii-gap-16 { gap: 16px; } .ii-gap-24 { gap: 24px; } .ii-gap-32 { gap: 32px; } .ii-gap-48 { gap: 48px; } .ii-center { text-align: center; } .ii-mt-0 { margin-top: 0; } .ii-mb-0 { margin-bottom: 0; } .ii-measure { max-width: 62ch; } .ii-measure-sm { max-width: 46ch; } .ii-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Responsive grid used by services / work / numbers. */ .ii-grid { display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ii-col, 280px)), 1fr)); } /* ─── 10 reduced motion / print ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ii-2026 *, .ii-2026 *::before, .ii-2026 *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .ii-reveal { opacity: 1 !important; transform: none !important; } .ii-2026 .ii-kinetic .ii-word > span { transform: none !important; } .ii-marquee-track { animation: none !important; } .ii-aurora::before, .ii-aurora::after { animation: none !important; } } @media print { .ii-nav, .ii-mega, .ii-search-fab, .ii-footer, .ii-skip { display: none !important; } .ii-2026 body { background: #fff !important; color: #000 !important; } .ii-reveal { opacity: 1 !important; transform: none !important; } }