/*-------------------------------------------------------------- # Enopio Design System # Dark-first "engineering blueprint" system: Space Grotesk / Inter / # IBM Plex Mono, oklch charcoal + orange, notched-corner panels. # Theme is controlled by [data-theme] on — absent = dark. --------------------------------------------------------------*/ :root { --bg0: oklch(0.18 0.007 260); --bg1: oklch(0.155 0.006 260); --surface: oklch(0.22 0.008 260); --text0: oklch(0.97 0.003 260); --text1: oklch(0.62 0.008 260); --text2: oklch(0.5 0.008 260); --border: oklch(1 0 0 / 0.1); --border-soft: oklch(1 0 0 / 0.035); --watermark: oklch(1 0 0 / 0.05); --accent: oklch(0.72 0.18 45); --accent-soft: oklch(0.72 0.18 45 / 0.14); --accent-line: oklch(0.72 0.18 45 / 0.55); --accent-text: oklch(0.16 0.006 260); --nav-bg: oklch(0.2 0.008 260 / 0.88); --hover: oklch(1 0 0 / 0.03); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } html[data-theme="light"] { --bg0: oklch(0.975 0.004 260); --bg1: oklch(0.93 0.006 260); --surface: oklch(1 0 0); --text0: oklch(0.18 0.012 260); --text1: oklch(0.42 0.012 260); --text2: oklch(0.52 0.012 260); --border: oklch(0 0 0 / 0.12); --border-soft: oklch(0 0 0 / 0.05); --watermark: oklch(0 0 0 / 0.045); --accent: oklch(0.66 0.19 45); --accent-soft: oklch(0.66 0.19 45 / 0.12); --accent-line: oklch(0.66 0.19 45 / 0.5); --accent-text: oklch(0.16 0.006 260); --nav-bg: oklch(0.975 0.004 260 / 0.88); --hover: oklch(0 0 0 / 0.03); } /*-------------------------------------------------------------- # Base --------------------------------------------------------------*/ * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Welcoming, accessible focus state — keyboard users only, no ring on mouse click */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; } body.es-body { margin: 0; background: var(--bg0); color: var(--text1); font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; transition: background-color .3s ease, color .3s ease; overflow-x: clip; } a { color: var(--accent); text-decoration: none; } a:hover { color: color-mix(in oklch, var(--accent), white 12%); } .es-mono { font-family: "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; } .es-h1, .es-h2, .es-h3, .es-h4 { font-family: "Space Grotesk", sans-serif; font-weight: 700; color: var(--text0); letter-spacing: -0.02em; margin: 0; } .es-wrap { max-width: 1320px; margin: 0 auto; padding: 0 6vw; } .es-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .es-eyebrow .es-dot { width: 8px; height: 8px; border-radius: 1px; background: var(--accent); flex-shrink: 0; animation: es-blink 2s ease-in-out infinite; } .es-eyebrow span:last-child { font-size: 12.5px; color: var(--text2); } .es-section-label { font-size: 12px; color: var(--accent); } @keyframes es-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } } @keyframes es-dash-flow { to { stroke-dashoffset: -200; } } @keyframes es-rail-flow { to { stroke-dashoffset: -320; } } @keyframes es-scroll-line { 0% { transform: scaleY(0); opacity: 0; } 30% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /*-------------------------------------------------------------- # Intro hook — staggered entrance for the hero on first paint. # Plays once automatically (no scroll trigger, no JS). Gate each # element with [data-intro] and set --intro-step (0,1,2...) to # order the sequence. --------------------------------------------------------------*/ @keyframes es-intro-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes es-intro-in-scale { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes es-intro-bg-in { from { opacity: 0; } to { opacity: 1; } } [data-intro] { opacity: 0; animation: es-intro-in .8s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--intro-step, 0) * 130ms + 120ms); } [data-intro="scale"] { animation-name: es-intro-in-scale; } [data-intro="bg"] { animation-name: es-intro-bg-in; animation-duration: 1.1s; } @media (prefers-reduced-motion: reduce) { [data-intro] { animation: none; opacity: 1; transform: none; } } /*-------------------------------------------------------------- # Reveal on scroll --------------------------------------------------------------*/ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal="scale"] { transform: scale(0.96); } [data-reveal="scale"].is-visible { transform: scale(1); } /*-------------------------------------------------------------- # Notched-corner shapes (signature motif) --------------------------------------------------------------*/ .es-notch-14 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); } .es-notch-16 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); } .es-notch-22 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); } .es-notch-30 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%); } .es-notch-34 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%); } .es-notch-cta { clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 40px)); } .es-octagon { clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%); } .es-hex { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } /*-------------------------------------------------------------- # Buttons --------------------------------------------------------------*/ .es-btn { display: inline-block; font-weight: 600; font-size: 14.5px; padding: 16px 26px; text-decoration: none; white-space: nowrap; border: none; cursor: pointer; font-family: "Inter", sans-serif; transition: transform .35s var(--ease-out), background-color .2s ease, opacity .2s ease; } .es-btn:hover { transform: translateY(-1px); } .es-btn:active { transform: scale(0.97); transition-duration: .12s; } .es-btn-accent { background: var(--accent); color: var(--accent-text); } .es-btn-accent:hover { background: color-mix(in oklch, var(--accent), white 10%); color: var(--accent-text); } .es-btn-ghost { background: transparent; color: var(--text0); border: 1px solid var(--border); } .es-btn-ghost:hover { background: var(--hover); color: var(--text0); } .es-btn-onaccent { background: var(--accent-text); color: var(--accent); } .es-btn-onaccent:hover { background: color-mix(in oklch, var(--accent-text), white 15%); color: var(--accent); } .es-btn-sm { font-size: 14px; padding: 13px; width: 100%; text-align: center; } /*-------------------------------------------------------------- # Nav --------------------------------------------------------------*/ .es-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: var(--nav-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .es-nav-inner { max-width: 1320px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .es-nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; } .es-nav-logo img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; } .es-nav-logo span { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 17px; color: var(--text0); letter-spacing: -0.01em; white-space: nowrap; } .es-nav-links { display: flex; align-items: center; gap: 30px; } .es-nav-links a, .es-nav-links > span { font-size: 14px; font-weight: 500; color: var(--text1); text-decoration: none; white-space: nowrap; transition: color .2s; cursor: default; } .es-nav-links a:hover, .es-nav-links a.is-active { color: var(--text0); } /* Mega-menu dropdowns (Products / Services) */ .es-nav-drop { position: relative; } .es-nav-drop > span { display: flex; align-items: center; gap: 5px; cursor: pointer; } .es-nav-drop:hover > span, .es-nav-drop:focus-within > span { color: var(--text0); } .es-nav-drop > span i { transition: transform .3s var(--ease-out); } .es-nav-drop:hover > span i, .es-nav-drop:focus-within > span i { transform: rotate(180deg); } .es-nav-mega { position: absolute; top: 100%; left: -16px; width: 460px; max-width: calc(100vw - 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--surface); border: 1px solid var(--border); padding: 10px; padding-top: 22px; box-shadow: 0 20px 40px -10px oklch(0 0 0 / 0.4); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); } .es-nav-drop:hover .es-nav-mega, .es-nav-drop:focus-within .es-nav-mega { opacity: 1; visibility: visible; transform: translateY(0); } .es-nav-mega-item { display: flex; gap: 12px; padding: 13px; text-decoration: none; border-radius: 3px; opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), background-color .15s ease; } .es-nav-drop:hover .es-nav-mega-item, .es-nav-drop:focus-within .es-nav-mega-item { opacity: 1; transform: translateY(0); } .es-nav-mega-item:nth-child(1) { transition-delay: .02s; } .es-nav-mega-item:nth-child(2) { transition-delay: .06s; } .es-nav-mega-item:nth-child(3) { transition-delay: .10s; } .es-nav-mega-item:nth-child(4) { transition-delay: .14s; } .es-nav-mega-item:hover, .es-nav-mega-item.is-active { background: var(--hover); } .es-nav-mega-item i { width: 34px; height: 34px; flex-shrink: 0; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 15px; border-radius: 2px; } .es-nav-mega-item h5 { margin: 0 0 3px; font-family: "Space Grotesk", sans-serif; font-size: 13.5px; font-weight: 600; color: var(--text0); } .es-nav-mega-item p { margin: 0; font-size: 11.5px; color: var(--text2); line-height: 1.4; } .es-nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .es-theme-toggle { background: none; border: 1px solid var(--border); width: 36px; height: 36px; color: var(--text0); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color .25s ease, transform .3s var(--ease-out); } .es-theme-toggle:hover { border-color: var(--accent-line); } .es-theme-toggle:active { transform: scale(0.92); } .es-theme-toggle i { transition: transform .4s var(--ease-out); } .es-theme-toggle.is-switching i { transform: rotate(180deg) scale(0.7); } .es-nav-cta { font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; color: var(--accent-text); background: var(--accent); padding: 11px 22px; border-radius: 2px; text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; } .es-nav-cta:hover { color: var(--accent-text); background: color-mix(in oklch, var(--accent), white 10%); } .es-nav-toggle { display: none; align-items: center; justify-content: center; background: none; border: none; color: var(--text0); font-size: 24px; cursor: pointer; width: 36px; height: 36px; } .es-nav-mobile { display: none; flex-direction: column; gap: 2px; padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-out), padding .3s ease; } .es-nav-mobile.is-open { padding: 12px 20px 20px; max-height: 640px; } .es-nav-mobile a { padding: 12px 4px; font-size: 15px; color: var(--text0); text-decoration: none; border-top: 1px solid var(--border); } .es-nav-mobile-group { border-top: 1px solid var(--border); } .es-nav-mobile-gtoggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; font-family: "Inter", sans-serif; font-size: 15px; color: var(--text0); background: none; border: none; cursor: pointer; } .es-nav-mobile-gtoggle i { font-size: 12px; color: var(--text2); transition: transform .3s var(--ease-out); } .es-nav-mobile-group.is-open .es-nav-mobile-gtoggle i { transform: rotate(180deg); } .es-nav-mobile-sub { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-out); display: flex; flex-direction: column; } .es-nav-mobile-group.is-open .es-nav-mobile-sub { max-height: 280px; } .es-nav-mobile-sub a { padding: 10px 4px 10px 18px; font-size: 14px; color: var(--text1); border-top: none; } @media (max-width: 899px) { .es-nav-links, .es-nav-cta { display: none; } .es-nav-toggle, .es-nav-mobile { display: flex; } } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ .es-footer { background: var(--bg1); border-top: 1px solid var(--border); padding: 64px 6vw 32px; position: relative; overflow: hidden; } .es-footer-inner { max-width: 1320px; margin: 0 auto; position: relative; z-index: 1; } .es-footer-top { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; padding-bottom: 44px; border-bottom: 1px solid var(--border); } .es-footer-about { max-width: 320px; } .es-footer-about-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; } .es-footer-about-head img { width: 28px; height: 28px; object-fit: contain; } .es-footer-about-head span { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 16px; color: var(--text0); } .es-footer-about p { color: var(--text2); font-size: 14px; line-height: 1.7; margin: 0; } .es-footer-cols { display: flex; gap: 56px; flex-wrap: wrap; } .es-footer-col h5 { color: var(--text0); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 16px; } .es-footer-col { display: flex; flex-direction: column; gap: 10px; } .es-footer-col a { color: var(--text2); font-size: 14px; text-decoration: none; } .es-footer-col a:hover { color: var(--text0); } .es-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; } .es-footer-bottom p { color: var(--text2); font-size: 13px; margin: 0; } .es-footer-bar { position: absolute; bottom: 0; right: 0; width: 220px; height: 6px; background: var(--accent); } /*-------------------------------------------------------------- # Hero (shared across Home/ERP/DynoWheels/HRM) --------------------------------------------------------------*/ .es-hero { position: relative; padding: 160px 6vw 90px; overflow: hidden; } .es-hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(90deg, var(--border-soft) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 70%, transparent); mask-image: linear-gradient(to bottom, transparent, black 20%, black 70%, transparent); } .es-hero-corner { position: absolute; bottom: -70px; right: -70px; width: 320px; height: 320px; background: var(--accent); opacity: .92; } .es-hero-inner { max-width: 1320px; margin: 0 auto; position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; } .es-hero h1 { font-size: clamp(38px, 5.6vw, 76px); line-height: 1.04; margin: 0 0 22px; } .accent { color: var(--accent); } .es-hero p.lead { font-size: 17px; line-height: 1.7; color: var(--text1); max-width: 540px; margin: 0 0 32px; } .es-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .es-hero-mock { background: var(--surface); border-top: 3px solid var(--accent); padding: 30px; display: flex; flex-direction: column; gap: 12px; } .es-hero-mock-row { display: flex; gap: 10px; } .es-hero-mock-cell { flex: 1; height: 60px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--accent); } .es-hero-mock-cell.is-muted { background: var(--bg1); color: var(--text1); } .es-hero-mock-big { height: 90px; background: var(--bg1); display: flex; align-items: center; justify-content: center; } .es-hero-mock-big span { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--text2); } .es-hero-mock-thin { height: 36px; background: var(--bg1); } @media (max-width: 859px) { .es-hero-inner { grid-template-columns: 1fr; gap: 36px; } .es-hero { padding-top: 128px; } } /*-------------------------------------------------------------- # Home hero (bigger display headline, scroll cue) --------------------------------------------------------------*/ .es-home-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px 6vw 100px; overflow: hidden; } .es-home-hero-inner { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; width: 100%; } .es-home-hero h1 { font-size: clamp(46px, 8.5vw, 122px); line-height: 0.98; margin: 0 0 36px; } .es-home-hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; max-width: 1100px; } @media (max-width: 859px) { .es-home-hero-grid { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; } } .es-scroll-cue { position: absolute; bottom: 36px; left: 6vw; display: flex; align-items: center; gap: 12px; text-decoration: none; z-index: 2; } .es-scroll-cue span:first-child { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--text2); } .es-scroll-cue-track { width: 1px; height: 40px; background: oklch(0.5 0.008 260); position: relative; overflow: hidden; } .es-scroll-cue-track span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--accent); transform-origin: top; animation: es-scroll-line 2.2s ease-in-out infinite; } /*-------------------------------------------------------------- # Pipeline (Home only, scroll-scrubbed) --------------------------------------------------------------*/ .es-pipeline { position: relative; height: 600vh; height: 600dvh; } .es-pipeline-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg1); } .es-pipeline-head { position: absolute; top: 56px; left: 0; right: 0; text-align: center; z-index: 6; pointer-events: none; } .es-pipeline-head h2 { font-size: clamp(26px, 3.4vw, 42px); margin: 10px 0 0; } .es-pipeline-dots { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 6; } .es-pipeline-dots span { width: 26px; height: 2px; background: oklch(1 0 0 / 0.18); transition: background .25s; } .es-pipeline-dots span.is-active { background: var(--accent); } .es-pipeline-track { position: relative; display: flex; height: 100%; width: 500vw; will-change: transform; } .es-pipeline-rail { position: absolute; top: 50%; left: 0; width: 500vw; height: 3px; transform: translateY(-50%); z-index: 1; overflow: visible; } .es-pipeline-station { position: relative; width: 100vw; height: 100%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; z-index: 2; } .es-pipeline-num { position: absolute; top: 14vh; left: 6vw; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(90px, 15vw, 220px); color: var(--watermark); line-height: 1; } .es-pipeline-panel { width: min(66vw, 560px); background: var(--surface); padding: 44px 44px 40px; will-change: transform, opacity; transition: opacity .1s linear; } .es-pipeline-panel.has-top-border { border-top: 3px solid var(--accent); } .es-pipeline-panel .stage { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--accent); letter-spacing: 0.1em; } .es-pipeline-panel h3 { font-size: clamp(30px, 4vw, 44px); margin: 10px 0 18px; } .es-pipeline-panel p { color: var(--text1); font-size: 15.5px; line-height: 1.7; margin: 0; max-width: 420px; } .es-pipeline-panel.is-split { display: flex; overflow: hidden; padding: 0; } .es-pipeline-panel.is-split .split-fill { width: 34%; background: var(--accent); flex-shrink: 0; } .es-pipeline-panel.is-split .split-fill.is-end { order: 2; width: 38%; background: oklch(0.16 0.006 260); } .es-pipeline-panel.is-split .split-body { padding: 44px 40px 40px; } .es-pipeline-panel.is-split .split-body p { max-width: 380px; } .es-pipeline-panel.is-accent { background: var(--accent); overflow: hidden; } .es-pipeline-panel.is-accent .stage { color: oklch(0.2 0.008 260); } .es-pipeline-panel.is-accent h3 { color: oklch(0.16 0.006 260); } .es-pipeline-panel.is-accent p { color: oklch(0.28 0.01 260); max-width: 400px; } .es-pipeline-panel.is-final { text-align: center; max-width: 640px; padding: 0 5vw; background: transparent; } .es-pipeline-panel.is-final .stage { color: oklch(0.2 0.008 260); } .es-pipeline-panel.is-final h3 { font-size: clamp(40px, 6.5vw, 80px); color: oklch(0.14 0.006 260); margin: 12px 0 22px; letter-spacing: -0.02em; line-height: 1.02; } .es-pipeline-panel.is-final p { color: oklch(0.25 0.01 260); font-size: 16.5px; margin: 0 0 32px; max-width: 100%; } .es-pipeline-panel.is-final .es-btn { background: oklch(0.14 0.006 260); color: oklch(0.97 0.003 260); } .es-pipeline-station.is-final-bg { background: var(--accent); } .es-pipeline-corner { position: absolute; top: 0; right: 0; width: 120px; height: 120px; background: var(--accent); clip-path: polygon(100% 0, 100% 100%, 0 0); } /* Mobile sizing only — the pin + horizontal scroll-scrub itself stays active at every width, matching the desktop interaction. This just tightens padding/type/decoration so panels fit a phone viewport. */ @media (max-width: 640px) { .es-pipeline-panel { padding: 30px 26px 26px; } .es-pipeline-panel h3 { margin: 8px 0 14px; } .es-pipeline-panel p { font-size: 14px; } .es-pipeline-panel.is-split .split-fill { width: 20%; } .es-pipeline-panel.is-split .split-fill.is-end { width: 22%; } .es-pipeline-panel.is-split .split-body { padding: 30px 24px 26px; } .es-pipeline-panel.is-final { padding: 0 6vw; } .es-pipeline-corner { width: 64px; height: 64px; } .es-pipeline-num { font-size: 64px; top: 8vh; left: 5vw; } .es-pipeline-head { top: 32px; } .es-pipeline-dots { bottom: 28px; } } /* Reduced motion: a plain static stack, no pinning or scroll-scrub, on any device. This is the only thing that turns the effect off. */ @media (prefers-reduced-motion: reduce) { .es-pipeline, .es-pipeline-pin { height: auto !important; position: static; } .es-pipeline-track { width: 100%; flex-direction: column; transform: none !important; } .es-pipeline-rail { display: none; } .es-pipeline-dots { display: none; } .es-pipeline-head { position: static; margin-bottom: 24px; padding-top: 90px; } .es-pipeline-station { width: 100%; height: auto; padding: 40px 6vw; } .es-pipeline-panel { width: 100%; max-width: 560px; transform: none !important; opacity: 1 !important; } .es-pipeline-num { display: none; } } /*-------------------------------------------------------------- # Ecosystem diagram (Home only) — hub with two live products. --------------------------------------------------------------*/ .es-eco-row { display: flex; align-items: center; justify-content: center; gap: 0; max-width: 720px; margin: 0 auto; } .es-eco-hub { width: 148px; height: 148px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-direction: column; flex-shrink: 0; box-shadow: 0 30px 60px -15px oklch(0 0 0 / 0.5); } .es-eco-hub span { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 15px; color: oklch(0.16 0.006 260); text-align: center; line-height: 1.25; } .es-eco-connector { width: 72px; height: 3px; flex-shrink: 0; overflow: visible; } .es-eco-connector svg { width: 100%; height: 100%; overflow: visible; } .es-eco-node { width: 220px; background: var(--surface); border: 1px solid var(--border); padding: 22px; text-decoration: none; flex-shrink: 0; transition: border-color .25s ease, transform .35s var(--ease-out); } .es-eco-node:hover { border-color: oklch(0.72 0.18 45 / 0.6); transform: translateY(-4px); } .es-eco-node i { color: var(--accent); font-size: 20px; } .es-eco-node h4 { font-family: "Space Grotesk", sans-serif; color: var(--text0); font-size: 16px; margin: 12px 0 4px; } .es-eco-node p { color: var(--text2); font-size: 12.5px; margin: 0; line-height: 1.5; } @media (max-width: 640px) { .es-eco-row { flex-direction: column; gap: 20px; max-width: 320px; } .es-eco-connector { display: none; } .es-eco-node { width: 100%; } } /*-------------------------------------------------------------- # Services list (Home) --------------------------------------------------------------*/ .es-services-list { border-top: 1px solid var(--border); } .es-service-row { display: grid; grid-template-columns: 60px 1fr 2fr 24px; align-items: center; gap: 24px; padding: 30px 6px; border-bottom: 1px solid var(--border); text-decoration: none; transition: background-color .3s var(--ease-out), padding-left .3s var(--ease-out); } .es-service-row:hover { background: var(--hover); padding-left: 14px; } .es-service-row .num { font-family: "IBM Plex Mono", monospace; color: var(--text2); font-size: 13px; } .es-service-row h3 { font-family: "Space Grotesk", sans-serif; color: var(--text0); font-size: 22px; margin: 0; font-weight: 600; } .es-service-row p { color: var(--text2); font-size: 14.5px; margin: 0; line-height: 1.6; } .es-service-row i { color: var(--accent); font-size: 18px; transition: transform .3s var(--ease-out); } .es-service-row:hover i { transform: translate(3px, -3px); } @media (max-width: 640px) { .es-service-row { grid-template-columns: 1fr 24px; grid-template-areas: "title arrow" "desc desc"; row-gap: 8px; } .es-service-row .num { display: none; } .es-service-row h3 { grid-area: title; } .es-service-row i { grid-area: arrow; } .es-service-row p { grid-area: desc; } } /*-------------------------------------------------------------- # About stats (Home) --------------------------------------------------------------*/ .es-about-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; } .es-about-stats { display: flex; flex-direction: column; gap: 28px; } .es-about-stat .num { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 56px; color: var(--accent); line-height: 1; } .es-about-stat p { color: var(--text2); font-size: 13.5px; margin: 6px 0 0; } .es-about-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .es-about-list div { display: flex; gap: 10px; color: var(--text1); font-size: 14.5px; } .es-about-list span { color: var(--accent); } @media (max-width: 859px) { .es-about-grid { grid-template-columns: 1fr; gap: 40px; } } /*-------------------------------------------------------------- # Contact (Home) --------------------------------------------------------------*/ .es-contact-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; background: var(--surface); border: 1px solid var(--border); } .es-contact-info { background: var(--accent); padding: 56px; display: flex; flex-direction: column; justify-content: center; } .es-contact-info h2 { font-size: 32px; color: oklch(0.14 0.006 260); margin: 14px 0 20px; } .es-contact-info > span { color: oklch(0.2 0.008 260); } .es-contact-info p { color: oklch(0.28 0.01 260); font-size: 14.5px; line-height: 1.7; margin: 0 0 26px; } .es-contact-info-item { display: flex; gap: 10px; align-items: center; color: oklch(0.16 0.006 260); font-size: 14px; } .es-contact-form { padding: 56px; display: flex; flex-direction: column; gap: 16px; } .es-contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .es-contact-form input, .es-contact-form textarea { background: var(--bg0); border: 1px solid var(--border); padding: 14px 16px; color: var(--text0); font-size: 14px; font-family: "Inter", sans-serif; width: 100%; } .es-contact-form textarea { resize: none; } .es-contact-form input::placeholder, .es-contact-form textarea::placeholder { color: var(--text2); } .es-contact-form button { background: var(--accent); color: var(--accent-text); font-weight: 600; font-size: 15px; padding: 15px; border: none; cursor: pointer; } .es-contact-form button:hover { background: color-mix(in oklch, var(--accent), white 10%); } .es-form-status { font-size: 13.5px; display: none; padding: 10px 2px; } .es-form-status.is-visible { display: block; } .es-form-status.is-success { color: oklch(0.7 0.16 150); } .es-form-status.is-error { color: oklch(0.65 0.2 25); } @media (max-width: 859px) { .es-contact-grid { grid-template-columns: 1fr; } .es-contact-form-row { grid-template-columns: 1fr; } } /*-------------------------------------------------------------- # Feature grid (ERP / DynoWheels / HRM) --------------------------------------------------------------*/ .es-feature-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .es-feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .es-feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .es-feature-card { background: var(--surface); border: 1px solid var(--border); padding: 26px 22px; transition: border-color .2s; } .es-feature-card:hover { border-color: var(--accent); } .es-feature-card i { font-size: 22px; color: var(--accent); margin-bottom: 14px; display: block; } .es-feature-card h4 { font-family: "Space Grotesk", sans-serif; color: var(--text0); font-size: 15.5px; margin: 0 0 6px; } .es-feature-card p { color: var(--text2); font-size: 13px; line-height: 1.55; margin: 0; } @media (max-width: 859px) { .es-feature-grid, .es-feature-grid.cols-4, .es-feature-grid.cols-3 { grid-template-columns: 1fr; gap: 16px; } } @media (min-width: 860px) and (max-width: 1099px) { .es-feature-grid { grid-template-columns: repeat(3, 1fr); } .es-feature-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .es-feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } } /*-------------------------------------------------------------- # Tabs (ERP / DynoWheels / HRM) --------------------------------------------------------------*/ .es-tab-section { padding: 80px 6vw; background: var(--bg1); } .es-tab-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; } .es-tab-grid h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 0 0 16px; } .es-tab-grid > div:first-child > p { color: var(--text1); font-size: 15px; line-height: 1.7; margin: 0 0 28px; } .es-tab-buttons { display: flex; flex-direction: column; gap: 12px; } .es-tab-btn { text-align: left; font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; padding: 15px 18px; border: 1px solid var(--border); background: var(--surface); color: var(--text1); cursor: pointer; transition: all .2s; } .es-tab-btn i { margin-right: 8px; } .es-tab-btn.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--text0); } .es-tab-preview { height: 260px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .es-tab-preview span { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--text2); } .es-tab-desc { color: var(--text1); font-size: 15px; line-height: 1.7; margin: 0; display: none; } .es-tab-desc.is-active { display: block; } @media (max-width: 859px) { .es-tab-grid { grid-template-columns: 1fr; gap: 36px; } } /*-------------------------------------------------------------- # Pricing (ERP / DynoWheels / HRM) --------------------------------------------------------------*/ .es-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .es-price-card { background: var(--surface); border: 1px solid var(--border); padding: 36px 30px; display: flex; flex-direction: column; position: relative; } .es-price-card h3 { font-family: "Space Grotesk", sans-serif; color: var(--text0); font-size: 19px; margin: 0 0 8px; } .es-price-card > p.tagline { color: var(--text2); font-size: 13.5px; margin: 0 0 18px; } .es-price-amount { font-family: "Space Grotesk", sans-serif; color: var(--text0); font-size: 32px; font-weight: 700; margin-bottom: 20px; } .es-price-amount small { font-size: 13px; color: var(--text2); font-weight: 500; } .es-price-amount.is-tight { margin-bottom: 2px; } .es-price-sub { color: var(--text2); font-size: 12px; font-style: italic; margin: 0 0 16px; } .es-price-features { border-top: 1px solid var(--border); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .es-price-features div { display: flex; gap: 8px; color: var(--text1); font-size: 13.5px; } .es-price-features i { color: var(--accent); } .es-price-card .es-btn { margin-top: 22px; } .es-price-card.is-popular { background: var(--accent); } .es-price-card.is-popular h3, .es-price-card.is-popular .es-price-amount { color: var(--accent-text); } .es-price-card.is-popular > p.tagline, .es-price-card.is-popular .es-price-sub { color: oklch(0.28 0.01 260); } .es-price-card.is-popular .es-price-features { border-top-color: oklch(0.2 0.008 260 / 0.25); } .es-price-card.is-popular .es-price-features div { color: var(--accent-text); } .es-price-card.is-popular .es-price-features i { color: var(--accent-text); } .es-price-badge { position: absolute; top: 20px; right: 20px; background: var(--accent-text); color: var(--accent); font-size: 11px; font-weight: 700; padding: 5px 12px; } @media (max-width: 859px) { .es-pricing-grid { grid-template-columns: 1fr; gap: 20px; } } @media (min-width: 860px) and (max-width: 1099px) { .es-pricing-grid { grid-template-columns: 1fr 1fr; } } /*-------------------------------------------------------------- # CTA banner (ERP / DynoWheels / HRM) --------------------------------------------------------------*/ .es-cta-band { padding: 100px 6vw 130px; } .es-cta-banner { max-width: 1220px; margin: 0 auto; background: var(--accent); padding: 56px; display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 32px; align-items: center; } .es-cta-banner h2 { font-size: clamp(24px, 3vw, 34px); color: var(--accent-text); margin: 0 0 12px; } .es-cta-banner p { color: oklch(0.28 0.01 260); font-size: 15px; margin: 0; } .es-cta-banner .es-btn { text-align: center; } @media (max-width: 859px) { .es-cta-banner { grid-template-columns: 1fr; gap: 24px; } } /*-------------------------------------------------------------- # Advances/reports style 2-col section (HRM) --------------------------------------------------------------*/ .es-split-media { height: 260px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .es-split-media span { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--text2); } .es-checklist { display: flex; flex-direction: column; gap: 14px; } .es-checklist div { display: flex; gap: 10px; } .es-checklist i { color: var(--accent); margin-top: 2px; } .es-checklist span { color: var(--text1); font-size: 14.5px; } .es-checklist strong { color: var(--text0); } /*-------------------------------------------------------------- # Generic 2-col section grid (reused: HRM tabs/pay sections) --------------------------------------------------------------*/ .es-2col { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .es-2col.reverse-mobile { grid-template-columns: 1fr 1fr; } @media (max-width: 859px) { .es-2col { grid-template-columns: 1fr; gap: 32px; } .es-2col.reverse-mobile { display: flex; flex-direction: column-reverse; gap: 32px; } } /*-------------------------------------------------------------- # Section spacing --------------------------------------------------------------*/ .es-section { padding: 90px 6vw; } .es-section.is-tight { padding-top: 90px; padding-bottom: 90px; } .es-section-head { margin-bottom: 44px; } .es-section-head.center { text-align: center; margin-bottom: 48px; } .es-section-head h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 10px 0 0; } .es-section-head p { color: var(--text2); font-size: 15px; margin: 0; } /*-------------------------------------------------------------- # WhatsApp float (restyled for dark system) --------------------------------------------------------------*/ .es-whatsapp { position: fixed; left: 20px; bottom: 20px; z-index: 999999; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px oklch(0 0 0 / 0.35); transition: transform .25s ease, box-shadow .25s ease; } .es-whatsapp i { font-size: 28px; color: #fff; line-height: 0; } .es-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 14px 30px oklch(0 0 0 / 0.4); } @media (max-width: 575px) { .es-whatsapp { width: 48px; height: 48px; left: 14px; bottom: 14px; } .es-whatsapp i { font-size: 24px; } } /*-------------------------------------------------------------- # Tech-stack marquee (Home, right under hero) --------------------------------------------------------------*/ .es-marquee { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg1); padding: 22px 0; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); } .es-marquee-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: es-marquee-scroll 30s linear infinite; } .es-marquee-item { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .es-marquee-item img { width: 20px; height: 20px; object-fit: contain; opacity: .65; transition: opacity .2s; } .es-marquee-item:hover img { opacity: 1; } .es-marquee-item span { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; letter-spacing: .05em; color: var(--text2); white-space: nowrap; } @keyframes es-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /*-------------------------------------------------------------- # Capability bento (Home — "What We Build") --------------------------------------------------------------*/ .es-capability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); } .es-capability-cell { background: var(--surface); padding: 40px 34px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; transition: transform .35s var(--ease-out); } .es-capability-cell:hover { transform: translateY(-6px); } .es-capability-cell i { font-size: 24px; color: var(--accent); } .es-capability-cell h3 { font-family: "Space Grotesk", sans-serif; font-size: 18px; color: var(--text0); margin: 0; } .es-capability-cell p { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin: 0; max-width: 320px; } .es-capability-cell.is-accent { background: var(--accent); } .es-capability-cell.is-accent i { color: oklch(0.2 0.008 260); } .es-capability-cell.is-accent h3 { color: oklch(0.14 0.006 260); } .es-capability-cell.is-accent p { color: oklch(0.28 0.01 260); } @media (max-width: 640px) { .es-capability-grid { grid-template-columns: 1fr; } .es-capability-cell { padding: 30px 26px; } } /*-------------------------------------------------------------- # FAQ accordion (Home, before Contact) --------------------------------------------------------------*/ .es-faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--border); } .es-faq-item { border-bottom: 1px solid var(--border); } .es-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; background: none; border: none; text-align: left; cursor: pointer; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 16.5px; color: var(--text0); } .es-faq-q { transition: color .2s ease; } .es-faq-q:hover { color: var(--accent); } .es-faq-q i { flex-shrink: 0; font-size: 18px; color: var(--accent); transition: transform .35s var(--ease-out); } .es-faq-item.is-open .es-faq-q i { transform: rotate(45deg); } .es-faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-out); } .es-faq-item.is-open .es-faq-a { max-height: 240px; } .es-faq-a p { margin: 0; padding: 0 4px 24px; color: var(--text1); font-size: 14.5px; line-height: 1.7; max-width: 640px; } /*-------------------------------------------------------------- # Reduced motion --------------------------------------------------------------*/ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .es-eyebrow .es-dot, .es-scroll-cue-track span, .es-pipeline-rail line:nth-child(2), .es-eco-svg line:nth-child(2n) { animation: none !important; } [data-reveal] { transition: none !important; opacity: 1 !important; transform: none !important; } .es-pipeline-panel { transition: none !important; } .es-marquee-track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; } .es-nav-mega-item { transition: none !important; opacity: 1 !important; transform: none !important; } .es-capability-cell { transition: none !important; } }