/* ============================================================ OPAS — Site-wide styles Loaded once in Webflow Site Settings → Custom Code → ============================================================ */ /* ---- 1. Tokens ------------------------------------------------ */ :root { /* Colors */ --opas-color-bg: #ffffff; --opas-color-text: #111111; --opas-color-muted: #666666; --opas-color-accent: #0057ff; --opas-color-border: #e5e5e5; /* Typography */ --opas-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --opas-font-heading: var(--opas-font-body); /* Spacing scale */ --opas-space-1: 4px; --opas-space-2: 8px; --opas-space-3: 16px; --opas-space-4: 24px; --opas-space-5: 32px; --opas-space-6: 48px; /* Radius / shadow */ --opas-radius-sm: 4px; --opas-radius-md: 8px; --opas-radius-lg: 16px; --opas-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --opas-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); /* Motion */ --opas-ease: cubic-bezier(0.4, 0, 0.2, 1); --opas-duration: 200ms; } /* ---- 2. Utilities --------------------------------------------- */ .opas-hidden { display: none !important; } .opas-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; } /* ---- 3. Components ------------------------------------------- */ /* Add component styles below. Prefix all custom classes with `opas-` so they never collide with Webflow's generated classes. */ /* ---- 3a. Logo cloud (animated graphic) ----------------------- */ [data-opas="logo-cloud"] { position: relative; width: 100%; max-width: 492px; aspect-ratio: 492 / 579; margin: 0 auto; color: #ffffff; /* line uses currentColor — override per-page if needed */ } [data-opas="logo-cloud"] [data-opas-line] { position: absolute; /* matches the line's position inside the 492x579 Figma frame */ left: 5.89%; top: 1.21%; width: 89.45%; height: 97.57%; overflow: visible; pointer-events: none; z-index: 0; } [data-opas="logo-cloud"] [data-opas-line] path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; stroke-dasharray: 1; stroke-dashoffset: 1; } [data-opas="logo-cloud"] [data-opas-icon] { position: absolute; opacity: 0; transform: scale(0.4); transform-origin: center center; will-change: transform, opacity; z-index: 1; } [data-opas="logo-cloud"] [data-opas-icon] img { display: block; width: 100%; height: 100%; object-fit: contain; } /* Office card sits inside a white rounded background */ [data-opas="logo-cloud"] [data-opas-icon="office"] { background: #ffffff; border-radius: 10px; } [data-opas="logo-cloud"] [data-opas-icon="office"] img { position: absolute; inset: 7.35%; width: 85.3%; height: 85.3%; } /* Play state — set by JS when the graphic scrolls into view */ [data-opas="logo-cloud"][data-played="true"] [data-opas-icon] { animation: opas-icon-pop 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: var(--opas-icon-delay, 0ms); } [data-opas="logo-cloud"][data-played="true"] [data-opas-line] path { animation: opas-line-draw 2400ms cubic-bezier(0.4, 0, 0.2, 1) both; /* starts after the last icon pops in (9 icons * 120ms + ~250ms buffer) */ animation-delay: 1300ms; } @keyframes opas-icon-pop { 0% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } } @keyframes opas-line-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { [data-opas="logo-cloud"] [data-opas-icon], [data-opas="logo-cloud"][data-played="true"] [data-opas-icon] { animation: none; opacity: 1; transform: none; } [data-opas="logo-cloud"] [data-opas-line] path, [data-opas="logo-cloud"][data-played="true"] [data-opas-line] path { animation: none; stroke-dashoffset: 0; } } /* Example template for future components: [data-opas="accordion"] { ... } [data-opas="accordion"] [data-opas-trigger] { ... } [data-opas="accordion"][data-open="true"] [data-opas-panel] { ... } */