/* =========================================================================== Wild — Craft, Engineered. Implemented from Figma (fileKey Ef7ULPmEOmffnS1gzSvvY1, node 31020:2834). Vanilla CSS, no build step. Assembled from per-section builds under .figma-build/ (kept out of the repo; see git history if needed). =========================================================================== */ :root{ --nav-h: 56px; } *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;} body{ margin:0; color:#0a0a0a; font-family:'Sneak','Helvetica Neue',Arial,sans-serif; padding-top: var(--nav-h); /* Site-wide: never leave a single word dangling alone on the last line of a wrapped block — the browser's own line-breaking algorithm rebalances earlier line breaks so the last line always picks up at least one more word from the line above it, but only when the paragraph actually has enough words to redistribute (a genuinely single trailing word, or one long unbreakable word, stays as-is — there's nothing to rebalance against). Inherited, so this covers every block of text on the site by default rather than needing a class on each one; a component can still opt back into plain wrapping with text-wrap: wrap if a specific spot needs it. Unsupported browsers just fall back to normal wrapping. */ text-wrap: pretty; /* faint graph-paper grid, visible through every section below since their own backgrounds are transparent */ background-color:#fff; background-image: linear-gradient(to right, rgba(10,10,10,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(10,10,10,0.06) 1px, transparent 1px); background-size: 32px 32px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } /* Anchor targets for .site-nav's links — keeps a jump (native hash or the brand's own click handlers elsewhere) from landing exactly under the fixed bar. */ #practices, #approach, #about, #contact, #consulting, #engineering, #design, #growth{ scroll-margin-top: var(--nav-h); } img{max-width:100%;} a{color:inherit;} /* Visually hidden but still announced — used to keep a heading's real trailing period in the accessible text while .heading-dot below shows a pixel-square stand-in for it visually. */ .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; } /* A section heading's closing period, drawn as a small pixel square instead of a dot — sized in em so it scales with whatever heading it sits in. */ .heading-dot{ display: inline-block; width: 0.26em; height: 0.26em; margin-left: 0.16em; background: #1264f5; vertical-align: 0.02em; } /* Native cursor stays visible everywhere — the reference site (craft.wild.as) never hides or replaces it. What reads as an "animated cursor" there is a fixed full-page canvas sitting behind all content that deposits fading heat wherever the pointer goes, plus an idle wander animation; see assets/js/cursor-field.js (site- wide) and assets/js/squares.js (the header's own world map, which layers a second, scoped heat effect on top). */ /* Site-wide reactive pixel field (assets/js/cursor-field.js). Fixed to the viewport and negative z-index so it paints behind every section without needing to touch #main's own positioning — sections here are already transparent (see the body background above), so the field shows through everywhere, exactly like the reference. */ #cursorField{ position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; } @media (prefers-reduced-motion: reduce){ #cursorField{ display: none; } } /* Any footer-game instance reaching 'play' adds this to (see footer-game.js's startGame()/endGame()) — the reactive trail/idle Snake would otherwise drift across the game board itself while you're trying to actually play, so it's hidden for the duration. */ body.fg-playing #cursorField{ display: none; } /* ========================================================================== Site nav — layout copied from mistral.ai's own fixed header (inspected live in a browser, since it's client-rendered): a full-bleed bar, divided into bordered cells, pinned through the whole page with no hide-on-scroll. Colour/type use this site's own brand rather than their dark navy — see assets/js/site-nav.js for the mobile toggle. ========================================================================== */ .site-nav{ position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-h); z-index: 1000; background: #fff; border-bottom: 1px solid rgba(10, 10, 10, 0.12); font-family: 'Sneak', 'Helvetica Neue', Arial, sans-serif; } .site-nav__inner{ display: flex; align-items: stretch; height: 100%; } .site-nav__brand{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 0 22px; border-right: 1px solid rgba(10, 10, 10, 0.12); font-family: 'Sneak', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0.01em; color: #0a0a0a; text-decoration: none; white-space: nowrap; } /* The "Squares Part" mark — two overlapping squares with a fixed third-tone intersection; the same 3-tier blue already drawn by squares.js/cursor-field.js's own 5-tier ladder. Hovering the brand link parts the two outer squares around the shared core, same interaction picked out of the logo-concepts round; pressing it dips slightly, same convention every button on the site already uses. */ .site-nav__mark{ width: 22px; height: 22px; flex-shrink: 0; overflow: visible; transition: transform 0.15s ease; } .site-nav__mark .m-a{ fill: #0d3fc0; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); transform-box: fill-box; transform-origin: top left; } .site-nav__mark .m-b{ fill: #1264f5; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); transform-box: fill-box; transform-origin: bottom right; } .site-nav__mark .m-join{ fill: #cfe0fb; } .site-nav__brand:hover .site-nav__mark .m-a{ transform: translate(-3px, -3px); } .site-nav__brand:hover .site-nav__mark .m-b{ transform: translate(3px, 3px); } .site-nav__brand:active .site-nav__mark{ transform: scale(0.9); } @media (prefers-reduced-motion: reduce){ .site-nav__mark, .site-nav__mark .m-a, .site-nav__mark .m-b{ transition: none !important; transform: none !important; } } .site-nav__links{ display: flex; align-items: center; gap: 32px; margin: 0; padding: 0 28px; list-style: none; } .site-nav__links a{ display: inline-flex; align-items: center; font-size: 15px; font-weight: 400; color: #5a5a5a; text-decoration: none; transition: color 0.15s ease; } .site-nav__links a:hover{ color: #0a0a0a; } .site-nav__contact{ display: flex; align-items: center; justify-content: center; margin-left: auto; padding: 0 28px; border-left: 1px solid rgba(10, 10, 10, 0.12); background: #1264f5; font-size: 15px; font-weight: 500; color: #fff; text-decoration: none; white-space: nowrap; transition: background-color 0.3s ease; } .site-nav__contact:hover{ background: #0a0a0a; } .site-nav__toggle{ display: none; position: relative; align-items: center; justify-content: center; width: var(--nav-h); flex-shrink: 0; margin-left: auto; border: 0; border-left: 1px solid rgba(10, 10, 10, 0.12); background: none; padding: 0; cursor: pointer; } /* Same pixelarticons pack as every other icon on the site — this used to be two plain CSS bars rotating into an X, which worked but broke the site-wide "icons only come from the pixel pack" rule. Both icons sit stacked in the same spot; toggling just crossfades + scales between them instead of morphing lines. */ .site-nav__toggle-icon{ position: absolute; width: 20px; height: 20px; color: #0a0a0a; transition: opacity 0.2s ease, transform 0.2s ease; } .site-nav__toggle-icon--close{ opacity: 0; transform: scale(0.5) rotate(-45deg); } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon--menu{ opacity: 0; transform: scale(0.5) rotate(45deg); } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon--close{ opacity: 1; transform: scale(1) rotate(0deg); } .site-nav__mobile{ display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border-bottom: 1px solid rgba(10, 10, 10, 0.12); } .site-nav__mobile.is-open{ display: flex; } .site-nav__mobile a{ padding: 16px 22px; border-top: 1px solid rgba(10, 10, 10, 0.12); font-size: 16px; color: #0a0a0a; text-decoration: none; } a.site-nav__mobile-contact{ background: #1264f5; color: #fff; font-weight: 500; } @media (max-width: 720px){ .site-nav__links, .site-nav__contact{ display: none; } .site-nav__toggle{ display: flex; } } /* Reveal-on-scroll (assets/js/reveal.js) — opacity only, no movement, matching the reference (fixaplan.com). */ .reveal { opacity: 0; transition: opacity 0.7s ease; } .reveal.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1; } } /* ========================================================================== Pixel-notched shape — reusable "stepped corner" silhouette (sampled from reference screenshots of a badge and a button) applied to every button and number badge on the page, in place of plain rounded rectangles. --notch controls the step size in px; 3 steps are cut from each corner. ========================================================================== */ .pixel-notched { --notch: 6px; clip-path: polygon( calc(var(--notch) * 3) 0, calc(100% - var(--notch) * 3) 0, calc(100% - var(--notch) * 3) var(--notch), calc(100% - var(--notch) * 2) var(--notch), calc(100% - var(--notch) * 2) calc(var(--notch) * 2), calc(100% - var(--notch)) calc(var(--notch) * 2), calc(100% - var(--notch)) calc(var(--notch) * 3), 100% calc(var(--notch) * 3), 100% calc(100% - var(--notch) * 3), calc(100% - var(--notch)) calc(100% - var(--notch) * 3), calc(100% - var(--notch)) calc(100% - var(--notch) * 2), calc(100% - var(--notch) * 2) calc(100% - var(--notch) * 2), calc(100% - var(--notch) * 2) calc(100% - var(--notch)), calc(100% - var(--notch) * 3) calc(100% - var(--notch)), calc(100% - var(--notch) * 3) 100%, calc(var(--notch) * 3) 100%, calc(var(--notch) * 3) calc(100% - var(--notch)), calc(var(--notch) * 2) calc(100% - var(--notch)), calc(var(--notch) * 2) calc(100% - var(--notch) * 2), var(--notch) calc(100% - var(--notch) * 2), var(--notch) calc(100% - var(--notch) * 3), 0 calc(100% - var(--notch) * 3), 0 calc(var(--notch) * 3), var(--notch) calc(var(--notch) * 3), var(--notch) calc(var(--notch) * 2), calc(var(--notch) * 2) calc(var(--notch) * 2), calc(var(--notch) * 2) var(--notch), calc(var(--notch) * 3) var(--notch) ); } .pixel-notched--sm { --notch: 2px; } .pixel-notched--md { --notch: 4px; } /* ========================================================================== 01-header-hero Figma: fileKey Ef7ULPmEOmffnS1gzSvvY1 Node 31020:2840 -> .hh-header (top band / hero heading) Node 31020:3801 -> .hh-strip (clipped teaser-text strip below hero) Font seen in Figma: "Sneak" (Regular) - not a system/Google font, no file was exported by Figma, so a sans-serif fallback stack is used. See notes.md. ========================================================================== */ .hh-header, .hh-strip { box-sizing: border-box; } .hh-header *, .hh-strip * { box-sizing: border-box; } /* ---- header / hero band -------------------------------------------------- */ .hh-header { width: 100%; background: transparent; } .hh-header__band { width: 100%; padding: 0 56px; /* Opaque on purpose: the site-wide cursor-field canvas sits behind every section (see #cursorField), but this text band needs solid footing under it — unlike the world map just below, which is meant to let that field's glow bleed through its ocean gaps. */ background: #fff; } .hh-header__container { max-width: 1288px; /* 1176px content + 2 x 56px side gutters, matches Figma's inner margin container */ margin: 0 auto; } .hh-header__grid { display: grid; grid-template-columns: 697.84px 436.16px; column-gap: 42px; max-width: 1176px; margin: 0 auto; padding: 28px 0 30px; } .hh-header__heading { display: flex; flex-direction: column; align-items: flex-start; } .hh-header__title { margin: 0; font-family: 'Sneak', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-style: normal; font-size: 76.44px; line-height: 70.325px; letter-spacing: -2.6754px; text-transform: uppercase; color: #0a0a0a; } .hh-header__title-line { display: block; } .hh-header__ctas { display: flex; align-items: center; gap: 24px; margin-top: 28px; } .hh-header__textlink { display: inline-flex; align-items: center; font-family: 'Sneak', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: 15px; color: #0a0a0a; text-decoration: none; } .hh-header__textlink .flip-label { text-decoration: underline; text-decoration-color: rgba(10, 10, 10, 0.3); text-underline-offset: 3px; transition: text-decoration-color 0.2s ease; } .hh-header__textlink:hover .flip-label { text-decoration-color: #0a0a0a; } .hh-header__side { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding-left: 42px; min-height: 140.64px; } .hh-header__side-divider { position: absolute; top: -0.18px; left: 0; width: 1px; height: 197px; background: rgba(10, 10, 10, 0.12); } .hh-header__tagline { margin: 0; max-width: 394.156px; font-family: 'Sneak', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 20px; line-height: 23.6px; letter-spacing: -0.2px; text-transform: uppercase; text-align: justify; color: #0a0a0a; } .hh-header__sep { display: inline-block; width: 5px; height: 5px; margin: 0 1px; background: currentColor; vertical-align: middle; } .hh-header__desc { margin: 24px 0 0; max-width: 394.156px; font-family: 'Sneak', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 13px; line-height: 18.85px; text-align: left; color: #0a0a0a; } /* Scroll colour-scrub (assets/js/hero-text-scrub.js): each character is its own span so JS can sweep it from grey to ink individually. The word wrapper stays a plain inline box — only line-wrapping needs it, nothing is styled on it directly. The short transition just smooths between scroll-tick updates; the sweep itself is driven by scroll position, not by this transition's timing. */ .htr-word { display: inline; } .htr-active .htr-char { color: #8b8b8b; transition: color 120ms linear; } .hh-header__rule { width: 100%; height: 1px; background: rgba(10, 10, 10, 0.12); } /* Interactive pixel-grid canvas, reproducing Figma node 31020:17698 — sits right below the hero text, matching that node's own 1470:707 aspect ratio (183 x 88 real cells) at rest. Squares are drawn/ animated in assets/js/squares.js; see squares-grid-data.js for the sampled source data (colors sampled directly from the real Figma export). No aspect-ratio/width:100% on the canvas here any more — squares.js now sizes it in pixels itself (floors cell size on narrow screens so the map doesn't shrink into illegible noise), so this just needs to center + crop whatever width that comes out to; display:flex + overflow:hidden do that without CSS needing to know the canvas's actual size. */ .squares-wrap { width: 100%; display: flex; justify-content: center; overflow: hidden; } #squaresCanvas { display: block; cursor: pointer; } /* ---- small screens: relax fixed widths so nothing overflows the viewport */ @media (max-width: 1280px) { .hh-header__grid { grid-template-columns: 1fr; row-gap: 32px; } .hh-header__side-divider { display: none; } .hh-header__side { padding-left: 0; } } @media (max-width: 640px) { .hh-header__band { padding: 0 24px; } .hh-header__title { font-size: 48px; line-height: 46px; letter-spacing: -1.6px; } .hh-header__spacer { height: 200px; } /* The pixel-notched button's label wraps to two lines at this width, which left "What we do" sitting beside it lopsided and cramped rather than actually side by side — stack them instead. Same align-items: stretch technique as .pf-form__footer's own submit button, so "Start a conversation" fills the full width like every other primary CTA does on mobile, not just this one hero. .hh-header__ctas needs its own explicit 100% too: its parent (.hh-header__heading) is itself a column flexbox with align-items: flex-start, so without that, .hh-header__ctas would just shrink-wrap to its own widest child instead of actually reaching the heading's full width for align-items: stretch below to stretch the button against. */ .hh-header__ctas { width: 100%; flex-direction: column; align-items: stretch; gap: 16px; } .hh-header__ctas .ec-btn { width: 100%; } /* Stretched full-width by align-items: stretch above (a bigger tap target), but its own content still defaulted to the left edge of that box instead of actually sitting in the middle of the row. */ .hh-header__textlink { justify-content: center; } } /* ============================================================ 02-intro-cases — intro paragraph + case-study card carousel Prefix: ic- (scoped to avoid collisions with other sections) Fonts: 'Sneak' (Regular / Medium) — custom typeface referenced in Figma as Sneak:Regular / Sneak:Medium. Font files were not available from the Figma export; a system fallback stack is used. See notes.md. ============================================================ */ .ic-section { width: 100%; background: transparent; padding: 98px 56px 42px; box-sizing: border-box; overflow: hidden; } /* ---------- Intro paragraph ---------- */ .ic-intro { display: flex; justify-content: center; width: 100%; margin: 0 auto 42px; } .ic-intro__text { margin: 0; max-width: 1176px; width: 100%; font-family: 'Sneak', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 46px; line-height: 48.76px; letter-spacing: -0.92px; color: #0a0a0a; } /* ---------- Cards grid ---------- Structure taken directly from integratedbio.com's own usp-cards block (read its actual HTML/CSS, not guessed): a plain grid, gap:0 so the cards sit flush against each other, each one a full-bleed block in its own colour rather than a neutral box with a coloured icon. Always exactly 4 practices, so a hardcoded 2x2 desktop grid stands in for their count-driven :has() rules (which handle a variable number of cards — not needed here). */ .ic-cards { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0; width: 100%; /* Same column cap as .ic-intro__text above it — without this the full-bleed cards (see note above: no gap, edge-to-edge colour by design) just kept growing with the viewport, turning into vast slabs of flat colour on an ultrawide monitor instead of reading as a grid of four cards. */ max-width: 1176px; margin: 0 auto; } @media (max-width: 900px) { .ic-cards { grid-template-columns: 1fr; grid-template-rows: none; } } .ic-card { position: relative; } .ic-card { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 32px; min-height: 360px; padding: 36px; background: var(--ic); color: var(--ic-ink); text-decoration: none; overflow: hidden; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .ic-card:hover { transform: scale(1.035); /* Cards sit flush (grid gap:0) — scaling up would tuck this card's far edge under its neighbour's near edge without this. */ z-index: 6; } /* Border "snake", hover only, in --ic-ink so it reads on any of the four card colours. A conic-gradient tried first reads as a beam sweeping from the centre, not a segment travelling the edge itself — correct at the flat sides but visibly wrong right at each 90° corner (a diagonal cut through it), since a conic sweep has nothing to do with the rectangle's actual path. Traced on an actual (SVG, markup in index.html) and animated via stroke-dashoffset instead: a real path, so it turns the corners properly, the way a marching-ants selection does. */ .ic-card__ring { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .ic-card__ring rect { x: 1.5px; y: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); fill: none; stroke: var(--ic-ink); stroke-width: 3px; /* 120px lit segment, then enough bare path that only one segment is ever visible at once on a card this size — a single snake circling the border, not repeating "marching ants". */ stroke-dasharray: 120 1900; } .ic-card:hover .ic-card__ring { opacity: 1; } .ic-card:hover .ic-card__ring rect { animation: ic-ring-crawl 3s linear infinite; } @keyframes ic-ring-crawl { to { stroke-dashoffset: -2020; } } @media (prefers-reduced-motion: reduce) { .ic-card { transition: none; } .ic-card:hover { transform: none; } .ic-card:hover .ic-card__ring rect { animation: none; } } .ic-card__media { position: relative; width: 100%; height: 350px; /* neutral, NOT accent-tinted — every icon colour (including pale gold) needs the same reliable contrast to pop against it */ background: #f4f4f2; border: 1px solid rgba(10, 10, 10, 0.08); overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease; } .ic-card__media::before { /* faint accent wash on hover, in the card's own colour */ content: ""; position: absolute; inset: 0; background: var(--ic, transparent); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .ic-card__media:hover { border-color: var(--ic, rgba(10, 10, 10, 0.3)); background: #eeeeec; } .ic-card__media:hover::before { opacity: 0.1; } /* Flat cards (no photo, no hover-reveal link) — used where a practice or focus area has no real case study to show; a custom animated icon in the card's own accent colour stands in instead of a photo. */ .ic-card--flat { cursor: default; } .ic-card__media--navy { --ic: #1c2541; } .ic-card__media--blue { --ic: #3b5bd9; } .ic-card__media--gold { --ic: #f5c518; } .ic-card__media--red { --ic: #e0492a; } /* Each practice card is now its own full-bleed colour (--ic, same tokens as above) rather than a neutral box with a coloured icon — --ic-ink is the contrast colour for the icon glyph, index number and text on top of it, picked per card for actual contrast rather than a fixed light/dark rule. */ .ic-card--navy { --ic: #1c2541; --ic-ink: #ffffff; } .ic-card--blue { --ic: #3b5bd9; --ic-ink: #ffffff; } .ic-card--gold { --ic: #f5c518; --ic-ink: #0a0a0a; } .ic-card--red { --ic: #e0492a; --ic-ink: #ffffff; } .ic-card__index { position: absolute; top: 24px; right: 24px; font-family: 'Sneak', 'Helvetica Neue', Arial, sans-serif; font-size: 13px; letter-spacing: -0.13px; color: var(--ic-ink); opacity: 0.7; } .ic-card__content { display: flex; flex-direction: column; gap: 14px; } /* ========================================================================== Practice icons — custom square pixel glyphs, each coloured with the card's own accent (--ic, set above) and each with its own idle animation plus a distinct hover response. Squares and steps only (no circles, no smooth diagonals), matching the site's pixel-notch/ pixel-icon language used elsewhere. ========================================================================== */ .picon { position: relative; width: 132px; height: 132px; flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .picon::after { /* soft colour halo behind the glyph — ties it to the card's accent without competing with the icon itself for contrast. --ic-ink falls back to --ic: .ic-card sets --ic-ink (its own background IS --ic now, so the halo needs the contrast colour instead); other .picon users that never set --ic-ink keep the original accent-coloured halo on their own neutral box. */ content: ""; position: absolute; inset: -34%; background: radial-gradient(circle, var(--ic-ink, var(--ic)) 0%, transparent 72%); opacity: 0.16; z-index: -1; transition: opacity 0.25s ease, transform 0.3s ease; } .ic-card:hover .picon::after { opacity: 0.26; transform: scale(1.15); } /* The halo reads as a soft glow on a neutral grey box, but on .ic-card's own full-colour background (same hue as the halo would be, before falling back through --ic-ink) it just looks like stray light behind the icon — dropped for .ic-card specifically, idle and hover alike. content:none removes the pseudo-element outright rather than just hiding it, so the now-pointless hover rule above has nothing left to animate. */ .ic-card .picon::after { content: none; } .ic-card:hover .picon { transform: scale(1.08); } .ic-card:active .picon { transform: scale(0.94); transition-duration: 0.12s; } /* ---- Real icons, sourced from pixelarticons.com (briefcase, code, brush, trending-up, store, smartphone, refresh, shopping-cart — paths copied as-is from that library's own SVGs, never redrawn) instead of the hand-built square glyphs this card set used before. Each keeps its own idle motion plus a faster version on hover, matching the site's existing "idle -> livelier on hover" language; .picon and .picon::after above already provide the halo + outer scale response generically, so only the glyph itself needs styling here. ---- */ .picon__glyph { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; /* --ic-ink falls back to --ic — see .picon::after above for why. */ fill: var(--ic-ink, var(--ic)); transform: translate(-50%, -50%); } /* Technology Consulting — briefcase, carried with a gentle bob. */ .picon--consulting .picon__glyph { animation: picon-bob 2.6s ease-in-out infinite; } .ic-card:hover .picon--consulting .picon__glyph { animation-duration: 1s; } /* Software & Product Development — code, a hard on/off blink like a cursor waiting to type. */ .picon--dev .picon__glyph { animation: picon-blink 1.1s steps(1, end) infinite; } .ic-card:hover .picon--dev .picon__glyph { animation-duration: 0.5s; } /* Design — brush, a light wiggle. */ .picon--design .picon__glyph { animation: picon-wiggle 3s ease-in-out infinite; } .ic-card:hover .picon--design .picon__glyph { animation-duration: 1s; } /* Growth & Operations — trending-up, a scale pulse (the chart itself "growing"). */ .picon--growth .picon__glyph { animation: picon-grow 1.6s ease-in-out infinite; } .ic-card:hover .picon--growth .picon__glyph { animation-duration: 0.7s; } /* Ownership (the "What we will not do" stat pair) — key, a light wiggle as if turning in a lock. */ .picon--ownership .picon__glyph { animation: picon-wiggle 3s ease-in-out infinite; } .va-stat:hover .picon--ownership .picon__glyph { animation-duration: 1s; } /* NDA — lock, breathing gently as if actively holding something secure. */ .picon--nda .picon__glyph { animation: picon-pulse 2s ease-in-out infinite; } .va-stat:hover .picon--nda .picon__glyph { animation-duration: 0.8s; } @keyframes picon-bob { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-6px); } } @keyframes picon-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0.25; } } @keyframes picon-wiggle { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 25% { transform: translate(-50%, -50%) rotate(-8deg); } 75% { transform: translate(-50%, -50%) rotate(8deg); } } @keyframes picon-grow { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.15); } } @keyframes picon-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes picon-buzz { 0%, 60%, 100% { transform: translate(-50%, -50%); } 63%, 69%, 75% { transform: translate(calc(-50% - 2px), -50%); } 66%, 72% { transform: translate(calc(-50% + 2px), -50%); } } @keyframes picon-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @media (prefers-reduced-motion: reduce) { /* .picon .picon__glyph (not just .picon__glyph) to match the per-variant rules' own specificity (.picon--cycle .picon__glyph etc.) — otherwise this loses the cascade and e.g. the cycle icon keeps spinning under reduced motion despite this rule "matching". */ .picon .picon__glyph { animation: none; transition: none; /* translate(-50%,-50%) is load-bearing centring, not just part of the animation — keep it, only the animation itself stops. */ transform: translate(-50%, -50%); } } @media (max-width: 900px) { .picon { width: 96px; height: 96px; } .picon__glyph { width: 52px; height: 52px; } } /* ---- Click delight: confetti burst (assets/js/picon-fx.js) ---- */ .picon-confetti { position: absolute; width: var(--sz); height: var(--sz); margin: calc(var(--sz) * -0.5) 0 0 calc(var(--sz) * -0.5); pointer-events: none; animation: picon-confetti-burst 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes picon-confetti-burst { 0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(90deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .picon-confetti { display: none; } } /* ========================================================================== Pixel dissolve/materialise reveal (assets/js/pixel-reveal.js) — a shuffled grid of small squares covers each card and shrinks away with a staggered delay as it scrolls into view, then grows back to cover it on the way back out (either edge), instead of a plain fade. ========================================================================== */ .ic-card__pixelmask { position: absolute; inset: 0; z-index: 4; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 1fr); pointer-events: none; } .ic-card__pixelmask span { background: #fff; transform: scale(1); opacity: 1; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease; } .ic-card.is-assembled .ic-card__pixelmask span { transform: scale(0); opacity: 0; } @media (prefers-reduced-motion: reduce) { .ic-card__pixelmask span { transition: none; } } .ic-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* .ic-card__media::after and .ic-card__cta ("View case study" hover reveal) used to live here — dead now that every practice card is flat (--flat) and full-bleed coloured rather than a neutral photo box; removed along with the carousel's next button below. */ .ic-card__title { margin: 0; font-family: 'Sneak', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -0.5px; color: var(--ic-ink); } .ic-card__desc { margin: 0; font-family: 'Sneak', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 14.5px; line-height: 21.75px; color: var(--ic-ink); opacity: 0.8; } @media (max-width: 900px) { .ic-section { padding: 64px 24px 32px; } .ic-intro__text { font-size: 30px; line-height: 34px; letter-spacing: -0.4px; white-space: normal; } .ic-card__title { font-size: 22px; line-height: 30px; } } /* ========================================================================== Section: "Born in Vienna" + "AI is good at everything except the last 10 percent" — two stacked two-column blocks, heading+eyebrow on the left, justified body copy (and, in the second block, a two-up stat pair with pixel-glyph icons) on the right. Classes are scoped with a `va-` (Vienna / AI) prefix to avoid colliding with other implemented sections. ========================================================================== */ .va-section { --va-ink: #0a0a0a; --va-body-ink: #2a2a2a; --va-muted: #8b8b8b; /* 'Sneak' is the family named in the Figma file. No web-font file or CDN reference ships with the export, so it falls back to a neutral geometric-grotesk sans that matches the design screenshot. Swap in the real font file/stack once one is provided. */ --va-font-sans: 'Sneak', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --va-font-mono: 'SFMono-Regular', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; background: transparent; color: var(--va-body-ink); } .va-inner { max-width: 1176px; margin: 0 auto; padding: 126px 56px; } .va-grid { display: grid; grid-template-columns: minmax(0, 448px) minmax(0, 1fr); column-gap: 84px; align-items: start; } /* ---- Left column: heading + eyebrow -------------------------------- */ .va-heading-col { display: flex; flex-direction: column; align-items: flex-start; } .va-heading { margin: 0; /* +0.5em over the usual 448px cap — room for the trailing .heading-dot so it doesn't wrap onto its own line. */ max-width: calc(448px + 0.5em); font-family: var(--va-font-sans); font-weight: 400; font-size: 46px; line-height: 48.76px; letter-spacing: -0.92px; color: var(--va-ink); } .va-eyebrow { margin: 14px 0 0; max-width: 297px; font-family: var(--va-font-mono); font-weight: 400; font-size: 10px; line-height: 16.2px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--va-muted); } /* ---- Right column: body copy --------------------------------------- */ .va-body-col { display: flex; flex-direction: column; align-items: flex-start; } .va-body-col > * { margin: 17.75px 0 0; width: 100%; } .va-body-col > *:first-child { margin-top: 0; } .va-body { font-family: var(--va-font-sans); font-weight: 400; font-size: 16.905px; line-height: 27.386px; text-align: justify; color: var(--va-body-ink); } .va-note { font-family: var(--va-font-sans); font-weight: 400; font-size: 14px; line-height: 22.68px; text-align: justify; color: var(--va-muted); } /* ---- Stat pair (second block only) ---------------------------------- */ .va-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 49px; } .va-stats + .va-body { margin-top: 49px; } .va-stat { display: flex; flex-direction: column; align-items: center; text-align: center; } .va-stat__icon { display: flex; align-items: center; justify-content: center; width: 128px; height: 128px; } /* Real icons, sourced from pixelarticons.com (key, lock), reusing the same .picon system as the practice cards above instead of the abstract pixel-grid glyphs this pair used before — each with its own idle motion, a faster version plus a scale response on hover of the whole stat, and a press-in on click, matching how .picon already behaves everywhere else on the page. No colour halo here, though (unlike the practice cards) — against this plain white section it just read as a smudge behind the glyph. */ .va-stat__icon .picon { width: 96px; height: 96px; } .va-stat__icon .picon__glyph { width: 52px; height: 52px; } .va-stat__icon .picon::after { display: none; } .va-stat:hover .picon { transform: scale(1.08); } .va-stat:active .picon { transform: scale(0.94); transition-duration: 0.12s; } .va-stat__label { margin: 18px 0 0; font-family: var(--va-font-mono); font-weight: 400; font-size: 11px; line-height: 16.5px; letter-spacing: 1.98px; text-transform: uppercase; color: var(--va-muted); } .va-stat__desc { margin: 7px 0 0; max-width: 309px; font-family: var(--va-font-sans); font-weight: 400; font-size: 14px; line-height: 22.68px; text-align: center; color: var(--va-body-ink); } /* ---- Responsive ------------------------------------------------------ */ @media (max-width: 900px) { .va-inner { padding: 80px 32px; } .va-grid { grid-template-columns: 1fr; row-gap: 32px; } .va-heading { font-size: clamp(30px, 6vw + 12px, 46px); line-height: 1.06; } .va-heading-col, .va-body-col { max-width: none; } .va-body-col > * { max-width: none; } } @media (max-width: 560px) { .va-inner { padding: 56px 20px; } .va-stats { grid-template-columns: 1fr; row-gap: 32px; } .va-body, .va-note { text-align: left; } } @media (prefers-reduced-motion: reduce) { .va-section * { scroll-behavior: auto; } } /* ========================================================================== 04 — Explore/Generate/Refine/Scale + Brand Context Protocol Figma fileKey Ef7ULPmEOmffnS1gzSvvY1 nodes: 31020:3213, 31020:3214 Classes scoped with `ec-` prefix. See notes.md for fonts/colors/decisions. ========================================================================== */ .ec-section { --ec-ink: #0a0a0a; --ec-body: #2a2a2a; --ec-muted: #8b8b8b; --ec-badge-bg: #1c2541; --ec-white: #ffffff; /* Figma layer reports "Sneak" (Regular/Medium) — a custom typeface not available as a webfont; fall back to a clean neo-grotesque stack. */ --ec-font-sans: "Sneak", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; --ec-font-mono: "SFMono-Regular", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; box-sizing: border-box; background: transparent; display: flex; flex-direction: column; align-items: center; width: 100%; } .ec-section *, .ec-section *::before, .ec-section *::after { box-sizing: border-box; } .ec-section ul { margin: 0; padding: 0; list-style: none; } .ec-section p { margin: 0; } /* --------------------------------------------------------------------- */ /* Section 1 — Explore. Generate. Refine. Scale. */ /* --------------------------------------------------------------------- */ .ec-explore { padding: 98px 56px; } .ec-container { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 1176px; } .ec-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; width: 100%; } .ec-heading { font-family: var(--ec-font-sans); font-weight: 400; font-size: 46px; line-height: 47.84px; letter-spacing: -0.92px; color: var(--ec-ink); margin: 0; } .ec-intro__text { font-family: var(--ec-font-sans); font-weight: 400; font-size: 16.905px; line-height: 27.386px; color: var(--ec-body); max-width: 503px; } .ec-chart { width: 100%; padding-top: 42px; } .ec-chart__img { display: block; width: 100%; height: auto; max-width: 1176px; /* The evolution silhouette (explore-chart-data.js) is a 160x59 cell grid, each of its 4 figures now centred in its own quarter to match .ec-legend's 4 columns below, instead of the raw source image's uneven spacing. */ aspect-ratio: 1176 / 434; cursor: pointer; } .ec-legend { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* `.ec-section ul` resets padding to 0 (it's a stronger 0-1-1 selector — one class plus the ul tag — beating plain `.ec-legend` at 0-1-0), which is why bumping the padding-top above quietly did nothing. Scoped to .ec-explore for 0-2-0 so it actually wins. */ .ec-explore .ec-legend { /* Feet-to-caption gap: was 17px, still read as stuck together at 44px too — the figures need real air above the "01 Frame" row. */ padding-top: 108px; } .ec-legend__item { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; padding-bottom: 17px; } /* Per-item quarter of the same march-of-progress chart above (see explore-chart.js's header comment) — hidden by default since the 4-column desktop grid already sits directly under the one wide .ec-chart canvas in matching quarters. Only shown once .ec-legend stops being 4 columns, below, at which point .ec-chart itself hides instead: it no longer lines up with anything once the items reflow into fewer columns (or one), so every item gets its own figure directly above its own heading instead. */ .ec-legend__figure { display: none; width: 100%; max-width: 200px; } .ec-legend__figure-canvas { display: block; width: 100%; height: auto; aspect-ratio: 294 / 434; cursor: pointer; } .ec-legend__head { display: flex; align-items: center; gap: 9px; height: 24px; padding-top: 2px; } .ec-legend__num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--ec-badge-bg); color: var(--ec-white); font-family: var(--ec-font-mono); font-weight: 400; font-size: 9px; line-height: 11.25px; letter-spacing: 0.36px; } .ec-legend__label { font-family: var(--ec-font-sans); font-weight: 500; font-size: 15px; line-height: 18.75px; color: var(--ec-ink); } .ec-legend__text { font-family: var(--ec-font-sans); font-weight: 400; font-size: 13.5px; line-height: 20.25px; color: var(--ec-body); max-width: 284px; } /* --------------------------------------------------------------------- */ /* Section 2 — The Brand Context Protocol. */ /* --------------------------------------------------------------------- */ .ec-protocol { padding: 126px 56px 35px; } .ec-protocol__grid { display: grid; grid-template-columns: 447.72fr 644.28fr; gap: 0 84px; width: 100%; max-width: 1176px; } /* Heading-only instance (no right column of body copy) — center it instead of leaving the right track empty. */ .ec-protocol__grid--solo { grid-template-columns: 1fr; text-align: center; } .ec-protocol__grid--solo .ec-protocol__col-left { align-items: center; margin: 0 auto; } .ec-protocol__col-left { display: flex; flex-direction: column; align-items: flex-start; } .ec-heading--protocol { /* +0.5em over the usual 448px cap — room for the trailing .heading-dot so it doesn't wrap onto its own line. */ max-width: calc(448px + 0.5em); width: 100%; line-height: 48.76px; } .ec-eyebrow { padding-top: 14px; max-width: 296.719px; font-family: var(--ec-font-mono); font-weight: 400; font-size: 10px; line-height: 16.2px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ec-muted); margin: 0; } .ec-protocol__col-right { display: flex; flex-direction: column; align-items: flex-start; } .ec-protocol__text { font-family: var(--ec-font-sans); font-weight: 400; font-size: 16.905px; line-height: 27.386px; color: var(--ec-body); padding-bottom: 17.75px; } .ec-protocol__lead { font-weight: 500; color: var(--ec-ink); } .ec-btn { display: inline-flex; align-items: center; justify-content: center; /* fallbacks matter here: this class is also used inside .hh-header, which never defines --ec-ink/--ec-white (those live on .ec-section), so without a fallback the button rendered with a transparent bg */ background: var(--ec-ink, #0a0a0a); color: var(--ec-white, #ffffff); text-decoration: none; font-family: var(--ec-font-sans, 'Sneak', -apple-system, 'Helvetica Neue', Arial, sans-serif); font-weight: 500; font-size: 17.64px; line-height: 26.46px; letter-spacing: -0.1764px; padding: 16px 36px; border: none; appearance: none; /* a