/* ======================================================================== Worldonix Infotech — animation primitives Layered on top of tokens.css. Animation intensity is controlled via a data attribute on : data-anim="full" | "subtle" | "off" ======================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { overflow-x: clip; } /* ---------- Scroll reveal ---------- */ .reveal, .reveal-up, .reveal-mask, .reveal-stagger > * { --rv-dur: 900ms; --rv-ease: cubic-bezier(0.2, 0.7, 0, 1); will-change: transform, opacity, clip-path; } .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease); } .reveal.in { opacity: 1; transform: none; } .reveal-up { opacity: 0; transform: translateY(60px); transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease); } .reveal-up.in { opacity: 1; transform: none; } /* mask-style word/line reveal */ .reveal-mask { display: inline-block; overflow: hidden; vertical-align: top; } .reveal-mask > span { display: inline-block; transform: translateY(110%); transition: transform 1100ms var(--rv-ease); } .reveal-mask.in > span { transform: none; } /* per-word stagger; the .word-mask wraps each word, span inside is the actual word */ .word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.05em; line-height: inherit; } .word-mask > span { display: inline-block; transform: translateY(110%); transition: transform 900ms var(--rv-ease); transition-delay: var(--d, 0ms); } .in .word-mask > span, .word-mask.in > span { transform: none; } /* generic stagger: delays applied via inline style --i */ .reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--rv-ease), transform 700ms var(--rv-ease); transition-delay: calc(var(--i, 0) * 70ms); } .reveal-stagger.in > * { opacity: 1; transform: none; } /* fade-only reveal */ .fade-in { opacity: 0; transition: opacity 1200ms ease; } .fade-in.in { opacity: 1; } /* image clip reveal */ .clip-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1200ms var(--rv-ease); } .clip-reveal.in { clip-path: inset(0 0 0% 0); } /* number counter style — just fade-in */ .num-fade { opacity: 0; transition: opacity 1000ms ease; } .num-fade.in { opacity: 1; } /* respect reduced motion + tweaks */ [data-anim="off"] .reveal, [data-anim="off"] .reveal-up, [data-anim="off"] .reveal-mask > span, [data-anim="off"] .reveal-stagger > *, [data-anim="off"] .word-mask > span, [data-anim="off"] .fade-in, [data-anim="off"] .clip-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } [data-anim="subtle"] .reveal, [data-anim="subtle"] .reveal-up { transform: translateY(12px); } [data-anim="subtle"] .reveal-mask > span, [data-anim="subtle"] .word-mask > span { transform: translateY(40%); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-up, .reveal-mask > span, .reveal-stagger > *, .word-mask > span, .fade-in, .clip-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } } /* ---------- Marquee ---------- */ @keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } .marquee { display: flex; overflow: hidden; width: 100%; } .marquee-track { display: flex; gap: 64px; flex-shrink: 0; min-width: max-content; animation: marquee 40s linear infinite; } .marquee-track.fast { animation-duration: 25s; } .marquee-track.slow { animation-duration: 65s; } .marquee:hover .marquee-track { animation-play-state: paused; } /* ---------- Magnetic / cursor follower ---------- */ .cursor-dot { position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 9999px; background: var(--color-primary); pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 200ms ease, height 200ms ease, background 200ms ease, opacity 200ms ease; mix-blend-mode: difference; opacity: 0; } .cursor-dot.active { opacity: 1; } .cursor-dot.hover { width: 56px; height: 56px; background: var(--color-primary); } /* ---------- Underline link ---------- */ .u-link { position: relative; display: inline-block; } .u-link::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform 500ms var(--rv-ease); } .u-link:hover::after { transform: scaleX(1); transform-origin: left center; } /* ---------- Magnetic button container ---------- */ .magnetic { display: inline-block; transition: transform 250ms var(--rv-ease); } .magnetic-inner { display: inline-block; transition: transform 250ms var(--rv-ease); } /* ---------- Page enter overlay ---------- */ .page-curtain { position: fixed; inset: 0; background: var(--color-ink); z-index: 99; transform-origin: top; pointer-events: none; } @keyframes curtain-out { 0% { transform: scaleY(1); } 100% { transform: scaleY(0); } } .page-curtain { animation: curtain-out 900ms cubic-bezier(0.7, 0, 0.2, 1) forwards; } /* ---------- Sticky stack (services) ---------- */ .stick-wrap { position: relative; } .stick-card { position: sticky; } /* ---------- Generic helpers ---------- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 32px; } @media (max-width: 720px) { .container { padding: 0 20px; } } .section { padding: var(--space-section) 0; } .section-tight { padding: 64px 0; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-muted); font-weight: 500; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--color-primary); } /* coral chip CTA used inline */ .btn-coral { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 9999px; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-body); font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: background 200ms ease, transform 250ms var(--rv-ease); letter-spacing: 0.2px; } .btn-coral:hover { background: var(--color-primary-active); } .btn-coral .arrow { width: 14px; height: 14px; transition: transform 250ms var(--rv-ease); } .btn-coral:hover .arrow { transform: translateX(3px); } .btn-ghost { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 9999px; background: transparent; color: var(--color-ink); border: 1px solid var(--color-hairline); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; } .btn-ghost:hover { background: var(--color-ink); color: var(--color-on-dark); border-color: var(--color-ink); } .btn-ghost.on-dark { color: var(--color-on-dark); border-color: rgba(250,249,245,0.2); } .btn-ghost.on-dark:hover { background: var(--color-on-dark); color: var(--color-ink); border-color: var(--color-on-dark); } /* shaped arrow */ .arrow-svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* hairlines */ .rule { height: 1px; background: var(--color-hairline); width: 100%; } .rule-soft { height: 1px; background: var(--color-hairline-soft); width: 100%; } .rule-dark { height: 1px; background: rgba(250,249,245,0.10); width: 100%; } /* dark surface */ .dark { background: var(--color-surface-dark); color: var(--color-on-dark); } .dark h1, .dark h2, .dark h3, .dark h4, .dark .h-display-xl, .dark .h-display-lg, .dark .h-display-md, .dark .h-display-sm { color: var(--color-on-dark); } .dark p, .dark .t-body-md, .dark .t-body-sm { color: var(--color-on-dark-soft); } .dark .eyebrow { color: var(--color-on-dark-soft); } .dark .rule { background: rgba(250,249,245,0.10); } /* page-level body lock when modal open */ body.no-scroll { overflow: hidden; } /* selection */ ::selection { background: var(--color-primary); color: var(--color-on-primary); } /* form */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 12px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-muted); } .field .err { color: var(--color-error); font-size: 12px; min-height: 14px; } .field input, .field select, .field textarea { width: 100%; padding: 14px 16px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: 10px; font-family: var(--font-body); font-size: 15px; color: var(--color-ink); outline: none; transition: border-color 180ms ease, box-shadow 180ms ease; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } .field textarea { resize: vertical; min-height: 110px; font-family: var(--font-body); } /* slot grid */ .slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .slot { padding: 10px 8px; text-align: center; border: 1px solid var(--color-hairline); border-radius: 8px; background: var(--color-canvas); cursor: pointer; font-size: 13px; color: var(--color-ink); transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .slot:hover { border-color: var(--color-ink); } .slot.selected { background: var(--color-ink); color: var(--color-on-dark); border-color: var(--color-ink); } .slot.disabled { color: var(--color-muted-soft); cursor: not-allowed; opacity: 0.5; } /* small responsive */ @media (max-width: 880px) { :root { --type-display-xl-size: 44px; --type-display-lg-size: 36px; --type-display-md-size: 28px; --type-display-sm-size: 22px; --space-section: 64px; } } /* ================================================================= Global responsive layout — applies to all pages / all routes ================================================================= */ /* navbar CTA — shrink on mobile so it doesn't crowd the hamburger */ @media (max-width: 980px) { .nav-cta { height: 36px !important; padding: 0 14px !important; font-size: 12px !important; gap: 6px !important; } .nav-cta .arrow { width: 11px !important; height: 11px !important; } } /* 980 px — collapse two-column grids to single column */ @media (max-width: 980px) { .hero-grid, .why-grid, .stk-grid, .dlv-grid, .svc-row, .ind-page-row, .cnt-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .svc-grid { grid-template-columns: 1fr 1fr !important; } .cmt-grid, .lead-grid { grid-template-columns: 1fr 1fr !important; } /* hero feature pill stacks vertically */ .hero-feature { flex-direction: column !important; align-items: flex-start !important; border-radius: 16px !important; } /* sticky service stack — remove sticky/scale so cards are a plain list */ .stk-heading { position: relative !important; top: auto !important; } .stick-card { position: relative !important; top: auto !important; transform: none !important; } .stick-spacer { display: none !important; } /* delivery stagger — remove translateX offset so cards don't overflow */ .dlv-card { transform: none !important; max-width: 100% !important; } /* industry image card — let height grow with content */ .ind-card-image { height: auto !important; min-height: 220px !important; } } /* 880 px — footer */ @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } } /* 720 px — further collapse and padding reduction */ @media (max-width: 720px) { .svc-grid { grid-template-columns: 1fr !important; } .num-grid { grid-template-columns: 1fr 1fr !important; } .phase-row { grid-template-columns: 1fr !important; } .tm-card { padding: 40px 24px !important; } .ind-row { grid-template-columns: 40px 1fr 40px !important; } .ind-row > p { display: none !important; } .logo-label { display: none !important; } .page-section { padding: 56px 0 !important; } } /* 540 px — single column everything */ @media (max-width: 540px) { .cmt-grid, .lead-grid { grid-template-columns: 1fr !important; } .footer-grid { grid-template-columns: 1fr !important; } .bk-grid { grid-template-columns: 1fr !important; } .cnt-item { grid-template-columns: 1fr !important; } .num-grid { grid-template-columns: 1fr !important; } }