/* ============================================================ UbidTech — Site Stylesheet Built on the UbidTech design system tokens (tokens.css) ============================================================ */ /* Inter is loaded once, sitewide, via tags in (see build.py's page() helper) rather than an in-stylesheet @import — this is the single font family used across every page, weight, and component. */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Base ---------- */ body { font-family: var(--font-sans); background: var(--color-canvas); color: var(--color-ink); font-size: var(--body-md-size); line-height: var(--body-md-line); font-weight: var(--body-md-weight); -webkit-font-smoothing: antialiased; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } .container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); } .section { padding-block: var(--space-96); } @media (max-width: 900px) { .section { padding-block: var(--space-64); } } .section-soft { background: var(--color-canvas-soft); } .section-cream { background: var(--color-cream); } .section-dark { background: linear-gradient(180deg, var(--color-ink) 0%, var(--color-ink-deep) 100%); color: var(--color-on-ink); } .section-dark .text-secondary { color: var(--color-on-ink-secondary); } /* ---------- Type ---------- */ .display-xl { font-size: var(--display-xl-size); line-height: var(--display-xl-line); font-weight: var(--display-xl-weight); letter-spacing: var(--display-xl-tracking); } .display-lg { font-size: var(--display-lg-size); line-height: var(--display-lg-line); font-weight: var(--display-lg-weight); letter-spacing: var(--display-lg-tracking); } .display-md { font-size: var(--display-md-size); line-height: var(--display-md-line); font-weight: var(--display-md-weight); letter-spacing: var(--display-md-tracking); } .heading-lg { font-size: var(--heading-lg-size); line-height: var(--heading-lg-line); font-weight: var(--heading-lg-weight); letter-spacing: var(--heading-lg-tracking); } .heading-md { font-size: var(--heading-md-size); line-height: var(--heading-md-line); font-weight: var(--heading-md-weight); letter-spacing: var(--heading-md-tracking); } .heading-sm { font-size: var(--heading-sm-size); line-height: var(--heading-sm-line); font-weight: var(--heading-sm-weight); letter-spacing: var(--heading-sm-tracking); } .body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-line); font-weight: var(--body-lg-weight); } .body-md { font-size: var(--body-md-size); line-height: var(--body-md-line); font-weight: var(--body-md-weight); } .caption { font-size: var(--caption-size); line-height: var(--caption-line); font-weight: var(--caption-weight); letter-spacing: var(--caption-tracking); } .text-secondary { color: var(--color-text-secondary); } .text-primary-accent { color: var(--color-primary); } @media (max-width: 900px) { .display-xl { font-size: 42px; line-height: 46px; letter-spacing: -0.03em; } .display-lg { font-size: 38px; line-height: 42px; letter-spacing: -0.03em; } .display-md { font-size: 32px; line-height: 36px; } .heading-lg { font-size: 30px; line-height: 36px; } .heading-md { font-size: 26px; line-height: 32px; } } /* ---------- Eyebrow ---------- */ .eyebrow { display: flex; align-items: center; gap: var(--space-8); font-size: var(--micro-size); line-height: var(--micro-line); font-weight: var(--micro-weight); letter-spacing: var(--micro-tracking); text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-16); } .eyebrow.on-ink { color: var(--color-on-ink-secondary); } .eyebrow .dot { color: currentColor; opacity: 0.6; } /* ---------- Buttons ---------- Restrained, professional hover/press states — a small lift plus a shadow/color shift, never a bouncy scale or cursor-chasing pull. Every value animated here is transform/opacity/background/shadow only (hardware-accelerated). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); font-size: var(--button-size); line-height: var(--button-line); font-weight: var(--button-weight); letter-spacing: var(--button-tracking); border-radius: var(--radius-pill); padding: var(--space-12) var(--space-24); transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); transform: translateY(0); white-space: nowrap; } .btn svg { width: 16px; height: 16px; flex: 0 0 auto; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); transition-duration: 90ms; } .btn-sm { padding: var(--space-8) var(--space-16); } .btn-primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-primary-deep); box-shadow: var(--shadow-md); } .btn-primary:active { background: var(--color-primary-deep); box-shadow: var(--shadow-sm); } .btn-primary:disabled { opacity: 0.4; box-shadow: none; pointer-events: none; } .btn-secondary { background: var(--color-canvas); color: var(--color-primary); border: 1.5px solid var(--color-primary); } .btn-secondary:hover { background: var(--color-canvas-soft); border-color: var(--color-primary-deep); color: var(--color-primary-deep); } .btn-secondary:disabled { opacity: 0.4; pointer-events: none; } .btn-dark { background: var(--color-ink); color: var(--color-on-ink); } .btn-dark:hover { background: var(--color-ink-deep); box-shadow: var(--shadow-md); } .btn-dark:disabled { opacity: 0.4; pointer-events: none; } /* Dark button variant used on section-dark backgrounds needs contrast flip */ .section-dark .btn-dark { background: rgba(255,255,255,0.1); } .section-dark .btn-dark:hover { background: rgba(255,255,255,0.18); } .btn-row { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } } /* ---------- Card ---------- --rx/--ry are set by main.js on pointermove for a subtle tilt; 0 by default so the card is flat until JS (and a fine pointer) applies it. */ .card { --rx: 0deg; --ry: 0deg; background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-24); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-base) var(--ease-standard); transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0) scale(1); will-change: transform; } .card:hover { box-shadow: var(--shadow-md); transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px) scale(1.01); transition: box-shadow var(--duration-fast) var(--ease-standard), transform 120ms var(--ease-standard); } .card .card-visual { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-canvas-soft); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-24); color: var(--color-primary); transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); } .card:hover .card-visual { transform: scale(1.08) rotate(-4deg); background: var(--color-primary); color: var(--color-on-primary); } .card .card-visual svg { width: 22px; height: 22px; } .card h3 { font-size: var(--heading-sm-size); line-height: var(--heading-sm-line); font-weight: var(--heading-sm-weight); letter-spacing: var(--heading-sm-tracking); color: var(--color-ink); margin-bottom: var(--space-12); } .card p { color: var(--color-text-secondary); } .card .card-meta { display: block; margin-bottom: var(--space-8); } .card-link { display: inline-flex; align-items: center; gap: var(--space-4); margin-top: var(--space-16); color: var(--color-primary); font-weight: 500; font-size: 14px; } .card-link svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform var(--duration-fast) var(--ease-standard); } .card:hover .card-link svg { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .card, .card:hover, .card .card-visual, .card:hover .card-visual { transform: none !important; } } /* ---------- Gradient Mesh ---------- */ .gradient-mesh { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; /* A faint technical grid, reminiscent of the product/dashboard mockups elsewhere on the site. It's masked to fade out toward the left, where headline copy sits, and to build up toward the right, so it reads as texture behind the visual side of the hero rather than noise behind the text. */ background-image: linear-gradient(rgba(13, 37, 61, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 37, 61, 0.055) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 48%, rgba(0,0,0,0.5) 66%, black 85%, black 100%); mask-image: linear-gradient(100deg, transparent 0%, transparent 48%, rgba(0,0,0,0.5) 66%, black 85%, black 100%); } @media (max-width: 900px) { /* Below this width, hero layouts stack into one column, so there's no clear "visual side" left for the grid to build up into — drop it rather than risk it sitting under the headline. */ .gradient-mesh { background-image: none; } } .gradient-mesh::before, .gradient-mesh::after, .gradient-mesh .mesh-blob { content: ''; position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.28; will-change: transform; } /* Mesh follows the logo's own gradient: brand-blue (#2F43FC) drifting into brand-purple (#C17FFD) along the same diagonal, with --color-primary as the bridge tone in between so the blend stays smooth. */ .gradient-mesh::before { width: 70vw; height: 70vw; background: var(--color-brand-blue); top: -20%; left: -15%; opacity: 0.14; } .gradient-mesh::after { width: 55vw; height: 55vw; background: var(--color-primary); top: 8%; right: -10%; opacity: 0.08; } .gradient-mesh .mesh-blob { width: 48vw; height: 48vw; background: var(--color-brand-purple); bottom: -15%; left: 18%; opacity: 0.11; } .gradient-mesh .mesh-blob.magenta { width: 42vw; height: 42vw; background: var(--color-primary-soft); bottom: -12%; right: 2%; opacity: 0.08; } @media (prefers-reduced-motion: no-preference) { .gradient-mesh::before { animation: drift1 32s ease-in-out infinite alternate; } .gradient-mesh::after { animation: drift2 38s ease-in-out infinite alternate; } } @keyframes drift1 { from { transform: translate(0,0); } to { transform: translate(3%, 4%); } } @keyframes drift2 { from { transform: translate(0,0); } to { transform: translate(-4%, -3%); } } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); padding-block: var(--space-16); } .nav-logo { display: flex; align-items: center; height: 28px; } .nav-logo img { height: 28px; width: auto; transition: transform var(--duration-fast) var(--ease-standard); } .nav-logo:hover img { transform: scale(1.04); } .nav-links { display: flex; align-items: center; gap: var(--space-32); } .nav-links a { font-size: 15px; font-weight: 500; color: var(--color-ink); position: relative; padding: var(--space-4) 0; transition: color var(--duration-fast) var(--ease-standard); } .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--color-primary); border-radius: var(--radius-pill); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-fast) var(--ease-standard); } .nav-links a:hover { color: var(--color-primary); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } .nav-links a.active { color: var(--color-primary); } .nav-item-dropdown { position: relative; } .nav-item-dropdown > button { display: flex; align-items: center; gap: var(--space-4); font-size: 15px; font-weight: 500; color: var(--color-ink); } .nav-item-dropdown > button:hover { color: var(--color-primary); } .nav-item-dropdown svg { width: 14px; height: 14px; transition: transform var(--duration-fast) var(--ease-standard); } .nav-item-dropdown:hover svg { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: calc(100% + var(--space-16)); left: -20px; background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-8); min-width: 240px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), visibility var(--duration-fast); } .nav-item-dropdown:hover .nav-dropdown, .nav-item-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown a { display: block; padding: var(--space-12) var(--space-16); border-radius: var(--radius-md); font-size: 14px; font-weight: 500; color: var(--color-ink); } .nav-dropdown a:hover { background: var(--color-canvas-soft); color: var(--color-primary); } .nav-cta { display: flex; align-items: center; gap: var(--space-16); } .nav-toggle { display: none; } @media (max-width: 900px) { .nav-links { display: none; } .nav-cta .btn-secondary-desktop { display: none; } .nav-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .nav-toggle svg { width: 22px; height: 22px; } .nav.is-open .nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); position: absolute; top: 100%; left: 0; right: 0; background: var(--color-canvas); border-bottom: 1px solid var(--color-border); padding: var(--space-16) var(--container-pad) var(--space-24); box-shadow: var(--shadow-lg); } .nav.is-open .nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: var(--space-16); display: none; } .nav.is-open .nav-item-dropdown.is-open .nav-dropdown { display: block; } .nav.is-open .nav-item-dropdown > button { width: 100%; justify-content: space-between; } } /* ---------- Hero ---------- */ .hero { position: relative; padding-block: var(--space-128) var(--space-96); overflow: hidden; } .hero-inner { position: relative; z-index: 1; max-width: 760px; } .hero-cta { margin-top: var(--space-48); } .hero-visual-wrap { --parallax: 0px; position: relative; z-index: 1; margin-top: var(--space-80); transform: translateY(var(--parallax)); will-change: transform; } @media (max-width: 900px) { .hero { padding-block: var(--space-64) var(--space-48); } .hero-visual-wrap { margin-top: var(--space-48); } } /* Gentle idle float for the hero product mockup — purely decorative, disabled under reduced motion by the global rule above. */ @keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .hero-visual-wrap .mockup { animation: float-y 6s ease-in-out infinite; } /* Product mockup composition */ .mockup { position: relative; border-radius: var(--radius-xl); background: var(--color-canvas); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); overflow: hidden; } .mockup-bar { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--color-border); background: var(--color-canvas-soft); } .mockup-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); } .mockup-body { padding: var(--space-24); } .mockup-nav { display: flex; flex-direction: column; gap: var(--space-8); } .mockup-nav-item { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm); font-size: 13px; color: var(--color-text-secondary); cursor: pointer; user-select: none; border: none; background: none; width: 100%; text-align: left; font-family: inherit; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .mockup-nav-item:hover { background: var(--color-canvas-soft); color: var(--color-ink); } .mockup-nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .mockup-nav-item.active { background: var(--color-canvas-soft); color: var(--color-ink); font-weight: 500; } .mockup-nav-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-border); flex: 0 0 auto; transition: background var(--duration-fast) var(--ease-standard); } .mockup-nav-item.active .dot { background: var(--color-primary); } .mockup-panels { transition: opacity 180ms var(--ease-standard); } .mockup-panels.is-updating { opacity: 0.35; } @media (prefers-reduced-motion: reduce) { .mockup-panels.is-updating { opacity: 1; } } .mockup-grid { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-24); } @media (max-width: 700px) { .mockup-grid { grid-template-columns: 1fr; } .mockup-nav { display: none; } } .chart-bars { display: flex; align-items: flex-end; gap: var(--space-8); height: 120px; } .chart-bars span { flex: 1; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--color-primary-soft); transition: height 500ms var(--ease-standard); } .chart-bars span:nth-child(odd) { background: var(--color-canvas-soft); border: 1px solid var(--color-border); } @media (prefers-reduced-motion: reduce) { .chart-bars span { transition: none; } } .stat-tile { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-16); } .stat-tile .stat-value { font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: var(--color-ink); } .stat-tile .stat-label { font-size: 12px; color: var(--color-text-secondary); margin-top: var(--space-4); } .data-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-12) 0; border-bottom: 1px solid var(--color-border); font-size: 13px; } .data-row:last-child { border-bottom: none; } .data-row .pill-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-canvas-soft); color: var(--color-primary); } /* ---------- Grid utilities ---------- */ .grid { display: grid; gap: var(--space-24); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } @media (min-width: 901px) and (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-64); align-items: center; } .split.reverse { direction: rtl; } .split.reverse > * { direction: ltr; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-32); } .split.reverse { direction: ltr; } } .section-head { max-width: 640px; margin-bottom: var(--space-64); } .section-head.center { margin-inline: auto; text-align: center; } /* ---------- Capability / ecosystem diagram ---------- */ .ecosystem { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-16); margin-top: var(--space-48); } .ecosystem-node { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-24) var(--space-16); text-align: center; background: var(--color-canvas); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .ecosystem-node:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-3px); } .ecosystem-node .node-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-canvas-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-16); transition: transform var(--duration-fast) var(--ease-standard); } .ecosystem-node:hover .node-icon { transform: scale(1.1); } .ecosystem-node .node-icon svg { width: 18px; height: 18px; } .ecosystem-node h4 { font-size: 15px; font-weight: 600; margin-bottom: var(--space-8); } .ecosystem-node p { font-size: 13px; color: var(--color-text-secondary); } .ecosystem-hub { grid-column: 1 / -1; order: 99; } @media (max-width: 900px) { .ecosystem { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .ecosystem { gap: var(--space-12); } .ecosystem-node { padding: var(--space-16) var(--space-8); } } /* ---------- Brand idea chain (Idea -> Design -> Build -> Intelligence -> Growth) ---------- */ .idea-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-top: var(--space-32); row-gap: var(--space-12); } .idea-chain .chain-unit { display: inline-flex; align-items: center; gap: var(--space-8); } .idea-chain .chain-pill { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-16); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-canvas); font-size: 13px; font-weight: 600; color: var(--color-ink); white-space: nowrap; } .idea-chain .chain-pill svg { width: 15px; height: 15px; color: var(--color-primary); } .idea-chain .chain-arrow { display: inline-flex; color: var(--color-text-secondary); opacity: 0.45; } .idea-chain .chain-arrow svg { width: 13px; height: 13px; } .idea-chain .chain-pill.is-final { background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple)); border-color: transparent; color: #fff; } .idea-chain .chain-pill.is-final svg { color: #fff; } /* ---------- Journey / process steps ---------- A single brand-gradient path connects every node (rather than a plain gray arrow between each pair), and each node carries an icon instead of a bare number — the icon says what the step is, so the row reads on its own. Hover lifts a node and fills it with the same gradient. */ .journey { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); margin-top: var(--space-64); } .journey::before { content: ''; position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-purple)); opacity: 0.3; } .journey-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-16); flex: 1; min-width: 90px; text-align: center; } .journey-step .step-dot { width: 48px; height: 48px; border-radius: 50%; background: var(--color-canvas); border: 1.5px solid var(--color-border); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; color: var(--color-primary); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .journey-step .step-dot svg { width: 19px; height: 19px; } .journey-step:hover .step-dot { background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple)); border-color: transparent; color: #fff; box-shadow: var(--shadow-md); transform: translateY(-3px); } .journey-step span { font-size: 13px; font-weight: 500; color: var(--color-ink); } @media (prefers-reduced-motion: reduce) { .journey-step:hover .step-dot { transform: none; } } @media (max-width: 700px) { .journey { flex-direction: column; align-items: flex-start; gap: var(--space-32); margin-top: var(--space-48); } .journey::before { left: 24px; top: 24px; right: auto; bottom: 24px; width: 2px; height: auto; background: linear-gradient(180deg, var(--color-brand-blue), var(--color-brand-purple)); } .journey-step { flex-direction: row; align-items: center; gap: var(--space-16); text-align: left; min-width: 0; } .journey-step:hover .step-dot { transform: none; } } .process-list { display: flex; flex-direction: column; } .process-item { display: grid; grid-template-columns: 100px 1fr; gap: var(--space-32); padding-block: var(--space-32); border-top: 1px solid var(--color-border); } .process-item:last-child { border-bottom: 1px solid var(--color-border); } .process-item .process-num { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; } .process-item h3 { margin-bottom: var(--space-8); } .process-item p { color: var(--color-text-secondary); max-width: 480px; } @media (max-width: 700px) { .process-item { grid-template-columns: 1fr; gap: var(--space-8); } } /* ---------- Case study framework ---------- */ .case-study { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-32); margin-bottom: var(--space-24); transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .case-study:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .case-study-flow { display: flex; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-16); } .case-study-flow span { font-size: 12px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--color-canvas-soft); color: var(--color-text-secondary); } .placeholder-note { border: 1px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--space-32); text-align: center; color: var(--color-text-secondary); } /* ---------- Form ---------- */ .form-card { background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-48); } @media (max-width: 700px) { .form-card { padding: var(--space-24); } } .form-field { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-24); } .form-field label { font-size: 13px; font-weight: 600; color: var(--color-ink); } .form-field .optional { font-weight: 400; color: var(--color-text-secondary); } .form-field input, .form-field select, .form-field textarea { border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-12) var(--space-16); background: var(--color-canvas-soft); font-size: 15px; font-family: inherit; color: var(--color-ink); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--color-text-secondary); opacity: 0.75; } .form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--color-primary-soft); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--color-primary); background: var(--color-canvas); box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.12); outline: none; } .form-field textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); } @media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } } .form-actions { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; margin-top: var(--space-8); } .btn-block { width: 100%; } .form-note { display: flex; align-items: center; gap: var(--space-8); font-size: 13px; color: var(--color-text-secondary); margin-top: var(--space-16); } .form-note svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--color-primary); } #form-success { display: none; padding: var(--space-48); border-radius: var(--radius-lg); background: var(--color-canvas-soft); text-align: center; } #form-success.show { display: block; } #form-success .check-badge { width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-16); } #form-success .check-badge svg { width: 22px; height: 22px; } /* ---------- Contact sidebar ---------- */ .contact-sidebar-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-24); display: flex; align-items: flex-start; gap: var(--space-16); margin-top: var(--space-32); transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .contact-sidebar-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .contact-sidebar-card .card-visual { margin-bottom: 0; flex: 0 0 auto; } .contact-sidebar-card h3 { margin-bottom: var(--space-4); } .contact-sidebar-card p { color: var(--color-text-secondary); margin-bottom: var(--space-8); } .trust-row { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-32); } .trust-row .tag-pill { cursor: default; } .trust-row .tag-pill:hover { transform: none; border-color: var(--color-border); color: var(--color-ink); } /* ---------- Footer ---------- */ .footer { background: var(--color-ink-deep); color: var(--color-on-ink); padding-block: var(--space-80) var(--space-48); } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-48); padding-bottom: var(--space-64); } .footer-brand img { height: 26px; margin-bottom: var(--space-16); } .footer-brand p { color: var(--color-on-ink-secondary); max-width: 260px; } .footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-on-ink-secondary); margin-bottom: var(--space-16); font-weight: 600; } .footer-links { display: flex; flex-direction: column; gap: var(--space-12); } .footer-links a { color: var(--color-on-ink); font-size: 14px; display: inline-block; transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .footer-links a:hover { color: var(--color-primary-soft); transform: translateX(3px); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-32); border-top: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; gap: var(--space-16); } .footer-bottom p { color: var(--color-on-ink-secondary); font-size: 13px; } .social-links { display: flex; gap: var(--space-16); } .social-links a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .social-links a:hover { border-color: var(--color-primary-soft); color: var(--color-primary-soft); transform: translateY(-2px); } .social-links svg { width: 16px; height: 16px; } @media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } } /* ---------- FAQ accordion ---------- */ .faq-list { display: flex; flex-direction: column; } .faq-item { border-bottom: 1px solid var(--color-border); } .faq-item:first-child { border-top: 1px solid var(--color-border); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding-block: var(--space-24); text-align: left; font-size: 17px; font-weight: 500; color: var(--color-ink); transition: color var(--duration-fast) var(--ease-standard); } .faq-q:hover { color: var(--color-primary); } .faq-icon { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--color-canvas-soft); display: flex; align-items: center; justify-content: center; color: var(--color-primary); transition: transform var(--duration-fast) var(--ease-standard); } .faq-icon svg { width: 14px; height: 14px; } .faq-item.is-open .faq-icon { transform: rotate(45deg); background: var(--color-primary); color: var(--color-on-primary); } .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--duration-base) var(--ease-standard); } .faq-a p { padding-bottom: var(--space-24); max-width: 560px; } .faq-item.is-open .faq-a { max-height: 400px; } /* ---------- Feature list (icon + title + text, no boxed cards) ---------- Replaces a grid of many identical bordered tiles with an editorial, two-column list — more breathing room, one clear rhythm, icon-led. */ .feature-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-48); margin-top: var(--space-48); } .feature-item { display: flex; gap: var(--space-16); padding-block: var(--space-24); border-top: 1px solid var(--color-border); transition: transform var(--duration-fast) var(--ease-standard); } .feature-list .feature-item:nth-child(1), .feature-list .feature-item:nth-child(2) { border-top: none; } .feature-item:hover { transform: translateX(3px); } .feature-item .feature-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-canvas-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .feature-item .feature-icon svg { width: 19px; height: 19px; } .feature-item:hover .feature-icon { background: var(--color-primary); color: var(--color-on-primary); transform: scale(1.06); } .feature-item h3 { font-size: 16px; font-weight: 500; color: var(--color-ink); margin-bottom: var(--space-4); } .feature-item p { font-size: 14px; color: var(--color-text-secondary); } @media (max-width: 700px) { .feature-list { grid-template-columns: 1fr; column-gap: 0; } .feature-list .feature-item:nth-child(2) { border-top: 1px solid var(--color-border); } } /* ---------- Tag pills / tech chips ---------- */ .tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-24); } .tag-pill { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 13px; font-weight: 500; padding: var(--space-8) var(--space-16); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-canvas); color: var(--color-text-secondary); transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .tag-pill svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--color-primary); } .tag-pill:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); } .section-dark .tag-pill { border-color: rgba(255,255,255,0.15); color: var(--color-on-ink-secondary); background: transparent; } /* ---------- Feature checklist ---------- */ .check-list { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-24); } .check-list li { display: flex; align-items: flex-start; gap: var(--space-12); } .check-list .check-icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--color-canvas-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-top: 2px; } .check-list .check-icon svg { width: 12px; height: 12px; } .section-dark .check-list .check-icon { background: rgba(255,255,255,0.1); color: var(--color-on-ink); } /* ---------- Comparison table ---------- */ .compare-table { width: 100%; border-collapse: collapse; margin-top: var(--space-48); } .compare-table th, .compare-table td { padding: var(--space-16) var(--space-24); text-align: left; border-bottom: 1px solid var(--color-border); } .compare-table th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); font-weight: 600; } .compare-table thead th:not(:first-child) { text-align: center; } .compare-table td:not(:first-child) { text-align: center; } .compare-table td:first-child { font-weight: 500; color: var(--color-ink); } .compare-table .col-us { background: var(--color-canvas-soft); } .compare-table th.col-us { color: var(--color-primary); } .compare-table .yes { color: var(--color-primary); } .compare-table .no { color: var(--color-border); } @media (max-width: 700px) { /* A 3-column table can't fit a phone screen readably, even scrollable — swiping a table sideways is a poor, easy-to-miss interaction. Instead each row becomes a small stacked card: the label, then the two values with inline captions so the comparison still reads without a header row. */ .compare-table, .compare-table thead, .compare-table tbody, .compare-table tr, .compare-table td { display: block; width: 100%; } .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .compare-table tr { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-16); margin-bottom: var(--space-12); } .compare-table td { padding: var(--space-4) 0 !important; border: none !important; text-align: left !important; } .compare-table td:first-child { font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-8); font-size: 15px; } .compare-table td:nth-child(2)::before { content: "Typical outsourcing — "; color: var(--color-text-secondary); font-weight: 600; } .compare-table td:nth-child(3)::before { content: "UbidTech — "; color: var(--color-primary); font-weight: 600; } .compare-table td.col-us { background: none; margin-top: var(--space-8); padding-left: var(--space-12) !important; border-left: 2px solid var(--color-primary) !important; } } /* ---------- Industries / logos strip ---------- */ .industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16); margin-top: var(--space-48); } .industry-tile { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-24); text-align: center; transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .industry-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .industry-tile .node-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-canvas-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-12); transition: transform var(--duration-fast) var(--ease-standard); } .industry-tile:hover .node-icon { transform: scale(1.1); } .industry-tile .node-icon svg { width: 20px; height: 20px; } .industry-tile span { font-size: 14px; font-weight: 500; } @media (max-width: 900px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- Principle rows (avoids fabricated testimonials/stats) ---------- */ .principle-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); margin-top: var(--space-48); } .principle { padding: var(--space-24) 0; border-top: 1px solid rgba(255,255,255,0.14); } .principle .principle-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: rgba(255,255,255,0.08); color: var(--color-on-ink); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-16); } .principle .principle-icon svg { width: 19px; height: 19px; } .principle .principle-num { font-size: 13px; color: var(--color-on-ink-secondary); } .principle h4 { color: var(--color-on-ink); margin-block: var(--space-8); font-size: 20px; font-weight: 400; } .principle p { color: var(--color-on-ink-secondary); font-size: 14px; } @media (max-width: 900px) { .principle-row { grid-template-columns: 1fr; } } /* ---------- Engagement / pricing style cards ---------- */ .engagement-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-32); display: flex; flex-direction: column; height: 100%; transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .engagement-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .engagement-card.featured { border-color: var(--color-primary); box-shadow: var(--shadow-md); position: relative; } .engagement-card .tag-featured { position: absolute; top: -12px; right: 24px; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-pill); } .engagement-card h3 { margin-bottom: var(--space-8); } .engagement-card .engagement-desc { color: var(--color-text-secondary); margin-bottom: var(--space-16); } /* ---------- Timeline (vertical) ---------- Each step carries an icon in a circle sitting directly on the rail, echoing the .journey step-dot language so the two components read as one visual system rather than two unrelated list styles. */ .timeline { position: relative; margin-top: var(--space-48); padding-left: var(--space-64); border-left: none; } .timeline::before { content: ''; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(180deg, var(--color-brand-blue), var(--color-brand-purple)); opacity: 0.3; } .timeline-item { position: relative; padding-bottom: var(--space-48); } .timeline-item:last-child { padding-bottom: 0; } .timeline-item .timeline-icon { position: absolute; left: -64px; top: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--color-canvas); border: 1.5px solid var(--color-border); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; color: var(--color-primary); } .timeline-item .timeline-icon svg { width: 19px; height: 19px; } .timeline-item h4 { margin-bottom: var(--space-8); padding-top: var(--space-12); } .timeline-item p { color: var(--color-text-secondary); max-width: 480px; } @media (max-width: 500px) { .timeline { padding-left: 56px; } .timeline::before { left: 19px; } .timeline-item .timeline-icon { left: -56px; width: 40px; height: 40px; } .timeline-item .timeline-icon svg { width: 16px; height: 16px; } } /* ---------- Value/quote band (no fabricated attribution) ---------- */ .value-quote { max-width: 720px; margin: var(--space-48) auto 0; text-align: center; } .value-quote .quote-mark { color: var(--color-primary); width: 32px; height: 32px; margin: 0 auto var(--space-16); } /* ---------- Scroll reveal ---------- Content is visible by default so it never depends on JavaScript running; only when the "js" class (set synchronously in ) is present do [data-reveal] elements start hidden and animate in via main.js. Variants (default = fade-up): data-reveal="fade" | "left" | "right" | "scale" Only transform + opacity are animated, so this stays hardware-accelerated. */ html.js [data-reveal] { opacity: 0; transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-standard); transition-delay: var(--reveal-delay, 0ms); will-change: transform, opacity; } html.js [data-reveal]:not([data-reveal="fade"]):not([data-reveal="left"]):not([data-reveal="right"]):not([data-reveal="scale"]) { transform: translateY(20px); } html.js [data-reveal="fade"] { transform: none; } html.js [data-reveal="left"] { transform: translateX(-24px); } html.js [data-reveal="right"] { transform: translateX(24px); } html.js [data-reveal="scale"] { transform: scale(0.96); } html.js [data-reveal].is-visible { opacity: 1; transform: none; } /* Stagger: direct card/tile children of a revealed container animate in sequence. */ html.js .grid [data-reveal-child], html.js [data-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity 550ms var(--ease-standard), transform 550ms var(--ease-standard); transition-delay: var(--stagger-delay, 0ms); } html.js .is-visible[data-stagger] > *, html.js [data-stagger].is-visible > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js [data-reveal], html.js [data-stagger] > * { opacity: 1 !important; transform: none !important; transition-delay: 0ms !important; } } /* ---------- Page transition overlay ---------- */ .page-transition { position: fixed; inset: 0; background: var(--color-canvas); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease-standard); } .page-transition.is-active { opacity: 1; pointer-events: all; } body.is-loading { animation: page-fade-in 320ms var(--ease-standard); } @keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .page-transition { display: none; } body.is-loading { animation: none; } } /* ---------- Service hero visual compositions ---------- Five bespoke, animated abstract scenes (one per service) that replace a plain browser-mockup card. Everything animates transform/opacity only. */ .hero-visual { position: relative; height: 380px; } @media (max-width: 900px) { .hero-visual { height: 320px; } } @media (max-width: 520px) { .hero-visual { height: 280px; } } .hv-chip { position: absolute; display: flex; align-items: center; gap: var(--space-8); background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-8) var(--space-16); font-size: 13px; font-weight: 500; color: var(--color-ink); white-space: nowrap; } .hv-chip .hv-chip-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-canvas-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .hv-chip .hv-chip-icon svg { width: 15px; height: 15px; } @keyframes hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .hv-floating { animation: hv-float 5s ease-in-out infinite; will-change: transform; } /* Central pulsing hub, used by the AI and Marketing scenes */ .hv-hub { position: absolute; width: 84px; height: 84px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); z-index: 2; } .hv-hub svg { width: 30px; height: 30px; } .hv-hub::before, .hv-hub::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--color-primary); animation: hv-pulse 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .hv-hub::after { animation-delay: 1.1s; } @keyframes hv-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.4); opacity: 0; } } .hv-ring { position: absolute; border: 1.5px dashed var(--color-border); border-radius: 50%; animation: hv-spin 40s linear infinite; } @keyframes hv-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hv-connector { position: absolute; height: 1.5px; background: linear-gradient(90deg, var(--color-primary-soft), transparent); transform-origin: left center; opacity: 0.5; } /* AI & Analytics — orbiting capability nodes around a pulsing hub */ .hv-ai { position: relative; width: 100%; height: 100%; } .hv-ai .hv-hub { top: 50%; left: 50%; transform: translate(-50%, -50%); } .hv-ai .hv-ring { top: 50%; left: 50%; width: 260px; height: 260px; transform: translate(-50%, -50%); } .hv-ai .hv-ring.small { width: 170px; height: 170px; animation-direction: reverse; animation-duration: 28s; } /* Software Development — layered, floating architecture panels */ .hv-stack { position: relative; width: 100%; height: 100%; } .hv-stack .hv-panel { position: absolute; background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-16); width: 220px; } .hv-stack .hv-panel .panel-title { display: flex; align-items: center; gap: var(--space-8); font-size: 13px; font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-8); } .hv-stack .hv-panel .panel-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); } .hv-stack .hv-panel .panel-line { height: 6px; border-radius: var(--radius-xs); background: var(--color-canvas-soft); margin-bottom: 6px; } .hv-stack .hv-panel .panel-line:nth-child(2) { width: 80%; } .hv-stack .hv-panel .panel-line:nth-child(3) { width: 55%; } /* SaaS Products — a small product panel assembling itself, step by step, on a loop */ .hv-build { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .hv-build .hv-build-card { width: 280px; background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .hv-build-bar { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--color-border); background: var(--color-canvas-soft); } .hv-build-bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); } .hv-build-rows { padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); } .hv-build-row { display: flex; align-items: center; gap: var(--space-12); animation: hv-build-in 6s ease-in-out infinite; opacity: 0; } .hv-build-row .hv-chip-icon { width: 26px; height: 26px; } .hv-build-row span.label { font-size: 13px; font-weight: 500; color: var(--color-ink); } .hv-build-row:nth-child(1) { animation-delay: 0s; } .hv-build-row:nth-child(2) { animation-delay: 0.5s; } .hv-build-row:nth-child(3) { animation-delay: 1s; } .hv-build-row:nth-child(4) { animation-delay: 1.5s; } @keyframes hv-build-in { 0% { opacity: 0; transform: translateX(-8px); } 8% { opacity: 1; transform: translateX(0); } 85% { opacity: 1; transform: translateX(0); } 95% { opacity: 0; } 100% { opacity: 0; } } /* Creative & Design — drifting color shapes with a traveling accent dot */ .hv-creative { position: relative; width: 100%; height: 100%; } .hv-shape { position: absolute; } .hv-shape.circle { border-radius: 50%; } .hv-shape.square { border-radius: var(--radius-lg); } .hv-shape.triangle { width: 0; height: 0; border-left: 45px solid transparent; border-right: 45px solid transparent; border-bottom: 78px solid var(--color-cream); background: none !important; } @keyframes hv-drift-1 { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(10px,-14px) rotate(8deg); } } @keyframes hv-drift-2 { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-12px,10px) rotate(-6deg); } } @keyframes hv-drift-3 { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(8px,12px) rotate(10deg); } } .hv-shape.drift-1 { animation: hv-drift-1 7s ease-in-out infinite; } .hv-shape.drift-2 { animation: hv-drift-2 8.5s ease-in-out infinite; } .hv-shape.drift-3 { animation: hv-drift-3 6.2s ease-in-out infinite; } .hv-cursor-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px rgba(83, 58, 253, 0.15); animation: hv-cursor-path 9s ease-in-out infinite; } @keyframes hv-cursor-path { 0%, 100% { top: 20%; left: 15%; } 25% { top: 65%; left: 30%; } 50% { top: 30%; left: 70%; } 75% { top: 70%; left: 60%; } } /* Digital Marketing — broadcast rings + rising metric chips + a growth line */ .hv-marketing { position: relative; width: 100%; height: 100%; } .hv-marketing .hv-hub { top: 42%; left: 30%; transform: translate(-50%, -50%); width: 68px; height: 68px; } .hv-marketing .hv-hub svg { width: 24px; height: 24px; } .hv-marketing .hv-metric { animation: hv-float 5s ease-in-out infinite; } .hv-growth-line { position: absolute; } .hv-growth-line path { stroke-dasharray: 4 6; animation: hv-dash 6s linear infinite; } @keyframes hv-dash { to { stroke-dashoffset: -60; } } @media (prefers-reduced-motion: reduce) { .hv-floating, .hv-hub::before, .hv-hub::after, .hv-ring, .hv-build-row, .hv-shape, .hv-cursor-dot, .hv-marketing .hv-metric, .hv-growth-line path { animation: none !important; opacity: 1 !important; } } @media (max-width: 900px) { .hero-visual { transform: scale(0.82); transform-origin: top center; } } /* ---------- Page hero (non-home pages) ---------- */ .page-hero { position: relative; padding-block: var(--space-96) var(--space-64); overflow: hidden; } .page-hero-inner { position: relative; z-index: 1; max-width: 760px; } @media (max-width: 900px) { .page-hero { padding-block: var(--space-64) var(--space-48); } } /* Utility */ .mt-8 { margin-top: var(--space-8); } .mt-16 { margin-top: var(--space-16); } .mt-24 { margin-top: var(--space-24); } .mt-32 { margin-top: var(--space-32); } .mt-48 { margin-top: var(--space-48); } .mt-64 { margin-top: var(--space-64); } .max-w-content { max-width: 640px; } .text-center { text-align: center; }